MiniCart

A MiniCart is a cart summary that is displayed while the user continues to browse. Most users will want to see what they have already added to their cart while finishing their shopping. This article will show you how to add a minicart to your RazorCart store.

Adding the MiniCart to a Page

Most commonly, the MiniCart will be placed on the Product Listing page or the Product Details page. First, navigate to the page you would like to add the MiniCart to. Then, hover over the modules option in the admin menu and select "Add New Module."
 
 
 
 
Find the MiniCart in the list and drag it to the position you would like it to be in on the page:
 
 
 
 
You will now need to configure the settings:
 
 
Store ID - Select the store you want this MiniCart to be active for. This is easy if you only have one store, and still easy if you have multiples!
 
Product Details Page - Select the page where you have the RazorCart product details module added. 
 
Checkout Page - Select the page where you have the RazorCart checkout module added. 
 
Layout - The MiniCart has four options for layout.  Select the layout you want.
 
Save your settings.
 
Repeat these steps if you would like to add the MiniCart to any other pages.
 
 

MiniCart Summary View

The mini cart summary view shows the total number of items and the subtotal only:

 
 
 

MiniCart Detail View

The mini cart detail view displays the items that are in the cart with the quantity and product thumbnail for each item:

 
 
 
 

MiniCart Tab View

The MiniCart Tab view displays the Wish List and Order History for the user if they are logged in:

 
 
 

Configuring the Product Listing and Product Details

When a user adds to cart the default behavior is to redirect to the cart page and checkout.  If you want the user to stay on the listing or details page when an item is added to cart then you will need to configure a setting.
 

Product Listing Page

First, navigate to the product listing page. Hover over the gear icon on the product list module and select settings:
 
 
 
 
From the settings screen, click on the RazorCart Product List Tab:

 
 
 
Scroll down and check the box to use MiniCart:
 
 
 
 
Update your settings.
 
 
 

Product Details Page

Navigate to the product details page. Hover over the gear icon on the product details module and select settings. From the settings screen, click on the RazorCart Product Details Tab:
 
 
 
 
 
Scroll down and check the box to use MiniCart:
 
 
 
 
Update your settings.
 
 
 
 
 

MiniCart Icon View

The purpose of the MiniCart Icon view is to display a small icon in the header of your site like the following screen shot. 
 
 
You can also see an example on our main web site here.
 
On hover, the icons will show to cart details in a popup.
 

Making the MiniCart Icon View show on the header of all pages:

1. Add a new MiniCart Module to a page (in this case the Store page).
 
2. We need to get the Module ID for the MiniCart Module that we just added. you can do this by running the following SQL script in DNN SQL Console:
SELECT DISTINCT
	T.TabName, T.TabPath, M.ModuleID
FROM {databaseOwner}{objectQualifier}Modules M
	JOIN {databaseOwner}{objectQualifier}TabModules TM ON TM.ModuleID = M.ModuleID
	JOIN {databaseOwner}{objectQualifier}Tabs T ON T.TabID = TM.TabID
	JOIN {databaseOwner}{objectQualifier}ModuleDefinitions MD ON MD.ModuleDefID = M.ModuleDefID
	JOIN {databaseOwner}{objectQualifier}DesktopModules DM ON DM.DesktopModuleID = MD.DesktopModuleID
WHERE DM.ModuleName = 'RazorCart.MiniCart'
 
3. Update the MiniCart Module to be displayed on all pages from Module settings:
 
 
4. Now to show the MiniCart Module in the Skin header we need to modify the skin file:
    I) Go to the folder Portals\_default\Skins and open the selected skin folder. (in this case we are using DNN 9 default skin named "Xcillion")
    II) Open Home.ascx file in any text editor of your convenience.
    III) add this line under the previous registered ascx controls:
<%@ Register TagPrefix="rzc" TagName="MiniCartCtrl" Src="~/DesktopModules/MVC/RazorCart/MiniCart/MiniCartCtrl.ascx" %>
            
    IV) Add another line before login container. Notice we set the Module ID value we get before, you also can set the Layout here from values IconView, SummaryView, DetailView, TabView
<div style="float: right; padding-right: 12px;">
	<rzc:MiniCartCtrl runat="server" Layout="IconView" ModuleId="440" />
</div>
    
    V) Save the file. then clear DNN Cache.
    VI) Now the MiniCart will show in the skin header:
    
 
 
On hover, a popup will show the details. 

 
 
 
You now have all of the tools you need to use the MiniCart in your eCommerce store. If you have any questions, please feel free to Contact Us. 

Add Feedback