Descriptions produits en différentes catégories

[Samia_mg]

Bonjour, je voudrais savoir comment faire ce types de description produit (Description, ingrédients etc) 

Est-ce auriez un code HTML pour reproduire ce type de design ? 

Je vous remercie. 

[Fuznet]

Bonsoir,

Voici quelque chose qui devrait faire l'affaire :

<div>
  <ul class="tabs">
    <li><a href="#tab-1">Description</a></li>
    <li><a href="#tab-2">Détails du produit</a></li>
    <li><a href="#tab-3">Composition</a></li>
 <li><a href="#tab-4">Avis</a></li>
  </ul>
  <div id="tab-1">
  {{ product.description }}
  </div>
  <div id="tab-2">
 <!-- Les détails du produit -->
  </div>
  <div id="tab-3">
   <!-- La composition du produit -->
  </div>
<div id="tab-4">
   <!-- Insérer le code de l'application d'avis clients -->
  </div>
</div>

<script>
  $(document).ready(function() {
    $('ul.tabs').each(function(){
      var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
      links.not(':first').each(function () {
        $($(this).attr('href')).hide();
      });
      $(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
      });
    });
  });
</script>

<style>
ul.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
ul.tabs li a {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #F5F5F5;
  border-color: #DDDDDD !important;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 20px;
  text-decoration: none;
  width: auto;
  color: #303030;
  border-bottom:none !important;
}
ul.tabs li a.active {
  background: none repeat scroll 0 0 #FFFFFF;
  border-left-width: 1px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #111111;
  height: 30px;
  margin: 0 0 0 -1px;
  padding-top: 4px;
  position: relative;
  top: -4px;
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}
</style>

[Samia_mg]

Bonjour,

Merci pour votre aide! 

Je ne m'y connais pas en html, comment pourrais-je incorporer la description produit, la composition dans chaque tab (séparément) et non un renvoi à la ligne en question ? 

Voici un exemple : 

Et le lien du site modèle : https://www.koreaddictions.fr/it-s-skin/75-collagen-nutrition-serum.html

Quelle serait la démarche à suivre pour obtenir ce résultat ?

Je vous remercie.

[Fuznet]

C'est exactement ce que je vous ai envoyé, collez ce que je vous ai envoyé dans product.template.liquid à la place de {{ product.description }}.

[Samia_mg]

Justement, j'ai fait ce que vous m'avez envoyé mais lorsque je clique sur par exemple "description" sous le produit, ça me renvoie vers le paragraphe à ligne or j'aimerais que les catégories soit séparées comme sur le lien que je vous ai envoyé. 

Comment faire ? 

[Fuznet]

Mettez 

<script src=”//code.jquery.com/jquery-1.11.3.js”></script>

Avant la balise </head> dans theme.liquid

Si cela ne fonctionne toujours pas, alors il faut adapter le code sur mesure au thème, vous pouvez nous contacter ici pour qu'on le fasse pour vous : https://www.fuznet.com/nous-contacter

[Samia_mg]

Cela ne fonctionne toujours pas..

J'aimerais que par exemple  :

-  La partie "Mousse nettoyante.." soit dans la catégorie "Description" 

- La partie "Conseils d'utilisation.." soit dans la catégorie "Détails du produit" 

- La partie "Ingrédients.." soit dans la catégorie "Composition" 

Est-ce possible ? 

Merci pour votre aide

[Fuznet]

Ah mais c'est normal ! Vous n'avez pas suivi ce qu'il fallait faire. Le texte est à intégrer dans le code, pas dans la description.

J'ai laissé des commentaire, exemple : 

<!-- La composition du produit -->

 Si vous voulez que cela détecte automatiquement les parties de la description à afficher dans les onglets, alors là c'est beaucoup plus compliqué. Vous pouvez commander cette prestation chez nous si vous le souhaitez.

[Anaïs-del]

Bonjour,

Je souhaite acheter le thème "Atlantic" mais il manque une caractéristique importante pour moi c'est le "description tabs" comme dans le thème "District" je vous mets les photos ci-dessous.

Est ce qu'il est possible de faire ceci dans le thème "Atlantic"? Si c'est une partie HTML où dois je l'insérer?

Merci beaucoup

Anaïs