Shopify 切换购物车按钮位置
Posted
技术标签:
【中文标题】Shopify 切换购物车按钮位置【英文标题】：Shopify Toggle Cart Button location 【发布时间】：2017-11-12 19:50:53 【问题描述】：我目前正在使用Shopify Buy Button。
在大多数情况下，我只是复制并粘贴了嵌入代码，并没有太大变化。如果您一直向下滚动到"toggle":，您会注意到我将其设置为 iframe 并且 sticky 设置为 false。
问题
将产品添加到购物车时，切换购物车的按钮会出现在正文中。 .shopify-buy-frame.shopify-buy-frame--toggle
它通常在屏幕的右上角显示为固定的div，但由于我的sticky 选项设置为false，它被放置在body 的底部。
我希望能够分配一个父容器，此切换按钮最终位于其中。理想情况下，我想将它放在我的标题中的某个地方，而不是让它在我的页面正文的底部生成。
例如：
<body>
<header>
<div id="cart-toggle">
<!-- THIS IS WHERE I WANT IT TO APPEAR -->
</div>
<header>
<!-- THIS IS WHERE IT APPEARS -->
</body>
奖励积分如果我能弄清楚如何为我的移动导航区域生成第二个切换按钮。
我在default compenents 和developer section 中搜索了切换选项，但似乎无法弄清楚。
如果有人能提供帮助，将不胜感激。
我的嵌入代码
<script type="text/javascript">
/*<![CDATA[*/
(function ()
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy)if(window.ShopifyBuy.UI)ShopifyBuyInit();elseloadScript();elseloadScript();f
function loadScript() var script = document.createElement('script');script.async = true;script.src = scriptURL;(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);script.onload = ShopifyBuyInit;
function ShopifyBuyInit()
var client = ShopifyBuy.buildClient(domain: 'domain.myshopify.com',apiKey: 'apikey',appId: '0');
ShopifyBuy.UI.onReady(client).then(function(ui)ui.createComponent('product',moneyFormat:'%24%7B%7Bamount%7D%7D',
options:
"product":
"variantId":"all",
"width":"240px",
"contents":
"img":false,
"imgWithCarousel":false,
"title":false,
"variantTitle":false,
"price":false,
"description":false,
"buttonWithQuantity":false,
"quantity":false
,
"text":
"button":"ADD TO BAG"
,
"styles":
"product":
"text-align":"left",
"@media(min-width:601px)":
"max-width":"100%",
"margin-left":"0",
"margin-bottom":"50px"
,
"button":
"background-color":"#393a39",
"font-family":"Lato,sans-serif",
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px",
"padding-left":"35px",
"padding-right":"35px",
":hover":
"background-color":"#333433"
,
"border-radius":"0px",
":focus":
"background-color":"#333433"
,
"font-weight":"normal"
,
"title":
"font-size":"26px"
,
"price":
"font-size":"18px"
,
"quantityInput":
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px"
,
"compareAt":
"font-size":"15px"
,
"googleFonts":[
"Lato"
]
,
"cart":
"contents":
"button":true
,
"text":
"title":"Bag"
,
"styles":
"button":
"background-color":"#393a39",
"font-family":"Lato,sans-serif",
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px",
":hover":
"background-color":"#333433"
,
"border-radius":"0px",
":focus":
"background-color":"#333433"
,
"font-weight":"normal"
,
"footer":
"background-color":"#ffffff"
,
"googleFonts":[
"Lato"
]
,
"modalProduct":
"contents":
"img":false,
"imgWithCarousel":true,
"variantTitle":false,
"buttonWithQuantity":true,
"button":false,
"quantity":false
,
"styles":
"product":
"@media(min-width:601px)":
"max-width":"100%",
"margin-left":"0px",
"margin-bottom":"0px"
,
"button":
"background-color":"#393a39",
"font-family":"Lato,sans-serif",
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px",
"padding-left":"35px",
"padding-right":"35px",
":hover":
"background-color":"#333433"
,
"border-radius":"0px",
":focus":
"background-color":"#333433"
,
"font-weight":"normal"
,
"quantityInput":
"font-size":"13px",
"padding-top":"14.5px",
"padding-bottom":"14.5px"
,
"googleFonts":[
"Lato"
]
,
"toggle":
"iframe":false,
"sticky":false,
"contents":
"icon":true,
"title":false
,
"styles":
"toggle":
"font-family":"Lato,sans-serif",
"background-color":"#393a39",
":hover":
"background-color":"#333433"
,
":focus":
"background-color":"#333433"
,
"font-weight":"normal"
,
"count":
"font-size":"13px"
,
"googleFonts":[
"Lato"
]
,
"productSet":
"styles":
"products":
"@media(min-width:601px)":
"margin-left":"-20px"
););
)();
/*]]>*/
</script>
【问题讨论】：
对于初学者.. 提到iframe:false 删除了所有样式.. 其次，如果您将它放在 iframe 之外，为什么不在页面上创建一个新元素代理点击此购物车元素，然后隐藏此购物车元素？
@HymnZ 我知道它会删除样式。风格与 ANYTHING 有什么关系？请仅提供与我的问题相关的信息。
同意.. 但评论的第二部分对我来说似乎是一个解决方案..
@HymnZ 请查看我在问题中的示例，因为我看不出您的评论如何有助于解决方案。如果我遗漏了什么，我将非常感谢您的详细说明
如果 iframe 设置为 false，则切换按钮实际上会作为元素添加到 html 中。您所要做的就是使用 css 隐藏它，在“cart”中创建一个元素“x” -toggle" .. 现在当这个元素 "x" 被点击时，让一个函数在切换按钮上产生一个点击..
【参考方案1】：
令人惊讶的是，@radiosPARKS 发布的内容仍在 2021 年有效。 下面是更简洁的完整代码和更多详细信息：
HTML：
<div id="shopify-toggle"></div>
<div id="shopify-product-component"></div>
Javascript：
ShopifyBuy.UI.onReady(client).then(function (ui)
ui.createComponent('product',
...
node: document.getElementById('shopify-product-component'),
toggles: [node: document.getElementById('shopify-toggle')], // <== This is it: it replaces this element with the toggle
options:
...
toggle:
iframe: false,
sticky: false,
...
...
);
);
【讨论】：
【参考方案2】：在 GitHub 上阅读此内容：insert toggle in the dom #569
我需要做同样的事情。已验证，它对我有用。 你可以在任何地方放置一个 DIV 并使用你自己的 CSS 来设置它的样式。 是的，记得将 iframe 和 sticky 设置为 false。
【讨论】：
【参考方案3】：您可以在toggle 配置中使用events 选项来定义您需要的事件。初始化后使用afterInit事件将toggle节点移动到另一个地方：
toggle:
events:
afterInit: function (component)
document.getElementById('cart-toggle').appendChild(component.node);
,
我假设您不能在单个 Shopify 嵌入中创建两个 toggle 组件。但是您可以使用 JS 中的媒体查询（即enquire.js）对现有的查询进行操作，因此当您的媒体查询匹配/不匹配时，您可以将切换按钮移动到 DOM 中任何您喜欢的位置（即移动导航区域内）
【讨论】：
你。是。这。人！这非常有效。谢谢安德烈。很好的答案我也会调查inquirejs。我从来没有听说过。以上是关于Shopify 切换购物车按钮位置的主要内容，如果未能解决你的问题，请参考以下文章