Jump to content

Problem With Product-List.tpl

sekwoja
 Share

Recommended Posts

sekwoja Newbie

sekwoja

Posted
Posted

Hi everyone, 

 

I am new prestashop user, I installed whole stuff a week ago. Since friday everything had been fine, but than when I wanted to modify display of product-list.tpl it turned out that it is harder than it looked in the first place. But let me explain everything from the beginning. 

 

My site: http://rdwtest1.cba.pl/

(yeah I know that this server is really slow, but this is only test-site, I'm gonna change it later). 

My template: Black Hawk

 

So... I wanted to modify product list view (http://rdwtest1.cba.pl/13-lozyska-kulkowe-cx). I started from deleting grid view button and making list view my default. Everything has been fine till this point. When I decided to change column in the middle of the list it turned out that... there is no such column in template file (product-list.tpl). 

 

According to firebut whole list contains three blocks (divs), left block, center block and right block. There is no problem with editing left or right block (these ones are present in procudt-list.tpl). The only problem is with this block in the middle. There is no such a div in product-list.tpl, even though firebug show clearly that there should be. I tried to skim through code in this file, but unfortunalety there is nothing that may be responsible for displaying column (block) in the middle. 

 

My first thought was that there must be a rule that loads from some file this block exactly to this place. But... I don't see anything like that. 

 

I cleared my cache couple of times. What I wanted to achieve is smooth line with pieces of information about the product (price, add to cart, name, etc), without images and any fancy-shmancy stuff. 

 

product-list.tpl:

 

{*
* 2007-2014 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:
* 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-2014 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}
{*define numbers of product per line in other page for desktop*}
{if $page_name !='index' && $page_name !='product'}
{assign var='nbItemsPerLine' value=3}
{assign var='nbItemsPerLineTablet' value=2}
{assign var='nbItemsPerLineMobile' value=3}
{else}
{assign var='nbItemsPerLine' value=4}
{assign var='nbItemsPerLineTablet' value=3}
{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}{if isset($active) && $active == 1} active{/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%perLineT)" total=$smarty.foreach.products.total perLineT=$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{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-4{/if}{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="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, '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}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />
</a>
{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 (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
<div class="content_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}
<span itemprop="price" class="price product-price">
{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
</span>
<meta itemprop="priceCurrency" content="{$priceDisplay}" />
{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
<span class="old-price product-price">
{displayWtPrice p=$product.price_without_reduction}
</span>
{if $product.specific_prices.reduction_type == 'percentage'}
<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
{/if}
{/if}
{/if}
</div>
{/if}
{if isset($product.new) && $product.new == 1}
<span class="new-box">
<span class="new-label">{l s='New'}</span>
</span>
{/if}
{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
<span class="sale-box">
<span class="sale-label">{l s='Sale!'}</span>
</span>
{/if}
</div>
</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" >
{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
</a>
</h5>
{hook h='displayProductListReviews' product=$product}
<p class="product-desc" itemprop="description">
{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
</p>
{if (!$PS_CATALOG_MODE AND ((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 !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
</span>
<meta itemprop="priceCurrency" content="{$priceDisplay}" />
{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
<span class="old-price product-price">
{displayWtPrice p=$product.price_without_reduction}
</span>
{if $product.specific_prices.reduction_type == 'percentage'}
<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
{/if}
{/if}
{/if}
</div>
{/if}
<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) && $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 btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
<span>{l s='Add to cart'}</span>
</a>
{else}
<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, 'add=1&id_product={$product.id_product|intval}', false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product="{$product.id_product|intval}">
<span>{l s='Add to cart'}</span>
</a>
{/if}
{else}
<span class="button ajax_add_to_cart_button btn btn-default disabled">
<span>{l s='Add to cart'}</span>
</span>
{/if}
{/if}
<a itemprop="url" class="button lnk_view btn btn-default" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View'}">
<span>{l s='More'}</span>
</a>
</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}out-of-stock{else}available-now{/if}">
<link itemprop="availability" href="http://schema.org/InStock" />{if $product.quantity <= 0}{if $product.allow_oosp}{$product.available_later}{else}{l s='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='Out of stock'}
</span>
{/if}
</span>
{/if}
{/if}
</div>
{if $page_name != 'index'}
<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}">{l s='Add to Compare'}</a>
</div>
{/if}
</div>
{/if}
</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}

 

{/if}

 

 

Link to comment
Share on other sites
musicmaster Mentor

musicmaster

Posted
Posted

I have no idea what you mean with "block in the middle". product-list-tpl is included in category.tpl (and also search.tpl) to do just one thing: provide the code for the product list in the center column. All other stuff is done by other files.

 

btw: please provide annotated pictures.

Link to comment
Share on other sites
sekwoja Newbie

sekwoja

Posted
  • Author
Posted

Really sorry for being inaccurate.

 

By "column in the middle" I meant middle column in product list. Firebug clearly shows that there are three elements in div named "product-container", which is placed in product-list.tpl (image below). And these elements are: left-block, center-block and right-block. 

 

16azjva.jpg

 

Two of these three divs are in product-list, but I cant find center-block anywhere... It is possible that I look at wrong file and to modify my product list I should alter another file? (btw, currently, I just decided to hide the part of the code I didnt want to be visible by means of display:none). 

Link to comment
Share on other sites
musicmaster Mentor

musicmaster

Posted
Posted

A short text search on "center-block" gives the following fragment from the theme's global.js:

function display(view)
{
  if (view == 'list')
  {
    $('ul.product_list').removeClass('grid').addClass('list row');
    $('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
    $('.product_list > li').each(function(index, element) 
    {
	var html = '';
	html = '<div class="product-container"><div class="row">';
	html += '<div class="left-block col-xs-4 col-sm-5 col-md-4">' + $(element).find('.left-block').html() + '</div>';
	html += '<div class="center-block col-xs-4 col-sm-7 col-md-4">';
	html += '<div class="product-flags">'+ $(element).find('.product-flags').html() + '</div>';
	html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';

So it is swapped in by javascript when you have list view.

  • Like 1
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...