Créer une liste de produits

La création d'une liste de produits du catalogue dans le contenu est très simple a réaliser avec le widget data catalog.

{widget_catalog_data
        conf =[
            'context'   =>  'product',
            'sort'      => ['order'=>'DESC']
            ]
        assign='productData'
    }
    {if $productData != null}
        <section id="listing-product" class="product-list" itemprop="mainEntity" itemscope itemtype="http://schema.org/ItemList">
            <div class="row">
                <div class="center-gallery">
                    {include file="catalog/loop/product.tpl" data=$productData effect="ming" classCol="col-xs-12 col-sm-6 col-md-4 col-xl-3"}
                </div>
            </div>
        </section>
    {/if}

Vous devez d'abord créer le conteneur de la liste qui affichera les produits.

  Le paramètre "sort" permet de trier vos produits par nom, identifiant ou venant du tri dans l'administration

Les valeurs de tri:

  • id
  • product
  • name

 Nous allons inclure le fichier contenant la boucle des produits.

 Je vous conseil de créer un dossier nommé loop dans le dossier du module courant pour y placer le fichier contenant la boucle

Boucle des produits

{foreach $data as $item}
    {if $classCat && is_bool($classCat)}
        {$classCat =  "thumbcat-{$item.id}"}
    {/if}
    <div{if $classCol} class="{$classCol}{/if}" itemprop="{if $similar}isRelatedTo{else}itemListElement{/if}" itemscope itemtype="http://schema.org/Product">
        <figure class="{if $effect}effect-{$effect} {/if}thumbnail">
            {if $item.imgSrc.medium}
                <img class="img-responsive" src="{$item.imgSrc.medium}" alt="{$item.name|ucfirst}" itemprop="image"/>
            {else}
                <img class="img-responsive" src="{$item.imgSrc.default}" alt="{$item.name|ucfirst}"/>
            {/if}
            <figcaption>
                <h3 itemprop="name">{$item.name|ucfirst}</h3>
                <div itemprop="description" class="desc">
                    {if $item.content}
                        <p>
                            {$item.content|strip_tags|truncate:$truncate:'...'}
                        </p>
                    {/if}
                </div>
                <a itemprop="url" href="{$item.url}" title="{$item.name|ucfirst}">{$item.name|ucfirst}</a>
            </figcaption>
        </figure>
    </div>
{/foreach}

Créer une liste personnalisée avec effet

Pour sélectionner des produits en particulier dans le catalogue et les afficher sous forme de vignettes.

{include file="catalog/loop/product.tpl" data=$productData effect="ming" classCol="col-xs-12 col-sm-6 col-md-4 col-xl-3"}

Boucle des derniers produits

{if !$classCol}
        {$classCol = 'col-xs-12 col-sm-6 col-md-4 col-lg-4'}
    {/if}
    {if is_array($data) && !empty($data)}
        {foreach $data as $item}
            <div{if $classCol} class="{$classCol}{/if}">
                <figure class="effect-{$effect} thumbnail">
                    {if $item.imgSrc.medium}
                        <img class="img-responsive" src="{$item.imgSrc.medium}" alt="{$item.name|ucfirst}"/>
                    {else}
                        <img class="img-responsive" src="{$item.imgSrc.default}" alt="{$item.name|ucfirst}"/>
                    {/if}
                    <figcaption>
                        <h3>{$item.name|ucfirst}</h3>
                        <div class="desc">
                            {if $item.content}
                                <p>
                                    {$item.content|strip_tags|truncate:$truncate:'...'}
                                </p>
                            {/if}
                        </div>
                        <a href="{$item.url}" title="{$item.name|ucfirst}">{$item.name|ucfirst}</a>
                    </figcaption>
                </figure>
            </div>
        {/foreach}
    {/if}

Créer la liste des produits relatifs

  Uniquement dans la fiche d'un produit

Les produits relatifs seront afficher avec la boucle de vos produits sauf dans le cas d'un affichage différent.

 

{widget_catalog_data
                conf =[
                'sort'      => ['order'=>'DESC']
                ]
                assign='productRel'
            }
            {if $productRel != null}
                <section id="similar-products" class="product-list">
                    <h3>{#similar_products#|ucfirst}</h3>
                    <div class="row">
                        <div class="center-gallery-sm-6">
                            {include file="catalog/loop/product.tpl" effect="ming" data=$productRel classCol="col-xs-12 col-sm-3" similar=true}
                        </div>
                    </div>
                </section>
            {/if}
Informations sur : Créer une liste de produits ?