Jump to content

slider produit - page produit / Structure code (RESOLU)

julesfromparis
 Share

Recommended Posts

julesfromparis Newbie

julesfromparis

Posted
Posted (edited)

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)
Link to comment
Share on other sites
julesfromparis Newbie

julesfromparis

Posted
  • Author
Posted (edited)

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)
Link to comment
Share on other sites
julesfromparis Newbie

julesfromparis

Posted
  • Author
Posted

@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 ? 

Link to comment
Share on other sites
julesfromparis Newbie

julesfromparis

Posted
  • Author
Posted

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}
Link to comment
Share on other sites
coeos.pro Collaborator

coeos.pro

Posted
Posted

à 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>
Link to comment
Share on other sites
julesfromparis Newbie

julesfromparis

Posted
  • Author
Posted (edited)

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)
Link to comment
Share on other sites
julesfromparis Newbie

julesfromparis

Posted
  • Author
Posted (edited)

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)
Link to comment
Share on other sites
Szed Newbie

Szed

Posted
Posted 
<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
Link to comment
Share on other sites
julesfromparis Newbie

julesfromparis

Posted
  • Author
Posted

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>
Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...