View from inside the viper

Checkout With Prepaid Credit

  September 8, 2011 14:29
by Nigel

A further new feature added to Cart Viper the DotNetNuke shopping cart is the ability for the user to pay for items in your store with prepaid credit. This checkout option can be selected alongside any combination of Paypal standard, Google Checkout or offline payment method. Giving your customers multiple options on how they would like to purchase their goods.

CropperCapture[10]

In order for a customer to use the prepaid checkout option they must first purchase credit to use in your store, they can do this from the “my prepaid balance” option from the “Cart Viper My Account” module, from here they can also view their current balance:

CropperCapture[11]

Prepaid credit can also be added directly onto a users account by editing their DNN profile, note due to a “quirk” with how DNN stores data in the profile property, the monetary amount need to be entered in cents. So the below would equal $85.60 of prepaid credit – the option to enter credit onto a users profile is only available to users with admin or host permissions to the DNN site:

CropperCapture[12]

Now when the customer views the payment summary page they can chose to pay using their prepaid credits or any of the other payment options that are configured for the store. If they pay via their prepaid credits the amount will be deducted from their balance:

CropperCapture[13]

If however the total cost of the order is greater than their available points balance the prepaid checkout option is hidden and they must select from one of the other configured payment options:

CropperCapture[14]

The prepaid credits feature was developed based on a customization request from one of our customers, if you have any features you would like to see added to Cart Viper please let us know.



New 1.4.0 Features

  September 5, 2011 15:55
by Nigel

Following on our discussion of new features in release 1.4.0 of Cart Viper the DotNetNuke ecommerce solution we are going to discuss several new features that have been added:

Optionally attach order PDF to order confirmation email:

The ability to create a PDF receipt of an order has existed in Cart Viper for some time now, however we have now allowed the store admin to attach this PDF to the email that is sent to the customer to confirm their order. The order PDF can still be downloaded via the order details section, however by sending it along with the order confirmation email the customer will have a copy of this with their order confirmation for their records:

CropperCapture[2]

Record Users IP Address During Checkout:

A further new enhancement is that a customer IP address is now automatically recorded during the checkout process and stored alongside their order. The customer’s IP address is only ever displayed to the store admin when they are viewing a particular order:

CropperCapture[3]

Anonymous Users To Checkout With Digital Downloads:

Previously when an anonymous user attempted to checkout with a digital download in their cart they would be redirected to the login screen. Now in version 1.4.0 anonymous users can now checkout and download their products without having to register/login into your DNN site. This feature should reduce the chance of users abandoning their carts during the checkout process if they are unwilling to share their details with your site.

If you have any feature requests for Cart Viper please contact us.



Using Skin Objects in Cart Viper – Part 2

  August 28, 2011 15:08
by Mark

Part 1 of of using skin object in Cart Viper focused on using an existing skin objects to add content to the templates used in our module. This part will focus on how to create custom skin objects to manipulate the product and category objects in Cart Viper.

Since release 1.4.0 we have add the ability for you to customise the output of the store using skin object, today I want to show you an advanced feature that lets you write custom code in .net to create skin objects which you can use in the store templates.

Lets take an example, I’ve got my store all setup but really want to display the logo for the manufacturer of each product. Cart Viper has no way to do this, however creating a custom skin object we can read the manufacturer value for the product and output a logo with ease.

Display an icon for the manufacturer

 

Displaying a Manufacturer Logo for a Product

Lets take a walk through creating the skin object to see how it works.

First I’ve uploaded my logos into a folder I’ve created in my portal home directory. I’m going to have my skin object display these on the product details page.

Folder contain the logos to use for the products

Next I’m going to create a new project in Visual Studio, I just need a Web Application Project, its important that we create this with in the DesktopModules folder. Notice that we don’t need to check “Create directory for solution”.

Creating the new project for the skin object

In order to create a skin object we need to inherit from a base class in DotNetNuke plus we want to use an interface from Cart Viper to allow the skin object to get Product object.
So we need to add two references to files located in the /bin folder of the portal.

Solution explorer showing the reference and the singel ascx control

When first creating the project Visual Studio will create some default folders and files which we don’t need so I’ve deleted those and added a single web User Control called ManfacturerLogo.ascx.

An important setting you need to make is to have the build output directly into the /bin folder of the portal.

Setting the build output path to the /bin folder

Lets take a look at the code in the ascx file, I’ve just got an image control which will output the logo for the manufacturer.

<%@ Control Language="C#" AutoEventWireup="true" 
CodeBehind="ManufacturerLogo.ascx.cs" 
Inherits="ManufacturerLogoSkinObject.ManufacturerLogo" %>

<asp:Image runat="server" ID="imgManLogo" Visible="false"/>

Looking at the code behind file shows how the skin object works.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DotNetNuke.UI.Skins;
using CartViper.Modules.Store.Components.SkinObject;

namespace ManufacturerLogoSkinObject
{
    public partial class ManufacturerLogo : SkinObjectBase, ICartViperSkinObject
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Product != null)
            {
                //get the manufacturer value, if its not null or empty
                //make into the path to the url for the logos folder
                string manufacturer = Product.Manufacturer;
                if (!string.IsNullOrEmpty(manufacturer))
                {
                    imgManLogo.ImageUrl = string.Format(
											PortalSettings.HomeDirectory + 
											"ManufacturerLogos/{0}.jpg", 
											manufacturer.Replace(" ", ""));

                    imgManLogo.AlternateText = manufacturer;
                    imgManLogo.Visible = true;
                }
            }
        }


        public CartViper.Modules.Store.Catalog.CategoryInfo Category
        {
            get;
            set;
        }

        public CartViper.Modules.Store.Catalog.ProductInfo Product
        {
            get;
            set;
        }
    }
}

Looking at the code the important parts to notice the class inheritance, we need to use SkinObjectBase which is located in the DotNetNuke.UI.Skins as the base class.
We are also implementing the interface CartViper.Modules.Store.Components.SkinObject.ICartViperSkinObject this interface allows the template engine in Cart Viper the ability to set the properties Category and Product with the current product data.

Note its only in the following templates that the ICartViperSkinObject properties will be set by the template engine.

  • ProductDetail.htm
  • ProductList.htm

In other templates the Category and Product properties will not be set and will be null.

The main work is completed in the Page_Load method, we check to see if we have Product object and then if the product has a value for the manufacturer property. We then remove all spaces from the manufacturer value and load that as the image source.

To use the module in DotNetNuke we need to have a DNN file to install the skin object.

<?xml version="1.0" encoding="utf-8" ?>

<dotnetnuke type="Package" version="5.0">
    <packages>      
        
    <package name="ManufacturerLogo" type="SkinObject" version="01.00.00">
        <friendlyName>ManufacturerLogo</friendlyName>
        <description>ManufacturerLogo</description>
        <owner>
            <name>Cart Viper</name>
            <organization>CartViper</organization>
            <url>www.cartviper.com</url>
            <email>mark@cartviper.com</email>
        </owner>
        <license/>
        <releaseNotes/>
        <components>
            <component type="SkinObject">
                <moduleControl>
                    <controlKey>MANUFACTURERLOGO</controlKey>
                    <controlSrc>
			DesktopModules\ManufacturerLogoSkinObject\ManufacturerLogo.ascx
					</controlSrc>
                    <supportsPartialRendering>False</supportsPartialRendering>
                </moduleControl>
            </component>
            <component type="File">
                <files>
                    <basePath>
					DesktopModules\ManufacturerLogoSkinObject
					</basePath>
                    <file>
                        <name>ManufacturerLogo.ascx</name>
                    </file>
                </files>
            </component>
            <component type="Assembly">
                <assemblies>
                    <assembly>
                        <path>bin</path>
                        <name>ManufacturerLogoSkinObject.dll</name>
                        <version>01.00.00</version>
                    </assembly>
                </assemblies>
            </component>
        </components>
    </package>
      
    </packages>
</dotnetnuke>

Then finally we just add the skin object into our ProductDetail.htm to get the manufacturer logo into the product details page.

<div class="StoreDetailContainer">
  <div class="StoreDetailContainer-Content">
    <div class="Normal productDetailPadding">[EDIT][MODELNAME] - [MODELNUMBERVALUE]</div>
    <div style="float:right">[SKINOBJECT:MANUFACTURERLOGO]</div>
    <div class="Normal productDetailPadding">
        [MEDIUMIMAGE]    
        <div style="clear:both;"></div>
        [ADDITIONALIMAGESGALLERY]
        <div style="clear:both;"></div>
        [DESCRIPTION]
    </div>
    <div class="StoreClear productDetailPadding">[MSRP]</div>
    <div class="StoreClear productDetailPadding">[PRICE] [VATPRICE]</div>
	<div class="Normal genericColour productDetailPadding">[AVERAGERATING]</div>
    <div class="productDetailPadding">[ADDTOCOMPARISONLIST]</div>
    <div>[EMAILAFRIEND]</div>
    <div>[PRODUCTVARIANTS]</div>
    <div class="productDetailPadding">[PRODUCTVISUAZLIER]</div>
    <div class="genericColour addToCartWrapper">[ADDQUANTITY] [ADDTOCART]</div>
     <div>[ADDTOWISHLIST]</div>
    <div style="clear:both;"></div>
    <div class="Normal productDetailPadding">[FACEBOOKLIKEBUTTON]</div>
  </div>
</div>

Conclusion

Using skin objects is a great way to customise Cart Viper, its lets you inject your own code and UI controls into the templates. Using this feature will let you tailor Cart Viper to your requirements with ease.

Download the source file



Using Skin Objects in Cart Viper Templates – Part 1

  August 26, 2011 18:28
by Mark

Since the first release of Cart Viper our DotNetNuke store we have supported a template based design and layout within our module. This allows the module to fit perfectly within a site simply by customising some XHTML files. Within the template files we have tokens which are replaced with data by the template engine when viewing the the store in a browser.

With the release of 1.4.0 we’ve taken this a step further and now allow you to insert skin objects into a template. The skin object will then be rendered into the template when browsing the store just like how we replace tokens.

Simple Skin Object Example

An existing skin object which comes as standard with DNN is the CURRENTDATE skin object, this when added to a template will output the current date.

A list of existing skin objects in DNN

As a very simple demo I’m going to modify the Product Detail (ProductDetail.htm) template to output this skin object after the model number at the top of the page.

To inject a skin object into a template we use [SKINOBJECT:NAME] where name is the skin object name, in this case CURRENTDATE.

<div class="StoreDetailContainer">
  <div class="StoreDetailContainer-Content">
    <div class="Normal productDetailPadding">[EDIT][MODELNAME] - [MODELNUMBERVALUE] [SKINOBJECT:CURRENTDATE]</div>
    <div class="Normal productDetailPadding">
        [MEDIUMIMAGE]    
        <div style="clear:both;"></div>
        [ADDITIONALIMAGESGALLERY]
        <div style="clear:both;"></div>
        [DESCRIPTION]
    </div>
    <div class="StoreClear productDetailPadding">[MSRP]</div>
    <div class="StoreClear productDetailPadding">[PRICE] [VATPRICE]</div>
	<div class="Normal genericColour productDetailPadding">[AVERAGERATING]</div>
    <div class="productDetailPadding">[ADDTOCOMPARISONLIST]</div>
    <div>[EMAILAFRIEND]</div>
    <div>[PRODUCTVARIANTS]</div>
    <div class="productDetailPadding">[PRODUCTVISUAZLIER]</div>
    <div class="genericColour addToCartWrapper">[ADDQUANTITY] [ADDTOCART]</div>
     <div>[ADDTOWISHLIST]</div>
    <div style="clear:both;"></div>
    <div class="Normal productDetailPadding">[FACEBOOKLIKEBUTTON]</div>
  </div>
</div>

When we then view the product details page you can see we’ve added the current date to the template.

Outputting the CURRENTDATE skin object in a template

Skin objects are regular ASP.Net objects so they can contain properties, using our template we can set values for the properties using this syntax.

[SKINOBJECT:MYSKINOBJECT(propertyName1,propertyValue1,propertyName2,propertyValue2,…)]

So we could set the property DateFormat on the CURRENTDATE skin object to allow us to just display the year.

Here is our template with the property set.

<div class="StoreDetailContainer">
  <div class="StoreDetailContainer-Content">
    <div class="Normal productDetailPadding">[EDIT][MODELNAME] - [MODELNUMBERVALUE] [SKINOBJECT:CURRENTDATE(DateFormat,"yyyy")]</div>
    <div class="Normal productDetailPadding">
        [MEDIUMIMAGE]    
        <div style="clear:both;"></div>
        [ADDITIONALIMAGESGALLERY]
        <div style="clear:both;"></div>
        [DESCRIPTION]
    </div>
    <div class="StoreClear productDetailPadding">[MSRP]</div>
    <div class="StoreClear productDetailPadding">[PRICE] [VATPRICE]</div>
	<div class="Normal genericColour productDetailPadding">[AVERAGERATING]</div>
    <div class="productDetailPadding">[ADDTOCOMPARISONLIST]</div>
    <div>[EMAILAFRIEND]</div>
    <div>[PRODUCTVARIANTS]</div>
    <div class="productDetailPadding">[PRODUCTVISUAZLIER]</div>
    <div class="genericColour addToCartWrapper">[ADDQUANTITY] [ADDTOCART]</div>
     <div>[ADDTOWISHLIST]</div>
    <div style="clear:both;"></div>
    <div class="Normal productDetailPadding">[FACEBOOKLIKEBUTTON]</div>
  </div>
</div>

The output now simply shows the current year.

Setting a property of a SKINOBJECT

The ability to add skin objects into your templates opens up the range of possibilities and ideas you can now implement.

We aren’t finished there we have one more Skin Object trick which you can use to make great ecommerce sites, take a look at Using Skin Objects in Cart Viper – Part 2 to see how you can extend Cart Viper using templates.



Improved Sale Stats Page

  August 16, 2011 15:11
by Mark

Running an online shop means you need to be able monitor your store and see how well it performing, in previous versions of Cart Viper we had the Sales Stats page within the Store Admin. This page displays information about your sales, we’ve improved this in Cart Viper 1.4.0 to be even better.

  • More graphs for at a glance performance indication.
  • More data to get a better understanding of how your store is doing
  • We’ve also included a graph which shows abandoned carts, these are carts which have been created but the customer never completed the checkout process.

New and improved Sales Stats page

Rolling over the graphs then displays a popup.

Graph showing hovering over a data point

The graphs are rendered using Javascript and no data is ever sent to a 3rd party. The graphs are created locally on the server.



Multiple Payment Options

  August 16, 2011 11:09
by Nigel

One of the new features of Cart Viper the DNN shop, that has the potential to take your ecommerce website to the next level is the ability to now specify multiple payment options. This means that as well as accepting credit cards payment direct on your website you can also enable Paypal Web Payments Standard as an additional payment option.

This has the added benefit of catering for customers who would prefer to not share their credit cards details with your store, therefore increasing your sales conversion rate and ultimately making your online presence more profitable.

The multiple payment option is supported by our single page, 3 stage and 4 stage checkout options, so the store admin has complete control over the checkout user experience. Configuring your store to accept multiple payment options is straight forward you simply need to:

1) Via the payment section 1st select the payment gateway you wish to process credit card transactions:

CropperCapture[3]

In our example we will use authorize.net however you could also select First Data or PayPal Pro.

2) The next step is to click “accept PayPal payment” and complete all the sections:

CropperCapture[4]

3) The final step is then to select which checkout option you would like either single page, 3 stage or 4 stage checkout – in our example we will use “SinglePage”:

CropperCapture[5]

Now when the user attempts to checks out they now have the option to enter their credit card details directly on the site or be transferred to Paypal to complete the transaction:

CropperCapture[6]

Note as well as accepting Paypal web payment standards and credit cards on your site, you can also enable Google Checkout and offline payment, this gives the store admin the flexibility to offer the payment mechanisms that best suit their business needs.

Cart Viper now supports the following payment options:

  • Authorize.Net
  • First Data
  • Google Checkout
  • Multi Safe
  • PayPal Website Payments Standard
  • PayPal Website Payments Pro
  • Prepaid Payment Points
  • Offline Payment
  • Request For Quote

If there is a payment gateway you would like to see in that list please contact us and we would be happy to discuss it with you.



Gift Certificates

  August 15, 2011 14:15
by Nigel

A further new feature that was added into the 1.4.0 release of Cart Viper the advanced DotNetNuke ecommerce solution is the ability to use gift certificates.

Gift certificates function in a similar fashion to the existing coupons feature in that they can be given to customers to allow them to receive a discount on the items they are going to purchase. The key difference is that gift certificates can be segregated into groups and the generation of gift certificates can be automated.

With this in mind if your store is going to distribute thousands of codes – then gift certificates would be used instead of coupons to make the process less labour intensive.

To use gift certificates you simply need to follow the below steps:

Within the gift certificate section of the store admin you need to create a “Gift certificate” group the gift certificate defines the rules that the gift certificate must conform to e.g. discount amount, start / end date etc.

Each group can contain an unlimited number of gift certificates that will be automatically generated based on the rules for the group you define.

gift cert group admin

The below table summarizes the fields for the gift certificate group:

CropperCapture[3]

The gift certificates are now ready to distribute to your customers, you can view all the gift certificates for the group, and quickly and easily see if they have been used by a customer and which order they were applied to:

view gift certs

Individual gift certificates can be disabled / deleted or the entire group can be disabled meaning no gift certificates in that group will be valid to use. It is also possible to export a groups gift certificates in .CSV format so they could be processed by some 3rd party application.

If you have any feature requests please contact us and we would be happy to discuss them with you.



Product Now Supports Datasheet

  August 12, 2011 15:29
by Nigel

Continuing our discussion on new features in release 1.4 of the DotNetNuke ecommerce solution Cart Viper we are going to look at the ability to attach a PDF datasheet to a product.

To attach a datasheet to a product you 1st need to upload the PDF file using the standard file manager from the “admin” menu, once this is complete simply navigate to the Cart Viper store admin and select the product you wish to select the file for.

You will notice we now have a datasheet section where you can use the standard DNN file selector to select the PDF file you uploaded in step 1:

datasheet_select

In order to have the PDF outputted on your product details page you need to ensure the token [DATASHEET] is in the template ProductDetail.htm

product details template

This will then output a PDF icon that when clicked upon will display the PDF you uploaded – note for products that do not have a datasheet defined the PDF icon will not be outputted.

datasheet_link



Calculate Shipping Costs By DNN Role

  August 12, 2011 15:05
by Nigel

One of the new features that was included in release 1.4 of Cart Viper the DotNetNuke ecommerce solution is the ability to calculate shipping costs based upon the DNN role of the user.

shipping by dnn role

As you can see in the above screen shot we have defined 4 shipping bands, so any customer that have the DNN role “registered Users” will be able to select from all 4 bands (provided their shipping address is in the United States and the weight of the items in their cart met the criteria for these bands).

However if the user was checking out anonymously or their DNN account did not have the role “registered users” they would only be able to select from the “Standard” or “Special Delivery” bands – provided their shipping address was in the United States and the weight of the items in their cart met the criteria for these bands.

The advantage of this feature is that you can give discounted shipping bands to loyal customers, Cart Viper can now calculate shipping costs based upon:

  • Real time shipping calculating via FedEx, USPS and UPS.
  • Define a standard shipping rate on all orders.
  • Define an unlimited amount of shipping rates by cart weight, speed of delivery and shipping destination.
  • Define an unlimited amount of shipping rates by cart subtotal, speed of delivery and shipping destination.
  • Define an unlimited amount of standards of shipping for each country e.g. saver, super saver, next day, etc.
  • Define the shipping charge as a percentage of the cart sub-total.
  • If no shipping rates are defined for a users country, customers are prompted to contact the store for a quote.
  • Optionally charge VAT or tax on shipping costs.
  • Optionally define a product as "free shipping" so regardless of the shipping rules in place, this product will not incur a shipping cost.
  • In store pick up option.

If your business has a shipping model that is not covered, please contact us and we would be happy to discuss it with you.



Display Images using a Zoom Effect

  August 11, 2011 14:54
by Mark

Over the last couple of months we’ve been working on the new release of Cart Viper 1.4.0 which went live earlier this week. We are proud of our product and think its a great platform for anyone wanting to set up a store using DotNetNuke a CMS package for ASP.net.

Just because our product is $150 we don’t believe that should mean its not rich with features and fully functional. Recently we worked on a project which had the need to display the product image using a zoom feature.

Store owners can choose between using the standard modal popup to display a product image or use the product zoom feature. Change the display type is a simple setting change for the Cart Viper Catalog module, expand the Product Details Settings and set the Image Mode setting to correct mode.

product image mode settings

Currently for the setting we have two options

  • Modal Popup – Clicking the image will display a large image in a modal javascript popup.
  • Image Zoom – Hovering over the image will display a close up image of the current area selected.

Modal Popup Example

modalpopupimage

Image Zoom Example

imagezoom

We hope you see this is another useful feature of Cart Viper and a reason for you to take a closer look at our product with the free trial.