How do I run the code in a YUI module?

Question

I have a page which has product images (representing product colours) and a product colour selection box. This page was built using Squarespace Commerce and uses YUI.

If you change the product colour using the selection box, some code is run which updates a javascript variable to reflect the product you've chosen.

I am trying to alter the page so that when a user selects an image, the select box is automatically updated. I have successfully achieved this (the select box changes to the relevant colour), but there is a YUI module which contains code which is not being run. It is this code which updates the javascript variable to reflect the chosen product.

I've tried to run this code by triggering the change event on the select box but it has no impact.

This is the YUI code:

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"]
});

This is the javascript code I've added to update the select box and (try) to trigger the change event:

  $(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();
  });

My code successfully updates the select box but it does not seem to trigger the change event. I think the clue is around the f.after("change", ... but I know nothing about YUI and cannot find anything to help.

UPDATE: It does trigger a change event if I add a change event using jQuery, but it still won't trigger the change event which has been added by YUI.

How do I trigger this code?

You can see the (failing) code in operation here.

Answer 1

To trigger a YUI module you use the use function, which references the original instance like this:

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

Online reference available here.