lundi 26 août 2019

Vanilla JS: How to re-evaluate function from 1.js when change in 2.js?

In file 1.js I have a function updateVisualState that sets the boolean isActive to true.

In file 2.js some color states can be changed through click events. After the user changes product colors I want the updateVisualState function from 1.js to run again.

I have tried export function updateVisualState and then import in 2.js.

Also I have tried to call updateVisualState in 2.js like this: 1.updateVisualState()

This is the function that I want to re-run from 1.js:

    function updateVisualState (currentSavedWishlistItems) {
        const currentProductOptions = { sku: productJSON.abstractSku, ...productJSON.preConfig, ...getUrlParams() };
        console.log('currentProductOptions', currentProductOptions);

        // if item selected on PDP is found in currentSavedWishlistItems then set isActive to true
        currentSavedWishlistItems.find((response) => {
            if (
                response.sku === currentProductOptions.sku &&
                response.color === currentProductOptions.color &&
                response.format === currentProductOptions.format &&
                response.paper === currentProductOptions.paper
            ) {
                wishlistButton.setActiveState(true);
            }

            wishlistButton.elementsList.forEach((element) => {
                if (wishlistButton.isActive) {
                    element.classList.replace('svg-add-to-wishlist', 'svg-add-to-wishlist-active');
                }
            });
        });
    }

This is the function that changes color options. If this function below runs, I want to re-run updateVisualState:

        this.opts.imageUpdater.modelImgUpdater.subscribe('color:changed', () => {
            if (this.opts.mode === PageTypes.CS) {
                const buttonEl = _.findWhere(this.opts.confiButton.buttons, { action: 'update' });

                if (buttonEl) {
                    buttonEl.el.removeClass('disable');
                }
            }
            // console.log('color changed!');
        });

In general I don't understand how to call functions from other files except for the two approaches mentioned above.

Aucun commentaire:

Enregistrer un commentaire