[CONTRIBUTION] Display accessories horizontally just like products lists

[wwwilliam]

Hi everybody !

I would like to display accessories, just like products in a product list.

I have been trying to play with global.css : section "Special style for block products in center column"
But I do not find the way to do it. I Tried to modify the accessories chapter of product.tpl also !

Need a little help !
Hope somebody already acheived this.

Thank you very much.
Added a little view of what I am trying to do.

[wwwilliam]

Well, I found the way to do it !

I have been motivated to do that because my shop shows product blocks "horizontally".
So I had to find a way to be consistent with this, when considering accessories which are displayed vertically in the basic theme.

This applies to v 1.2.5 (I think that the idea can be extended to other versions).

The idea is to bring into the product.tpl, in the "accessories" section (ligne 410 approx)... the same structure that appears in product-list.tpl.

In product.tpl replace :

></pre>
<ul>
</ul>
<div>


                   {foreach from=$accessories item=accessory name=accessories_list}
                       {assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}

{$accessory.name|truncate:22:'...'|escape:'htmlall':'UTF-8'}


getImageLink($accessory.link_rewrite, $accessory.id_image, 'medium')}" alt="{$accessory.legend|escape:'htmlall':'UTF-8'}" />
{$accessory.description_short|strip_tags|truncate:100:'...'}



{displayWtPrice p=$accessory.price}
{l s='View'}
{l s='Add to cart'}


                   {/foreach}


</div>
<br><div></div>

with the following code :

></pre>
<ul>
           <!--</ul>
<div>-->


                   {foreach from=$accessories item=accessory name=accessories_list}
                       {assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}


getImageLink($accessory.link_rewrite, $accessory.id_image, 'home')}" alt="{$accessory.legend|escape:'htmlall':'UTF-8'}" />
{$accessory.name|truncate:100:'...'|escape:'htmlall':'UTF-8'}

{$accessory.description_short|strip_tags|truncate:360:'...'}


{displayWtPrice p=$accessory.price}{" TTC"}
{l s='View'}
{l s='Add to cart'}                            




                   {/foreach}
    
               <!---->
</div>
<br><div></div>

Note : you can just cancel the {" TTC"} from the price display if not needed.

Hope this can help somebody else !
Regards.
wwwilliam

[yesiam]

Change this lines of product.tpl:

{if isset($accessories) AND $accessories}
<!-- accessories -->

• 
  {include file=$tpl_dir./product-list.tpl products=$accessories}
  

{/if}

Best Regards.

[Tuinkoken]

Hello,

 

You need to add "" with the include file. And then replace all the old code for this.

 

{if isset($accessories) AND $accessories}

<!-- accessories -->

• 
  {include file="$tpl_dir./product-list.tpl" products=$accessories}
  

{/if}

 

Kind Regards

[Tuinkoken]

I used the code i pasted underneath and it works almost fine now. The only problem is that the code doesn't include the product-list.css file, so the list is pretty ugly. You can see it o my website http://www.tuinkoken.nl/13-bogracs-kookpan-10l.html (site is in dutch). Can anybody help me with including the css file, so that the accesories list is just as nice as the product-list itself?

 

Thanks in advance

 

 

{if isset($accessories) AND $accessories}

<!-- accessories -->

<ul id="idTab4" class="bullet">

{include file="$tpl_dir./product-list.tpl" products=$accessories}

</ul>

{/if}

[Tuinkoken]

I fixed it by copying the code inside product-list.css and paste it in product.css and it works fine.

[Prostoshoper]

but as this unit to bring in product-list ?