0

製品画像 (製品の色を表す) と製品の色の選択ボックスがあるページがあります。このページは 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について何も知らず、何も助けることができません.

更新: jQuery を使用して変更イベントを追加すると変更イベントがトリガーされますが、YUI によって追加された変更イベントはトリガーされません。

このコードをトリガーするにはどうすればよいですか?

ここで動作中の（失敗した）コードを見ることができます。

4

1 に答える 1

1

YUI モジュールをトリガーするには、次のuseように元のインスタンスを参照する関数を使用します。

YUI().use('squarespace-product-utils', function (a) {
  a.Squarespace.ProductUtils.initializeVariantDropdowns();
});

オンライン リファレンスはこちらから入手できます。

于 2013-10-21T23:15:13.723 に答える