Action when change combination on product site

[Mlody]

Hi!

I try to call my function when user change produkt combination on product page. Can you tell me where I should add my code? I know that function responsible for this is in core.js but for me this file is totally unreadable I found fragment with "product-variants" but I can't change it. Can you help me?:)  

Prestashop 1.7.2.0

 

function(e, t, n) {
    "use strict";

    function r(e) {
        return e && e.__esModule ? e : {
            default: e
        }
    }
    var i = n(2),
        o = r(i),
        a = n(4),
        s = r(a);
    (0, o.default)(document).ready(function() {
        (0, o.default)("body").on("change", ".product-variants [data-product-attribute]", function() {
            (0, o.default)("input[name$='refresh']").click()
        }), (0, o.default)("body").on("click", ".product-refresh", function(e, t) {
            var n = (0, o.default)(this);
            e.preventDefault();
            var r = "updatedProductCombination";
            "undefined" != typeof t && t.eventType && (r = t.eventType);
            var i = (0, o.default)(e.target.form).serialize() + "&ajax=1&action=productrefresh",
                a = (0, o.default)(e.target.form).attr("action");
            o.default.post(a, i, null, "json").then(function(e) {
                s.default.emit("updateProduct", {
                    reason: {
                        productUrl: e.productUrl
                    },
                    refreshUrl: n.data("url-update"),
                    eventType: r,
                    resp: e
                })
            })
        }), s.default.on("updateProduct", function(e) {
            "undefined" == typeof e.refreshUrl && (e.refreshUrl = !0);
            var t = e.eventType,
                n = function(e) {
                    function t(e) {
                        var t = e.$addToCartSnippet.find(e.targetSelector);
                        (0, o.default)(e.$targetParent.find(e.targetSelector)).length > 0 && (t.length > 0 ? (0, o.default)(e.$targetParent.find(e.targetSelector)).replaceWith(t[0].outerHTML) : (0, o.default)(e.$targetParent.find(e.targetSelector)).html(""))
                    }
                    var n = (0, o.default)(e),
                        r = (0, o.default)(".product-add-to-cart"),
                        i = ".add";
                    t({
                        $addToCartSnippet: n,
                        $targetParent: r,
                        targetSelector: i
                    });
                    var a = "#product-availability";
                    t({
                        $addToCartSnippet: n,
                        $targetParent: r,
                        targetSelector: a
                    });
                    var s = ".product-minimal-quantity";
                    t({
                        $addToCartSnippet: n,
                        $targetParent: r,
                        targetSelector: s
                    })
                };
            o.default.post(e.reason.productUrl, {
                ajax: "1",
                action: "refresh"
            }, null, "json").then(function(r) {
                (0, o.default)(".product-prices").replaceWith(r.product_prices), (0, o.default)(".product-customization").replaceWith(r.product_customization), (0, o.default)(".product-variants").replaceWith(r.product_variants), (0, o.default)(".product-discounts").replaceWith(r.product_discounts), (0, o.default)(".images-container").replaceWith(r.product_cover_thumbnails), (0, o.default)(".product-additional-info").replaceWith(r.product_additional_info), (0, o.default)("#product-details").replaceWith(r.product_details);
                var i = void 0;
                (0, o.default)(r.product_add_to_cart).each(function(e, t) {
                    (0, o.default)(t).hasClass("product-add-to-cart") && (i = (0, o.default)(t))
                }), n(i);
                var a = parseInt(r.product_minimal_quantity, 10),
                    u = "#quantity_wanted",
                    l = (0, o.default)(u),
                    c = l.val();
                !isNaN(a) && c < a && "updatedProductQuantity" !== t && (l.attr("min", a), l.val(a)), e.refreshUrl && window.history.pushState({
                    id_product_attribute: r.id_product_attribute
                }, void 0, r.product_url), s.default.emit("updatedProduct", r)
            })
        })
    })

 

[Roger Głowacki]

hi Mlody, i used this script in themes/classic/assets/js/custom.js

$(document).ready(function() {
    $(document).ajaxComplete(function() {
        yourFunction();
    });
});

and works for me; (PrestaShop 1.7.5.2)

Edited July 23, 2019 by Roger Głowacki
add where I put the script (see edit history)

[JBW]

You can listen to "updateProduct" or "updatedProduct" events e.g.:
 

prestashop.on('updatedProduct',function() { alert("Some product change triggered and finished"); });

 

[ilario]

On 7/30/2019 at 1:56 PM, JBW said:

You can listen to "updateProduct" or "updatedProduct" events e.g.:
 

prestashop.on('updatedProduct',function() { alert("Some product change triggered and finished"); });

 

hi

do you know if it is possible to extract the group from the function or better if the group is a select or a color/texture

thanks

Ilario

[JBW]

Not in updatedProduct but in updateProduct function. There is a return argument providing the reference to the selected element

[ilario]

thank you very much