<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>
Привет, ребята, я искал, как поместить коллекцию js кнопки покупки Shopify в слайдер, как 2-е изображение ниже. Кто-нибудь может просветить меня, как это сделать? До сих пор я нашел код для горизонтальной прокрутки продуктов, но это не совсем то, что я хочу.
В настоящее время выглядит так:
В идеале, как это должно выглядеть:
Мне пришлось использовать кнопку покупки js, чтобы получить желаемое модальное всплывающее окно, показывающее страницу продукта, и добавлять в корзину опцию каждый раз, когда пользователь выбирает продукт. Может ли кто-нибудь подсказать мне, как я могу изменить код для достижения желаемого результата?
да, кроме того, я использую конструктор страниц Shogun от Shopify
Так зачем нужен JS для кнопки покупки, если магазин находится в Shopify, а buy-button.js используется почти поверх 3-й CMS сайта, такой как Wordpress?
привет, онкар, на самом веб-сайте необходимо выполнить некоторые настройки, поэтому мы решили использовать сёгун поверх Shopify. Тема не является стандартной по умолчанию от Shopify, она создана с нуля с использованием Shogun. Shogun почти как конструктор страниц с перетаскиванием. Он не предлагает всплывающие модальные функции. Необходимо выполнить дальнейшие настройки getshogun.com/help/en/articles/… . Я намерен использовать кнопку «Купить» js, чтобы я мог интегрировать ее в платформу Shogun в качестве настраиваемого компонента. Надеюсь, что это ответ на ваш вопрос.
Я знаю о Shogun и также делаю настройки, я думаю, вам нужно использовать ванильный JS-код, а не buy-button.js, чтобы создавать всплывающие окна и другие страницы, на которых используется конструктор страниц Shogun.
ладно - извините, я новичок в сегунской жидкости. Не могли бы вы подсказать, как связать продукты по отдельности с функцией добавления в корзину? потому что это во всплывающем окне, я не уверен, как использовать vanilla js, чтобы получить изображение отдельного продукта, заголовок и кнопку добавления в корзину (ссылка на сам веб-сайт, чтобы он мог обрабатывать проверку для всех элементов в слайдере ). жидкость предоставляет только идентификатор продукта, название и обработчик
Давайте продолжим обсуждение в чате.
Вам нужно сделать обычай, как этот
window.onload = () => {
if (window.__shgProductInits.length) {
window.__shgProductInits.forEach((ele) => {
let proId = document.getElementById(ele.uuid);
proId.setAttribute('url', ele.productHandle);
proId.style.cursor='pointer';
proId.addEventListener('click', (e) => {
let productHanlde = e.target.parentElement.parentElement.parentElement.getAttribute('url');
fetch('/products/'+productHanlde+'.js')
.then((Response) =>{return Response.json()})
.then((productData) => {
console.info(productData);
// now from here new logic and JS code for popup starts
});
});
});
}
}
Используете магазин Shopify?