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.
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.