Detelin Markov Posted February 1, 2013 Share Posted February 1, 2013 Hi, I want to transform my same category design in grid view - 4 columns with bigger picture, little description and "view" button. Try to make it but have a problem with .tpl functions. Can anyone help? That is my progress for now: productcategory.tpl {* * 2007-2012 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 license@prestashop.com 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 <contact@prestashop.com> * @copyright 2007-2012 PrestaShop SA * @version Release: $Revision: 8337 $ * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} {if count($categoryProducts) > 0 && $categoryProducts !== false} <div class="clearfix blockproductscategory"> <h2 class="productscategory_h2">{$categoryProducts|@count} {l s='other products in the same category:' mod='productscategory'}</h2> <div id="productscategory_list"> <ul {if count($categoryProducts) > 4}style="width: {math equation="width * nbImages" width=165 nbImages=$categoryProducts|@count}px"{/if}> {foreach from=$categoryProducts item='categoryProduct' name=categoryProduct} <li {if count($categoryProducts) < 4}style="width:165px"{/if}> <a href="{$link->getProductLink($categoryProduct.id_product, $categoryProduct.link_rewrite, $categoryProduct.category, $categoryProduct.ean13)}" class="lnk_img" title="{$categoryProduct.name|htmlspecialchars}"><img src="{$link->getImageLink($categoryProduct.link_rewrite, $categoryProduct.id_image, 'cplp')}" alt="{$categoryProduct.name|htmlspecialchars}" /></a> <p class="clear"></p><h5><a href="{$link->getProductLink($categoryProduct.id_product, $categoryProduct.link_rewrite, $categoryProduct.category, $categoryProduct.ean13)}" title="{$categoryProduct.name|htmlspecialchars}">{$categoryProduct.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h5> <div class="product_desc">{$product.description_short|strip_tags|truncate:95:'...'}</a></div> <div> <a class="lnk_more" href="{$product.link}" title="{l s='Разгледай' mod='product_list'}">{l s='Разгледай' mod='product_list'}</a> {if $ProdDisplayPrice AND $categoryProduct.show_price == 1 AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE} <p class="price_display"> <span class="price">{convertPrice price=$categoryProduct.displayed_price}</span> </p> {else} <br /> {/if} </li> {/foreach} </ul> </div> <script type="text/javascript"> $('#productscategory_list').trigger('goto', [{$middlePosition}-3]); </script> </div> {/if} productcategory.css h2.productscategory_h2 { margin:40px 0 20px 0; padding:10px 0; border-bottom:1px solid #ccc; font-size:18px; color:#333 } #productscategory { overflow:hidden; width: 757px; float: left } #productscategory_list { float: left; } #productscategory_list ul { list-style-type:none; margin-right:20px width: 757px } #productscategory_list li { float:left; margin-right:20px } #productscategory_list li a.lnk_img { overflow:hidden; position:relative; float: left; display:block; border: 1px solid #fff } #productscategory_list li a img { display: block; vertical-align: bottom } #productscategory_list li h5 { padding: 0em; margin: 0em 10px 5px; font-size:13px; color:#000 } I have bug somewhere because width is 1450... px - need to be 757px Attach two picture. How look now and what i like to be (with comments). Waiting suggestions? Link to comment Share on other sites More sharing options...
PascalVG Posted February 2, 2013 Share Posted February 2, 2013 Did you try to take out the width calculation of the UL? Looks like too wide anyway (9*165 or so,as far as I can see in the pic) and you want to set/override it in css file, so why bother setting it? If you want to set it here, I'd expect a fixed with of 165*4, regardless of amount of products, as you want 4 columns (pus maybe some offset between the 4 pics)? My 2 cents Link to comment Share on other sites More sharing options...
Detelin Markov Posted February 2, 2013 Author Share Posted February 2, 2013 On 2/2/2013 at 4:47 AM, PascalVG said: Did you try to take out the width calculation of the UL? Looks like too wide anyway (9*165 or so,as far as I can see in the pic) and you want to set/override it in css file, so why bother setting it? If you want to set it here, I'd expect a fixed with of 165*4, regardless of amount of products, as you want 4 columns (pus maybe some offset between the 4 pics)? My 2 cents Yes but somewhere i wrong... Make some changes, again and again but not working properly. Suggestions? You can see working code here: http://91.230.192.34/testzone/index.php?id_product=8&controller=product Link to comment Share on other sites More sharing options...
PascalVG Posted February 3, 2013 Share Posted February 3, 2013 (edited) Dodi, The link seems to show a perfectly nice page with 4 columns. Did I misunderstand and is this what you NEED but your real shop cannot do this yet, or is this the non-working file and you fixed it overnight already? Please elaborate... (I checked in Chrome/Mac) Edited February 3, 2013 by PascalVG (see edit history) Link to comment Share on other sites More sharing options...
Detelin Markov Posted February 3, 2013 Author Share Posted February 3, 2013 Hum... i make some changes before 12-14 hours. You may be see perfectly align 4 column grid page but i... don`t. Tested on: Firefox 18.0.1 and Chome Version 25.0.1364.29 I use this site for develop a theme/design for one real shop. This is real working presta 1.5.2 and i dont have problems with another grid changes like home features and product list. i don`t know what version of chrome you use but here you can see site in more browsers: http://browsershots.org/http://91.230.192.34/testzone/index.php?id_product=8&controller=product# - i see here same result like on windows chrome. Link to comment Share on other sites More sharing options...
Detelin Markov Posted February 3, 2013 Author Share Posted February 3, 2013 (edited) And filles with last changes: {* * 2007-2012 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 license@prestashop.com 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 <contact@prestashop.com> * @copyright 2007-2012 PrestaShop SA * @version Release: $Revision: 8337 $ * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) * International Registered Trademark & Property of PrestaShop SA *} {if count($categoryProducts) > 0 && $categoryProducts !== false} <ul id="blockproductscategory" class="clearfix"> <h2 class="productscategory_h2">{$categoryProducts|@count} {l s='модела в същия стил:' mod='productscategory'}</h2> <div id="productscategory_list"> <ul {if count($categoryProducts) > 4}style="width: {math equation="width * nbImages" width=107 nbImages=$categoryProducts|@count}px"{/if}> {foreach from=$categoryProducts item='categoryProduct' name=categoryProduct} <li {if count($categoryProducts) < 0}last_row_item{else}item{/if}> <a href="{$link->getProductLink($categoryProduct.id_product, $categoryProduct.link_rewrite, $categoryProduct.category, $categoryProduct.ean13)}" class="lnk_img" title="{$categoryProduct.name|htmlspecialchars}"><img src="{$link->getImageLink($categoryProduct.link_rewrite, $categoryProduct.id_image, 'cplp')}" alt="{$categoryProduct.name|htmlspecialchars}" /></a> {if isset($categoryproduct.new) && $categoryproduct.new == 1}<span class="new">{l s='Ново'}</span>{/if} <p class="clear"> </p><h5><a href="{$link->getProductLink($categoryProduct.id_product, $categoryProduct.link_rewrite, $categoryProduct.category, $categoryProduct.ean13)}" title="{$categoryProduct.name|htmlspecialchars}">{$categoryProduct.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h5> <div class="product_desc">{$product.description_short|strip_tags|truncate:95:'...'}</a></div> <div> <a class="lnk_more" href="{$product.link}" title="{l s='Разгледай' mod='product_list'}">{l s='Разгледай' mod='product_list'}</a> {if $ProdDisplayPrice AND $categoryProduct.show_price == 1 AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE} <p class="price_display"> <span class="price">{convertPrice price=$categoryProduct.displayed_price}</span> </p> {else} <br /> {/if} </li> {/foreach} </ul> </div> <script type="text/javascript"> $('#productscategory_list').trigger('goto', [{$middlePosition}-3]); </script> {/if} [color=#000000][font=Consolas,] h2.productscategory_h2 {[/font][/color][color=#000000][font=Consolas,] margin:10px 0 10px 0; padding:10px 0; border-bottom:1px solid #ccc; font-size:14px; color:#333 }[/font][/color][color=#000000][font=Consolas,] #productscategory {[color=#C80000]overflow[/color]:[color=#07909A]hidden[/color]}[/font][/color][color=#000000][font=Consolas,] #productscategory_list {[/font][/color][color=#000000][font=Consolas,] [color=#C80000]overflow[/color]: [color=#07909A]hidden[/color];[/font][/color][color=#000000][font=Consolas,] [color=#C80000]float[/color]: [color=#07909A]left[/color];[/font][/color][color=#000000][font=Consolas,] [color=#C80000]width[/color]: [color=#3200FF]757px[/color];[/font][/color][color=#000000][font=Consolas,] }[/font][/color][color=#000000][font=Consolas,] #productscategory_list ul {[/font][/color][color=#000000][font=Consolas,] [color=#C80000]list-style-type[/color]:[color=#07909A]none[/color];[/font][/color][color=#000000][font=Consolas,] [color=#C80000]margin[/color]: [color=#3200FF]0[/color] [color=#3200FF]0[/color] [color=#3200FF]0[/color] [color=#3200FF]0px[/color];[/font][/color][color=#000000][font=Consolas,] }[/font][/color][color=#000000][font=Consolas,] #productscategory_list li {[/font][/color][color=#000000][font=Consolas,] [color=#C80000]float[/color]:[color=#07909A]left[/color];[/font][/color][color=#000000][font=Consolas,] [color=#C80000]margin-right[/color]:[color=#3200FF]20px[/color][/font][/color][color=#000000][font=Consolas,] }[/font][/color][color=#000000][font=Consolas,] #productscategory_list li a.lnk_img {[color=#C80000]display[/color]:[color=#07909A]block[/color]}[/font][/color][color=#000000][font=Consolas,] #productscategory_list li a img {[color=#C80000]border[/color]:[color=#3200FF]1px[/color] [color=#07909A]solid[/color] [color=#07909A]#fff[/color]}[/font][/color][color=#000000][font=Consolas,] #productscategory_list li p.product_name {[color=#C80000]text-align[/color]:[color=#07909A]center[/color]}[/font][/color][color=#000000][font=Consolas,] #productscategory_list li h5 {[/font][/color][color=#000000][font=Consolas,] [color=#C80000]padding[/color]: [color=#3200FF]0em[/color];[/font][/color][color=#000000][font=Consolas,] [color=#C80000]margin[/color]: [color=#3200FF]0em[/color] [color=#3200FF]10px[/color] [color=#3200FF]5px[/color];[/font][/color][color=#000000][font=Consolas,] [color=#C80000]font-size[/color]:[color=#3200FF]13px[/color];[/font][/color][color=#000000][font=Consolas,] [color=#C80000]color[/color]:[color=#07909A]#000[/color][/font][/color][color=#000000][font=Consolas,] }[/font][/color][color=#000000][font=Consolas,] #productscategory_list .lnk_more {[/font][/color][color=#000000][font=Consolas,] [color=#C80000]margin-top[/color]:[color=#3200FF]4px[/color];[/font][/color][color=#000000][font=Consolas,] [color=#C80000]padding[/color]: [color=#3200FF]6px[/color] [color=#3200FF]6px[/color];[/font][/color][color=#000000][font=Consolas,] color:000; font-size:1.1em; } #productscategory_list .lnk_more { display: block; padding: 4px 4px 8px 8px; height: 12px; width: 65px; font: 12px Helvetica,Arial; text-shadow: 0 1px 0 #EEEEEE; border: 1px solid #cdcdcd; background-color: #EEEEEE; margin-right: 4px; float: left; } #productscategory_list li .content_price { margin-top:4px; padding:0; } #productscategory_list .price { display: block; margin-top: 4px; padding: 4px 4px 8px 4px; width: 60px; height: 12px; font: 13px Helvetica,Arial; text-align: right; color: #fff; text-shadow: 0 1px 0 #61A159; border: 1px solid #61A159; background-color: #61A179; float: right; }[/font][/color] Edited February 3, 2013 by dodimarkov (see edit history) Link to comment Share on other sites More sharing options...
fixgear Posted April 5, 2013 Share Posted April 5, 2013 hey dodimarkov. how did you even manage to make the thumbs larger? i cannot get past that. i am confused by the math equation part. you can see one of my pages at http://www.fixgear.info/index.php?id_product=10&controller=product&id_lang=1 . near the bottom where the product footer shows the other products in the category. i just want them to be 200x200pix ana i cannot figure it out thanks!!! jer... Link to comment Share on other sites More sharing options...
Recommended Posts