【发布时间】：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();}else{loadScript();}}else{loadScript();}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" 被点击时，让一个函数在切换按钮上产生一个点击..
标签： javascript jquery shopify