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

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

标题

产品形象

“说明和审阅”选项卡

价格、选项、添加到购物车按钮

页脚

这只发生在较小的屏幕上，opencart中产品页面上的“添加到购物车”按钮位于“说明”选项卡下方。如果我有一个很长的描述，那么它将影响销售

我想将“添加到购物车”按钮移动到“说明”选项卡上方和其他图像下方

这是我的网站 在大屏幕上一切都很好

---

您可以使用jquery，我在默认主题中对此进行了测试

在

之前，将此添加到您的

产品.tpl

：

$（函数（）{
//我们创建一个函数
函数moveCart（）{
//如果用户屏幕小于768像素
如果（$（窗口）.width（）<768）{
/*
选择购物车区域，包括购物车按钮、选项、产品标题和。。。
如果只想移动购物车按钮，请使用“#产品”而不是“#内容>.row>.col-sm-4”
*/
$（'#content>.row>.col-sm-4'）.removeClass（'col-sm-4'）.addClass（'moved-div'）；
//现在移动它
$（'.moved div'）。插入（'.thumbnails'）；
}否则{
/*
如果用户调整了他/她的屏幕宽度，现在屏幕宽度超过767像素，并且我们之前移动了购物车区域，请将其移动到原始位置。
*/
if（$（'.moved div'）.length）{
$（'.moved-div'）。插入（'.#content>.row>.col-sm-8'）。addClass（'col-sm-4'）。removeClass（'moved-div'）；
}
}
}
//运行函数
moveCart（）；
$（窗口）。调整大小（函数（）{
//如果用户调整了屏幕大小，请再次运行该函数
moveCart（）；
})
});

---

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

列右

或

列左

，请更改这两个类：

col-sm-4

，

col-sm-8

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

您好，欢迎来到StackOverflow。你能用你已经尝试过的东西详细说明你的问题吗，包括任何代码和最终的布局？展示一个简单的例子，说明你正在努力实现的目标和你目前的工作将有助于人们回答你的问题。你能编辑这个问题吗？似乎不清楚你在问什么。我按了向上投票按钮，但它说谢谢你的反馈！声誉低于15的人所投的票会被记录下来，但不会改变公开展示的帖子。

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