Jump to content

Change the Number of Images Displayed on product-list.tpl

Austra02

By Austra02
in Core developers

 Share

Recommended Posts

Austra02 Newbie

Austra02

Posted
Posted

Hello,

I've got a product that has Combinations and a total of 28 images. Problem is that on the parent category page (and when viewing in List View), ALL 28 images are displaying in one long column and this makes the category page look really bad, as the images run way down the page. Please see: https://glindawand.com.au/36-divinity-foundation-by-glindawand and change the page to List View. The first product on the page is what I'm talking about.

Is there a way to set the number of images displayed on Category pages to only 6 images for ALL products? I'm assuming this would be done on the product-list.tpl page?

Any help would be greatly appreciated.

Cheers,
Scott.

Link to comment
Share on other sites
Austra02 Newbie

Austra02

Posted
  • Author
Posted
10 minutes ago, Knowband Plugins said:

Hi,

 

This feature is not available in the PS default theme. Kindly share your theme product-list.tpl to provide suggestions.

Thanks. Yes, I realised it wasn't a default feature and would probably need some modification to the tpl file. I've pasted it below.

Thanks in advance if you can provide any suggestions.

Cheers,
Scott.

 

{if isset($products) && $products}
    
    {*define number of products per line in other page for desktop*}
    {if $page_name !='category'}
        {if ($hide_left_column || $hide_right_column) && ($hide_left_column !='true' || $hide_right_column !='true')}     {* left or right column *}
            {assign var='nbItemsPerLine' value=3}
            {assign var='nbItemsPerLineTablet' value=2}
            {assign var='nbItemsPerLineMobile' value=2}
        {elseif ($hide_left_column && $hide_right_column) && ($hide_left_column =='true' && $hide_right_column =='true')} {* no columns *}
            {assign var='nbItemsPerLine' value=4}
            {assign var='nbItemsPerLineTablet' value=3}
            {assign var='nbItemsPerLineMobile' value=2}
        {else}                                                                                                              {* left and right column *}
            {assign var='nbItemsPerLine' value=2}
            {assign var='nbItemsPerLineTablet' value=1}
            {assign var='nbItemsPerLineMobile' value=2}
        {/if}
    {else}                                                                                                                  {* category page *}
        {assign var='nbItemsPerLine' value=3}
        {assign var='nbItemsPerLineTablet' value=2}
        {assign var='nbItemsPerLineMobile' value=2}
    {/if}
    {*define numbers of product per line in other page for tablet*}
    
    {assign var='nbLi' value=$products|@count}
    {math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
    {math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}
    
    <!-- Products list -->
    <ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}">
        {foreach from=$products item=product name=products}
            {math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}
            {math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}
            {math equation="(total%perLineM)" total=$smarty.foreach.products.total perLineM=$nbItemsPerLineMobile assign=totModuloMobile}
            {if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
            {if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}
            {if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}
            <li class="ajax_block_product col-xs-12 col-sm-{12/$nbItemsPerLineTablet} col-md-{12/$nbItemsPerLine}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">
                <div class="product-container" itemscope itemtype="http://schema.org/Product"><div class="productInner">
                    <div class="left-block">
                        <div class="product-image-container">
                            <a class="product_img_link"    href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url">
                                <img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'tm_home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" itemprop="image" />
                                {hook h="displayProductListImages" product=$product}
                            </a>
                            {hook h='displayProductListGallery' product=$product}
                            {if isset($quick_view) && $quick_view}
                            <a class="quick-view" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}">
                                <span>{l s='Quick view'}</span>
                            </a>
                            {/if}
                            {if isset($product.new) && $product.new == 1}
                                <a class="new-box {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} with_sale{/if}" href="{$product.link|escape:'html':'UTF-8'}">
                                    <span class="new-label">{l s='New'}</span>
                                </a>
                            {/if}
                            {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                                <a class="sale-box" href="{$product.link|escape:'html':'UTF-8'}">
                                    <span class="sale-label">{l s='Sale!'}</span>
                                </a>
                            {/if}
                            {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                            <div class="content_price_2">
                                {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
                                    {if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
                                        {if $product.specific_prices.reduction_type == 'percentage'}
                                            <span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
                                        {/if}
                                    {/if}
                                {/if}
                            </div>
                            {/if}
                        </div>
                        {hook h="displayProductDeliveryTime" product=$product}
                        {hook h="displayProductPriceBlock" product=$product type="weight"}
                    </div>
                    <div class="right-block">
                        <h5 itemprop="name">
                            {if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
                            <a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
                                <span class="list-name">{$product.name|truncate:100:'...'|escape:'html':'UTF-8'}</span>
                                <span class="grid-name">{$product.name|truncate:30:'...'|escape:'html':'UTF-8'}</span>
                            </a>
                        </h5>
                        <p class="product-desc" itemprop="description">
                            <span class="list-desc">{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</span>
                            <span class="grid-desc">{$product.description_short|strip_tags:'UTF-8'|truncate:40:'...'}</span>
                        </p>
                        {if (!$PS_CATALOG_MODE && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_price">
                            {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
                                <span itemprop="price" class="price product-price{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0} product-price-new{/if}">
                                    {if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
                                </span>
                                <meta itemprop="priceCurrency" content="{$currency->iso_code}" />
                                {if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
                                    {hook h="displayProductPriceBlock" product=$product type="old_price"}
                                    <span class="old-price product-price">
                                        {displayWtPrice p=$product.price_without_reduction}
                                    </span>
                                    {hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"}
                                    {if $product.specific_prices.reduction_type == 'percentage'}
                                        <span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
                                    {/if}
                                {/if}
                                {hook h="displayProductPriceBlock" product=$product type="price"}
                                {hook h="displayProductPriceBlock" product=$product type="unit_price"}
                            {/if}
                        </div>
                        {/if}
                        {hook h='displayProductListReviews' product=$product}
                        <div class="button-container">
                            {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
                                {if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
                                    {capture}add=1&amp;id_product={$product.id_product|intval}{if isset($static_token)}&amp;token={$static_token}{/if}{/capture}
                                    <a class="ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity > 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
                                        <span>{l s='Add to cart'}</span>
                                    </a>                    
                                {else}
                                    <span class="ajax_add_to_cart_button btn btn-default disabled">
                                        <span>{l s='Add to cart'}</span>
                                    </span>
                                {/if}
                            {/if}
                        </div>
                        {if isset($product.color_list)}
                            <div class="color-list-container">{$product.color_list}</div>
                        {/if}
                        <div class="product-flags">
                            {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                                {if isset($product.online_only) && $product.online_only}
                                    <span class="online_only">{l s='Online only'}</span>
                                {/if}
                            {/if}
                            {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
                                {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 (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
                            {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}
                                <span itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="availability">
                                    {if ($product.allow_oosp || $product.quantity > 0)}
                                        <span class="{if $product.quantity <= 0 && !$product.allow_oosp}out-of-stock{else}available-now{/if}">
                                            <link itemprop="availability" href="http://schema.org/InStock" />{if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Currently Out of Stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if}
                                        </span>
                                    {elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}
                                        <span class="available-dif">
                                            <link itemprop="availability" href="http://schema.org/LimitedAvailability" />{l s='Product available with different options'}
                                        </span>
                                    {else}
                                        <span class="out-of-stock">
                                            <link itemprop="availability" href="http://schema.org/OutOfStock" />{l s='Currently Out of Stock'}
                                        </span>
                                    {/if}
                                </span>
                            {/if}
                        {/if}
                        <div class="functional-buttons clearfix">
                            {hook h='displayProductListFunctionalButtons' product=$product}
                            {if isset($comparator_max_item) && $comparator_max_item}
                                <div class="compare">
                                    <a class="add_to_compare" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}" title="{l s='Add to Compare'}"><span>{l s='Add to Compare'}</span></a>
                                </div>
                            {/if}
                            <div class="moreBox {if (isset($product.customization_required) && $product.customization_required)}customize{/if}">
                                <a itemprop="url" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='More Information'}">{l s='More Info'}
                                    <span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div></div><!-- .product-container> -->
            </li>
        {/foreach}
    </ul>
{addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}
{addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}
{addJsDef comparator_max_item=$comparator_max_item}
{addJsDef comparedProductsIds=$compared_products}
{addJsDef nbItemsPerLine=$nbItemsPerLine}
{addJsDef nbItemsPerLineTablet=$nbItemsPerLineTablet}
{addJsDef nbItemsPerLineMobile=$nbItemsPerLineMobile}
{/if}

Link to comment
Share on other sites
Knowband Plugins Mentor

Knowband Plugins

Posted
Posted

It's coming through "displayProductListGallery" hook. This hook is being called in this page & some other files have implemented this hook.  So need to check the modules which are using this module.

To check the same, Go to Admin -> Modules & Services -> Positions & then search displayProductListGallery. I think it will display some module name. 

Need to check the code this module to limit the images.

 

 

Link to comment
Share on other sites
Austra02 Newbie

Austra02

Posted
  • Author
Posted (edited)
8 minutes ago, Knowband Plugins said:

It's coming through "displayProductListGallery" hook. This hook is being called in this page & some other files have implemented this hook.  So need to check the modules which are using this module.

To check the same, Go to Admin -> Modules & Services -> Positions & then search displayProductListGallery. I think it will display some module name. 

Need to check the code this module to limit the images.

 

 

Okay, that makes sense. The only module that is using that hook is the TM Product List Gallery v1.0.0 - by Template Monster (which makes sense given it's a Template Monster theme).
That module has no configuration options (see screen capture below) however, and the product-list.tpl I posted above is that theme's tpl file.

image.thumb.png.c6541c9f0d07d2b055c090f31cdbf0de.png

Also, there is no module called by that name. The only module I have in that theme's modules is: blockcategories

Thanks for the help and any other thoughts on how to limit the number of images on that tpl file, for each product?

Cheers,
S.

Edited by Austra02 (see edit history)
Link to comment
Share on other sites
Austra02 Newbie

Austra02

Posted
  • Author
Posted
5 minutes ago, Austra02 said:

Okay, that makes sense. The only module that is using that hook is the TM Product List Gallery v1.0.0 - by Template Monster (which makes sense given it's a Template Monster theme).
That module has no configuration options (see screen capture below) however, and the product-list.tpl I posted above is that theme's tpl file.

image.thumb.png.c6541c9f0d07d2b055c090f31cdbf0de.png

Also, there is no module called by that name. The only module I have in that theme's modules is: blockcategories

Thanks for the help and any other thoughts on how to limit the number of images on that tpl file, for each product?

Cheers,
S.

I did find this in the default Modules folder: tmproductlistgallery.tpl

This contains the following code (think this is getting close?):

{if count($product_images) > 1}
    <ul class="gallery-thumb-list">
        {foreach from=$product_images item=image name=image}
            {assign var=imageId value="`$product.id_product`-`$image.id_image`"}
            {if !empty($image.legend)}
                {assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
            {else}
                {assign var=imageTitle value=$product.name}
            {/if}
            <li id="thumb-{$product.id_product}-{$image.id_image}" class="gallery-image-thumb{if $image.cover == 1} active{/if}">
                <a href="{$product.link|escape:'html':'UTF-8'}" title="{$imageTitle}" data-href="{$link->getImageLink($product.link_rewrite, $imageId, 'tm_home_default')|escape:'html':'UTF-8'}">
                    <img class="img-responsive" id="thumb-{$image.id_image}" src="{$link->getImageLink($product.link_rewrite, $imageId, 'tm_cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" itemprop="image" />
                </a>
            </li>
        {/foreach}
    </ul>
{/if}

 

Cheers,
Scott.

Link to comment
Share on other sites
Austra02 Newbie

Austra02

Posted
  • Author
Posted
6 minutes ago, Knowband Plugins said:

Without checking the code the module, It will not possible to provide any suggestion.

Kindly go the module folder & share the main file (.php, most probably file name will be similar to the module name)
 

Thanks for all your help. Here is the same named .php file:

 

<?php

if (!defined('_PS_VERSION_'))
    exit;

class Tmproductlistgallery extends Module
{

    public function __construct()
    {
        $this->name = 'tmproductlistgallery';
        $this->tab = 'front_office_features';
        $this->version = '1.0.0';
        $this->author = 'Template Monster (Alexander Grosul)';

        $this->bootstrap = true;

        parent::__construct();

        $this->displayName = $this->l('TM Product List Gallery');
        $this->description = $this->l('Show all images of product on product listing');

        $this->ps_versions_compliancy = array('min' => '1.6', 'max' => _PS_VERSION_);
    }

    public function install()
    {
        return parent::install() &&
            $this->registerHook('header') &&
            $this->registerHook('displayProductListGallery');
    }

    public function uninstall()
    {
        return parent::uninstall();
    }

    public function hookHeader()
    {
        $this->context->controller->addJS($this->_path.'/js/front.js');
        $this->context->controller->addCSS($this->_path.'/css/front.css');
    }

    public function hookDisplayProductListGallery($params)
    {
        $product = new Product($params['product']['id_product']);
        $this->smarty->assign(array(
            'product_images' => $product->getImages($this->context->language->id),
            'product' => $params['product'],
        ));
        return $this->display(__FILE__, 'views/templates/hooks/tmproductlistgallery.tpl');
    }
}

 

Cheers,
Scott.

Link to comment
Share on other sites
Knowband Plugins Mentor

Knowband Plugins

Posted
Posted

One core file changes might be required to fix the issue easily (otherwise have to make changes through override & that's will be complex)

Edit the classes/Product.php &  add the following function at the bottom of the page (Just before the closing braces) 

public function getImagesLimited($id_lang, Context $context = null, $limit = 6)
    {
        return Db::getInstance()->executeS('
			SELECT image_shop.`cover`, i.`id_image`, il.`legend`, i.`position`
			FROM `'._DB_PREFIX_.'image` i
			'.Shop::addSqlAssociation('image', 'i').'
			LEFT JOIN `'._DB_PREFIX_.'image_lang` il ON (i.`id_image` = il.`id_image` AND il.`id_lang` = '.(int)$id_lang.')
			WHERE i.`id_product` = '.(int)$this->id.' LIMIT '.$limit.'
			ORDER BY `position`'
        );
    }

 

File after modification:

image.thumb.png.ec9d79ae52de0d61c830858cfbf71e45.png

 

& In the gallery module file (Sample code which you have shared), make the following change.

Replace  

 'product_images' => $product->getImages($this->context->language->id),

to 

 'product_images' => $product->getImagesLimited($this->context->language->id),

 

Hope it will help :)

Link to comment
Share on other sites
Austra02 Newbie

Austra02

Posted
  • Author
Posted
8 hours ago, Knowband Plugins said:

One core file changes might be required to fix the issue easily (otherwise have to make changes through override & that's will be complex)

Edit the classes/Product.php &  add the following function at the bottom of the page (Just before the closing braces) 


public function getImagesLimited($id_lang, Context $context = null, $limit = 6)
    {
        return Db::getInstance()->executeS('
			SELECT image_shop.`cover`, i.`id_image`, il.`legend`, i.`position`
			FROM `'._DB_PREFIX_.'image` i
			'.Shop::addSqlAssociation('image', 'i').'
			LEFT JOIN `'._DB_PREFIX_.'image_lang` il ON (i.`id_image` = il.`id_image` AND il.`id_lang` = '.(int)$id_lang.')
			WHERE i.`id_product` = '.(int)$this->id.' LIMIT '.$limit.'
			ORDER BY `position`'
        );
    }

 

File after modification:

image.thumb.png.ec9d79ae52de0d61c830858cfbf71e45.png

 

& In the gallery module file (Sample code which you have shared), make the following change.

Replace  


 'product_images' => $product->getImages($this->context->language->id),

to 


 'product_images' => $product->getImagesLimited($this->context->language->id),

 

Hope it will help :)

Thank you SO much for all your help! REALLY appreciate the assistance and awesome help.

I'll implement this today and let you know how it goes.

Thanks again,
Scott..

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...