Jump to content

Redesign in grid "same category products" in grid?


Recommended Posts

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?

post-335617-0-08932000-1359712841_thumb.png

post-335617-0-08485300-1359712892_thumb.png

Link to comment
Share on other sites

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

  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

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

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 by dodimarkov (see edit history)
Link to comment
Share on other sites

  • 2 months later...

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

×
×
  • Create New...