Is there any way to implement the product view as list in a compact way?

[Presta1.5.4.1Newbies]

I am trying to implement the product view as list as the attached example.

either one of the example.

I am using the modified theme and the current product-list.tpl is sharing the same template and I can only add the product description. It is able to switch the view option with the Jquery at the moment.

What else should I edit?

 

 

One more question is how to remove the "out of stock" span by not comment in template or css file since I have planned to activate online order in the future.

 

Prestashop version 1.5.4.1

www.grandcoralaustralia.com.au/Grandcoral

[vekia]

in this case you have to modify the product-list.tpl file located in your theme directory.

you need to change smarty template construction + css styles of it.

 

1) for each <li> object (via css styles) you must use: clear:both; width:100%;

2) it's also necessary to change the picture width and height (in .tpl file)

 

+ float:left / right + other things like display:inline-block; or customization of colors etc.

[vekia]

hope that you're familiar with smarty / css

if not - let me know, i will try to explain it better

[Presta1.5.4.1Newbies]

Hi Vekia, Smarty is what I am trying to understand :-(. As I understand have to create "id" or maybe class for product view as list

by adapting the following line, isn't it?

<li class="ajax_block_product bordercolor{if $smarty.foreach.products.iteration is div by 4} product_list-4{/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'}" /></a>

<div class="center_block bordercolor">

 

This is my current product-list.tpl

 

{if isset($products)}

<!-- try to set default as grid-->

<ul id="product_list" class="bordercolor grid">

{foreach from=$products item=product name=products}

<li class="ajax_block_product bordercolor{if $smarty.foreach.products.iteration is div by 4} product_list-4{/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'}" /></a>

<div class="center_block bordercolor">

<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)}

{if ($product.allow_oosp || $product.quantity > 0)}<span class="availability ">{l s='Available'}

{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}

<span class="">{l s='Product available with different options'}</span>

{else}<span class="">{l s='Out of stock'}</span>{/if}

</span>{/if}

{if isset($product.online_only) && $product.online_only}<span class="online_only ">{l s='Online only!'}</span>{/if}

</div>

<h3><a class="product_lnk" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:45:'...'}</a></h3>

<div class="product_dsc">{$product.description_short|strip_tags:'UTF-8'|truncate:320:'...'}</div>

<a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>

 

</div>

 

<div class="right_block">

{$product->description} <!--add short description on line25 -->

{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 isset($comparator_max_item) && $comparator_max_item && !isset($instant_search)}

<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="checked"{/if} />

<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p>

{/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="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}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>

{else}

<a class="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}", false)} title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>

{/if}

{else}

<span class="exclusive">{l s='Add to cart'}</span>

{/if}

{/if}

<!--move to line 16 <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a> -->

</div>

</li>

{/foreach}

<script>

(function($) {

$(function() {

function createCookie(name,value,days) {

if (days) {

var date = new Date();

date.setTime(date.getTime()+(days*24*60*60*1000));

var expires = "; expires="+date.toGMTString();

}

else var expires = "";

document.cookie = name+"="+value+expires+"; path=/";

}

function readCookie(name) {

var nameEQ = name + "=";

var ca = document.cookie.split(';');

for(var i=0;i < ca.length;i++) {

var c = ca;

while (c.charAt(0)==' ') c = c.substring(1,c.length);

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

}

return null;

}

function eraseCookie(name) {

createCookie(name,"",-1);

}

$('ul.product_view').each(function(i) {

var cookie = readCookie('tabCookie'+i);

if (cookie) $(this).find('li').eq(cookie).addClass('current').siblings().removeClass('current')

.parents('#center_column').find('#product_list').addClass('list').removeClass('grid').eq(cookie).addClass('grid').removeClass('list');

})

$('ul.product_view').delegate('li:not(.current)', 'click', function(i) {

$(this).addClass('current').siblings().removeClass('current')

.parents('#center_column').find('#product_list').removeClass('grid').addClass('list').eq($(this).index()).addClass('grid').removeClass('list')

 

var cookie = readCookie('tabCookie'+i);

if (cookie) $(this).find('#product_list').eq(cookie).removeClass('grid').addClass('list').siblings().removeClass('list')

var ulIndex = $('ul.product_view').index($(this).parents('ul.product_view'));

eraseCookie('tabCookie'+ulIndex);

createCookie('tabCookie'+ulIndex, $(this).index(), 365);

})

})

})(jQuery)

</script>

</ul>

{/if}