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

Question

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

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

这种情况仅发生在较小的屏幕上，opencart 中产品页面上的添加到购物车按钮位于描述选项卡下方。如果我有很长的描述，那么它会影响销售。

我想将添加到购物车按钮移至描述选项卡上方和其他图像下方。

这是我的网站 www.festivetaste.com 以及 一切都在大屏幕上运行良好。

Answer 1

你可以使用jquery，我在默认主题中测试了这一点。

将此添加到您的

product.tpl

之前

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

请注意，如果您在产品页面 Opencart 中将任何模块分配给

column-right

或

column left

，请更改这两个类：

col-sm-4

、

col-sm-8

，因此您必须编辑我的代码，或者您可以添加手动类。