Popular Post NemoPS Posted October 3, 2012 Posted October 3, 2012 Hey guys! I just finished a new tutorial on how to change the default product list into a grid, unsing prestashop 1.5's default template. If anybody is interested, here is the link: http://nemops.com/grid-display-prestashop-1-5/ Cheers! 21 Share this post Link to post Share on other sites More sharing options...
pjsc979 Posted October 4, 2012 Posted October 4, 2012 Hi, great post. I was looking for this, it will be great for my shop. Thanks! Share this post Link to post Share on other sites More sharing options...
archproject Posted October 5, 2012 Posted October 5, 2012 good share thanks Share this post Link to post Share on other sites More sharing options...
benjamin utterback Posted October 5, 2012 Posted October 5, 2012 Hello all, thank you Nemo for this contribution. We are trying to clean up the forum and I will PIN tutorials that will certainly help other Merchants for now. 1 Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 5, 2012 Posted October 5, 2012 Thanks benjamin, glad I could help! 1 Share this post Link to post Share on other sites More sharing options...
gen_2000 Posted October 8, 2012 Posted October 8, 2012 Nice a big applaus ! Share this post Link to post Share on other sites More sharing options...
gen_2000 Posted October 8, 2012 Posted October 8, 2012 Thanks benjamin, glad I could help! How can I set to total of products to display in the row for featured products ? Let say now is 4, I want to make it 6 ? Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 8, 2012 Posted October 8, 2012 For featured products? You mean the homefeatured module? it's about the same, you should change the nbitemsperline (or something like this) in the module's TPL Share this post Link to post Share on other sites More sharing options...
gen_2000 Posted October 9, 2012 Posted October 9, 2012 For featured products? You mean the homefeatured module? it's about the same, you should change the nbitemsperline (or something like this) in the module's TPL Yes, is for homfeatured module. I found the nbitemperline var and changed it from 4 to 6 or 2, but it can't reflect after that ? ( I have forced complile ) Cant you please help ? Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 9, 2012 Posted October 9, 2012 Have you tried changng the css too? If i can recall, the width of each single element is also hardcoded there Share this post Link to post Share on other sites More sharing options...
guest* Posted October 10, 2012 Posted October 10, 2012 Great, thanks for the valuable contribution. I will have use of this, cause my 2-column-theme with list-or-grid-switch isnt' working anymore on PS 1.5.X. I prefere too to have a grid instead of a list, specially when you aren't using short-descriptions. Share this post Link to post Share on other sites More sharing options...
catharina Posted October 10, 2012 Posted October 10, 2012 (edited) hi, i've tried using your tutorial step by step: 1. deleting all code in product_list.css 2. change the code in product-list.tpl but the category page become blank..... did i make some mistake??? oh, and i change the column from 3 to 2...it works but when i click on the product, the product still display its original width but the description below it already stretch out. any code should modified for this? below is the screenshot it also happen on the front page at the slide show Edited October 10, 2012 by catharina (see edit history) Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 10, 2012 Posted October 10, 2012 Hi, Try to force recompiling, maybe its just that. For the product page, you'll have to go to css/product.css and edit pb_right_column and pb_left_column ( If i can recall correctly) and stretch them to the full size. Also, if the page is totally blank, maybe there's some little typo in the code, turn on errors and see what happens Fabio Share this post Link to post Share on other sites More sharing options...
catharina Posted October 10, 2012 Posted October 10, 2012 Hi Fabio, i've rechecked all the code and force compiling. i've noticed that there's a little bit differences between the code on the step by step screen and the code on the final source screen. so i decided to follow the code on the final source but the page is still blank. i'm totally lost...... Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 10, 2012 Posted October 10, 2012 Weird! But is it totally blank? Can you link it? Share this post Link to post Share on other sites More sharing options...
catharina Posted October 11, 2012 Posted October 11, 2012 (edited) i'll give you my website.... it's totally blank on the category www.fancygiftmart.com Edited October 11, 2012 by catharina (see edit history) Share this post Link to post Share on other sites More sharing options...
mic84 Posted October 12, 2012 Posted October 12, 2012 hello, thanks for tutorial Michel Share this post Link to post Share on other sites More sharing options...
innocuous Posted October 13, 2012 Posted October 13, 2012 Hi, I noticed that if the title text is long, it shows trailing dots (Folio...) How can we show the full text? Wrap it to 2-3 lines? Thanks Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 13, 2012 Posted October 13, 2012 Hi, to which "title" are you exactly referring to? The product name? if so, increase or remove the value after "|truncate" in the product name part (h3). At the moment it's set to 26 Cheers! Fabio Share this post Link to post Share on other sites More sharing options...
innocuous Posted October 15, 2012 Posted October 15, 2012 Hi, If the product is on sale, how can we show the discount in % next to the "on sale" text? Thanks Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 15, 2012 Posted October 15, 2012 Here: {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} Share this post Link to post Share on other sites More sharing options...
innocuous Posted October 15, 2012 Posted October 15, 2012 Hi, the code is same as in your tutorial. It doesn't show discount %. In product.tpl the following code is used to display % reduction (I think!) <p id="reduction_percent" {if !$product->specificPrice OR $product->specificPrice.reduction_type != 'percentage'} style="display:none;"{/if}><span id="reduction_percent_display">{if $product->specificPrice AND $product->specificPrice.reduction_type == 'percentage'}-{$product->specificPrice.reduction*100}%{/if}</span></p> I tried adding to your code but it doesn't work Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 15, 2012 Posted October 15, 2012 Right. Sorry, i misread what you wrote. I don't have time to go and check out right now, but I think it will be enough to convert the product object to array, so that $product->specificPrice will be $product.specificPrice Again, I'm not sure, you should check variable names, since they might change. Fabio Share this post Link to post Share on other sites More sharing options...
innocuous Posted October 15, 2012 Posted October 15, 2012 You mean I should add the following to your code? <p id="reduction_percent" {if !$product.specificPrice OR $product.specificPrice.reduction_type != 'percentage'} style="display:none;"{/if}><span id="reduction_percent_display">{if $product.specificPrice AND $product.specificPrice.reduction_type == 'percentage'}-{$product.specificPrice.reduction*100}%{/if}</span></p> It doesn't work. Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 15, 2012 Posted October 15, 2012 As i said i don't remember if the variables you need are assigned in the category pages (and how they're named). You can try to print a debug of each product and check for the reduction like this {$product|@debug_print_var} Share this post Link to post Share on other sites More sharing options...
innocuous Posted October 16, 2012 Posted October 16, 2012 Thanks Nemo1! I'll try and see if I can solve. Newbie coder so don't know how far I'll get. Share this post Link to post Share on other sites More sharing options...
the_el_man Posted October 17, 2012 Posted October 17, 2012 Hi Nemo, I have used your tutorial to get it so it just shows just an image. However I am having a few problems. I cannot rezise the image, and I also have an uneven grey borders around the image to the bottom and right. I have made it to do 5 images wide as I am using full page width. Any ideas where I have messed up? Here is an image of the problem. http://imgur.com/jjCDK Its the extended grey bits (I have added Yellow dashes) Thanks Share this post Link to post Share on other sites More sharing options...
gen_2000 Posted October 18, 2012 Posted October 18, 2012 Hi Guys, This is what I did. Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 18, 2012 Posted October 18, 2012 Hi Nemo, I have used your tutorial to get it so it just shows just an image. However I am having a few problems. I cannot rezise the image, and I also have an uneven grey borders around the image to the bottom and right. I have made it to do 5 images wide as I am using full page width. Any ideas where I have messed up? Here is an image of the problem. http://imgur.com/jjCDK Its the extended grey bits (I have added Yellow dashes) Thanks To change the image size, you should switch to another type of image (which you can se in back office) {$link->getImageLink($product.link_rewrite, $product.id_image, 'home')} "Home" to something else. In this case, remove the width/height, otherwise the image will still retain its dimensions. You can hardcode them, of course. OR You can change the size for the home image type For the border, you will need to change the css Fabio Share this post Link to post Share on other sites More sharing options...
the_el_man Posted October 18, 2012 Posted October 18, 2012 (edited) To change the image size, you should switch to another type of image (which you can se in back office) {$link->getImageLink($product.link_rewrite, $product.id_image, 'home')} "Home" to something else. In this case, remove the width/height, otherwise the image will still retain its dimensions. You can hardcode them, of course. OR You can change the size for the home image type For the border, you will need to change the css Fabio Thanks for the reply. I hav e changed the image size of home before but it does not change the size of what you see on the category page (125x125 roughly). If you go "view image" it views it at what I changed it to (250x250), which is the un squashed image size. Regarding the CSS, I figured it was this, however it seems like there is a double up somewhere of the padding, related to the margin. As you change the margin-right and bottom it increases/decreases the padding, as well as the margin. I have tried iwth firebug but cannot find out why this is. Any ideas what line the img is getting its properties from? Thanks for your time EDIT: I have just noticed that an additional set of image sizes which appeared after trying a template has been affecting the images even though they are unticked. This fix the issue., The CSS is not fixed but as I increased the size it looked correct for me. The issue is more masked than fixed if anyone else had a similar problem to me Edited October 18, 2012 by the_el_man (see edit history) Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 18, 2012 Posted October 18, 2012 Hi, can you please make me an example of this "double up"? Share this post Link to post Share on other sites More sharing options...
Samantha57820 Posted October 19, 2012 Posted October 19, 2012 Hi, I copied the tutorial and everything works fine except my product images do not show in the category. So, I downloaded your project files and copied from there and still no good. I did force compilation. Any advice? The link is http://boite-a-savon.com/shop/index.php?id_category=3&controller=category&id_lang=1 Also, is there an easy way to keep the left column on the other pages except the category page (home, product, etc.) Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 19, 2012 Posted October 19, 2012 Are you using 1.5.1? If so, change the image type from "home" to "home_default". It should fix it For the left column, you can try somethig like {if $page_name == 'category'} etc... Fabio Share this post Link to post Share on other sites More sharing options...
innocuous Posted October 19, 2012 Posted October 19, 2012 How can we change subcategories displayed on Category page to grid view too? Here is CSS for default theme PS1.5.1 -------------------------------------------------- /* ************************************************************************************************ SUB CATEGORIES ************************************************************************************************ */ #subcategories {margin-top:15px} #subcategories h3 { padding:14px 12px; font-size:13px; color:#fff; text-transform:uppercase; text-shadow:0 1px 0 #666; background:url(../img/bg_table_th.png) repeat-x 0 0 #999 } .inline_list { list-style-type:none; margin-top:10px; } .inline_list li { padding:10px 0; border-bottom:1px dotted #ccc } .inline_list li .img { float:left; margin-right:15px } .inline_list li img { border:1px solid #ccc } .inline_list li .cat_name { font-weight:bold; font-size:13px } Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 19, 2012 Posted October 19, 2012 (edited) Try changing this: .inline_list li { padding:10px 0; border-bottom:1px dotted #ccc } To: .inline_list li { float:left; margin-right: 10px; width: /* THE WIDTH YOU WaNT*/ padding:10px 0; border-bottom:1px dotted #ccc } Then, to avoid the container being collapsed, add class="clearfix" to the containing ul Hope this helps Fabio Edited October 19, 2012 by Nemo1 (see edit history) 2 Share this post Link to post Share on other sites More sharing options...
Samantha57820 Posted October 19, 2012 Posted October 19, 2012 Are you using 1.5.1? If so, change the image type from "home" to "home_default". It should fix it For the left column, you can try somethig like {if $page_name == 'category'} etc... Fabio Thanks! that fixed the images. Where would I put the {if $page_name == 'category'} to keep the left column on the other pages? What line #? Share this post Link to post Share on other sites More sharing options...
innocuous Posted October 19, 2012 Posted October 19, 2012 Try changing this: .inline_list li { padding:10px 0; border-bottom:1px dotted #ccc } To: .inline_list li { float:left; margin-right: 10px; width: /* THE WIDTH YOU WaNT*/ padding:10px 0; border-bottom:1px dotted #ccc } Then, to avoid the container being collapsed, add class="clearfix" to the containing ul Hope this helps Fabio You are the man! Thanks once again! Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 19, 2012 Posted October 19, 2012 Thanks! that fixed the images. Where would I put the {if $page_name == 'category'} to keep the left column on the other pages? What line #? Can't check right now, but it's right before <div id="left_column"> in header.tpl You are the man! Thanks once again! Glad it helped! Share this post Link to post Share on other sites More sharing options...
redtango2 Posted October 20, 2012 Posted October 20, 2012 Hello, i try the change but in category i have not return image this is my product_list where is the mistake ? Thanks for a reply ul#product_list { list-style-type: none } #product_list li { text-align: center; float: left; width: 142px; padding: 16px; margin-bottom: 14px; margin-right: 20px; background-color: #f9f9f9 } #product_list li.last_row_item {margin-right: 0;} #product_list li a { color: #374853; text-decoration: none } #product_list a.product_img_link { overflow:hidden; position:relative; float: left; display:block; border: 1px solid #ccc } #product_list a.product_img_link img { display: block; vertical-align: bottom } #product_list li span.new { display: block; position: absolute; top: 15px; right:-30px; padding: 1px 4px; width: 101px; font-size:10px; color: #fff; text-align: center; text-transform: uppercase; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform:rotate(45deg); -ms-transform: rotate(45deg); background-color: #990000 } #product_list li h3 { padding:0 0 10px 0; font-size:13px; color:#000 } #product_list li p.product_desc { overflow: hidden; padding:0; line-height:16px; } #product_list li p.product_desc, #product_list li p.product_desc a { color:#666; } #product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only { display: block; font-weight: bold; margin: 5px 0; padding: 1px 5px; color: #990000; text-transform: uppercase } #product_list li .discount { display: inline-block; font-size: 10px; color: #fff; background: none repeat scroll 0 0 #9B0000 } #product_list li .content_price { width: 142px; float: left; } #product_list li .price { display: block; padding-bottom: 15px; font-weight:bold; font-size: 16px; color:#990000 } #product_list li span.availability { display:none; /* remove to show availability */ color: #488C40 } #product_list li .ajax_add_to_cart_button { padding-left: 20px } #product_list li .ajax_add_to_cart_button span { display: block; position: absolute; top: -1px; left: -12px; height: 26px; width: 26px; background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent } #product_list li p.compare {padding-bottom: 0;margin-top: 10px;} Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 20, 2012 Posted October 20, 2012 See my psot here http://www.prestashop.com/forums/index.php?/topic/192005-free-tutorial-change-the-default-list-display-to-a-grid-15/page__view__findpost__p__970706 Share this post Link to post Share on other sites More sharing options...
redtango2 Posted October 20, 2012 Posted October 20, 2012 I try it again (product-list.tpl was not good) and i win with your experience Many thanks have a good day Best regard Share this post Link to post Share on other sites More sharing options...
Samantha57820 Posted October 20, 2012 Posted October 20, 2012 Can't check right now, but it's right before <div id="left_column"> in header.tpl Ok when I put {if $page_name == 'category'} <div id="left_column" class="column grid_2 alpha"> {$HOOK_LEFT_COLUMN} </div> I get a server error page. When I put <!-- Left --> {if $page_name == 'category'} {*<div id="left_column" class="column grid_2 alpha"> {$HOOK_LEFT_COLUMN} </div>*} I get a server error page So,what am I doing wrong? Also, DW is saying there is a syntax error in this line var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals}; Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 20, 2012 Posted October 20, 2012 (edited) You're leaving off the closing if You have to add {/if} where you want to close the if statement. In your case, right after the end of the left column div Edited October 20, 2012 by Nemo1 (see edit history) 1 Share this post Link to post Share on other sites More sharing options...
Samantha57820 Posted October 21, 2012 Posted October 21, 2012 You're leaving off the closing if You have to add {/if} where you want to close the if statement. In your case, right after the end of the left column div Ok that worked but now My index page and product page is all off alignment. http://boite-a-savon.com/shop/index.php & http://boite-a-savon.com/shop/index.php?id_product=7&controller=product&id_lang=1 I tried changing the left and right widths in the product.css as you mentioned before but nothing changes on any pages. How can I fix this? Thanks!! Share this post Link to post Share on other sites More sharing options...
NemoPS Posted October 21, 2012 Posted October 21, 2012 You have to add grid values to the center and right, according to what has been removed. In this case, call the center one "grid_7 alpha" as a class. Fabio Share this post Link to post Share on other sites More sharing options...
gen_2000 Posted October 22, 2012 Posted October 22, 2012 See my psot here http://www.prestasho...post__p__970706 How can I make the top menu or footer to full width or 100% of the page size? Currently the menu or footer are set to centered width of the page content. Please refer to attached for sample. Thanks. Share this post Link to post Share on other sites More sharing options...
Bejo Posted October 31, 2012 Posted October 31, 2012 Thank for nice share! It's valuable Share this post Link to post Share on other sites More sharing options...
bepped Posted November 5, 2012 Posted November 5, 2012 Hello, nice post. I was wondering how it would be possible to show the manufacturers_list as a grid, this way: http://www.menlook.com/fr/marques-mode-homme (Prestashop website) or this way http://www.asos.com/it/Men/A-To-Z-Of-Brands/Cat/pgehtml.aspx?cid=1361&via=top&xr=1&mk=VOID&r=3 I guess it should be simple, but i'm not yet very accustomed to smarty Share this post Link to post Share on other sites More sharing options...
NemoPS Posted November 5, 2012 Posted November 5, 2012 Hi Bepped, That's a bit complex, especially the alphabetic fashion. If you don't care of the letters, you can use about the same method, by floating each list item to the left and giving them a fixed size that fits into the center column. It's a bit too comlplex to explain the whole thing in a single post, maybe I'll make a tut about the alphabetic sorting! Fabio Share this post Link to post Share on other sites More sharing options...
bepped Posted November 5, 2012 Posted November 5, 2012 Thanks, i understand the alphabetic fashion would be complex. I would like to have the brands listed in a grid like the products in your tutorial. I guess i have to change the manufacturers_list.tpl and global.css, using same method you showed about products Share this post Link to post Share on other sites More sharing options...
NemoPS Posted November 5, 2012 Posted November 5, 2012 The css is probably stored in manufacturer.css (not that I'm sure of it though!) Share this post Link to post Share on other sites More sharing options...
TurtlePie Posted November 16, 2012 Posted November 16, 2012 I try it, but doesn't seems work with prestashop 1.5.2 I copy and replace tpl and css file. the result like this... Share this post Link to post Share on other sites More sharing options...
NemoPS Posted November 16, 2012 Posted November 16, 2012 Hi, You're definitely missing something, perhaps the "last item of the line" thing that removes the fourth item's margin, since that's the only thing i can think about that may cause the last element of the line to be pulled down. Or, maybe, you don't have enough space Share this post Link to post Share on other sites More sharing options...
deroseforniture Posted November 21, 2012 Posted November 21, 2012 This work with prestashop 1.4.9.0? Share this post Link to post Share on other sites More sharing options...
NemoPS Posted November 21, 2012 Posted November 21, 2012 Not just by copying/pasting i suppose. It's created with 1.5, so you'll have to have a closer look at what you do, but it can give you a hand indeed Share this post Link to post Share on other sites More sharing options...
deroseforniture Posted November 22, 2012 Posted November 22, 2012 Thank you! I need a help! This is my product-list.tpl: {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"> <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> <div class="center_block"> <div class="product_flags"> {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/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'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}{if isset($product.online_only) && $product.online_only} ({l s='Online only!'}){/if}</span>{/if} </div> <h3><a class="product_link" 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 class="product_descr" 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:270:'...'|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 (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))} {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>{/if} {/if} {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)} <a class="exclusive ajax_add_to_cart_button" 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 checkbox"><input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked{/if}/> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p> {/if} </div> </li> {/foreach} </ul> <!-- /Products list --> {/if} Share this post Link to post Share on other sites More sharing options...
kip Posted December 19, 2012 Posted December 19, 2012 thanks.. going to try it Share this post Link to post Share on other sites More sharing options...
AntWale Posted December 24, 2012 Posted December 24, 2012 Great tutorial, explained in a very easy way to understand. Makes my site look way more professional. Thanks Nemo. Share this post Link to post Share on other sites More sharing options...
malcek Posted January 7, 2013 Posted January 7, 2013 <p>a littel bit of playing around with design </p> <p> </p> <p> </p> <div>/* ************************************************************************************************</div> <div> SUB CATEGORIES</div> <div>************************************************************************************************ */</div> <div>#subcategories {margin-top:5px}</div> <div>#subcategories h3 {</div> <div>padding:14px 12px;</div> <div>font-size:13px;</div> <div>color: #C00;</div> <div>text-transform:uppercase;</div> <div>text-shadow:0 1px 0 #666;</div> <div>background:url(../img/bg_table_th.png) repeat-x 0 0 #999</div> <div>}</div> <div> </div> <div>.inline_list {</div> <div>list-style-type: none;</div> <div>margin-top:10px;</div> <div>}</div> <div>.inline_list li {</div> <div>width: 100px;</div> <div>height: 110px;</div> <div>float:left;</div> <div>margin: 10px;</div> <div>padding:5px 0;</div> <div>border:1px solid #ccc;</div> <div>-moz-border-radius: 3px;</div> <div>-webkit-border-radius: 3px;</div> <div>border-radius: 3px;</div> <div>text-align:center;</div> <div>}</div> <div>.inline_list li:hover { background-color: #999;</div> <div>}</div> <div>}</div> <div>.inline_list li .img {</div> <div>float:left;</div> <div>margin-right:15px</div> <div>}</div> <div>.inline_list li img {</div> <div>border:none</div> <div>}</div> <div>.inline_list li .cat_name {</div> <div>font-weight:bold;</div> <div>font-size:13px</div> <div>}</div> <div> </div> Share this post Link to post Share on other sites More sharing options...
letrof Posted January 8, 2013 Posted January 8, 2013 Try changing this: .inline_list li { padding:10px 0; border-bottom:1px dotted #ccc } To: .inline_list li { float:left; margin-right: 10px; width: /* THE WIDTH YOU WaNT*/ padding:10px 0; border-bottom:1px dotted #ccc } Then, to avoid the container being collapsed, add class="clearfix" to the containing ul Hope this helps Fabio I did this but it didn't work well: My category.css is: .inline_list li { float:left; margin-right: 10px; width: 40px; padding:10px 0; border-bottom:1px dotted #ccc and my category tpl: <h3>{l s='Subcategories'}</h3> <ul class="clearfix"> {foreach from=$subcategories item=subcategory} <li class="clearfix"> <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img"> {if $subcategory.id_image} <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" /> {else} <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" /> {/if} </a> <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a> {if $subcategory.description} <p class="cat_desc">{$subcategory.description}</p> {/if} </li> {/foreach} Any ideas why it looks messy? Share this post Link to post Share on other sites More sharing options...
NemoPS Posted January 8, 2013 Posted January 8, 2013 (edited) Add the class "inline_list" to the subcategories ul Edited January 8, 2013 by Nemo1 (see edit history) Share this post Link to post Share on other sites More sharing options...
letrof Posted January 9, 2013 Posted January 9, 2013 I've changed the <ul class="clearfix"> to <ul class="inline_list"> but now the description falls down. Can you help? Share this post Link to post Share on other sites More sharing options...
NemoPS Posted January 9, 2013 Posted January 9, 2013 (edited) No, I you have to ADD it, not replace it <ul class="clearfix inline_list"> Edited January 9, 2013 by Nemo1 (see edit history) Share this post Link to post Share on other sites More sharing options...
letrof Posted January 9, 2013 Posted January 9, 2013 No, I you have to ADD it, not replace it <ul class="clearfix inline_list"> still no luck Share this post Link to post Share on other sites More sharing options...
NemoPS Posted January 9, 2013 Posted January 9, 2013 Can you show me the page? Share this post Link to post Share on other sites More sharing options...
letrof Posted January 9, 2013 Posted January 9, 2013 Can you show me the page? sure thing it's http://mebleprowansalskie.com Share this post Link to post Share on other sites More sharing options...
NemoPS Posted January 9, 2013 Posted January 9, 2013 Uhm, Actually I can see them correctly, you just set the width to a far too small amount, increase it and they'll be okay Share this post Link to post Share on other sites More sharing options...
sempersweetheart Posted January 14, 2013 Posted January 14, 2013 Hi there, great tutorial! I seem to be having a problem with the main thumbnail not loading now, any ideas? Share this post Link to post Share on other sites More sharing options...
NemoPS Posted January 14, 2013 Posted January 14, 2013 be sure you name them like "nameoftheimage_default", with the "_default" suffix Share this post Link to post Share on other sites More sharing options...
letrof Posted January 15, 2013 Posted January 15, 2013 Uhm, Actually I can see them correctly, you just set the width to a far too small amount, increase it and they'll be okay You were right! I've changed it and now it's ok, thank you! Three things still driving me crazy: In subcategories there is that annoying margin right next to the last item in a row, can't figure where to get rid of it... On main page I want to display 5 products instead of four so I changed {if $smarty.foreach.products.iteration%4 == 0}last_row_item to {if $smarty.foreach.products.iteration%5 == 0}last_row_item but nothing happened. Force compile is on. The other issue is that I have no add to cart button visible... Thanks in advance:) Share this post Link to post Share on other sites More sharing options...
Ariadne Posted January 25, 2013 Posted January 25, 2013 (edited) Hi! Got this tutorial working brilliantly for most pages..(sorted out one issue - needed to lower truncation limit as one of the products was throwing it out) Subcategories in http://www.painefree...s-stitch-charts doesn't work very well - the tiling is different for both top two and bottom 2 categories. my product_list.tpl *} {if isset($products)} <!-- Products list --> <ul id="product_list" class="clearfix"> {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.iteration%4 == 0}last_row_item{else}item{/if}"> <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_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /> {if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if} </a> <p class="clear"></p> <h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:40:'...':true}</a></h3> <div class="content_price"> {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'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if} {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> {else} <span style="height:16px; margin: 5px 0; display: block"></span> {/if} {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 exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a> {else} <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", true)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a> {/if} {else} <span class="exclusive"><span></span>{l s='Add to cart'}</span><br /> {/if} {/if} {if isset($comparator_max_item) && $comparator_max_item} <p class="compare"> <input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} /> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label> </p> {/if} </div> </li> {/foreach} </ul> <!-- /Products list --> {/if} my subcategory section in "category.tpl" <!-- Subcategories --> <div id="subcategories"> <h3>{l s='Subcategories'}</h3> <ul class="clearfix inline_list"> {foreach from=$subcategories item=subcategory} <li class="clearfix"> <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img"> {if $subcategory.id_image} <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" /> {else} <img src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" /> {/if} </a> <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a> {if $subcategory.description} <p class="cat_desc">{$subcategory.description}</p> {/if} </li> {/foreach} </ul> <br class="clear"/> </div> {/if} and category.css shows: .inline_list li { float:left; margin-right: 10px; width: 200; padding:10px 0; border-bottom:1px dotted #ccc any ideas? I really would appreciate the help, as it is *almost* right and looking a lot better than the default list view. Edited January 25, 2013 by Ariadne (see edit history) Share this post Link to post Share on other sites More sharing options...
charliehaha Posted January 26, 2013 Posted January 26, 2013 (edited) Ariadne, you had saved me... The tutorial did not work for me, but i what i did was copying your code then it worked Edited January 26, 2013 by charliehaha (see edit history) Share this post Link to post Share on other sites More sharing options...
Ariadne Posted January 28, 2013 Posted January 28, 2013 great Charlie Subcategories are still looking weird for me though, I was hoping someone would be able to help :/ Share this post Link to post Share on other sites More sharing options...
Detelin Markov Posted January 28, 2013 Posted January 28, 2013 Hallo people. I want to adding little description, view button and price in my grid pages - how to make that? Please help my with basic code how to add this thing. I can make final adjustments. My shop: http://bijutaniki.com/ Category page in my shop: http://bijutaniki.com/24-damski-prysteni 2 pictures 1. My home featured page - i wont to make category list page be like home featured page in my shop. LINK 2. How look my category page now - almost no changes from the nemos code. LINK 2. Final result that i want in category page. LINK my productlist.tpl and my product_list.css Regards. Dodi Markov Share this post Link to post Share on other sites More sharing options...
qoeme Posted February 4, 2013 Posted February 4, 2013 time saver dude....tx Share this post Link to post Share on other sites More sharing options...
kangaroobaby Posted February 7, 2013 Posted February 7, 2013 Thanks so much for this great tutorial. I would like to know is, is it possible to keep both left column and right column and have 3 or 4 items listed next to each other in the middle? Which is similar to Home Featured Products? Could you give me some idea on how to do that? Or still to follow your guide and where to make some changes to get the result? I am running on 1.5.3.1. Really appreacite your help and time. Share this post Link to post Share on other sites More sharing options...
Recommended Posts