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