kaygisiz Posted October 8, 2012 Share Posted October 8, 2012 I want to change product list layout style. You see my site product layout in first picture which name is product layout 1. I want to make my site product list style in the second picture which name is product layout 2. I know ı will edit the product_list.tpl in my theme but which code will I change in this product_list.tpl. what will I change? I will wait somebody who know how to edit this. Link to comment Share on other sites More sharing options...
MEG Venture Posted October 8, 2012 Share Posted October 8, 2012 You need to edit the product-list.tpl of your theme. If you can share the related code here, we can modify it for you. Link to comment Share on other sites More sharing options...
kaygisiz Posted October 8, 2012 Author Share Posted October 8, 2012 My product_tpl code is Please help me? {if isset($products)} <!-- Products list --> <ul id="product_list" class="clear"> {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="center_block"> <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a> <h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/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|truncate:360:'...'|strip_tags:'UTF-8'|escape:'htmlall':'UTF-8'}">{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'}</a></p> </div> <div class="right_block"> {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} {if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if} {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} <div> {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'}{else}{l s='Out of stock'}{/if}</span>{/if} </div> {/if} {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 ($product.allow_oosp || $product.quantity > 0) && $product.customizable != 2} <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}" title="{l s='Add to cart'}">{l s='Add to cart'}</a> {else} <span class="exclusive">{l s='Add to cart'}</span> {/if} {/if} <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a> {if isset($comparator_max_item) && $comparator_max_item} <p class="compare"><input type="checkbox" onclick="checkForComparison({$comparator_max_item})" class="comparator" id="comparator_item_{$product.id_product}" value="{$product.id_product}" /> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p> {/if} </div> </li> {/foreach} </ul> <!-- /Products list --> {/if} Link to comment Share on other sites More sharing options...
MEG Venture Posted October 8, 2012 Share Posted October 8, 2012 First disable the compare function by assigning its value to 0 under preferences>products "max items in the comparator" Then please try the below coding by having a backup first {if isset($products)} <!-- Products list --> <ul id="product_list" class="clear"> {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="center_block"> <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a> <h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/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|truncate:360:'...'|strip_tags:'UTF-8'|escape:'htmlall':'UTF-8'}">{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'}</a></p> </div> <div class="right_block"> {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} {if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if} {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} <div> {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} </div> {/if} {if isset($comparator_max_item) && $comparator_max_item} <p class="compare"><input type="checkbox" onclick="checkForComparison({$comparator_max_item})" class="comparator" id="comparator_item_{$product.id_product}" value="{$product.id_product}" /> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p> {/if} </div> </li> {/foreach} </ul> <!-- /Products list --> {/if} Link to comment Share on other sites More sharing options...
kaygisiz Posted October 8, 2012 Author Share Posted October 8, 2012 (edited) First disable the compare function by assigning its value to 0 under preferences>products "max items in the comparator" Then please try the below coding by having a backup first {if isset($products)}<!-- Products list --><ul id="product_list" class="clear">{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="center_block"><a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a><h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/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|truncate:360:'...'|strip_tags:'UTF-8'|escape:'htmlall':'UTF-8'}">{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'}</a></p> </div> <div class="right_block">{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}{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}<div> {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}</div>{/if}{if isset($comparator_max_item) && $comparator_max_item} <p class="compare"><input type="checkbox" onclick="checkForComparison({$comparator_max_item})" class="comparator" id="comparator_item_{$product.id_product}" value="{$product.id_product}" /> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p>{/if} </div> </li>{/foreach}</ul><!-- /Products list -->{/if} I will change the code but it see like the underside picture. I did the same layout but ı do not want to do this layout. I want to do the view of the product is, view button is at the left product name and information is at the center and the price is the left. The code is not make my reguest I will wait for your more differant help to solve this problem Edited October 8, 2012 by kaygisiz (see edit history) Link to comment Share on other sites More sharing options...
MEG Venture Posted October 9, 2012 Share Posted October 9, 2012 Please try this one as well as the css file changes: Product-list.tpl: {* * 2007-2011 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-2011 PrestaShop SA * @version Release: $Revision: 1.4 $ * @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" class="clear"> {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"> <a class="button" style="float:left; margin-right:0.6 em; display: block; vertical-align: bottom; padding-right:10px;" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a> </div> <div class="center_block"> <h3>{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/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|truncate:360:'...'|strip_tags:'UTF-8'|escape:'htmlall':'UTF-8'}">{$product.description_short|truncate:360:'...'|strip_tags:'UTF-8'}</a></p> </div> <div class="right_block"> {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} {if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if} {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} <div> {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} </div> {/if} {if isset($comparator_max_item) && $comparator_max_item} <p class="compare"><input type="checkbox" onclick="checkForComparison({$comparator_max_item})" class="comparator" id="comparator_item_{$product.id_product}" value="{$product.id_product}" /> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p> {/if} </div> </li> {/foreach} </ul> <!-- /Products list --> {/if} Product-list.css: /* product-list.tpl */ ul#product_list { margin-top: 2em; list-style-type: none } ul#product_list li { background: none repeat scroll 0 0 #F7F7F7; border: 1px solid #D0D3D8; clear: both; height: auto; margin-bottom: 0.3em; min-height: 50px; padding: 6px; } * html ul#product_list li { height: auto !important; height: 130px } ul#product_list li a { text-decoration: none; color: #374853 } ul#product_list a.product_img_link { border: solid 1px #d0d3d8; float: left; margin-right: 0.6em } ul#product_list a.product_img_link img { vertical-align: bottom; display: block } ul#product_list li h3 { margin: 0.4em 0 } ul#product_list li .new { background: transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%; border: 1px solid #488C40; color: white; font-size: 0.6em; font-weight: bold; margin: 0 1em 0 0; padding: 0 0.4em; text-transform: uppercase; vertical-align: 0.3em } ul#product_list li p.product_desc { margin-bottom: 0; font-size: 0.92em } ul#product_list li div.center_block { float: left; width: 49% } ul#product_list li div.right_block { float: right; width: 11em; text-align: right; margin-left: 1em; margin-top: 20 } ul#product_list li div.left_block { float: none; vertical-align:middle; width: 11em; text-align: right; margin-left: 1em; margin-top: 20 } ul#product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only { color: #da0f00; text-transform: uppercase; font-weight: bold; display: block } ul#product_list li .reduction { display: block; margin-bottom: 0.3em } ul#product_list li .price { display: block; font-size: 1.5em; margin-bottom: 0.2em } ul#product_list li span.availability { color: #488c40; font-size: 0.9em } ul#product_list li a.button { margin-top: 0.5em } ul#product_list li p.compare input { vertical-align: text-bottom } Link to comment Share on other sites More sharing options...
kaygisiz Posted October 10, 2012 Author Share Posted October 10, 2012 Thank you Cağlar. My site works well. Link to comment Share on other sites More sharing options...
hughwu Posted March 2, 2013 Share Posted March 2, 2013 Me too, thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now