У меня есть страница с изображениями продуктов (представляющими цвета продукта) и поле выбора цвета продукта. Эта страница была построена с использованием Squarespace Commerce и использует YUI.
Если вы измените цвет продукта с помощью окна выбора, выполняется некоторый код, который обновляет переменную javascript, чтобы отразить выбранный вами продукт.
Я пытаюсь изменить страницу так, чтобы, когда пользователь выбирает изображение, окно выбора автоматически обновляется. Я успешно достиг этого (поле выбора изменяется на соответствующий цвет), но есть модуль YUI, который содержит код, который не запускается. Именно этот код обновляет переменную javascript, чтобы отразить выбранный продукт.
Я попытался запустить этот код, вызвав событие change
в поле выбора, но это не повлияло.
Это код YUI:
YUI.add("squarespace-product-utils", function (a) {
a.Squarespace.ProductUtils = {
initializeVariantDropdowns: function () {
a.all(".product-variants[data-variants]").each(function (e) {
var b = JSON.parse(e.getAttribute("data-variants")),
c = e.all("select"),
d = e.siblings(".product-price").item(0),
g;
d && (g = d.getHTML());
a.Squarespace.ProductUtils._checkVariantStockAndPrice(e, b, c, d, g);
c.detach("change");
c.each(function (f) {
f.after("change", function (f) {
a.Squarespace.ProductUtils._checkVariantStockAndPrice(e, b, c, d, g)
}, this)
},
this)
}, this)
},
_checkVariantStockAndPrice: function (e, b, c, d, g) {
e.removeAttribute("data-unselected-options");
e.removeAttribute("data-selected-variant");
e.removeAttribute("data-variant-in-stock");
var f = e.one(".variant-out-of-stock");
f && f.remove();
var h = [],
f = null,
k = !1,
l = {};
c.each(function (a) {
var b = a.get("value");
a = a.getAttribute("data-variant-option-name");
"none" != b ? l[a] = b : h.push(a)
}, this);
if (0 === h.length) {
for (c = 0; c < b.length; c++) {
g = b[c];
var t = !0,
n;
for (n in l)
if (l[n] != g.attributes[n]) {
t = !1;
break
}
if (t) {
f =
g;
if (g.unlimited || 0 < g.qtyInStock) k = !0;
break
}
}!f && d ? d.set("text", "Unavailable") : d && (f.onSale ? (d.setHTML(a.Squarespace.Commerce.moneyString(f.salePrice)), d.append(a.Node.create('<span> </span><span class="original-price">' + a.Squarespace.Commerce.moneyString(f.price) + "</span>"))) : d.setHTML(a.Squarespace.Commerce.moneyString(f.price)));
f && !k && e.append(a.Node.create('<div class="variant-out-of-stock">Out of stock.</div>'))
} else d && d.getHTML() !== g && d.setHTML(g);
e.setAttribute("data-unselected-options",
JSON.stringify(h));
f && e.setAttribute("data-selected-variant", JSON.stringify(f));
k && e.setAttribute("data-variant-in-stock", k)
}
}
}, "1.0", {
requires: ["base", "node", "squarespace-commerce-utils"]
});
Это код javascript, который я добавил для обновления окна выбора и (попробуйте) для запуска события изменения:
$(document).on('click', '#productThumbnails .slide', function() {
var colorindex = $(this).index() + 2;
$('#productDetails .product-variants select').val($('#productDetails .product-variants select :nth-child(' + colorindex + ')').val()).change();
});
Мой код успешно обновляет окно выбора, но он, похоже, не вызывает событие изменения. Я думаю, что подсказка вокруг f.after("change",...
но я ничего не знаю о YUI и не могу найти ничего, чтобы помочь.
UPDATE: он вызывает событие изменения, если я добавляю событие изменения с помощью jQuery, но он все равно не инициирует событие изменения, которое было добавлено YUI.
Как вызвать этот код?
Вы можете увидеть (неисправного) код операции здесь.
Для запуска модуля YUI вы используете функцию use
, которая ссылается на исходный экземпляр следующим образом:
YUI().use('squarespace-product-utils', function (a) {
a.Squarespace.ProductUtils.initializeVariantDropdowns();
});