Product Detail Module

SmithCart > Modules

The Product Detail module is the product detail page that displays the detail information of your product or service.

Contents



Introduction

The product detail page displays the following information:

  • Product Name and Price
  • Main Product Image
  • Tab control with product descriptions, related products, etc.
  • Product variants and variant images
  • Image gallery with lightbox slideshow or zoom effect

Adding the Product Detail Module

To add the Product Detail Module do the following:

  1. Create a new DNN page
  2. Add the product detail module to the page
  3. Configure the product detail module settings

Configuring the Module Settings

To configure the Product Detail module settings hover your mouse over the “Gear” icon at the top of the Product Details module container and choose settings.

Then select the Smith Product Detail Settings Tab.

 

The following sections will describe each setting and allow you to customize the Product Detail page of the cart.

 

[up to contents]



General Setup

BuyNow Page Name – Select the page where you have added the BuyNow module. This tells the Product Detail module which page to navigate to when the user clicks continue shopping or add to cart.

DigArticles Page Name – The page where you have added the DigArticles module.

[up to contents]



Show Fields

Show Product Sku – If checked, the product sku field will be displayed on the product detail page.

Show Product Summary – If checked, the product summary field will be displayed on the product detail page.

Show Description – When checked displays the product description on the product details page.

Show Product Rating – Check this box if you would like to display product ratings above the price on the product detail page, seen below.

Show Summary Price – Check this box to display the total price of the product in additional to the unit cost that is normally displayed on the product details page. The calculation for the total price field is as follows:

Total Price = Unit Cost * Quantity

When “Show Summary Price” is checked the total price is displayed as depicted in the following screen shot:

Show Sold Out Message – If checked, a sold out message will be displayed on the product detail page when quantity on hand for the product is zero. The following is a screen shot of the sold message on the product details page:

Show Quantity On Hand – Check this checkbox to display the quantity on hand on the product details page.

Show Product Name On Top – Check this box to display an extra row at the top that will display the product name as a title.

Show Add To Cart Top – Check this box to display an extra row at the top that will display the product name as a title.

Enable User Entered Amounts – Check this box if you would for the user to be able to enter a price for your product or service. This option is typically used for online bill payment or sites that collect online donations.

Show Custom Fields Table – Check this box to display the custom fields table. Can be used to display product specifications or other custom product fields.


Share Bar Setup

Show Share Bar – The share bar will allow you to share your products with popular social media applications. The Share Bar calls Facebook, Twitter and Google Plus API interfaces to send product information to the desired social media sites.


Show Volume Discount Options

The following Volume Discount options are available:

  • Show Volume Discounts in Tab – When this box is checked, customers will see the quantity pricing displayed in the tab.
  • Show Volume Discounts Below Price – When this box is checked, customers will see the quantity pricing displayed below the standard price.
  • Show Quantity Discounts By Payment Method –
 

Quantity Options

The Quantity Options give the option to select the display of the quantity user input field.

  • Show Quantity Textbox – When this option is selected the quantity user input field will be displayed as a textbox.
  • Show Quantity Dropdown List – When this option is selected the quantity user input field will be displayed as a dropdown list.

[up to contents]



Hide Fields

Hide Price – Check this box if you would like to hide the “Price” field on the Product Details page. This is useful if your business only sells to resellers that require prior approval before buying your products.

Hide Quantity – Check this box if you would like to hide the “Quantity” textbox on the Product Details page. This is useful if your business only sells to resellers that require prior approval before buying your products.

[up to contents]



Button Setup

 

Show Add to Wish list Button - When “Enable Wish List/Saved Cart” is checked in the cart settings the “Save Cart” and “View Saved Cart” buttons will be displayed on the cart screen.

Add To Cart Requires Login - Check this box if you would like to require the user to login before adding items to the cart. If this box is checked and the user clicks the “Add To Cart” button on the product listing page they will be directed to the login page if they are not already logged in. The cart login page has two options for the user to choose from; new user and existing user. If the user already has an account and logs in they are directed to the step 1 of the checkout. If the user is a new user they are directed to the cart registration page.

For more information on the Cart Registration page see the Sign In & Registration KB article.

Hide Add to Cart – Check this box if you would like to hide the “Add to Cart” button on the product listing page and the product detail page. Hiding the “Add to Cart” button turns your store into a product catalog only and will not allow users to checkout and purchase product. This is useful if your business only sells to resellers that require prior approval before buying your products.

Show Request a Quote Button – When checked the request a quote button will be displayed for products that have Hide Price checked. In order for the request a quote button to be displayed you must check the hide price checkbox above or in the product setup screen.

Show Product Pager – When checked the Product Pager will be shown in the product details page.

[up to contents]



Tab Setup

Hide Tabs – Check this box in order to hide the tabs and description section of the product details page.

Show Related Products Tab – When this box is checked, the Related Products Tab will be displayed

When the Show Related Products setting is enabled, the following options will be available to be enabled:

  • Show Related Products Sku –

    When checked, the SKU is displayed for products in the Related Products tab on the Product Details page.

  • Show Related Products Description –

    When checked, the description is displayed in the related products tab.

Show Reviews Tab – Enables a tab to be created on the Product Details page which will allow customers to rate products and write reviews about products. For more information on Reviews, please see the Customer Product Review Management KB article.

If enabled, a new tab titled Reviews will be displayed on the Product Details page. Customers will be able to write down their experiences with the product for other customers.

See the following screen shot of the customer reviews on the product details page:

At the top of the customer reviews is a summary section showing total reviews and average rating for the product.

The Write a Review button inside the Reviews tab allows a user to submit a product review. The user must be logged in to submit a product review, if the user is not logged in and they click the rate and review button they will be directed to the login page to login. When an authenticated user clicks the Write a Review button the following screen is displayed:

The user can hover their mouse over the stars and click the star to select a rating for the product. Fill in the rest of the screen and click the submit button to save the customer review. To manage customer reviews that have been submitted for products see the Customer Product Review Management section below.

Show Videos Tab – Enables a tab to be created on the Product Details page that displays information generated by the Smith Videos Module. For more information on Smith Videos, please see the Videos Module KB article.

Show Articles Tab – Enables a tab to be created on the Product Details page that displays information generated by the Smith Articles Module. For more information on Smith Articles, please click Articles Module KB article.

Show Volume Discounts Tab – When this box is checked, customers will see the quantity pricing displayed in the tab.

Show Custom Fields Tab – When checked displays the custom fields tab. To configure custom fields go to the product setup screen and select the custom product fields menu option.

 


Matrix Tab

The following options are available to be configured for the Matrix Tab

Enable Popup Window – When checked will display a detail popup window when the user clicks on a product in the matrix.

Show Quantity On Hand – Check this box if you would like to display the “Quantity on Hand” column on the cart screen during checkout. If the “Quantity on Hand” checkbox is not checked then the quantity on hand will be hidden.

Hide SKU – Check this box if you would not like to display the “Product Sku” column on the product matrix. If the “Hide Product Sku” checkbox is not checked then the product sku will be displayed.

Hide Add To Cart – Check this box if you would like to hide the “Add to Cart” button on the Product Detail page.

 


Custom Tabs

Show Custom Tab #1 – When checked display a custom tab #1 on the product details page.

Stored Procedure Name Enter the name of your custom sql stored procedure that populates data in custom tab #1. The naming convention for your stored procedure you create in SQL Server is DatabaseOwner + ObjectQualifier + ModuleQualifier + YourStoredProcName. DatabaseOwner should be “dbo”. ObjectQualifier – Is assigned when you installed DNN. The objectqualifier in your database could be "dnn" or you may not be using one. ModuleQualifier is “Smith”.

For example, if you enter a stored procedure titled “LoadCustomTab” in this textbox, your stored procedure in sql server should be named as follows: “dbo.Smith_ TransferOrder”. The ProductID from the Smith_Products table is passed as a parameter to the stored procedure.

Show Custom Tab #2 – When checked display a custom tab #2 on the product details page.

Stored Procedure Name Enter the name of your custom sql stored procedure that populates data in custom tab #2. The naming convention for your stored procedure you create in SQL Server is DatabaseOwner + ObjectQualifier + ModuleQualifier + YourStoredProcName. DatabaseOwner should be “dbo”. ObjectQualifier – Is assigned when you installed DNN. The objectqualifier in your database could be "dnn" or you may not be using one. ModuleQualifier is “Smith”.

For example, if you enter a stored procedure titled “LoadCustomTab” in this textbox, your stored procedure in sql server should be named as follows: “dbo.Smith_ TransferOrder”. The ProductID from the Smith_Products table is passed as a parameter to the stored procedure.

[up to contents]



Mini Cart

No Mini Cart (Default) – When selected no mini cart will be displayed on the product details page. When the user clicks the “add to cart” button the product will be added to the cart and the user will be redirected to the cart page.

Show Built In Mini Cart – When the show built in mini cart is checked, the mini cart will be displayed within the product details module. When the user clicks the “add to cart” button they will remain in the page and the item will be added to the mini cart. See the following screen shot:

Use Mini Cart Module – This option requires the mini cart module to be added to the page. When Use Mini Cart Module is selected and the user clicks the add to cart button on the product details page they will remain in the page and the item will be added to the mini cart.

[up to contents]



Image Gallery

The following Image Gallery options are available to be selected from:

Lightbox Effect – Select this option if you would like to enable the lightbox effect on your product images.

Lightbox provides users with a simple and elegant view of your product images without having to leave the product details page in the cart. When the user clicks one of the thumbnail images on the product details page the image magnifies using a gliding animation. The images automatically resize according to the size of the product image you upload in the product setup screen. Additionally, lightbox provides a slideshow of your product images that allows users to scroll forward and back viewing your magnified product images.

Product images uploaded from the product setup photo screen are displayed as a lightbox slideshow gallery on the product detail page as depicted in the following screenshot:

Zoom Effect – Select this option if you would like to enable the zoom effect on your product images.

The Zoom feature enables a small magnifier window next to the main product image on the product detail page. This is useful in B2C or B2B sites where you would like to provide the user the ability to zoom in closely on your product images and view the finer details of the product before they check out and buy.

The user is able to move their mouse (magnifying glass) around the main product image and zoom in on all areas of the main product image. If you have uploaded additional product photos they will be displayed in the thumbnail image gallery and the user can click on any thumbnail image to swap out the main image and then zoom the image just selected.

Lightbox and Zoom Effect – The Lightbox and Zoom Effect Image Gallery option provides users with a simple and elegant view of your product images without having to leave the product details page in the cart as well as enables a small magnifier window next to the image displayed within the Lightbox. When the user clicks one of the thumbnail images on the product details page the image magnifies using a gliding animation. The images automatically resize according to the size of the product image you upload in the product setup screen. Additionally, lightbox provides a slideshow of your product images that allows users to scroll forward and back viewing your magnified product images.

In Place Zoom Effect – The In Place Zoom Effect Image Gallery option allows zoom using the mouse wheel or zoom control buttons, pan using mouse drag, and scroll with the movement buttons.

Show Image - No Effects – Select this option if you have not uploaded additional product photos from the product setup screen and do not want to use the lightbox or zoom effect for your product photos.

Hide Image Gallery – Select this option to hide the Product Image and Image Gallery.

[up to contents]



Custom Fields

The following Custom Fields are available on the Product Details module:

Note:In order for the listbox to be displayed on the product detail page you must go to the Product Setup and check the box titled "Show custom fields on product detail page".

Show Listbox - When checked, a listbox will be displayed on the product detail page of the checkout. This listbox is useful for adding terms and conditions or custom content to the product detail page.

Listbox Label – The List box label is the label that is displayed next to the custom list box displayed on the Product Details page.

Listbox Text – The List box Text is the text that is displayed in the custom list box displayed on the Product Details page.

Show Textbox - When enabled, a textbox will be displayed on the Product Details page. The user defined textbox is useful to customize your checkout and can be used to create any new field you choose. It is stored in the database for reference later on.

Textbox Label – Textbox label is the label that shows up on the product detail page of the checkout to the left of the custom text box.

Textbox Required – Check this box if you want to make the textbox required before the user can check out and make payment.

[up to contents]



Product Slider

Product Slider – The setting enables the display of the products slider.

The following Product Slider options are available to be chosen from:

  • Hide Product Slider
  • Show Related Products
  • Show Recommended Products

Item Width – Enter the width in pixels of an individual item.

Item Height – Enter the height in pixels of an individual item.

Items – Choose how many items should be displayed at once.

[up to contents]



Order As Is

The Order As Is options allow the user to re-order their last product configuration with a single button click on the Product Details page.

The following Order As Is options are available to be configured:

Hide Order As Is – Does not display the order “as-is” selection. Your users will have to configure the same settings for each purchase.

Show Order As Is – Allows user to re-order their last product configuration with a single button click.

If the user is logged in and has ordered the product before a button titled Order As Is will be displayed on the product details page

  • To re-order the last product configuration, the user would enter a quantity and click the "Order As Is" button and the product would be automatically added to their cart with the previous configuration they ordered.
  • If user has never ordered that product before, the Order As Is option would not display.
  • If the user is not logged in or has never ordered the product before, the "Order As Is" option would not display

Show Order As Is - By Product – Displays the order as is feature on the product details page that allows the user to select from a previous order and purchase the same configuration of a product. Specifically useful is you have products with a lot of variants. Will save the customer time when they order the same configuration of a product frequently.

[up to contents]



Booking

The following Booking options are available to be configured on the Product Details page:

Note: These settings only apply to booking products. For more information about Booking, see the Booking Products KB article.

Show All Day Checkbox – Check this box to display the All Day checkbox on the product details page.

All Day Checked By Default – Check this box to default the All Day checkbox to checked.

[up to contents]



Misc Options

Default Product ID – Enter the default Product ID you want the product details module to always display.

Please Note: If you only have one instance of the Product Details module on your portal you should NOT enter a default product id. You should only enter a default id if you want the product details module to always display a specific product you enter in the textbox.

Icon/Swatch Height – This field allows you to lock the pixel dimension for the icon displayed on the product details page.

[up to contents]



Product Details Querystring Variables

The Product Details module supports the following querystring variables:

  • ProductID
  • ProductID and VariantID
  • ProductID and Multiple VariantID’s
  • Custom Textbox field (tbfield)

See the Querystring Variables KB article for more information about the querystring variables supported on the product details page.

[up to contents]