Variables têtes de gondole

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Lorsque vous créez des modèles de têtes de gondoles, vous disposez de variables dynamiques qui vous permettent de positionner les éléments de chaque article qui constituera votre tête de gondole : les codes DYN

Liste des codes DYN

Codes DYN Correspondance
*article-Nom* Nom de l'article
*article-Nom_avec_lien_fiche_produit* Nom de l'article avec lien vers fiche article
*article-Prix* Prix de l'article. Si pour l'article choisi, le prix est masqué, alors le texte de remplacement sera affiché
*article-Prix_non_remise* Prix de l'article avant remise. Il n'est affiché que si l'article choisi est remisé
*article_vignette* Vignette de l'article
*article_vignette_avec_lien_fiche_produit* Vignette de l'article avec lien vers fiche article
*article-Resume* Résumé de l'article
*article-Lien_fiche_produit* Lien vers la fiche de l'article choisi. Par défaut le texte du lien est "Plus d'infos", il peut être remplacé par un texte libre ou un code dynamique
*article_illustration1* Première image d'illustration de l'article
*article_illustration2* Deuxième image d'illustration de l'article
*article_illustration3* Troisième image d'illustration de l'article
*article_illustration4* Quatrième image d'illustration de l'article
*article_illustration5* Cinquième image d'illustration de l'article
*article_Zoom1* Première image d'illustration Zoom de l'article
*article_Zoom2* Deuxième image d'illustration Zoom de l'article
*article_Zoom3* Troisième image d'illustration Zoom de l'article
*article_Zoom4* Quatrième image d'illustration Zoom de l'article
*article_Zoom5* Cinquième image d'illustration Zoom de l'article




Important


Votre modèle de tête de gondole peut contenir jusqu'à 6 articles.

Pour distinguer ces 6 articles, vous devez personnaliser les mini codes dev de la sorte :

article1-Nom : Nom de l'article n°1

article1-Nom_avec_lien_fiche_produit : Nom de l'article n°1 avec lien vers fiche article.

article2-Nom : Nom de l'article n°2

article2-Nom_avec_lien_fiche_produit : Nom de l'article n°2 avec lien vers fiche article.

article3-Nom : Nom de l'article n°3

article3-Nom_avec_lien_fiche_produit : Nom de l'article n°3 avec lien vers fiche article.

...

Exemple d'application

Je veux intégrer le système suivant : http://www.professorcloud.com/mainsite/cloud-zoom.htm

Je consulte les instruction d'intégration http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm

Comme toujours, il faut télécharger les sources et les poser sur mon site (.css, .js...) Ensuite il y a un bloc HTML à copier sur mon site. C'est là que l'adaptation spécifique à PowerBoutique intervient. Ici il s'agit d'un module de gestion d'affichage d'images. Pour adapter le code HTML de cet outil à PowerBoutique, il suffit donc de remplacer les urls des images dans le code exemple par les code DEVs correspondants.

Exemple de code brut

<html>
<head>

<!-- Load the Cloud Zoom CSS file -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>

</head>
    <body>
        
        <!--	
        An anchor with class of 'cloud-zoom' should surround the small image.
        The anchor's href should point to the big zoom image.
        Any options can be specified in the rel attribute of the anchor.
        Options should be specified in regular JavaScript object format,
        but without the braces.
        -->
    	
        <a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
        </a>
        
    
    </body>
</html>


Exemple de code adapté (à insérer dans un modèle de tête de gondole)

<!-- Load the Cloud Zoom CSS file -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>
     
<!--	
        An anchor with class of 'cloud-zoom' should surround the small image.
        The anchor's href should point to the big zoom image.
        Any options can be specified in the rel attribute of the anchor.
        Options should be specified in regular JavaScript object format,
        but without the braces.
        -->
    	
        <a href='*produit1_url_zoom1*' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img src="*produit1_url_image1*" alt='' title="Optional title display" />
        </a>