How To Display Product Information On Your Miva Merchant Storefront Slider

A rising trend in ecommerce websites and websites in general for that matter, is the use of some type of jQuery slider, fader, or selector to display banners. The purpose of these banners, and of the entire storefront page, is to direct your customers towards the first steps in making a purchase. And that is either a category page, or a product page.

Why not create a set of banners that displays products that you would like to call attention to and link directly to them? Well that’s exactly what a Miva Merchant Design Client asked for, and I was happy to able to accomplish it for him.

What You’ll Need

• A jQuery or other type Javascript slider (I used jQuery’s SimpleFader v1.0.0: You may download the plugin here.)
• Background images for your jQuery element ((Allow room for your product information and images – I will explain this in detail in the following sections)
• Emporium Plus Toolkit installed on your store

Step One: Set Up Your jQuery Element On Your Storefront

jQuery plugin documentation is very extensive and easy to follow. For the sake of this blog post I will only be displaying the code for the HTML portion that handles the element itself.

However, if you need help with setting up the jQuery calls and styling the element with CSS, I will be more than happy to help you with that. Just post your question as a comment to this blog post and I will respond as soon as possible.

 
    <!-- Id of SimpleFader top div must be "simplefader"//--> 
    <div id="simplefader"> 
     
        <!-- All Screens must have class "screen"//--> 
        <div id="screen1" class="screen"></div> 
        <div id="screen2" class="screen"></div> 
        <div id="screen3" class="screen"></div> 
        <div id="screen4" class="screen"></div> 
            
        <!-- Empty div for controls must be "simplefadercontrols" //--> 
        <div id="simplefadercontrols"></div> 
    </div> 
     
    

Step Two: Create Your Background Images

As you work to create your banner background images, be aware of where you would like to place the product information and product image. If your product images have a white background, like the ones on this site do, you will want to take that into consideration as you design your banner images. If you will be having a designer create the images for you, make sure that he or she is aware of where you plan to place the product images.

Below is an illustration of what we are trying to accomplish with this tutorial:

Notice the careful attention in the placement of the product thumbnail image. Setting the thumbnail image in a sea of white gives the completed banner a look that suggests that the entire banner is one image. The image below will give a better idea of the thumbnail placement.

The blue bounding box represents the entire thumbnail image. Notice how it is set outside of any gradients in the background image, and up away from the position of the jQuery SiimpleFader controls.

Step Three: Prepare The Banner Products In The Miva Merchant Admin

Create a new category in your Miva Admin panel to pull the product information from for your new banners. You may choose to name it however you wish. I named mine Storefront Banner and gave it a code of BANNER. After you create your new category, don’t forget to uncheck the Active box. This will ensure that your new category will not display in the category tree of your site.

Next, assign the products that you wish to display on your storefront banners to the new category. Be sure not to assign more products than you have banner backgrounds for, as this may break the functionality. If you created 3 banner backgrounds, then assign no more than 3 products to the category. You may swap out products any time, just make sure that you never have more products assigned to that category than you have slide backgrounds to accommodate.

**Note: Products can be assigned to multiple categories, so don’t unassign these products from any other categories that they may already be associated with.

Step Four: Setup The Toolkit Functions For Your Banner Products

First, we need to set up our Toolkit code to pull in the new category that we created. Then, we will use a Mivascript for each loop to create our banner divs for us.

You will also notice that the div containing the product information is also wrapped in an <a> tag. This will make your banner clickable and link to the product’s product page. I also used the Toolkit Substring function to restrict the product description to the first 150 characters. Feel free to tweak these elements and style them to fit your site’s needs.

**Note: This code snippet assumes that your product information and thumbnail images will be styled to display in the same spot for every banner. See the next section to set IDs in the banners to target them specifically in your CSS

    <!-- Id of SimpleFader top div must be "simplefader"//-->
    
    <div id="simplefader">
        <mvt:item name="toolkit" param="sassign|cat_code|BANNER" />
        <mvt:item name="toolkit" param="cxpc|pcount|cat_code" />
        
        <!-- All Screens must have class "screen"//-->
        <mvt:if expr="pcount GT 0">
            <mvt:foreach iterator="sub_product" array="sub_products">
                <div class="screen">
                    <a href="&mvt:global:sessionurl;Screen=PROD&Store_Code=&mvt:store:code;&Product_Code=&mvt:sub_product:code;">
                        <div class="link_div">
                            <div class="Banner_details">
                                <h2>&mvt:sub_product:name;</h2>
                                <p class="banner_price">Price: &mvt:sub_product:formatted_price;</p>
                                <p class="banner_description"><&mvt:item name="toolkit" param="substring|l.all_settings:sub_product:descrip,1,150" /> ... <span>Read more…</span></p>
                            </div>
                            <div class="Banner_product">
                                <img src="&mvt:sub_product:image;" border="0" />
                            </div>
                        </div>
                    </a>
                </div>
            </mvt:foreach>
        </mvt:if>
        
        <!-- Empty div for controls must be "simplefadercontrols" //-->
        <div id="simplefadercontrols"></div>
    </div>
    
    

Step Five: Specific Styles For Your Banners

In the case of Power123.com, the banner designs differ greatly in their style, and the product information and thumbnail image placement varies from one banner to the next.

As you can see, each of these banners requires the product information and thumbnail to be placed in a specific place. I even had to set the CSS to shrink the thumbnail image in the third banner.

   
To accomplish this, I implemented a Toolkit counter function to give each slide a unique ID. You can see the code additions below:

    <!-- Id of SimpleFader top div must be "simplefader" //-->
    
    <div id="simplefader">
        <mvt:item name="toolkit" param="sassign|cat_code|BANNER" />
        <mvt:item name="toolkit" param="sassign|counter|1" />
        <mvt:item name="toolkit" param="cxpc|pcount|cat_code" />
        
        <!-- All Screens must have class "screen" //-->
        <mvt:if expr="pcount GT 0">
            <mvt:foreach iterator="sub_product" array="sub_products">
                <div id="screen&mvt:global:counter;" class="screen" style="background: url('css/images/SFNT_Banner_&mvt:global:counter;.jpg') no-repeat;">
                    <a href="&mvt:global:sessionurl;Screen=PROD&Store_Code=&mvt:store:code;&Product_Code=&mvt:sub_product:code;">
                        <div class="link_div">
                            <div id="Banner_&mvt:global:counter;_details" class="Banner_details">
                                <h2>&mvt:sub_product:name;</h2>
                                <p class="banner_price">Price: &mvt:sub_product:formatted_price;</p>
                                <p class="banner_description"><mvt:item name="toolkit" param="substring|l.all_settings:sub_product:descrip,1,150" /> ... <span>Read more…</span></p>
                            </div>
                            <div id="Banner_&mvt:global:counter;_product" class="Banner_product">
                                <img src="&mvt:sub_product:image;" border="0" />
                            </div>
                        </div>
                    </a>
                </div>
                <mvt:item name="toolkit" param="mvassign|counter|counter+1" />
            </mvt:foreach>
        </mvt:if>
        
        <!-- Empty div for controls must be "simplefadercontrols" //-->
        <div id="simplefadercontrols"></div>
    </div>
    
    

This should cover everything you need to know in order to create dynamic banners for your store. I hope that you have found this post to be informative, and please, don’t hesitate to ask questions below. Happy coding!