Quick View Documentation

The Nop Quick View allows customers to see product details without leaving the current nopCommerce page. The Nop Quick View adds a "Quick View" button to the product boxes on the home, category, manufacturers, recently viewed product pages, which upon click opens an ajax product details view.

Working with the Nop Quick View is as easy as configuring a few settings from the administration of the plugin. When the plugin is installed it comes preconfigured with default values for the settings. 

Please read the following steps for more information on how to configure the Nop Quick View.

General Settings

1. Enable Quick View - Sets whether the Quick View is enabled.
2. Product item selector - The css selector of the product item element. NOTE: The selector should contain attribute "data-productid" with the ID of the product.
3. Quick View button parent - Set the element where the button will be placed. If left empty or the same value as the "Product item selector" is entered, the button will be placed in the "Product item selector". If entered a different value, the button will be placed in it.

Quick View Popup Behavior Settings

1. Make the Quick View popup draggable - If enabled, the Quick View popup will be draggable (users can manually change it's location, by dragging it to the desired location with their mouse)
2. Enable Overlay - If enabled, an overlay effect will be applied behind the Quick View popup.

Quick View Popup Appearance Settings

1. Enable the cloud zoom on the main product image - If enabled, the cloud zoom will be activated on the main product pictures, displayed in the Quick View popup (You do NOT need to have the Nop Cloud Zoom plugin installed, in order for this feature to work).
2. Show short product description - If enabled, the short product description will be displayed in the Quick View popup.
3. Show full product description - If enabled, the full product description will be displayed in the Quick View popup.
4. Show product specification - If enabled, the priduct specification will be displayed in the Quick View popup.
5. Show products also purchased - If enabled, the products also purchased will be displayed in the Quick View popup.
6. Show related products - If enabled, the related products will be displayed in the Quick View popup.
7. Show add to wishlist button when single product variant - If enabled, the wishlist button will be displayed in the Quick View popup (only when the product is in a single product variant template).
8. Show compare products button - If ebabled, the compare products button will be displayed in the Quick View popup.
9. Accordion panels height style - This setting lets you choose on what you want to base your panels height 
   • "auto" - All panels will be set to the height of the tallest panel.
   • "fill" - Expand to the available height based on the accordion's parent height.
   • "content" - Each panel will be only as tall as its content.

How to add new Product Templates with Quick View

If you want to add new product templates with Quick View the steps are as follows:

If you are using a theme:  

1. Open the folder of your default product template.
   
   Note: If you are using theme that overrides the product template you will have to open the location of the product template view in the theme itself. For example in our Tiffany theme the product template is located at Themes\Tiffany\Views\Product folder.
   
   
2. Copy the default product template - ProductTemplate.Simple.cshtml.
3. Rename it as you like (for example NewProductTemplate.cshtml) and make your changes in the new file.

In Quick View:

1. Go to Plugins\SevenSpikes.Nop.Plugins.QuickView\Views\QuickViewCatalog.
2. Copy the default product template view that you will find there - ProductTemplate.Simple.cshtml.
3. Give it the same name as the theme product template - NewProductTemplate.cshtml
4. Now you will be able to use the Quick View with the new Product template.