Besoin d'aide pour se déplacer bouton Ajouter au panier au-dessus de l'onglet Description de la page produit en v2.3 opencart sur des écrans plus petits

Question

Dans opencart v2.3, la hiérarchie de la page produit sur des écrans plus petits est la suivante:

1. tête
2. Product image
3. description et l'onglet révision
4. Prix, Options, bouton Ajouter au panier
5. Pied de page

Cela se produit uniquement sur les petits écrans, Ajouter au panier bouton sur la page du produit dans opencart est sous l'onglet de description. Si j'ai une longue description, cela affectera les ventes.

Je souhaite déplacer le bouton Ajouter au panier au-dessus de l'onglet Description et sous les images supplémentaires.

Ceci est mon site Web www.festivetaste.com et tout fonctionne bien sur les grands écrans.

Answer 1

Vous pouvez utiliser jquery, j'ai testé ce dans le thème par défaut.

Ajouter à votre product.tpl avant <?php echo $footer; ?>:

<script> 
    $(function(){ 
     // We create a function 
     function moveCart(){ 
      // If user screen is smaller than 768 pixel 
      if($(window).width() < 768){ 
       /* 
        select cart area including cart button, options, product title and ... 
        if you want to only move cart button use '#product' instead of '#content > .row > .col-sm-4' 
       */ 
       $('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div'); 
       // now move it 
       $('.moved-div').insertAfter('.thumbnails'); 
      } else { 
       /* 
        if user resized his/her screen width and now screen is wider than 767 pixel and we moved cart area before, move it to its original place. 
       */ 
       if($('.moved-div').length){ 
        $('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div'); 
       } 
      } 
     } 

     // run function 
     moveCart(); 

     $(window).resize(function(){ 
      // run function again if user resized screen 
      moveCart(); 
     }) 
    }); 
</script> 

Notez que si vous attribuez des modules à column-right ou column left dans votre page de produit opencart changer ces deux classes: col-sm-4, col-sm-8 vous devez donc modifier mon code, ou vous pouvez ajouter vos classes manuelles.