は、opencart V2.3では小さな画面

Question

にopencart v2.3の中で製品ページに記述タブの上カートに追加]ボタンを移動するにはヘルプが必要です以下のように小さな画面上の商品ページの階層は次のとおりです。

1. ヘッダー
2. 商品画像
3. 説明とレビュー]タブ
4. 価格、オプション、カートに追加]ボタンを
5. フッター

これは小さな画面でのみ発生します。opencartの製品ページのカートに追加ボタンは説明タブの下にあります。私は長い記述があればそれは販売に影響を与えます。

[説明]タブの上と追加の画像の下に[カートに追加]ボタンを移動したいとします。

これは私のウェブサイトwww.festivetaste.comと で、すべてが大画面でうまくいきます。あなたはjqueryのを使用することができます

Answer 1

は、私は、デフォルトのテーマでこれをテストしました。

あなたproduct.tpl<?php echo $footer; ?>前にこれを追加：あなたは、製品ページにcolumn-rightまたはcolumn leftに任意のモジュールを割り当てる場合は、これらの二つのクラスに変更Opencartこと

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

ノート：col-sm-4を、col-sm-8ので、あなたは私のコードを編集する必要があり、手動クラスを追加することもできます。