Horizontal Grid for Products

[glozinski]

Sorry if this has been asked I did not find. I also know that version 1.6 is including this option.  What would be the code to place products in a horizontal grid.  Thank you in advance.

[Paulito]

Good morning

 

Have a look here to see if this helps you

 

http://mypresta.eu/en/art/tag/grid/

 

Paul

[glozinski]

Just a bit confused with step 4.  Where exactly do you copy and paste into the producst-list.tpl file ? after the 1st insert or?

Now it's time to create javascript for our buttons created in product-sort.tpl file. Where to insert javascript? you can add script direct to your product-list.tpl file (remember about {literal} {/literal} tags!) or just for tools.js file located in directory: /js/tools.js. Just copy and paste code below:

Thank you in advance.

[vekia]

if you're talking about js script copy it into the /js/tools.js file, exactly as it is described  therE:

 

 

Step 4: Script for switcher

Now it's time to create javascript for our buttons created in product-sort.tpl file. Where to insert javascript? you can add script direct to your product-list.tpl file (remember about {literal} {/literal} tags!) or just for tools.js file located in directory: /js/tools.js. Just copy and paste code below:

it's much easier

[glozinski]

I pasted that into the js/tools/js and lost the ability to see info on products in back office.  Do you also copy and paste this into the product-list.tpl file and if so do you overwrite or where does one exactly insert the java script...thank you in advance.

[glozinski]

Looks like it freezes up my layered navigation...

[vekia]

follow steps carefully (especially js code),tutpria is based on prestashop with layered navigation blocks.

[glozinski]

yes, as i now have messed up my products with prices and cannot figure why in the database the price is there but does not view on site but displays on detail page...

[vekia]

can you share url to your website please?

[glozinski]

http://www.silkplantscanada.com/presta_spc/index.php?id_product=1464&controller=product&id_lang=1

The Back Office shows price correctly and yet the add to cart does not show nor does the price???  Thank yu in advance

[vekia]

i checked your page, and seems like cart shows price well:

[glozinski]

If you were to go under the category accessories you wil not see prices on the boxwood balls that you just placed in the cart.  This is the issue that I am trying to resolve after making changes.

[glozinski]

tried again and here is the end result.  any ideas?  Thank you in advance. http://www.silkplantscanada.com/presta_spc/index.php?id_category=3&controller=category&id_lang=1

[glozinski]

Perhaps I am missing this in the product-list.tpl file (remember about {literal} {/literal} tags!)  Do not now where to place>>>>

/** MYPRESTA GRID/LIST/MINILIST SWITCHER **/

$(document).ready(function() {

  

/*!

 * jQuery Cookie Plugin v1.4.0

 * https://github.com/carhartl/jquery-cookie

 *

 * Copyright 2013 Klaus Hartl

 * Released under the MIT license

 */

(function (factory) {

        if (typeof define === 'function' && define.amd) {

                // AMD. Register as anonymous module.

                define(['jquery'], factory);

        } else {

                // Browser globals.

                factory(jQuery);

        }

}(function ($) {

 

        var pluses = /\+/g;

 

        function encode(s) {

                return config.raw ? s : encodeURIComponent(s);

        }

 

        function decode(s) {

                return config.raw ? s : decodeURIComponent(s);

        }

 

        function stringifyCookieValue(value) {

                return encode(config.json ? JSON.stringify(value) : String(value));

        }

 

        function parseCookieValue(s) {

                if (s.indexOf('"') === 0) {

                        // This is a quoted cookie as according to RFC2068, unescape...

                        s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');

                }

 

                try {

                        // Replace server-side written pluses with spaces.

                        // If we can't decode the cookie, ignore it, it's unusable.

                        // If we can't parse the cookie, ignore it, it's unusable.

                        s = decodeURIComponent(s.replace(pluses, ' '));

                        return config.json ? JSON.parse(s) : s;

                } catch(e) {}

        }

 

        function read(s, converter) {

                var value = config.raw ? s : parseCookieValue(s);

                return $.isFunction(converter) ? converter(value) : value;

        }

 

        var config = $.cookie = function (key, value, options) {

 

                // Write

                if (value !== undefined && !$.isFunction(value)) {

                        options = $.extend({}, config.defaults, options);

 

                        if (typeof options.expires === 'number') {

                                var days = options.expires, t = options.expires = new Date();

                                t.setDate(t.getDate() + days);

                        }

 

                        return (document.cookie = [

                                encode(key), '=', stringifyCookieValue(value),

                                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE

                                options.path    ? '; path=' + options.path : '',

                                options.domain  ? '; domain=' + options.domain : '',

                                options.secure  ? '; secure' : ''

                        ].join(''));

                }

 

                // Read

 

                var result = key ? undefined : {};

 

                // To prevent the for loop in the first place assign an empty array

                // in case there are no cookies at all. Also prevents odd result when

                // calling $.cookie().

                var cookies = document.cookie ? document.cookie.split('; ') : [];

 

                for (var i = 0, l = cookies.length; i < l; i++) {

                        var parts = cookies.split('=');

                        var name = decode(parts.shift());

                        var cookie = parts.join('=');

 

                        if (key && key === name) {

                                // If second argument (value) is a function it's a converter...

                                result = read(cookie, value);

                                break;

                        }

 

                        // Prevent storing a cookie that we couldn't decode.

                        if (!key && (cookie = read(cookie)) !== undefined) {

                                result[name] = cookie;

                        }

                }

 

                return result;

        };

 

        config.defaults = {};

 

        $.removeCookie = function (key, options) {

                if ($.cookie(key) === undefined) {

                        return false;

                }

 

                // Must not alter options, thus extending a fresh object...

                $.cookie(key, '', $.extend({}, options, { expires: -1 }));

                return !$.cookie(key);

        };

 

}));

    

  $(".button_grid").click(function() {

     $.cookie("switchercookie", "grid");

     $(".prdlist").attr("id","product_list_grid");

  });

  $(".button_list").click(function() {

    $.cookie("switchercookie", "list");

    $(".prdlist").attr("id","product_list");

  });

  $(".button_minilist").click(function() {

    $.cookie("switchercookie", "minilist");

    $(".prdlist").attr("id","product_list_mini");

  });

});

[glozinski]

http://www.silkplantscanada.com/presta_spc/en/3-accessories you will see that the list and mini list do not allow you to view more products only the first page.

{*
* 2007-2013 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2013 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

{if isset($products)}
    <!-- Products list -->
    <ul id="product_list{if isset($smarty.cookies.switchercookie) && $smarty.cookies.switchercookie=="grid"}_grid{/if}{if (isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="list") OR !isset($smarty.cookies.switchercookies)}{/if}{if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}_mini{/if}" class="clear prdlist">
    {foreach from=$products item=product name=products}
        <li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
            <div class="left_block">
                {if isset($comparator_max_item) && $comparator_max_item}
                    <p class="compare">
                        <input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} autocomplete="off"/>
                        <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
                    </p>
                {/if}
            </div>
            <div class="center_block">
                <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
                    {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>{/if}
                    <img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
                    {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
                </a>
                <h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if} {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
                <p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>
            </div>
            <div class="right_block">
                {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                <div class="content_price">
                    {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
                    {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}<span class="warning_inline">{l s='Out of stock'}</span>{/if}</span>{/if}
                </div>
                    {if isset($smarty.cookies.switchercookie) &&$smarty.cookies.switchercookie=="minilist"}
                        <div class="minilist-badges">
                            {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
                            {elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}
                        </div>
                    {/if}
                {/if}
                {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
                    {if ($product.allow_oosp || $product.quantity > 0)}
                        {if isset($static_token)}
                            <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
                        {else}
                            <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
                        {/if}                       
                    {else}
                        <span class="exclusive"><span></span>{l s='Add to cart'}</span><br />
                    {/if}
                {/if}
                <a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
            </div>
        </li>
    {/foreach}
    </ul>
    <!-- /Products list -->
{/if}


<script type="text/javascript">
{literal}
/** MYPRESTA GRID/LIST/MINILIST SWITCHER **/
$(document).ready(function() {
   
/*!
 * jQuery Cookie Plugin v1.4.0
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2013 Klaus Hartl
 * Released under the MIT license
 */
(function (factory) {
        if (typeof define === 'function' && define.amd) {
                // AMD. Register as anonymous module.
                define(['jquery'], factory);
        } else {
                // Browser globals.
                factory(jQuery);
        }
}(function ($) {
 
        var pluses = /\+/g;
 
        function encode(s) {
                return config.raw ? s : encodeURIComponent(s);
        }
 
        function decode(s) {
                return config.raw ? s : decodeURIComponent(s);
        }
 
        function stringifyCookieValue(value) {
                return encode(config.json ? JSON.stringify(value) : String(value));
        }
 
        function parseCookieValue(s) {
                if (s.indexOf('"') === 0) {
                        // This is a quoted cookie as according to RFC2068, unescape...
                        s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
                }
 
                try {
                        // Replace server-side written pluses with spaces.
                        // If we can't decode the cookie, ignore it, it's unusable.
                        // If we can't parse the cookie, ignore it, it's unusable.
                        s = decodeURIComponent(s.replace(pluses, ' '));
                        return config.json ? JSON.parse(s) : s;
                } catch(e) {}
        }
 
        function read(s, converter) {
                var value = config.raw ? s : parseCookieValue(s);
                return $.isFunction(converter) ? converter(value) : value;
        }
 
        var config = $.cookie = function (key, value, options) {
 
                // Write
                if (value !== undefined && !$.isFunction(value)) {
                        options = $.extend({}, config.defaults, options);
 
                        if (typeof options.expires === 'number') {
                                var days = options.expires, t = options.expires = new Date();
                                t.setDate(t.getDate() + days);
                        }
 
                        return (document.cookie = [
                                encode(key), '=', stringifyCookieValue(value),
                                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                                options.path    ? '; path=' + options.path : '',
                                options.domain  ? '; domain=' + options.domain : '',
                                options.secure  ? '; secure' : ''
                        ].join(''));
                }
 
                // Read
 
                var result = key ? undefined : {};
 
                // To prevent the for loop in the first place assign an empty array
                // in case there are no cookies at all. Also prevents odd result when
                // calling $.cookie().
                var cookies = document.cookie ? document.cookie.split('; ') : [];
 
                for (var i = 0, l = cookies.length; i < l; i++) {
                        var parts = cookies.split('=');
                        var name = decode(parts.shift());
                        var cookie = parts.join('=');
 
                        if (key && key === name) {
                                // If second argument (value) is a function it's a converter...
                                result = read(cookie, value);
                                break;
                        }
 
                        // Prevent storing a cookie that we couldn't decode.
                        if (!key && (cookie = read(cookie)) !== undefined) {
                                result[name] = cookie;
                        }
                }
 
                return result;
        };
 
        config.defaults = {};
 
        $.removeCookie = function (key, options) {
                if ($.cookie(key) === undefined) {
                        return false;
                }
 
                // Must not alter options, thus extending a fresh object...
                $.cookie(key, '', $.extend({}, options, { expires: -1 }));
                return !$.cookie(key);
        };
 
}));
     
  $(".button_grid").click(function() {
     $.cookie("switchercookie", "grid");
     $(".prdlist").attr("id","product_list_grid");
  });
  $(".button_list").click(function() {
    $.cookie("switchercookie", "list");
    $(".prdlist").attr("id","product_list");
  });
  $(".button_minilist").click(function() {
    $.cookie("switchercookie", "minilist");
    $(".prdlist").attr("id","product_list_mini");
  });
});
{/literal}
</script>

Thank you in advance.

[glozinski]

It would be greatly appreciated if anyone would be able to explain why the grid does not work using 1.5.6.2  and how to go about troubleshooting it so that it does work.  Thank you in advance.