Warm tip: This article is reproduced from serverfault.com, please click
javascript-产品滑块中的Shopify购买按钮JS显示集合
(javascript - Shopify Buy Button JS display collection in product slider)
发布于 2020-12-16 05:23:28
<div class="wrap"><div id="collection-component-1608088773387"></div></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = "http://sdks.shopifycdn.com/buy-button/2.1.7/buybutton.js";
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
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({
storefrontAccessToken: "ACCESS TOKEN",
domain: "xxx.myshopify.com",
appId: "6",
});
var ui = ShopifyBuy.UI.init(client);
ui.createComponent("collection", {
id: 231614611608,
node: document.getElementById("collection-component-1608088773387"),
moneyFormat: "%24%7B%7Bamount%7D%7D",
options: {
product: {
variantId: "all",
buttonDestination: "modal",
contents: {
options: false,
},
styles: {
product: {
"max-width": "none",
"margin-right": "10px",
width: "60%",
},
button: {
"background-color": "#252525",
"font-family": "Karla",
":hover": {
"background-color": "#222222",
},
":focus": {
"background-color": "#222222",
},
"font-weight": "normal",
},
variantTitle: {
"font-family": "Karla",
"font-weight": "normal",
},
title: {
"font-family": "Karla",
},
description: {
"font-family": "Karla",
"font-weight": "normal",
},
price: {
"font-family": "Karla",
"font-weight": "normal",
},
compareAt: {
"font-family": "Karla",
"font-weight": "normal",
},
},
googleFonts: [
"Open Sans",
"PT Serif",
"PT Serif",
"PT Serif",
"PT Serif",
"PT Serif",
],
},
cart: {
contents: {
button: true,
},
styles: {
button: {
"background-color": "#252525",
"font-family": "Karla",
":hover": {
"background-color": "#222222",
},
":focus": {
"background-color": "#222222",
},
"font-weight": "normal",
},
footer: {
"background-color": "#ffffff",
},
},
googleFonts: ["Open Sans"],
},
modalProduct: {
styles: {
button: {
"background-color": "#252525",
"font-family": "Karla",
":hover": {
"background-color": "#222222",
},
":focus": {
"background-color": "#222222",
},
"font-weight": "normal",
},
variantTitle: {
"font-family": "Karla",
"font-weight": "normal",
},
title: {
"font-family": "Karla",
},
description: {
"font-family": "Karla",
"font-weight": "normal",
},
price: {
"font-family": "Karla",
"font-weight": "normal",
},
compareAt: {
"font-family": "Karla",
"font-weight": "normal",
},
},
googleFonts: [
"Open Sans",
"PT Serif",
"PT Serif",
"PT Serif",
"PT Serif",
"PT Serif",
],
},
toggle: {
styles: {
toggle: {
"font-family": "Karla",
"background-color": "#252525",
":hover": {
"background-color": "#222222",
},
":focus": {
"background-color": "#222222",
},
"font-weight": "normal",
},
},
googleFonts: ["Open Sans"],
},
option: {
styles: {
label: {
"font-family": "Karla",
},
select: {
"font-family": "Karla",
},
},
googleFonts: ["PT Serif", "PT Serif"],
},
productSet: {
classes: {
products: "shopify-buy__collection-products-foo",
},
styles: {
products: {
display: "flex",
//"display": "-webkit-flex",
//"display": "-ms-flexbox",
"flex-wrap": "nowrap",
"-webkit-flex-wrap": "nowrap",
"overflow-x": "auto",
"-webkit-overflow-scrolling": "touch",
"justify-content": "initial",
"-webkit-justify-content": "initial",
"margin-left": "0",
"@media (min-width: 601px)": {
"margin-left": "-20px",
},
"::-webkit-scrollbar": {
"-webkit-appearance": "none",
height: "8px",
},
"::-webkit-scrollbar-thumb": {
"border-radius": "8px",
border: "1px solid #222222",
"background-color": "#222222",
},
},
},
},
},
});
}
})();
/*]]>*/
</script>
大家好，我一直在搜索如何将Shopify购买按钮js集合放到如下图2所示的滑块中。有人可以启发我如何做吗？到目前为止，我已经找到了使产品可水平滚动的代码-但这并不是我想要的。
目前看起来像这样：
理想情况下，它应该是什么样子：
我必须使用“购买”按钮js来获得显示产品页面的所需模式弹出窗口，并在用户每次选择产品时将其添加到购物车选项。有人可以指导我如何修改代码以实现所需的结果吗？
Questioner
iBlehhz
Viewed
0
