HOW TO DEVELOP A QUICK VIEW POPUP IN MIVA STOREFRONT

Showing Quick View of a product on a category or other listing pages is not just a feature but a way to convert customers into sales quickly. It helps to make a quick decision to buy the product without going to the product page. No doubt, it saves time too. This article will help you implement a “Quick View” feature on your product listing pages on your Miva store.

Step 1: Create a new Miva content item for the ‘Quick View’ feature

1. log in to your Miva Admin.

2. Click on the top menu icon, and then click on “User Interface”.

3. Click on the “items” tab.

4. Add a new item called “quick_view” in the code field and in the module, select “cmp-mv-content

Once the new item is created you will need to assign it to “PROD” page. Simply go to Pages and find “PROD” page, click on edit, go to items list, and check “quick_view” item, it will then assign to the product page.

Step 2: Add the condition on the product page template

To determine what content to show on the quick view popup, we will need to put a condition on the product page template to separate it from the main product page design.

  1. Log in to your Miva Admin
  2. Click on “Pages”
  3. Click on the edit link for PROD page
  4. Now, modify the page template like below:
<mvt:if expr="g.quick_view EQ 1">
       <mvt:item name="quick_view" />
            <!-- this is for quick view -->
<mvt:else>
<!-- this is for normal product page display -->
</mvt:if>

The above code has two conditions, first if the quick_view EQ 1, it will show the content in the popup otherwise it will be considered as a normal product page and show the content there.

Step 3: Designing your Quick View template

When you are on PROD page, click on the Content (quick_view) tab, this will give you an empty text area box where you can put your design for this quick view. Here is an example code that we implemented on one of our client’s site. 

<mvt:item name="html_profile" />
         <head>
              <title>&mvt:product:name; - &mvt:store:name;</title>
              <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
              <mvt:item name="head" param="head_tag" />
              <mvt:item name="attributemachine" param="head" />
              <mvt:item name="prod_imagemachine" param="head" />
         </head>
<body id="quick_view">
       <div id="ql_wrapper">
             <div class="product-details-1">
                   <div class="product-image">
                         <img id="main_image" alt="&mvte:product:name;" />
                         </div> <div id="thumbnails" class="thumbnails"></div>
                         <mvt:item name="product_display_imagemachine" param="body:product:id" />
                   </div>
                   <div class="product-details-2">
                          <h1>&mvt:product:name;</h1>
                          <div class="product-code">Code: &mvt:product:code;</div>
                          <div class="product-price">Price: &mvt:product:formatted_price;</div>
                          <div id="inventory-message">
                                 <mvt:if expr="l.settings:product:inv_active">
                                     &mvt:product:inv_long; </mvt:if>
                          </div> 
                          <form method="post" action="&mvt:global:sessionurl;Screen=BASK">
                                <input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" />
                                <input type="hidden" name="Old_Search" value="&mvte:global:Search;" />
                                <input type="hidden" name="Action" value="ADPR" /> 
                                <input type="hidden" name="Quantity" value="1" /> 
                                <input type="hidden" name="Attributes" value="Yes" />
                                <input type="hidden" name="Store_Code" value="&mvte:store:code;" />
                                <input type="hidden" name="Product_Code" value="&mvte:product:code;" />
                                <input type="hidden" name="Current_Product_Code" value="&mvte:global:Product_Code;" />
                                <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
                                <input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" /> 
                                <input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" />
                                <input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" />
                                <input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" /> 
                                <mvt:item name="buttons" param="AddToBasketE" />
                          </form>
                     </div> 
                 <div class="clear">
            </div>
     <mvt:item name="attributemachine" param="body" />
  </div>
</body> 
</html>

Important Notes for Quick View Design Template:

You will see I have put NOINDEX, NOFOLLOW for the search robots. I did it because we do not want search engines to find this page and consider this a duplicate of the product page. We also don’t want to index these pages in our analytics. 

Here is the jQuery used for the popup:

Now to view the Quick View on the popup you have to follow below steps:

Add this HTML and script on the Global Footer:

<div class="popup-overlay" style="display:none;"></div>
<div id="dialog" style="display:none;">
       <button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close new-close closeit" title="Close">
             <span class="ui-button-icon ui-icon ui-icon-closethick">&#120;</span>
             <span class="ui-button-icon-space"> </span>Close
       </button>
<div class="quick-view-container">
</div>
 </div> 
  <script>
   $('.biz-quick-popup').each(function(){
          $(this).click(function(){
             $dataUrl = $(this).children('.biz-quick-url').text(); 
             $('.popup-overlay').show(); $( "#dialog" ).dialog(); 
             $('#dialog').parents('.ui-resizable').show();
             jQuery('#dialog').parents('.ui-dialog').addClass(' for-quickview');
            });
   });
   $('.closeit').click(function(){
   $('.popup-overlay').attr('style','display:none !important'); 
   $('#dialog').parents('.ui-resizable').hide();
   $( ".quick-view-container" ).empty(); $( ".quick-view-containere" ).empty(); });
   $('.popup-overlay').click(function(){ 
   $('.ui-dialog-titlebar-close').trigger('click'); 
   $('.popup-overlay').attr('style','display:none !important');
   
$(".ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable" ).hide();
    $( ".quick-view-container" ).empty();
    $( ".quick-view-containere" ).empty();
  });
 </script> 

You will need to match the popup style per your current theme. Here is an example:

<style>
   .popup-overlay {
         background-color: #000;
         float: left;
         width: 100%;
         position: fixed;
         top: 0;
         left: 0;
         opacity: 0.8;
         z-index: 999;
         height: 100%;
   }
</style> 

Step 4: Add Quick View link button on Category Page, Search Page, and Home Page

1: Category page:

Add the below HTML code in the Category Product List box under the CTGY page, where you want to show the Quick View button.

<div class="biz-quick-view-new">
   <a href="javascript:void(0);" class="biz-quick-popup"><span class="biz-quick-url" style="display:none;">&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:product:code;&Store_Code=&mvta:store:code;&quick_view=1</span>Quick View</a>
</div> 

2: Search page:

Add the below HTML code in the Search Result Layout box under the SRCH page, where you want to show the Quick View button.

<div class="biz-quick-view-new">
   <a href="javascript:void(0);" class="biz-quick-popup"><span class="biz-quick-url" style="display:none;">&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:product:code;&Store_Code=&mvta:store:code;&quick_view=1</span>Quick View</a>
</div>

3: For home page products sections:

This depends on whether you are calling a featured, bestselling, new, or any other product listing on your home page.

For this, you have to add the same code, but as per the sections, you need to change the “Product_Code” parameter in the URL given below. For example, for Bestseller you have to replace the mvta:bestsell:code; (if you are fetching the bestseller products from the Emporium Plus Toolkit). The same goes for the other products.

<div class="biz-quick-view-new">
   <a href="javascript:void(0);" class="biz-quick-popup"> <span class="biz-quick-url" style="display:none;"> &mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:product:code;&Store_Code=&mvta:store:code;&quick_view=1</span> Quick View</a>
</div>