Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Wishlist is not working

Solved

Why is my wishlist feature not working properly?

kakman
Visitor
2 0 0

Hi Guys,

I am working on here

Click for Wishlist Page

Wishlist is not working.

It was working a couple of days ago.

I have checked the codes but I don't understand the problem.

Can you help me please?

Here is page.wishlist.liquid:

{% section 'page_header' %}
<div class="container wishlist-container">
    <!-- Product Tile Grid -->
    <div class="wishlist-grid">

        {% for product in collections.all.products %}
        {% include 'product-tile' %}
        {% endfor %}


        <div class="wishlist-grid--empty-list">
            <div class="empty-list--info">
                <h6 class="empty-list--text black"{% if settings.language_enable %} data-translate="wishlist.general.empty"{% endif %}>{{ 'wishlist.general.empty' | t }}</h6>
                <a class="btn empty-list--btn" href="/collections/all"{% if settings.language_enable %} data-translate="wishlist.general.start_shopping"{% endif %}>{{ 'wishlist.general.start_shopping' | t }}</a>
            </div>
        </div>
    </div>
    <!-- Loader -->
    <div class="wishlist-loader">
        <p class="wishlist-loader--text"{% if settings.language_enable %} data-translate="wishlist.general.loading"{% endif %}>{{ 'wishlist.general.loading' | t }}</p>
    </div>
</div>

 

And here is Wishlist.js:

;(function (Wishlist, $) {

    var $wishlistButton = $('.wishlist-btn');
    var $wishlistTile = $('.wishlist-tile-container');
    var numProductTiles = $wishlistTile.length;
    var wishlist = localStorage.getItem('user_wishlist') || [];
    if (wishlist.length > 0) {
        wishlist = JSON.parse(localStorage.getItem('user_wishlist'));
    }

    /*
     * Update button to show current state (gold for active)
     */
    var animateWishlist = function (self) {
        $(self).toggleClass('is-active');
    };

    /*
     * Add/Remove selected item to the user's wishlist array in localStorage
     * Wishlist button class 'is-active' determines whether or not to add or remove
     * If 'is-active', remove the item, otherwise add it
     */
    var updateWishlist = function (self) {
        var productHandle = $(self).attr('data-product-handle');
        var isRemove = $(self).hasClass('is-active');
        /* Remove */
        if (isRemove) {
            var removeIndex = wishlist.indexOf(productHandle);
            wishlist.splice(removeIndex, 1);
            localStorage.setItem('user_wishlist', JSON.stringify(wishlist));
        }
        /* Add */
        else {
            wishlist.push(productHandle);
            localStorage.setItem('user_wishlist', JSON.stringify(wishlist));
        }
        console.log(JSON.stringify(wishlist));
    };

    /*
     * Loop through wishlist buttons and activate any items that are already in user's wishlist
     * Activate by adding class 'is-active'
     * Run on initialization
     */
    var activateItemsInWishlist = function () {
        $wishlistButton.each(function () {
            var productHandle = $(this).attr('data-product-handle');
            if (wishlist.indexOf(productHandle) > -1) {
                $(this).addClass('is-active');
            }
        });
    };

    /*
     * Loop through product titles and remove any that aren't a part of the wishlist
     * Decrement numProductTiles on removal
     */
    var displayOnlyWishlistItems = function () {
        $wishlistTile.each(function () {
            var productHandle = $(this).attr('data-product-handle');
            if (wishlist.indexOf(productHandle) === -1) {
                $(this).remove();
                numProductTiles--;
            }
        });
    };

    /*
     * Check if on the wishlist page and hide any items that aren't a part of the wishlist
     * If no wishlist items exist, show the empty wishlist notice
     */
    var loadWishlist = function () {
        if (window.location.href.indexOf('pages/wishlist') > -1) {
            displayOnlyWishlistItems();
            $('.wishlist-loader').fadeOut(1000, function () {
                $('.wishlist-grid').addClass('is_visible');
                $('.wishlist-hero').addClass('is_visible');
                if (numProductTiles == 0) {
                    $('.wishlist-grid--empty-list').addClass('is_visible');
                } else {
                    $('.wishlist-grid--empty-list').hide();
                }
            });
        }
    };

    var resultload = function () {
        $("#resultLoading").show();

        setTimeout(function () {
            $("#resultLoading").hide();
        },1000)
    };

    var bindUIActions = function () {
        $wishlistButton.click(function (e) {
            e.preventDefault();
            updateWishlist(this);
            animateWishlist(this);
            resultload();
        });
    };

    Wishlist.init = function () {
        bindUIActions();
        activateItemsInWishlist();
        loadWishlist();
    };

}(window.Wishlist = window.Wishlist || {}, jQuery, undefined));

 

Thanks.

Accepted Solution (1)

coolyx
Shopify Partner
26 3 3

This is an accepted solution.

when visit your wishlist page, got js code error as below:
WeChat Image_20210114045019.png

please try to fix the above issue

and have a try again

if you need help, please let me know

Shopify Partner
https://www.mojoin.com

View solution in original post

Replies 2 (2)

coolyx
Shopify Partner
26 3 3

This is an accepted solution.

when visit your wishlist page, got js code error as below:
WeChat Image_20210114045019.png

please try to fix the above issue

and have a try again

if you need help, please let me know

Shopify Partner
https://www.mojoin.com
kakman
Visitor
2 0 0

Thanks for your respond.

 

I checked the console. You are right. 

I have edited product.tile.liquid and add {{product.id}} variable as suffix to element ID's.

<form class="product-form" id="product-form-{{ product.id }}-form" action="/cart/add" method="post" enctype="multipart/form-data" data-product-id="{{product.id}}" data-id="{{ product.handle }}">

and 

<select id="product-select-{{ product.id }}" name="id" >

 

Now, I don't get an error on console. But still wishlist page is not working.

Do I need to modify option_selection.js too? And how?

 

Thanks.

 

 

option_selection.js:

function floatToString(a, b) {
    var c = a.toFixed(b).toString();
    return c.match(/^\.\d+/) ? "0" + c : c;
}
if ("undefined" == typeof Shopify) var Shopify = {};
(Shopify.each = function (a, b) {
    for (var c = 0; c < a.length; c++) b(a[c], c);
}),
    (Shopify.map = function (a, b) {
        for (var c = [], d = 0; d < a.length; d++) c.push(b(a[d], d));
        return c;
    }),
    (Shopify.arrayIncludes = function (a, b) {
        for (var c = 0; c < a.length; c++) if (a[c] == b) return !0;
        return !1;
    }),
    (Shopify.uniq = function (a) {
        for (var b = [], c = 0; c < a.length; c++) Shopify.arrayIncludes(b, a[c]) || b.push(a[c]);
        return b;
    }),
    (Shopify.isDefined = function (a) {
        return "undefined" != typeof a;
    }),
    (Shopify.getClass = function (a) {
        return Object.prototype.toString.call(a).slice(8, -1);
    }),
    (Shopify.extend = function (a, b) {
        function c() {}
        (c.prototype = b.prototype), (a.prototype = new c()), (a.prototype.constructor = a), (a.baseConstructor = b), (a.superClass = b.prototype);
    }),
    (Shopify.urlParam = function (a) {
        var b = RegExp("[?&]" + a + "=([^&]*)").exec(window.location.search);
        return b && decodeURIComponent(b[1].replace(/\+/g, " "));
    }),
    (Shopify.Product = function (a) {
        Shopify.isDefined(a) && this.update(a);
    }),
    (Shopify.Product.prototype.update = function (a) {
        for (property in a) this[property] = a[property];
    }),
    (Shopify.Product.prototype.optionNames = function () {
        return "Array" == Shopify.getClass(this.options) ? this.options : [];
    }),
    (Shopify.Product.prototype.optionValues = function (a) {
        if (!Shopify.isDefined(this.variants)) return null;
        var b = Shopify.map(this.variants, function (b) {
            var c = "option" + (a + 1);
            return void 0 == b[c] ? null : b[c];
        });
        return null == b[0] ? null : Shopify.uniq(b);
    }),
    (Shopify.Product.prototype.getVariant = function (a) {
        var b = null;
        return a.length != this.options.length
            ? b
            : (Shopify.each(this.variants, function (c) {
                  for (var d = !0, e = 0; e < a.length; e++) {
                      var f = "option" + (e + 1);
                      c[f] != a[e] && (d = !1);
                  }
                  return 1 == d ? void (b = c) : void 0;
              }),
              b);
    }),
    (Shopify.Product.prototype.getVariantById = function (a) {
        for (var b = 0; b < this.variants.length; b++) {
            var c = this.variants[b];
            if (a == c.id) return c;
        }
        return null;
    }),
    (Shopify.money_format = "${{amount}}"),
    (Shopify.formatMoney = function (a, b) {
        function c(a, b) {
            return "undefined" == typeof a ? b : a;
        }
        function d(a, b, d, e) {
            if (((b = c(b, 2)), (d = c(d, ",")), (e = c(e, ".")), isNaN(a) || null == a)) return 0;
            a = (a / 100).toFixed(b);
            var f = a.split("."),
                g = f[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1" + d),
                h = f[1] ? e + f[1] : "";
            return g + h;
        }
        "string" == typeof a && (a = a.replace(".", ""));
        var e = "",
            f = /\{\{\s*(\w+)\s*\}\}/,
            g = b || this.money_format;
        switch (g.match(f)[1]) {
            case "amount":
                e = d(a, 2);
                break;
            case "amount_no_decimals":
                e = d(a, 0);
                break;
            case "amount_with_comma_separator":
                e = d(a, 2, ".", ",");
                break;
            case "amount_no_decimals_with_comma_separator":
                e = d(a, 0, ".", ",");
        }
        return g.replace(f, e);
    }),
    (Shopify.OptionSelectors = function (a, b) {
        return (
            (this.selectorDivClass = "selector-wrapper"),
            (this.selectorClass = "single-option-selector"),
            (this.variantIdFieldIdSuffix = "-variant-id"),
            (this.variantIdField = null),
            (this.historyState = null),
            (this.selectors = []),
            (this.domIdPrefix = a),
            (this.product = new Shopify.Product(b.product)),
            (this.onVariantSelected = Shopify.isDefined(b.onVariantSelected) ? b.onVariantSelected : function () {}),
            this.replaceSelector(a),
            this.initDropdown(),
            b.enableHistoryState && (this.historyState = new Shopify.OptionSelectors.HistoryState(this)),
            !0
        );
    }),
    (Shopify.OptionSelectors.prototype.initDropdown = function () {
        var a = { initialLoad: !0 },
            b = this.selectVariantFromDropdown(a);
        if (!b) {
            var c = this;
            setTimeout(function () {
                c.selectVariantFromParams(a) || c.fireOnChangeForFirstDropdown.call(c, a);
            });
        }
    }),
    (Shopify.OptionSelectors.prototype.fireOnChangeForFirstDropdown = function (a) {
        this.selectors[0].element.onchange(a);
    }),
    (Shopify.OptionSelectors.prototype.selectVariantFromParamsOrDropdown = function (a) {
        var b = this.selectVariantFromParams(a);
        b || this.selectVariantFromDropdown(a);
    }),
    (Shopify.OptionSelectors.prototype.replaceSelector = function (a) {
        var b = document.getElementById(a),
            c = b.parentNode;
        Shopify.each(this.buildSelectors(), function (a) {
            c.insertBefore(a, b);
        }),
            (b.style.display = "none"),
            (this.variantIdField = b);
    }),
    (Shopify.OptionSelectors.prototype.selectVariantFromDropdown = function (a) {
        var b = document.getElementById(this.domIdPrefix).querySelector("[selected]");
        if (!b) return !1;
        var c = b.value;
        return this.selectVariant(c, a);
    }),
    (Shopify.OptionSelectors.prototype.selectVariantFromParams = function (a) {
        var b = Shopify.urlParam("variant");
        return this.selectVariant(b, a);
    }),
    (Shopify.OptionSelectors.prototype.selectVariant = function (a, b) {
        var c = this.product.getVariantById(a);
        if (null == c) return !1;
        for (var d = 0; d < this.selectors.length; d++) {
            var e = this.selectors[d].element,
                f = e.getAttribute("data-option"),
                g = c[f];
            null != g && this.optionExistInSelect(e, g) && (e.value = g);
        }
        return "undefined" != typeof jQuery ? jQuery(this.selectors[0].element).trigger("change", b) : this.selectors[0].element.onchange(b), !0;
    }),
    (Shopify.OptionSelectors.prototype.optionExistInSelect = function (a, b) {
        for (var c = 0; c < a.options.length; c++) if (a.options[c].value == b) return !0;
    }),
    (Shopify.OptionSelectors.prototype.insertSelectors = function (a, b) {
        Shopify.isDefined(b) && this.setMessageElement(b), (this.domIdPrefix = "product-" + this.product.id + "-variant-selector");
        var c = document.getElementById(a);
        Shopify.each(this.buildSelectors(), function (a) {
            c.appendChild(a);
        });
    }),
    (Shopify.OptionSelectors.prototype.buildSelectors = function () {
        for (var a = 0; a < this.product.optionNames().length; a++) {
            var b = new Shopify.SingleOptionSelector(this, a, this.product.optionNames()[a], this.product.optionValues(a));
            (b.element.disabled = !1), this.selectors.push(b);
        }
        var c = this.selectorDivClass,
            d = this.product.optionNames(),
            e = Shopify.map(this.selectors, function (a) {
                var b = document.createElement("div"),
                    e = c;
                if ("undefined" != typeof a.name) {
                    var f = a.name.name || a.name;
                    e = c + " " + f.toLowerCase().replace(" ", "_");
                }
                if ((b.setAttribute("class", e), d.length > 1 || d.length >= 1)) {
                    var g = document.createElement("label");
                    if (((g.htmlFor = a.element.id), (g.innerHTML = a.name.name || a.name), b.appendChild(g), /size/i.test(f.toLowerCase()) && window.size_chart)) {
                        var h = jQuery('<a id="size_chart_trigger" href="#" class="sizechart-ctl" data-ctl-toggle="#sizechart-ctl">' + window.size_chart_txt + "</a>");
                        jQuery(g).append(h);
                    }
                }
                return b.appendChild(a.element), b;
            });
        return e;
    }),
    (Shopify.OptionSelectors.prototype.selectedValues = function () {
        for (var a = [], b = 0; b < this.selectors.length; b++) {
            var c = this.selectors[b].element.value;
            a.push(c);
        }
        return a;
    }),
    (Shopify.OptionSelectors.prototype.updateSelectors = function (a, b) {
        var c = this.selectedValues(),
            d = this.product.getVariant(c);
        d ? ((this.variantIdField.disabled = !1), (this.variantIdField.value = d.id)) : (this.variantIdField.disabled = !0), this.onVariantSelected(d, this, b), null != this.historyState && this.historyState.onVariantChange(d, this, b);
    }),
    (Shopify.OptionSelectorsFromDOM = function (a, b) {
        var c = b.optionNames || [],
            d = b.priceFieldExists || !0,
            e = b.delimiter || "/",
            f = this.createProductFromSelector(a, c, d, e);
        (b.product = f), Shopify.OptionSelectorsFromDOM.baseConstructor.call(this, a, b);
    }),
    Shopify.extend(Shopify.OptionSelectorsFromDOM, Shopify.OptionSelectors),
    (Shopify.OptionSelectorsFromDOM.prototype.createProductFromSelector = function (a, b, c, d) {
        if (!Shopify.isDefined(c)) var c = !0;
        if (!Shopify.isDefined(d)) var d = "/";
        var e = document.getElementById(a),
            f = e.childNodes,
            g = (e.parentNode, b.length),
            h = [];
        Shopify.each(f, function (a) {
            if (1 == a.nodeType && "option" == a.tagName.toLowerCase()) {
                var e = a.innerHTML.split(new RegExp("\\s*\\" + d + "\\s*"));
                0 == b.length && (g = e.length - (c ? 1 : 0));
                var f = e.slice(0, g),
                    i = c ? e[g] : "",
                    j = (a.getAttribute("value"), { available: !a.disabled, id: parseFloat(a.value), price: i, option1: f[0], option2: f[1], option3: f[2] });
                h.push(j);
            }
        });
        var i = { variants: h };
        if (0 == b.length) {
            i.options = [];
            for (var j = 0; g > j; j++) i.options[j] = "option " + (j + 1);
        } else i.options = b;
        return i;
    }),
    (Shopify.SingleOptionSelector = function (a, b, c, d) {
        (this.multiSelector = a), (this.values = d), (this.index = b), (this.name = c), (this.element = document.createElement("select"));
        for (var e = 0; e < d.length; e++) {
            var f = document.createElement("option");
            (f.value = d[e]), (f.innerHTML = d[e]), this.element.appendChild(f);
        }
        return (
            this.element.setAttribute("class", this.multiSelector.selectorClass),
            this.element.setAttribute("data-option", "option" + (b + 1)),
            (this.element.id = a.domIdPrefix + "-option-" + b),
            (this.element.onchange = function (c, d) {
                (d = d || {}), a.updateSelectors(b, d);
            }),
            !0
        );
    }),
    (Shopify.Image = {
        preload: function (a, b) {
            for (var c = 0; c < a.length; c++) {
                var d = a[c];
                this.loadImage(this.getSizedImageUrl(d, b));
            }
        },
        loadImage: function (a) {
            new Image().src=a;
        },
        switchImage: function (a, b, c) {
            if (a && b) {
                var d = this.imageSize(b.src),
                    e = this.getSizedImageUrl(a.src, d);
                c ? c(e, a, b) : (b.src=e);
            }
        },
        imageSize: function (a) {
            var b = a.match(/_(1024x1024|2048x2048|pico|icon|thumb|small|compact|medium|large|grande)\./);
            return null != b ? b[1] : null;
        },
        getSizedImageUrl: function (a, b) {
            if (null == b) return a;
            if ("master" == b) return this.removeProtocol(a);
            var c = a.match(/\.(jpg|jpeg|gif|png|bmp|bitmap|tiff|tif)(\?v=\d+)?$/i);
            if (null != c) {
                var d = a.split(c[0]),
                    e = c[0];
                return this.removeProtocol(d[0] + "_" + b + e);
            }
            return null;
        },
        removeProtocol: function (a) {
            return a.replace(/http(s)?:/, "");
        },
    }),
    (Shopify.OptionSelectors.HistoryState = function (a) {
        this.browserSupports() && this.register(a);
    }),
    (Shopify.OptionSelectors.HistoryState.prototype.register = function (a) {
        window.addEventListener("popstate", function () {
            a.selectVariantFromParamsOrDropdown({ popStateCall: !0 });
        });
    }),
    (Shopify.OptionSelectors.HistoryState.prototype.onVariantChange = function (a, b, c) {
        this.browserSupports() && (!a || c.initialLoad || c.popStateCall || window.history.replaceState({}, document.title, "?variant=" + a.id));
    }),
    (Shopify.OptionSelectors.HistoryState.prototype.browserSupports = function () {
        return window.history && window.history.replaceState;
    });