Reference blog

Category: templates

  • Prestashop: change to 2 columns product listing for bootstrap theme in mobile

    Additional issue: because it is now 2 columns, and the original one column layout, height is not fixed, sometimes some products require more height, while some are shorter. When split side by side, this causes the grid to be broken if the combo is a tall and short product height.

    Fix: change the min-height in theme’s product-list.css to a value that fits the layout.
    (Product list(Grid) Styles) for @media (min-width: 480px) and (max-width: 767px)
    ul.product_list.grid > li .product-container
    In this case, min-height: 460px;

    Source: https://www.prestashop.com/forums/topic/388342-how-can-i-show-items-in-two-columns-on-mobile/?tab=comments#comment-2144346

    This is what I did and it worked for me.

    In your product-list.tpl file there should be a line like this:

    <li class=”ajax_block_product{if $page_name == ‘index’ || $page_name == ‘product’} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-3{/if}

    for me it was line 49.

    change the col-xs-12 to col-xs-6 instead and it should show up in two columns.

  • Prestashop: remove PayPal logo from right column

    Solution: https://www.prestashop.com/forums/topic/249896-solved-how-do-i-remove-the-paypal-logo-from-my-home-page/?tab=comments#comment-1241457

    open the file:
    (paypal module directory)
    views/templates/hook/column.tpl and remove the content of this file

    And/or: https://www.prestashop.com/forums/topic/255741-solved-how-to-remove-paypal-logo/?tab=comments#comment-2010062

    unhook the PayPal module from the right column on my template. This is in the Modules – Positions.

  • Prestashop: Add tags to the product list

    Source: http://nemops.com/prestashop-product-list-tags/#.XPt5M7hS-Ul

    1) Product.php class (use override)

    Insert code at the last part of public static function getProductProperties($id_lang, $row, Context $context = null)
    /* add product tags to product list */
    $row['tags'] = array();
    $tags = Tag::getProductTags($row['id_product']); //show product tags in listing
    if($tags && isset($tags[$context->language->id])) //show product tags in listing
    $row['tags'] = $tags[$context->language->id]; //show product tags in listing

    2) product-list.tpl (in theme folder)
    <div class="product-tags">{if $product.tags}{foreach from=$product.tags item=tag}<a class="btn bth-default" href="{$product.link|escape:'html':'UTF-8'}" title="{$tag|escape:'html':'UTF-8'}" >{$tag}</a>{/foreach}{/if}</div>

    3) global.js (in theme folder) add this above the product-reference html in 3 views (grid, table, list) it looks for product-tags name in div so make sure that matches in product-list.tpl
    html += '<div class="product-tags">'+$(element).find('.product-tags').html()+'</div>';

    Note: no all products have tags, so may mess up the listing layout. Add a min-height to the product-container to e.g. 500px

  • Prestashop: Remove View Grid/List buttons from Product Listing

    Source: https://www.prestashop.com/forums/topic/337353-remove-view-gridlist-bottons/

    Open themes/yourtheme/product-sort.tpl and find this code:

    <ul class="display hidden-xs">
    <li class="display-title">{l s='View:'}</li>
    <li id="grid"><a rel="nofollow" href="#" title="{l s='Grid'}"><i class="icon-th-large"></i>{l s='Grid'}</a></li>
    <li id="list"><a rel="nofollow" href="#" title="{l s='List'}"><i class="icon-th-list"></i>{l s='List'}</a></li>
</ul>

    Delete it and buttons will gone.

  • Prestashop: Add style number to product page

    Using warehouse theme. When product has combinations, the SKU is shown. I wanted to also show the main product style number for easy reference.
    https://www.prestashop.com/forums/topic/605088-slovedhow-to-show-reference-numbers-on-product-page/?do=findComment&comment=2540332


    {$product->reference|escape:'html':'UTF-8'}

    There are 2 locations to add in ware theme product.tpl