[SOLVED] Producten niet goed uitgelijnd op categoriepagina

lildaan · September 25, 2012

Ik heb de categoriepagina wat aangepast, zodat er vier producten naast elkaar komen, met totaal 20 producten op 1 pagina.

Echter worden de producten in sommige gevallen niet goed uitgelijnd.Op de pagina http://www.lildaan.n...p?id_category=5 gaat het goed, maar op bijv http://www.lildaan.n...?id_category=10 komen er eerst drie rijen van vier producten en daarna opeens een rij met maar een product. daarna weer vier producten en daarna twee. Als ik bij deze pagina aangeef dat ik 10 producten per pagina wil gaat het wel goed, maar dan verdwijnt de paginering en zie ik dus niet alle producten.

Dit is de code van product-list.tpl:

{assign var='liHeight' value=250}
{assign var='nbItemsPerLine' value=4}
{assign var='nbLi' value=$products|@count}
{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
{math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}

{if isset($products)}
<!-- Products list -->
<ul id="product_list" class="clear" style="height:{$ulHeight}px;">
{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{else}item{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - ($smarty.foreach.products.total % $nbItemsPerLine))}last_line{/if}">
  <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} />
			{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}</a>
<h3><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>
{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
<div class="content_price">
			  {if ((isset($product.on_sale) && $product.on_sale) || (isset($product.reduction) && $product.reduction)) && $product.price_without_reduction > $product.price && $product.show_price AND !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
			   <span class="old_price_productlist">
					  {convertPrice price=$product.price_without_reduction}</span>
			  {else}
			  {/if}
 {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}
  </div>					
 </li>
{/foreach}
</ul>
<!-- /Products list -->
{/if}
<br />

En dit van nbr-product-page.tpl:

{if isset($p) AND $p}
{if isset($smarty.get.id_category) && $smarty.get.id_category && isset($category)}
 {assign var='requestPage' value=$link->getPaginationLink('category', $category, false, false, true, false)}
 {assign var='requestNb' value=$link->getPaginationLink('category', $category, true, false, false, true)}
{elseif isset($smarty.get.id_manufacturer) && $smarty.get.id_manufacturer && isset($manufacturer)}
 {assign var='requestPage' value=$link->getPaginationLink('manufacturer', $manufacturer, false, false, true, false)}
 {assign var='requestNb' value=$link->getPaginationLink('manufacturer', $manufacturer, true, false, false, true)}
{elseif isset($smarty.get.id_supplier) && $smarty.get.id_supplier && isset($supplier)}
 {assign var='requestPage' value=$link->getPaginationLink('supplier', $supplier, false, false, true, false)}
 {assign var='requestNb' value=$link->getPaginationLink('supplier', $supplier, true, false, false, true)}
{else}
 {assign var='requestPage' value=$link->getPaginationLink(false, false, false, false, true, false)}
 {assign var='requestNb' value=$link->getPaginationLink(false, false, true, false, false, true)}
{/if}
<!-- nbr product/page -->
{if $nb_products > 10}
 <form action="{if !is_array($requestNb)}{$requestNb}{else}{$requestNb.requestUrl}{/if}" method="get" id="nbrItemPage" class="pagination">
  <p>
{if isset($search_query) AND $search_query}<input type="hidden" name="search_query" value="{$search_query|escape:'htmlall':'UTF-8'}" />{/if}
{if isset($tag) AND $tag AND !is_array($tag)}<input type="hidden" name="tag" value="{$tag|escape:'htmlall':'UTF-8'}" />{/if}
<label for="nb_item">{l s=''}</label>
<select name="n" id="nb_item" onchange="document.getElementById('nbrItemPage').submit();">
{assign var="lastnValue" value="0"}
{foreach from=$nArray item=nValue}
 {if $lastnValue <= $nb_products}
  <option value="{$nValue|escape:'htmlall':'UTF-8'}" {if $n == $nValue}selected="selected"{/if}>{$nValue|escape:'htmlall':'UTF-8'}</option>
 {/if}
 {assign var="lastnValue" value=$nValue}
{/foreach}
</select>
<span>{l s='producten per pagina'}</span>
{if is_array($requestNb)}
 {foreach from=$requestNb item=requestValue key=requestKey}
  {if $requestKey != 'requestUrl'}
   <input type="hidden" name="{$requestKey|escape:'htmlall':'UTF-8'}" value="{$requestValue|escape:'htmlall':'UTF-8'}" />
  {/if}
 {/foreach}
{/if}
  </p>
 </form>
{/if}
<!-- /nbr product/page -->
{/if}

Hopelijk kan iemand me helpen. Als er nog andere code oid nodig is hoor ik het graag!

Edited April 24, 2013 by lildaan (see edit history)

Frens · September 25, 2012

Ik heb dit ook eens gehad,,weet het niet meer en verder krijg ik firebug niet open op je website

Als je 100 producten per pagina aangeeft wat dan (nu 4 of 10)

lildaan · September 25, 2012

Nee, met 100 gaat het ook mis op de jeans-pagina... heel raar, maakt niet uit welk aantal ik neerzet. De shirts-pagina gaat wel goed, bij volgens mij elk aantal producten per pagina.

Firebug doet het bij mij inderdaad ook niet meer sinds kort, dacht dat het aan mijn laptop lag eigenlijk. Gebruik nu gewoon Chrome zelf (rechtermuisknop / element inspecteren), maar geen idee waarom Firebug het ook niet meer doet...

Jammer dat je niet meer weet wat je veranderd hebt!

scorpionsworld · September 25, 2012

Probeer eens het volgende:

Wijzig regel 28 van product_list.css

van:

#product_list li .center_block {


float: left;
margin-left: 30px;
padding: 0 7px;
width: 137px;
}

naar:



#product_list li .center_block {


float: left;
margin-left: 30px;
padding: 0 7px;
width: 132px;
}

Getest middels firebug werkt deze breedte namelijk wel. Na herinstallatie van Firebug werkte deze bij mij wel.

Edited September 25, 2012 by scorpionsworld (see edit history)

lildaan · September 25, 2012

Bedankt het werkt! Nu staat alles goed onder elkaar... thanks!

scorpionsworld · September 25, 2012

Bedankt het werkt! Nu staat alles goed onder elkaar... thanks!

Graag gedaan

lildaan · October 2, 2012

Het lijkt toch niet goed te gaan. Op de jeans-pagina (http://www.lildaan.nl/prestashop/category.php?id_category=10) staan nu (als je 20 producten per pagina kiest) eerst drie rijen van 4 producten, dan staat er opeens 1 product op een rij en dan weer vier.

Als je tien producten per pagina kiest staan ze wel goed, maar dan is onderaan de pagina de paginering weg. Iemand een idee hoe ik gewoon 20 producten netjes op een pagina krijg, met steeds vier producten naast elkaar?

Frens · October 2, 2012

Probeer toch een wat met de width:

132px;

te spelen

zoals als eerder aangegeven

lildaan · October 24, 2012

De breedte veranderen heb ik geprobeerd, maar dat lijkt het toch niet te zijn. Wat me wel opvalt is dat de uitlijning mis loopt als er een product met een lange naam staat.

De meeste namen van de producten passen op 1 regel, maar sommige niet, die hebben twee regels nodig. Het lijt er op dat het na die producten met lange namen mis gaat.

Nu heb ik geprobeerd de hoogte te veranderen, maar het lijkt er op dat de hoogte die ik aangeef helemaal niet gebruikt wordt, of in ieder geval zie ik geen verandering als ik de hoogte verhoog met bijv 200 px.

Ik heb nu in product-list.tpl het volgende staan:

{assign var='liHeight' value=350}
{assign var='nbItemsPerLine' value=4}
{assign var='nbLi' value=$products|@count}
{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
{math equation="nbLines*liHeight" nbLines=$nbLines|ceil liHeight=$liHeight assign=ulHeight}

Maar als ik die hoogte aanpas worden de blokken niet hoger. Wellicht ligt het daar aan? Dat deze code niet helemaal klopt?

In product-list.css zie ik nergens een hoogte staan, alleen deze:

 ul#product_list li span.old_price_productlist {
   font-size: 12px;
   text-decoration:line-through;
color:#F00;
   height: 12px;
}


ul#product_list li span.old_price_productlist {
   font-size: 12px;
   text-decoration:line-through;
color:#F00;
   height: 12px;
}


#product_list li p.product_desc {
overflow: hidden;
padding:0;
line-height:16px;
}

Maar aan deze codes ligt het volgens mij ook niet.

Hopelijk heeft iemand nog een oplossing! Alvast bedankt.

Frens · October 24, 2012

Gooi die hoogtes er eens uit /* height: 12px; */

de hoogte wordt in de regel bepaald door de hoeveelheid tekst en de breedte van het parent element

scorpionsworld · October 24, 2012

Kijk 's naar de breedte van de afbeeldingen en de ingestelde breedte van de #product_list li .center_block regel in de css.

afbeelding is 142 pixels terwijl de div-layer beperkt word naar 132 oid.

Probeer eens het volgende:

verander in product.css de regel met #product_list li .center_block eens in

#product_list li .center_block {


float: left;
height: 260px;
margin-left: 20px;
padding: 0 5px;
width: 150px;
}

lildaan · October 24, 2012

Hij is nu helemaal goed, bedankt! Ik heb alle hoogtes weggehaald, alleen het volgende staat nu nog in de CSS (qua height):

#product_list li .center_block {
  float: left;
padding: 0 7px;
margin-left:30px;
  width: 137px;/* 356 */
  height:260px;
}

Bedankt!

scorpionsworld · October 24, 2012

Hij is nu helemaal goed, bedankt! Ik heb alle hoogtes weggehaald, alleen het volgende staat nu nog in de CSS (qua height):
#product_list li .center_block {
  float: left;
padding: 0 7px;
margin-left:30px;
  width: 137px;/* 356 */
  height:260px;
}
Bedankt!

Toch vreemd. ik heb de bovenstaande padding, margin-left en width getest in combinatie met de vaste hoogte getest met Firebug en dan bleef de uitlijning fout gaan. Pas nadat ik deze 3 items ook nog had aangepast werkte het wel.

Hoe dan ook, blij dat het opgelost is

lildaan · January 2, 2013

Er gaat toch nog iets mis... ik heb nu de laatste aanpassingen van Scorpionsworld ook doorgevoerd, maar er gaat nu nog wel iets mis met de paginering onderaan, ik denk dat dat ook met de css van de productlist te maken heeft.

Als er onderaan de categoriepagina gewoon vier producten staan gaat het goed, dan staat de paginering gewoon onderaan in het midden, zie bijv http://lildaan.nl/prestashop/category.php?id_category=10#/

Maar als je bijv 50 producten per pagina kiest en er daardoor maar twee producten onderaan de pagina staan dan komt de paginering rechts te staan in Chrome, naast de twee onderste producten. Zie bijv http://lildaan.nl/prestashop/category.php?id_category=10#/ In IE staat de paginering wel in het midden maar loopt hij door de producten heen.

Weet iemand wat ik hiervoor nog moet aanpassen?

lildaan · April 24, 2013

Dit is opgelost, door clear both toe te voegen....

[SOLVED] Producten niet goed uitgelijnd op categoriepagina

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in