Fiche produit

[PixGeek]

Salut les amis, 

 

J'ai besoin d'aide pour un lifting de ma fiche produits.

 

J'ai tenté de modifier les fichiers : product.js - product.tpl - globall.css

pour que mes miniatures s'affichent a la verticale a gauche de la photo principale.  Voir ici

 

Comme vous pouvez le voir, ça fonctionne pas.

 

Pour mieux vous expliquer, voici ce que j'aimerai avoir.(piece jointe)

 

 

 

Merci d'avance pour votre aide

[Dominique B]

Bonjour,
Dans le fichier product.tpl, vous pourriez déplacer les éléments là où vous le souhaitez (par exemple mettre ce qui concerne les vignettes avant la plus grande image : <div id="thumbs_list">)

<div id="thumbs_list">
                        <ul id="thumbs_list_frame" class="tot">
                        {if isset($images)}
                            {foreach from=$images item=image name=thumbnails}
                                {assign var=imageIds value="`$product->id`-`$image.id_image`"}
                                {if !empty($image.legend)}
                                    {assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
                                {else}
                                    {assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}
                                {/if}
                                <li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
                                    <a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"    data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">
                                        <img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}"{if isset($cartSize)} height="{$cartSize.height}" width="{$cartSize.width}"{/if} itemprop="image" />
                                    </a>
                                </li>
                            {/foreach}
                        {/if}
                        </ul>
                    </div> <!-- end thumbs_list -->
{if isset($images) && count($images) > 0}

à mettre juste après la ligne

<div class="pb-left-column col-xs-12 col-sm-4 col-md-5">

puis adapter les css en fonction. Par exemple :

#thumbs_list {    width: 110px !important;    left: 0px;    position: absolute;}
 

#thumbs_list ul#thumbs_list_frame {
    list-style-type: none;
    padding-left: 0px;
    overflow: hidden;
    height: 450px !important;
    width: 120px !important;
}

et

.pb-left-column #image-block {
    position: relative;
    display: block;
    cursor: pointer;
    padding: 5px;
    border: 1px solid #DBDBDB;
    background: #FFF none repeat scroll 0% 0%;
    margin-left: 120px;
}

De même, il faut régler la taille des colonnes

C'est un peu long mais tout à fait possible
Vous pouvez ainsi avoir les différents élèments là où vous le souhaitez.
En cas de souci, il vaut mieux faire cela sur une "copie" du thème principal : Préférences > Thèmes > Ajouter un thème > créer un nouveau thème.
 
Bon courage

[PixGeek]

Merci beaucoup pour l'aide.
 
Cependant cela ne fonctionne pas.

 

url : http://lifenetwork.ch/ONEshop/index.php?id_product=3&controller=product

 

 

 

 

 

Edited August 27, 2015 by SensualityForAll (see edit history)

[Dominique B]

Effectivement.

Mon exemple partait d'un thème créé à partir du thème standard, votre thème est différent et n'est pas structuré de la même façon.

Il faudrait modifier les éléments à partir de votre fichier product.tpl qui est différent de celui du thème par défaut.

 

Essayez en mettant le div views_block avant le div image-block puis attaquez-vous aux css

 

Cordialement