Product Compare Module

SmithCart > Modules

Introduction

The Product Compare module allows shoppers to compare a shortlist of products side-by-side, eliminating the need to navigate back and forth between product pages.  It provides customers with the ability to browse and compare different products and determine which product will be right to purchase. 
 

Installation

 
The Product Compare module is included when you install SmithCart.  For instructions on installing SmithCart please click here.  The remainder of this User’s Manual assumes you have already installed SmithCart.
 
 

Setup and Configuration

 
In order to properly configure the Product Compare module you should be logged in using a DNN user account with administrator privileges.
 
Setting up the product compare module encompasses the following steps:
 
  • Configuring the BuyNow module settings
  • Configuring Product Compare Groups
  • Adding products to “Compare Groups”
  • Configuring the Smith Product Compare module.
 

Configuring the BuyNow Module

 
The first step is to configure the BuyNow module settings.  Navigate to the page with the BuyNow module and click on the “Setup” button:
 
 
 
Scroll down to the section titled “Product Listing Page” and expand the panel.  Scroll down until you reach the "Show Buttons" option.
 
 
 
 
 
Show Add To Compare Button – Check this box to show the “Add To Compare” button on the product listing page. 
 
When the “Show Add To Compare” checkbox is checked, the add to compare button will be displayed on the product listing page as follows:
 
 
 
 

Adding the Product Compare Module to a Page

Typically, the product compare module will reside on the same page as the BuyNow module.  Navigate to the page with the BuyNow module and add the Product Compare module to the pa­ge.


 
    
 
 
After you add the Product Compare module to a page you will see the following:
 
 
 

Product Compare Module Settings

 
To configure the Product Compare module settings, hover your mouse over the “Manage” button and choose settings.
 
 
 
 
After you click the “Settings” link you will see the following screen displayed:
 
 
 
 
 
BuyNow Page Name – Select the page where you have added the BuyNow module.  This tells the Product Compare module which page has the BuyNow module on it for retrieving product information.
 
Product Detail Page – Select the page where you have added the product detail module.  This tells the Product Compare module which page to navigate to when the user clicks a product from the product compare listing page.
 
Show Product Rating – Check this box if you would like to display product ratings above the price on the product compare module. 
 
Hide Price – Check this box if you would like to hide the price on the product compare module. 
 
Hide Add to Cart – Check this box if you would like to hide the “Add to Cart” button on the product compare module.
 
Hide Quantity - Check this box to hide the available quantity.
 
 

Setting Up Your Products

 
In order for a product to be compared you need to do the following:
 
1.  Create custom product fields
2.  Create product compare groups
3.  Add products to compare groups
 
The first step is to edit your product.  To edit a product click the edit button (pencil) next to the product on the product listing or details page.
 
 
 
 
When you click the edit button you will be taken directly to the edit products page to edit the product. 
 
 

Creating Product Compare Groups

 
Product compare groups define what products are allowed to be compared.  Every product you want users to be able to compare need to be in a compare group.  In order for two products to be compared they need to be in the same compare group.
 
To create a new compare group hover your mouse over the “Products” menu option and click the “Compare Groups” link to load the Compare Groups Management screen.
 
 
 
 
The Compare Groups Manager screen will be displayed as follows:
 
 
 
 
Click the “Add Compare Group” button to display the manager page as follows:
 
 
 
 
Enter the desired compare group and click “Add Compare Group” to save.
 
 

Adding Products to Compare Groups

 
Navigate back to the product setup screen and expand the Product Options section as follows:
 
 
 
 
Select your desired product compare group and click the “Update Product” button to save the product.
 
Continue to create compare groups and add products to compare groups for the all products in your catalog you want users to be able to compare.
 
 

Custom Product Fields

 
SmithCart provides the ability to define unlimited custom product fields for products in your store.  Custom product fields are used specifically in the following 2 areas of the cart:
 
1.  Displayed in a tab on the Product Details module.
2.  Displayed in the Product Compare module.
 
Creating custom product fields involves the following two steps:
 
1.   Create custom product field templates.
2.   Copy your custom product field templates to products.
 

Custom Product Template Fields

 
Custom product template fields are a master set of custom product fields that can be copied across many different products to save data entry time.
 
To add, edit or delete custom product template fields click the button titled “Custom Fields” from the Store Admin Menu.
 
 
 
 
 
The following screen will be displayed when you click the “Custom Fields” button.
 
 
 
 
Click on the “Add Custom Field” button to add a new custom field template and following screen will be displayed:
 
 
 
 
Field Definitions:
 
Field label – defines the label for the custom field
 
Control type dropdown list – Provides the ability to define values for dropdown lists, radio buttons and checkboxes. 
 
Values – Defines the available values for the control you selected.
 
Share – The share flag allows you to share product template fields among multiple instances of the Smith BuyNow module.
Enter your custom field data and click the “Save” button to save the record and the following screen will be displayed:
 
 
 
 

Edit and Delete Product Template Fields

 
Edit Custom Product Template Fields
 
From the grid view that lists your custom product template fields click the “Edit” link next to the field you wish to edit.  Make the changes to the custom product template fields and click the update button to save your changes.  Click the cancel button to cancel your changes. 
 
Delete Custom Product Template Fields
From the grid view that lists your custom product template fields click the “Delete” link next to the custom product template fields you wish to delete. 
 
 

Custom Product Fields

 
To define custom product fields click “Manage Products” from the Store Admin Menu:
 
 
 
 
From the “Manage Products” screen click the “Edit” link next to the product you want to define custom product fields for and you will be taken to the product setup screen.  From the product setup screen select “Custom Fields” from the “Products” sub menu.
 
 
When you click “Custom Fields” the following screen is displayed where the admin can assign the values to the product template fields defined in the section above titled “Product Template Fields”.
 
 
 
 
 
From the Custom Field Manager screen you can either copy the template fields to the product that you have already created or you can add new custom fields.
 

Copy Template Fields To Product

 
To copy the template fields to the product click on the “Product Template Fields” tab as follows:
 
 
 
 
A.   Click on the “Product Template Fields” tab
 
B.   Select the template fields to copy to your product.
 
C.   Click “Copy Product Template Fields” to copy the selected fields to your product.
 
After you click the “Copy Product Template Fields” button you will see the new custom fields added to your product as follows:
 
 
 
 
In addition to the populating the values for the custom fields the admin can also enter the “Tab Name” that the custom fields will be displayed in. The custom fields will appear in the tabbed interface on the product details page so the user can view the custom product information. 
 
 

Using the Product Compare Module

After you have finished all the setup and configuration described above you are ready to use the front end Product Compare module to compare products in your store.
 
First, navigate to the page in your portal with the BuyNow module and you will see a page similar to the following screen shot:
 
 
 
 
Click the “Add To Compare” button for each product you want to compare. 
 
 
 
 
The items will be added to the Product Compare module as depicted in the following screen shot:
 
 
 
 
After you have added all the products you want to compare click the “Compare” button on the Product Compare module to display the side-by-side listing of the products as follows:
 
 
Congratulations. Your customers can now use the Compare feature in your SmithCart store.