Créer une galerie images dans un produit

La création d'une galerie images dans un produit du catalogue dans le contenu est très simple a réaliser avec le widget data catalog.

  Uniquement dans la fiche d'un produit

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

Exemple avec une galerie simple

{widget_catalog_data
    conf =[
    'context'   =>  'product-gallery',
    'sort'      => ['order'=>'DESC']
    ]
    assign='galeryProductData'
}
<h3>{#gallery#|ucfirst}</h3>
<div class="row">
   <div class="gallery">
   {include file="catalog/loop/gallery.tpl" data=$galeryProductData classCol="col-xs-6 col-sm-4 col-md-3"}
   </div>
</div>

Exemple avec une galerie plus complexe

{widget_catalog_data
    conf =[
    'context'   =>  'product-gallery',
    'sort'      => ['order'=>'DESC']
    ]
    assign='galeryProductData'
}
{if $galeryProductData != null}
    <section id="gallery">
        <div class="image-gallery">
            <div class="big-image">
                <a id="default" class="img-gallery" href="{$product.imgSrc.large}" rel="productGallery" title="{$product.name}" itemprop="image" 
                itemscope itemtype="http://schema.org/ImageObject">
                    <meta itemprop="contentUrl" content="{$product.imgSrc.large}" />
                    <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
                        <img itemprop="image" class="img-responsive" src="{$product.imgSrc.small}" alt="{$product.name|ucfirst}" itemprop="contentUrl"/>
                    </span>
                </a>
                {foreach $galeryProductData as $k => $item}
                <a id="img{$k}" class="img-gallery" href="{$item.imgSrc.medium}" rel="productGallery" title="{$product.name}" itemprop="image" 
                itemscope itemtype="http://schema.org/ImageObject">
                    <meta itemprop="contentUrl" content="{$item.imgSrc.medium}" />
                    <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
                        <img itemprop="image" class="img-responsive"  src="{$item.imgSrc.small}" alt="{$product.name|ucfirst}" itemprop="contentUrl"/>
                    </span>
                </a>
                {/foreach}
            </div>

            <div class="thumbs smooth-gallery">
                <a class="button prev"><span class="fa fa-angle-left"></span></a>
                <a class="button next"><span class="fa fa-angle-right"></span></a>
                <ul class="list-unstyled">
                    <li>
                        <a class="show-img" href="#" data-target="#default">
                            <img class="img-responsive" src="{$product.imgSrc.small}" alt="{$product.name|ucfirst}"/>
                        </a>
                    </li>
                    {foreach $galeryProductData as $k => $item}
                    <li>
                        <a class="show-img" href="#"  data-target="#img{$k}" rel="productGallery">
                            <img class="img-responsive" src="{$item.imgSrc.small}" alt="{$product.name|ucfirst}"/>
                        </a>
                    </li>
                    {/foreach}
                </ul>
            </div>
        </div>
    </section>
{else}
    <figure{if $product.imgSrc.medium} itemprop="image" itemscope itemtype="http://schema.org/ImageObject"{/if}>
        {if $product.imgSrc.medium}
            <meta itemprop="contentUrl" content="{$product.imgSrc.large}" />
            <a href="{$product.imgSrc.large}" class="img-zoom" title="{$product.name}" itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
                <img src="{$product.imgSrc.medium}" alt="{$product.name}" class="img-responsive" itemprop="contentUrl"/>
            </a>
        {else}
            <img class="img-responsive" src="/skin/{template}/img/catalog/product-default.png" alt="{$product.name}" />
        {/if}
    </figure>
{/if}
Informations sur : Créer une galerie images dans un produit ?