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.
 
MiniCart Summary View - Shows the total number of items and the subtotal only:
 
 
 
 
MiniCart Detail View - Displayed the items that are in the cart with the quantity and product thumbnail for each item:
 
 
 
 
MiniCart Tab View - Displays the Wish List and Order History for the user if they are logged in:
 
 
 
 
Save your settings.
 
 
 
 
Repeat these steps if you would like to add the MiniCart to any other pages.
 

Configuring the Product Listing and Product Details

You will need to configure the product listing and product details module to display and use the MiniCart.
 

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.
 
 
 
 

Make MiniCart Instance shows on the header of all DNN 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:
    
 
 
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