javascript - 需要帮助在较小的屏幕上移动 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>

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