Jump to content
julesfromparis

slider produit - page produit / Structure code (RESOLU)

Recommended Posts

Bonjour, 

 

Dans la page produit je souhaiterai intégrer un slider pour les images produits.

 

Je travaille sur un theme basic responsive sous foundation (thomas peigné) 

 

Voici mon code de remplacement, mais ça ne marche pas : 

<div id ="testslider" class="orbit-container">
  <ul data-orbit class="example-orbit orbit-slides-container">
{if $have_image}
    <li>
      <img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" />
    </li>
 {/if}
  </ul>
</div>

Et voici le script ajouté en bas de page : 

<script type="text/javascript">
  $(window).load(function() {
  $('#testslider').orbit();
  });
</script>
 

Quelqu'un pourrait m'aider svp ? :)

 

Merci. 

 

J.

Edited by julesfromparis (see edit history)

Share this post


Link to post
Share on other sites

Essayé d'entourer votre script comme ceci :

 

{literal}

votre script

{/literal}

Share this post


Link to post
Share on other sites

Merci Szed. 

 

Je pense que le pb de script est régler. 

Par contre mon code smarty ne doit pas être bon... Je n'obtient pas la deuxième image. 

 

Avez vous eu idée ? 

 

Merci. 

 

J.

Share this post


Link to post
Share on other sites

1- votre code js apparait dans le code de la page ?

2- avez vous rajouté {debug} pour être sûre que have_image n'est pas vide par exemple

3- dans un slider en général il y a plusieurs image, combien en avez vous ?

Share this post


Link to post
Share on other sites

Rien dans votre code ne peux afficher une deuxième image.

Il manque une boucle quelque part.

Ou d'autre <li> ... </li> en dur.

Share this post


Link to post
Share on other sites

Bonjour coeos, 

 

1- votre code js apparait dans le code de la page ?

>> Oui, je pense que mon pb de js est réglé. 
2- avez vous rajouté {debug} pour être sûre que have_image n'est pas vide par exemple

>> Non. mais j'ai bien 1 des 2 images qui s'affiche. 

3- dans un slider en général il y a plusieurs image, combien en avez vous ?

2 images. Ce n'est pas le slider général, c'est un slider produit. 

Mais je m'appuis sur le même script que le slider que la page d'accueil : foundation.js...

 

Je pense que mon problème vient de la structure de mon code smarty pour obtenir :

 

 

<div id="prod">
                    <li id="view_full_size">
                   <img produit 01 />
                    </li>
                   <li id="view_full_size">
                   <img produit 02 />
                    </li>
</div>         
               
Merci :)
Edited by julesfromparis (see edit history)

Share this post


Link to post
Share on other sites

@Szed

 

 

Rien dans votre code ne peux afficher une deuxième image.

Il manque une boucle quelque part.

Ou d'autre <li> ... </li> en dur.

 

 

C'est bien cela ma difficulté. 

Je n'arrive pas à trouver la bonne orthographe de code pour obtenir toute les images du produit. 

Avez vous une idée ? 

Share this post


Link to post
Share on other sites

Le soucis c'est que en smarty je nage complètement... 

 

Cela doit ressembler à ça ? : 

      {foreach from=$product item=product}
         <div id="prod" class="{if isset($images) && count($images) > 1}ten columns{/if}">
        {if $have_image}
             
             <li id="view_full_size">
				<img src="{$product.image}" id="bigpic" width="480" height="480" title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product.product->name|escape:html:'UTF-8'}" />
			</li>
			
		{/if}
                       
     {/foreach}

Share this post


Link to post
Share on other sites

à mon avis tu mélanges tout : $product, $have_image... tu sais à quoi ça correspond ?

rajoute ceci dans le code tpl 

 

{debug}

 

 

une popup va s'ouvir regarde ce qu'elle contient

 

le code final ressemblera à

 

 

<div class="orbit-container">
<ul data-orbit class="example-orbit orbit-slides-container">
{foreach from=$images item=image}
<li id="view_full_size">
<img src="{$link->getImageLink($product->link_rewrite, $image.id_image, 'medium_default')|escape:'html':'UTF-8'}"/>
alt="{$product.product->name|escape:html:'UTF-8'}" />
</li>
{/foreach}
 </ul>
</div>

Share this post


Link to post
Share on other sites

J'ai un peu de mal à tout comprendre dans cette fenetre Debug. 

Quels sont les informations pertinentes ? 

 

J'ai essayé votre proposition et différente variante, sans succès : page blanche avec 3 images qui se baladent... :( 

Share this post


Link to post
Share on other sites

Je démarre tout juste sur en smarty et après de nombreuses heures passées sur ce sujet je commence à désespérer. :(

 

Voici le code d'origine pour la partie image produit  : 

   <!-- product img-->
            <div id="image-block" class="{if isset($images) && count($images) > 1}ten columns{/if}">
                {if $have_image}
                    <span id="view_full_size">
                        <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'product_resp')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="480" height="480" />
                    </span>
                {else}
                    <span id="view_full_size">
                        <img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" />
                        <span class="span_link">{l s='View full size'}</span>
                    </span>
                {/if}

L'idée est de modifier cette structure pour obtenir :

<div id="test-slider" class="{if isset($images) && count($images) > 1}ten columns{/if}">
<ul>
<li>img produit 01  </li>
<li>img produit 02  </li>
<li>img produit 03 </li>
</ul>
</div>

Mon script fonctionne lui, fonctionne bien. 

<script type="text/javascript">
  $(window).load(function() {
  $('#testslider').orbit();
  });
</script>

Si quelqu'un peut m'aider à construire ce bout de code, ça serait vraiment super. 

 

Julien

 

 

 

 

Edited by julesfromparis (see edit history)

Share this post


Link to post
Share on other sites

Le code que vous indiquait est celui de la grande image de la fiche produit.

Repérer le code qui gère les vignette, c'est la que vous trouverez la "boucle" dont vous avez besoin :)

Share this post


Link to post
Share on other sites

Je pense que je me rapproche de la solution : 

<div id="prod" class="ten columns">
{foreach from=$images item=image name=thumbnails}


<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'product_resp')}" id="bigpic" width="480" height="480" /> 


{/foreach}
</div>

Le slider fonctionne bien, mais j'ai qu'une seule image qui défile en boucle. 

Alors que j'ai 2 images différentes pour mon produit. 

 

Et même pour un produit avec une seule image, le slider fait défiler la même image. 

 

Ai je oublié quelque chose ?

Edited by julesfromparis (see edit history)

Share this post


Link to post
Share on other sites
<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'product_resp')}" id="bigpic" width="480" height="480" /> 

Cela vous affichera toujours la même image, car le {$link->getImageLink($product->link_rewrite, $cover.id_image, 'product_resp')} vous renverra toujours le lien de l'image de couverture :)

 

Essayez cela.

{foreach from=$images item=image name=thumbnails}
	{assign var=imageIds value="`$product->id`-`$image.id_image`"}
	<img id="bigpic" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'product_resp')|escape:'html'}" width="480" height="480" />
{/foreach}
  • Like 1

Share this post


Link to post
Share on other sites

Génial !! 

Merci 1000 fois pour ton aide  :)  :)  :)

 

Voici le code complet pour intégrer un slider dans la page produit en utilisant : foundation 

<div id="prod" class="ten columns">
{foreach from=$images item=image name=thumbnails}
{assign var=imageIds value="`$product->id`-`$image.id_image`"}
	<img id="bigpic" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'product_resp')|escape:'html'}" width="480" height="480" /> 
{/foreach}
</div>


<script type="text/javascript">
	   $(window).load(function() {
		   $('#prod').orbit();
	   });
	</script>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More