Make Product View Selection Global in Responsive Templates

Forum Forums Tutorials Make Product View Selection Global in Responsive Templates

This topic contains 0 replies, has 1 voice, and was last updated by  Anonymous 6 years, 10 months ago.

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #48883

    Anonymous
    Participant

    ShopSite V12 provides nine new themes (Brownie, Composer, Content Focus, Deskman, Floating Page, Response, Shower, Stripped Down, and Underline) all built on the same responsive templates (Full-Page/Full-Product.sst). The Full-Page.sst template allows customer to toggle the product layout between grid/image and list/detail view dynamically:

    When a customer selects the product view they prefer, this setting does not persist once they leave the page. Here is a method that will make a customer’s product-view selection persistent across all of your product pages so that selecting “View Products By Detail List” or “View Products By Image” changes the view for all of your pages.

    1. This method requires some PHP code on all of your product pages, so first you must make certain that .html and .htm pages are parsed for PHP by entering the following line on the .htaccess file in your /www directory (let us know if you need any help with this and we can put this in place for you).

    AddType application/x-httpd-php .php .php3 .htm .html

    2. Add the first include before the opening HTML tag on each page:

    <?php>
    if(array_key_exists("listType", $_COOKIE)){
    $body_class = $_COOKIE;
    } else{
    $body_class = 'primg';
    }
    ?>

    In the Full-Page.sst page template, this will look like this:

    [-- DEFINE PAGE --]
    
    <?php>
    if(array_key_exists("listType", $_COOKIE)){
    $body_class = $_COOKIE;
    } else{
    $body_class = 'primg';
    }
    ?>
    
    [-- VAR.Type "page" --][-- VAR.Secure "no" --][-- IF PAGE.LinkName --][-- VAR.LinkName PAGE.LinkName --][-- ELSE --][-- VAR.LinkName PAGE.Name --][-- END_IF --][-- VAR.FileName PAGE.FileName --][-- IF PAGE.LinkColumns "Five columns" --][-- VAR.LinkCols "5" --][-- ELSE_IF PAGE.LinkColumns "Four columns" --][-- VAR.LinkCols "4" --][-- ELSE_IF PAGE.LinkColumns "Three columns" --][-- VAR.LinkCols "3" --][-- ELSE_IF PAGE.LinkColumns "Two columns" --][-- VAR.LinkCols "2" --][-- ELSE --][-- VAR.LinkCols "1" --][-- END_IF --][-- IF PAGE.Columns "Five columns" --][-- VAR.Cols "5" --][-- ELSE_IF PAGE.Columns "Four columns" --][-- VAR.Cols "4" --][-- ELSE_IF PAGE.Columns "Three columns" --][-- VAR.Cols "3" --][-- ELSE_IF PAGE.Columns "Two columns" --][-- VAR.Cols "2" --][-- ELSE --][-- VAR.Cols "1" --][-- END_IF --][-- INCLUDE Full-VARs-DOCTYPE.sst PROCESS --][-- IF PAGE.SearchProductField --][-- ELSE --][-- VAR.DisplaySearch "no" --][-- END_IF --]
    

    3. Add the following class to the opening body tag in templates:

    <body id="listType" class="<?php echo $body_class; ?>"[-- IF PageLinks.Left --] onload="leftLinks();"[-- END_IF --]>

    In the Full-Page.sst template you will be changing the line:

    to:

    <body id="listType"[-- IF PageLinks.Left --] onload="leftLinks();"[-- IF PageLinks.Left --] onload="leftLinks();"[-- END_IF --]>

    4. Add the following javascript before the closingtag in the page templates:

    <script type="text/javascript"> 
    
    
    function set_cookie(name, value, expirationDays) {
    var cookie = name + "=" + value;
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expirationDays);
    cookie = cookie + (";expires="+exdate.toGMTString());
    document.cookie = cookie;
    }
    
    function get_cookie(c_name) {
    if (document.cookie.length>0)
    {
    var c_start=document.cookie.indexOf(c_name+"=");
    if (c_start != -1)
    {
    c_start=c_start + c_name.length+1;
    var c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1)
    c_end=document.cookie.length;
    var cookie = unescape(document.cookie.substring(c_start,c_end));
    return cookie;
    }
    }
    return null;
    }
    
    var list_pref = get_cookie("listType");
    if(list_pref != undefined && list_pref != null){
    document.getElementById("listType").setAttribute("class", list_pref);
    } else{
    document.write('<body id="listType" class="prtxt" onload="leftLinks();">
    }
    
    </script>

    In the Full-Page.sst template this will look like:

    .
    .
    .
    
    [-- INCLUDE Full-Footer.sst PROCESS --]
    
    <script type="text/javascript"> 
    
    
    function set_cookie(name, value, expirationDays) {
    var cookie = name + "=" + value;
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expirationDays);
    cookie = cookie + (";expires="+exdate.toGMTString());
    document.cookie = cookie;
    }
    
    function get_cookie(c_name) {
    if (document.cookie.length>0)
    {
    var c_start=document.cookie.indexOf(c_name+"=");
    if (c_start != -1)
    {
    c_start=c_start + c_name.length+1;
    var c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1)
    c_end=document.cookie.length;
    var cookie = unescape(document.cookie.substring(c_start,c_end));
    return cookie;
    }
    }
    return null;
    }
    
    var list_pref = get_cookie("listType");
    if(list_pref != undefined && list_pref != null){
    document.getElementById("listType").setAttribute("class", list_pref);
    } else{
    document.write('<body id="listType" class="prtxt" onload="leftLinks();">
    }
    
    </script>
     
     
    

     

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.