需要帮助将“添加到购物车”按钮移动到 opencart v2.3 中产品页面上的描述选项卡上方的小屏幕上

Question

在opencart v2.3中，小屏产品页面层次结构如下：

1. 页眉
2. 产品图片
3. 描述和评论选项卡
4. 价格、选项、添加到购物车按钮
5. 页脚

这只发生在较小的屏幕上，opencart 中产品页面上的添加到购物车按钮位于描述选项卡下方。描述太长会影响销量

我想将“添加到购物车”按钮移到描述选项卡上方和附加图片下方。

这是我的网站 www.festivetaste.com 并且 在大屏幕上一切正常。

Answer 1

你可以使用jquery，我在默认主题下测试过。

在 <?php echo $footer; ?> 之前将此添加到您的 product.tpl:

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

请注意，如果您在产品页面 Opencart 中将任何模块分配给 column-right 或 column left，请更改这两个 类:col-sm-4、col-sm-8，以便你必须编辑我的代码，或者你可以添加你的手册 类.