Étapes pour l'intégration

Etape 1. Télécharger le Thème

Cliquez sur “Design” dans le menu de navigation

Cliquez sur le bouton “Themes” 

Cliquez sur le bouton “Download”(Télécharger)

Etape 2. Modifier le thème pour le bureau

Renommez le Theme dans ‘meta/meta.json’

Renommez le thème afin de pouvoir le distinguer des autres thèmes.

Set _view attribut “layout2”

L'animation sera placée dans la section description, seul "layout2" montre à la fois la section description sur le bureau et le mobile.

Modifier les ‘modules/ysb-mod-product/templates/layout2.dust’

Désactivez le codage HTML automatique pour le contenu des descriptions.

Ajoutez le script à la fin du layout2.dust

Assemblez le texte de description en HTML.

Etape 2. Modifier le thème pour le bureau

Renommez le thème dans ‘meta/meta.json’

Renommez le thème afin de pouvoir le distinguer des autres thèmes.

Configurez _view attribue “layout2”

L'animation sera placée dans la section description, seul "layout2" montre à la fois la section description sur le bureau et le mobile.

Modifiez ‘modules/ysb-mod-product/templates/layout2.dust’

Désactivez le codage HTML automatique pour le contenu des descriptions.

Ajoutez le script à la fin de layout2.dust

Analysez le texte de description en HTML.

<script>
(function () {
    var description;
    description = document.getElementById('pdv-detailed-description');
    if (description) {
        description.innerHTML = description.textContent;
    } else {
        console.warn('detailed description section does not exist');
    }
})();
</script>

Etape 3. Modifier le thème pour Mobile

Trouvez le module “ysb-mod-product” dans “pages/product.mobile.duct”

Configurez_view attribue “layout2”

Modifiez les  ‘modules/ysb-mod-product/templates/layout2.mobile.dust’

• Ajoutez class=”active” et changez “+” to “-“
  

  Changer l'état d'affichage.
  

• Add style=”display:block;” pour l'élément dont l'identifiant est  “pdv-detailed-description”
  

  Afficher la section description au début.
  

• Ajoutez “|s” après la description
  

  Désactivez le codage HTML automatique pour le contenu des descriptions.
  

  
  

</div>

Analysez le texte de description en HTML.

<script>
(function () {
    var description;
    description = document.getElementById('pdv-detailed-description');
    if (description) {
        description.innerHTML = description.textContent;
        $(description).off('touchstart');
    } else {
        console.warn('detailed description section does not exist');
    }
})();
</script>

Etape 4. Télécharger le Theme

Compressez le thème modifié et téléchargez

Publier le thème modifié et retour au tableau de bord

Etape 5. Add Product (ajoutez produit)

Entrez les données dans ''long description'' du champ <iframe> 

<!-- input your animation link into src attribute -->
<iframe frameborder="0" width="100%" height="800" src="https://truview.ortery.com/360HTMLJavaScript/360Finals/wine-bottle-spin-photo/wine-bottle-spin-photo.html">
</iframe>

Etape 6. Sauvegardez le Produit

Une fois que toutes les informations sur le produit sont terminées, cliquez sur le bouton "Save".

Etape 7. Le résultat de la page produit

Lorsque le produit est ajouté avec succès, la page aura l'aspect suivant :

​