Need help with product-list.tpl file

GreddyMR2 · January 6, 2015

Hi there,

I would like to change this template file that product name and price in product list would be centered (the same as with a cursor moved on specific product). I hope you will understand what I mean from the attached photo.

Or should I edit other file (css maybe)?

Also, here is my code:

{include file="$tpl_dir./layout/setting.tpl"}

{if isset($products) && $products}

{*define numbers of product per line in other page for desktop*}

{if isset($class)}

{*only display grid mode when include from other module*}

{assign var="LISTING_GRIG_MODE" value="grid" scope="global"}

{assign var='nbItemsPerLine' value=$LISTING_PRODUCT_COLUMN_MODULE}

{if $LISTING_PRODUCT_COLUMN_MODULE=="5"}

{assign var="colValue" value="col-xs-{12/$LISTING_PRODUCT_MOBILE} col-sm-{12/$LISTING_PRODUCT_TABLET} col-md-2-4 col-sp-12" scope="global"}

{else}

{assign var="colValue" value="col-sp-12 col-xs-{12/$LISTING_PRODUCT_MOBILE} col-sm-{12/$LISTING_PRODUCT_TABLET} col-md-{12/$LISTING_PRODUCT_COLUMN_MODULE}" scope="global"}

{/if}

{else}

{assign var='nbItemsPerLine' value=$LISTING_PRODUCT_COLUMN}

{/if}

{assign var='nbItemsPerLineTablet' value=$LISTING_PRODUCT_TABLET}

{assign var='nbItemsPerLineMobile' value=$LISTING_PRODUCT_MOBILE}

{*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}



<div {if isset($id) && $id} id="{$id}"{/if} class="product_list {$LISTING_GRIG_MODE} 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%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}

<div class="ajax_block_product col-sp-12 {$colValue}{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}">

{include file="$tpl_dir./product-item.tpl" callFromModule=isset($class)}

</div>

{/foreach}

</div>

{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}

Maybe this one (product-item):

{*

************************

Creat by leo themes

*************************

*}

{if !isset($callFromModule) || $callFromModule==0}

{include file="$tpl_dir./layout/setting.tpl"}

{/if}

<div class="product-container product-block" itemscope itemtype="http://schema.org/Product">

<div class="left-block text-center">

<div class="product-image-container image ImageWrapper">

<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}" itemprop="image" />

<span class="product-additional" data-idproduct="{$product.id_product}"></span>

</a>

{if isset($product.new) && $product.new == 1}

<span class="new-box">

<span class="new-label product-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 product-label">{l s='Sale!'}</span>

</span>

{/if}

<div class="group-view Buttons StyleC">

{if isset($quick_view) && $quick_view}

<a class="quick-view status-enable btn btn-outline" href="{$product.link|escape:'html':'UTF-8'}" rel="{$product.link|escape:'html':'UTF-8'}" title="{l s='Quick view'}" >

<i class="fa fa-search-plus"></i>

</a>

{/if}

</div>

</div>

{hook h="displayProductDeliveryTime" product=$product}

{hook h="displayProductPriceBlock" product=$product type="weight"}

</div>

<div class="right-block">

<div class="product-meta">

<h5 itemprop="name" class="name pull-left">

{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>

{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}

<p>(<font size="2" color="grey">{convertPrice price=FrontController::ConvertPrice($product.price,$cookie->id_currency,3)}</font>)</p>

</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 price">

{displayWtPrice p=$product.price_without_reduction}

</span>

{if $product.specific_prices.reduction_type == 'percentage'}

<span class="price-percent-reduction price">-{$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}

<div class="clear"></div>

<p class="product-desc" itemprop="description">

{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}

</p>

{if isset($product.color_list) && $ENABLE_COLOR}

<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 label label-warning">{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 label label-danger">{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)}

<div 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='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}

</div>

{/if}

{/if}

<div class="functional-buttons clearfix">

{if $page_name !='product'}

{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 (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}

{if isset($static_token)}

<div class="cart">

<a class="ajax_add_to_cart_button" 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}">

<i class="icon-add-cart"></i>

<span>{l s='Add to cart'}</span>

</a>

</div>

{else}

<div class="cart">

<a class="ajax_add_to_cart_button" 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}">

<i class="icon-add-cart"></i>

<span>{l s='Add to cart'}</span>

</a>

</div>

{/if}

{else}

<div class="cart">

<span class="ajax_add_to_cart_button disabled" title="{l s='Out of stock'}" >

<i class="icon-add-cart"></i>

<span>{l s='Out of stock'}</span>

</span>

</div>

{/if}

{/if}

{/if}

{if $ENABLE_WISHLIST}

<div class="wishlist">

{hook h='displayProductListFunctionalButtons' product=$product}

</div>

{/if}

{if isset($comparator_max_item) && $comparator_max_item}

<div class="compare">

<a class="add_to_compare status-enable" href="{$product.link|escape:'html':'UTF-8'}" data-id-product="{$product.id_product}" title="{l s='Add to compare'}" >

<span>{l s='+ Compare'}</span>

</a>

</div>

{/if}

</div>

</div>

</div>

</div>

Edited January 6, 2015 by GreddyMR2 (see edit history)

Richard S · January 6, 2015

Just modify CSS file to make this styling. text-align:center should solve it

GreddyMR2 · January 7, 2015

I editted global.css, I managed to center price, but it's still not showing right.

And I couldn't find where to center product name.

I editted this line:

.product-block .content_price {

float: right;

to this:

.product-block .content_price {

float: none;

text-align: center;

In attached photo is what I see.

Edited January 7, 2015 by GreddyMR2 (see edit history)

GreddyMR2 · January 7, 2015

Finally!

I editted this:

product-block .name {

text-transform: none;

line-height: 18px;

margin: 0;

width: 70%;

To this:

product-block .name {

text-transform: none;

line-height: 18px;

margin: 0;

width: 100%;

text-align: center;

All is centered and looks perfect now.

Sign In

Need help with product-list.tpl file

Recommended Posts

GreddyMR2

Link to comment

Share on other sites

Richard S

Link to comment

Share on other sites

GreddyMR2

Link to comment

Share on other sites

GreddyMR2

Link to comment

Share on other sites

Browse

Activity

Go back to prestashop.com