[SOLVED] CSS Question for Product List

[cjrent]

How do I get the formatting of this to be even? If you see the attached picture...depending on the short description and product name length, the placement of the add to cart button is different. Is it possible to have it always on the bottom right?

 

I think this has to do with either global.css or product_list.css

 

I've also attached those files.

 

The actual site sample is:

http://boojh.x10host...nenka-alexander

global.css

product_list.css

[vekia]

it is possible, in this case you have to define height parameter for the description. it must be enough for short and long descriptions.

 

moreover, i've noticed that in your website (product descriptions) you have got some "empty" enters:

 

can you check description for products? epecially for: http://boojh.x10host...try-Living.html

 

can you for test purposes remove these "emtpy" enters?

 

 

by enter i mean "new line" sign *ENTER*

[cjrent]

I tried to find that in product_list.tpl...but couldn't, let me keep looking. yikes. LOL,

[cjrent]

Completely weird. Those extra <p></p> are random. if you look at

http://boojh.x10host...ategory=33&n=54

It's happening to a piece called Blue Irises

I checked it's description compared to the others, and there is no difference.z

Now I'm wondering if it's because I adjusted the truncate in product_list.tpl from 35 to 128 in order to show the full title?

[cjrent]

nope...that wasn't it. I just changed it back and the same thing still happened.

 

product_list.tpl is below.....maybe a fresh pair of eyes can see where that extra <p></p> is.

 

I did use winmerge to compare the original file to this modified one. To be honest the changes were not big and I didn't see an any empty 'enters'/<p></p>

 

I'm going to keep looking though.

 

 

{*
* 2007-2013 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-2013 PrestaShop SA
*  @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">
{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>
  <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_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}
 {if $product.quantity==0}<img src="http://boojh.x10host.com/ps/themes/cjrtheme/img/Sold-Out-small.png" style="position:absolute; top:0px; right:0px;" />{/if}
</a>
<h5><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:125:'...'}</a></h5>
<p class="product_desc">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|truncate:360:'...'}</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='On Sale!'}</span>{/if}
{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.show_price) && $product.show_price && !isset($restricted_country_mode) && $product.quantity >0}<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=''}{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}
</div>
{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only'}</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 OR $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=1&id_product={$product.id_product|intval}&token={$static_token}", false)}" 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=1&id_product={$product.id_product|intval}", false)}" 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}
  </div>
 </li>
{/foreach}
</ul>
<!-- /Products list -->
{/if}

Edited August 21, 2013 by paditur (see edit history)

[vekia]

i don't know where you check it (you said that in product-list.tpl file), but you problably defined this in the product description, just open product edit page in your back office and check it, i think that you will find it there

[cjrent]

ok i think i figured it out. i compared my current product-list.tpl with the default product-list.tpl and found that

I was missing |strip_tags:'UTF-8'| from the line first line below

 

<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|truncate:360:'...'}</a>

 

When I added it in, it seemed fine.

 

<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a>

[cjrent]

the only problem that will have now in my short descriptions is that it'll all be one line, I can no longer have breaks.

So instead of formatting for a short description looking like this:

13.5" x 11"

Framed: 20.25" x 17.75"

 

It'll now look like this: 13.5" x 11"Framed: 20.25" x 17.75"

[cjrent]

now that the extra enters have been figured out....is it still possible to have the add to cart button always on the bottom right?

[vekia]

so you removed html tags with strip_tags

 

nice idea