ShopifyToggleCart按钮位置

我目前正在使用Shopify购买按钮.

在大多数情况下,我只是复制并粘贴嵌入代码并没有太大变化.如果你一直向下滚动"toggle":{,你会注意到我做了iframe和sticky设置为false.

将产品添加到购物车时,会在主体中显示切换购物车的按钮. .shopify-buy-frame.shopify-buy-frame--toggle

它通常div在屏幕的中间右上角显示为固定,但由于我的粘性选项设置为false,因此它被放置在屏幕的底部body.

我希望能够分配一个父容器,这个切换按钮最终会进入.理想情况下,我想将它放在我的标题中,而不是在页面正文的底部生成它.

例如:

如果我能弄清楚如何为我的移动导航区域生成第二个切换按钮,则可获得奖励积分.

我搜索了默认的竞争对手和开发人员部分的切换选项,似乎无法弄明白.

如果有人可以提供帮助,将不胜感激.

我的嵌入代码

Andrey.. 5

您可以events在toggleconfig中使用option 来定义所需的事件。afterInit初始化后，使用事件将切换节点移动到另一个位置：

toggle: {
    events: {
        afterInit: function (component) {
            document.getElementById('cart-toggle').appendChild(component.node);
        },
    }
}

我假设您不能toggle在单个Shopify嵌入中创建两个组件。但是您可以使用JS中的媒体查询（即enquire.js）对现有的媒体资源进行操作，因此，当您的媒体查询匹配/不匹配时，您可以在DOM中的任意位置（即，移动导航区域内）移动切换按钮

您可以events在toggleconfig中使用option 来定义所需的事件。afterInit初始化后，使用事件将切换节点移动到另一个位置：

toggle: {
    events: {
        afterInit: function (component) {
            document.getElementById('cart-toggle').appendChild(component.node);
        },
    }
}

我假设您不能toggle在单个Shopify嵌入中创建两个组件。但是您可以使用JS中的媒体查询（即enquire.js）对现有的媒体资源进行操作，因此，当您的媒体查询匹配/不匹配时，您可以在DOM中的任意位置（即，移动导航区域内）移动切换按钮