I'm using Themefiends multiple product options add-on for our Bigcartel shop. I want to disable the zoom option that comes with it - zoom of product pictures on hover. It also interferes with the scrolling on mobile - you can't scroll over the zoomed picture (which takes a lot of screen space, so you're left with only a tiny space for scrolling).
Only hiding the zoom div looks OK on desktop but still interferes with the scrolling on mobile.
{% assign: Products_Grid_Zone = "ul.products" %}{% assign: Cart_Zone = ".cart_items" %}{% assign: Image_Gallery_Zone = ".product_images" %}{% assign: Product_Form_Zone = "form[action*=cart]:first" %}
{% assign: ppr = Products_per_Row %}{% capture p_pr %}{% if ppr == 2 %}6{% elsif ppr == 3 %}4{% elsif ppr == 4 %}3{% endif %}{% endcapture %}
<script data-theme="Lunch Break" id="product_images_template" type="text/html"><% for(var x = 0; x < products.length; x++){ %> <% if (products[x].id == "{{ product.id }}") { %><div class="product-image-gallery"><li class="featured" <% if (products[x].images.length> 1) { %>style="width:100%" <% } %>> <% for(var z = 0; z < 1; z++){ %> <a href="<%= products[x].images[z] %>"> <% if (products[x].status == "sold-out"){ %><span class="btn btn-b btn-xs product_status sold_out">Sold Out</span> <% } %> <% if (products[x].status == "coming-soon"){ %><span class="btn btn-b btn-xs product_status coming_soon">Coming Soon</span> <% } %> <% if (products[x].status == "active"){ %> <% if (products[x].onSale == "true"){ %><span class="btn btn-b btn-xs product_status on_sale">On Sale</span> <% } %> <% } %><img src="<%= products[x].images[z] %>" alt="Image of <%= products[x].title %>" /></a> <% } %></li> <% if (products[x].images.length > 1) { %><ul id="product_thumbnails" class="product-gallery product_thumbnails"> <% for(var z = 0; z < products[x].images.length; z++){ %><li class="thumbnail"><a href="<%= products[x].images[z] %>" onclick="return false;"><img src="<%= products[x].images[z] %>" alt="Image of <%= products[x].title %>" /></a></li> <% } %></ul> <% } %></div> <% } %> <% } %></script>
<script data-theme="Lunch Break" id="multiple_product_options_template" type="text/html"><% for(var x = 0; x < products.length; x++){ %> <% if (products[x].id == current_product_id) { %><div class="selector"><div class="option-title">{{ First_Option_Group_Name }}</div><% var uniqueNames = []; %><div class="parent-options option-group" data-product-slug="{{ product.url | remove: '/product/' }}"> <% if (selection_type == "Dropdown") { %><div class="select"> <select name="cart[add][id]" data-name="{{ First_Option_Group_Name | lowercase }}"><option disabled="disabled" selected="selected">Choose {{ First_Option_Group_Name | lowercase }}</option> <% for(var a = 0; a < products[x].product_options.length; a++){ %> <% if(uniqueNames.indexOf(products[x].product_options[a].title) === -1){ %><option data-title="<%=products[x].product_options[a].tag %>" data-product-image="" data-index="<%= uniqueNames.push(products[x].product_options[a].title)%>" id="<%=products[x].product_options[a].value %>" value="<% if (products[x].product_options[a].relationship == "parent") { %><%=products[x].product_options[a].value %><% } else { %><%=products[x].product_options[a].option_id %><% } %>"><%=products[x].product_options[a].title %></option> <% } %> <% } %><% for ( var a = 0; a < products[x].product_options.length; a++ ) { %> <% if(uniqueNames.indexOf(products[x].product_options[a].title) === -1){ %> <%= uniqueNames[a] %> <% } %> <% } %> </select></div> <% } else { %><% for(var a = 0; a < products[x].product_options.length; a++){ %> <% if(uniqueNames.indexOf(products[x].product_options[a].title) === -1){ %><li data-index="<%= uniqueNames.push(products[x].product_options[a].title)%>"><input data-title="<%=products[x].product_options[a].tag %>" type="radio" id="<%=products[x].product_options[a].value %>" name="<% if (products[x].product_options[a].relationship == "parent") { %>parent_option<% } else { %>cart[add][id]<% } %>" value="<% if (products[x].product_options[a].relationship == "parent") { %><%=products[x].product_options[a].value %><% } else { %><%=products[x].product_options[a].option_id %><% } %>"><label data-swatch="<%=products[x].product_options[a].title %>" for="<%=products[x].product_options[a].value %>"><span data-swatch="<%=products[x].product_options[a].title %>" class="color-swatch"></span><span><%=products[x].product_options[a].title %></span></label></li> <% } %> <% } %><% for ( var a = 0; a < products[x].product_options.length; a++ ) { %> <% if(uniqueNames.indexOf(products[x].product_options[a].title) === -1){ %> <%= uniqueNames[a] %> <% } %> <% } %></ul> <% } %></div></div> <% if (products[x].product_options[0].original_title.indexOf(" / ") > -1) { %><div class="select sub-options"> <label>{{ Second_Option_Group_Name | lowercase }}</label> <select name="cart[add][id]"><option disabled="disabled" selected="selected">Choose {{ Second_Option_Group_Name | lowercase }}</option></select></div> <% } %> <% } %> <% } %> </script>
<div id="color_swatch_styles"></div>
<script id="color_swatch_styles_template" type="text/html"><style class="stylesheet" type="text/css">.page-loader{opacity: .75}.extra-image+a[href*=product_images]{display:none}.fadeIn{min-height:250px;transition:.5s ease all;transition-delay: .5s}<% for ( var a = 0;a < optGroups.length;a++ ){ %> <% if (optGroups[a].product_slug){ %>.parent-options[data-product-slug="<%=optGroups[a].product_slug%>"]<% }%>.color-swatch[data-swatch="<%=optGroups[a].option_name%>"]{<% if (optGroups[a].swatch.indexOf("#")>-1){ %>background-color:<%=optGroups[a].swatch %><% }%> <% if (optGroups[a].swatch.indexOf(".")>-1){ %>background-image:url(<%=optGroups[a].swatch %>);<% }%>}<% }%></style></script>
<div id="color_swatch_styles"></div>
<script data-theme="Lunch Break" id="new_products_grid_template" type="text/html">{%if page.full_url contains'/products'%}<%for(var x=0;x<products.length;x++){ %>{%else%}<%for(var x=0;x<products.length;x++){ %>{%endif%}{%if page.full_url contains'/product/'%}<%for(var y=0;y<products[x].categories.length;y++){ %><%if(products[x].categories[y].value=="{% for category in product.categories limit: 1 %}{{ category.permalink }}{% endfor %}"){ %>{%endif%}<li class="product <% if (products[x].onSale == "true") { %>sale <% } else if (products[x].status == "coming-soon") { %>soon<% } %>"><a href="<%= products[x].url %>"><ul style="overflow:hidden"><%for(var z=0;z<products[x].images.length;z++){ %><img data-slug="<%= products[x].url.replace("/product/", "") %>"alt="Image of <%= products[x].title %>"src="<%= products[x].images[z] %>"data-image="<%= products[x].images[z] %>"><% }%></ul><h4 class="product_name"><%=products[x].title%></h4><h5><%=products[x].defaultPrice%></h5><%if(products[x].onSale=="true"){ %><span class="status">On Sale</span><% }%><%if(products[x].status=="sold-out"){ %><span class="status">Sold Out</span><% }%><%if(products[x].status=="sold-out"){ %><span class="status">Coming Soon</span><% }%></a><div class="product_options_list parent-options"data-product-slug="<%= products[x].url.replace("/product/", "") %>"><div class="pol-inner"><%var uniqueNames=[];%><%for(var a=0;a<products[x].product_options.length;a++){ %><%if(uniqueNames.indexOf(products[x].product_options[a].title)===-1){ %><span data-index="<%= uniqueNames.push(products[x].product_options[a].title) %>"><input data-title="<%= products[x].product_options[a].tag %>"type="radio"id="<%= products[x].product_options[a].value %>"name="first_group"value="<%= products[x].product_options[a].value %>"><label data-slug="<%= products[x].url.replace("/product/", "") %>"data-tag="<%= products[x].product_options[a].tag %>"for="<%= products[x].product_options[a].value %>"><a href="<%= products[x].url %>?<%= first_option_group_name.toLowerCase() %>=<%= products[x].product_options[a].title.replace(/s/g, "%20").replace("/", "-") %>"><span data-swatch="<%= products[x].product_options[a].title %>"class="color-swatch"></span><span class="label-text"><%=products[x].product_options[a].title%></span></a></label></span><% }%><% }%><%for(var a=0;a<products[x].product_options.length;a++){ %><%if(uniqueNames.indexOf(products[x].product_options[a].title)===-1){ %><%=uniqueNames[a]%><% }%><% }%></div></div></li><% }%>{%if page.full_url contains'/product/'%}<% }%><% }%>{%endif%}</script>
<script type="text/html" id="color_swatch_styles_template"><style class="stylesheet" type="text/css">.extra-image+a[href*=product_images]{display:none}.fadeIn{min-height:250px;transition:.5s ease all;transition-delay: .5s}<% for ( var a = 0;a < optGroups.length;a++ ){ %> <% if (optGroups[a].product_slug){ %>.parent-options[data-product-slug="<%=optGroups[a].product_slug%>"]<% }%>.color-swatch[data-swatch="<%=optGroups[a].option_name%>"]{<% if (optGroups[a].swatch.indexOf("#")>-1){ %>background-color:<%=optGroups[a].swatch %><% }%> <% if (optGroups[a].swatch.indexOf(".")>-1){ %>background-image:url(<%=optGroups[a].swatch %>);<% }%>}<% }%></style></script>
<script data-theme="Lunch Break" id="new_cart_template" type="text/html"><%for(var x=0;x<items.length;x++){ %><li data-product-id="<%= items[x].id %>"><a href="<%= items[x].url %>"class="item_image"><img class="current-image"src="<%= items[x].images[0] %>"alt="<%= items[x].title %>"></a><div class="item_images"><%for(var z=0;z<items[x].images.length;z++){ %><img src="<%= items[x].images[z] %>"alt="<%= items[x].title %>"><% }%></div><div class="item_details"><a href="<%= items[x].url %>"><%=items[x].title%><span><%=items[x].current_option%></span></a></div><div class="item_actions"><div class="quantity"><input type="number"name="cart[update][<%= items[x].id %>]"id="item_<%= items[x].id %>_qty"max="50"min="1"class="form-control"value="<%= items[x].quantity %>"autocomplete="off"></div><div class="price"><%=items[x].total_price%></div><div class="remove"><a href="#"data-item-id="<%= items[x].id %>"><svg class="remove_icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 14.1 14.1"enable-background="new 0 0 14.1 14.1"><path d="M14.1 1.1l-1.1-1.1-6 6-5.9-6-1.1 1.1 6 5.9-6 6 1.1 1.1 5.9-6 6 6 1.1-1.1-6-6z"/></svg></a></div></div><div class="swatch-options"><%var uniqueNames=[];%><%for(var a=0;a<items[x].product_options.length;a++){ %><%if(uniqueNames.indexOf(items[x].product_options[a].title)===-1){ %><span data-index="<%= uniqueNames.push(items[x].product_options[a].title) %>"><input data-title="<%= items[x].product_options[a].tag %>"type="radio"id="<%= items[x].product_options[a].value %>"value="<%= items[x].product_options[a].value %>"><label data-item-url="<%= items[x].url %>"data-slug="<%= items[x].url.replace("/product/", "") %>"data-title="<%= items[x].product_options[a].tag %>"data-tag="<%= items[x].product_options[a].tag %>"for="<%= items[x].product_options[a].value %>"><span data-swatch="<%= items[x].product_options[a].title %>"class="color-swatch"></span><span class="label-text"><%=items[x].product_options[a].title%></span></label></span><% }%><% }%><%for(var a=0;a<items[x].product_options.length;a++){ %><%if(uniqueNames.indexOf(items[x].product_options[a].title)===-1){ %><%=uniqueNames[a]%><% }%><% }%></div></li><% }%></script>
<link rel="stylesheet" type="text/css" href="https://s3.amazonaws.com/themefiend/multiple-product-options/mpo_styles.css"> <script type="text/javascript" data-script="mpo" src="https://s3.amazonaws.com/themefiend/multiple-product-options/mpo_script.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.20/jquery.zoom.min.js"></script>
<script type="text/javascript">var splitter = "<%";
!function(){var t={};this.tmpl=function n(p,i){var e=/\W/.test(p)?new Function("obj","var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push('"+p.replace(/[\r\t\n]/g," ").split(splitter).join("\t").replace(/((^|%>)[^\t]*)'/g,"$1\r").replace(/\t=(.*?)%>/g,"',$1,'").split("\t").join("');").split("%>").join("p.push('").split("\r").join("\\'")+"');}return p.join('');"):t[p]=t[p]||n(document.getElementById(p).innerHTML);return i?e(i):e}}();
{% if page.full_url contains '/product/' %}var productData = { "selection_type": "{{ First_Option_Group_Type }}", "first_option_group_name": "{{ First_Option_Group_Name }}", "current_product_id": "{{ product.id }}", "products": [ { "title": "{{ product.name }}", "id": "{{ product.id }}", "images": [{% for image in product.images %}"{{ image | product_image_url | constrain: '900'}}",{% endfor %}], "url": "{{ product.url }}", "maxPrice": "{{ product.max_price | money_with_sign | strip_html }}", "defaultPrice": "{{ product.default_price | money_with_sign | strip_html }}", "maxPriceVal": {{ product.max_price }}, "defaultPriceVal": {{ product.default_price }}, "status": "{{ product.status }}", "onSale": "{{ product.on_sale }}", "index": "{{ forloop.index }}", "ppr": "{{ p_pr }}", "creationDate": "{{ product.created_at | date: '%m-%d-%y' }}", "categories":[{% for category in product.categories %}{"value": "{{ category.permalink }}"},{% endfor %}], "product_options":[ {% for option in product.options %} {% assign: variant_option = option.name | split: Option_Name_Seperator %} {% capture optionName %}{{ variant_option[0] }} / {{ variant_option[1] }}{% endcapture %} {"title": "{{ variant_option[0] }}", "original_title": "{{ option.name }}", "option_id": "{{ option.id }}", "product_id": "{{ product.id }}", "stock_quantity": "{% if option.quantity == 0 %}sold-out{% else %}{{ option.quantity }}{% endif %}", "stock_status": "{% if option.quantity == 0 %}sold-out{% else %}in-stock{% endif %}", "tag": "{{ variant_option[0] | replace: ' ', '+' | replace: '/', '-' }}", "relationship": {% if option.name contains Option_Name_Seperator %}"parent"{% else %}null{% endif %}, "value": "{{ variant_option[0] | downcase | escape | replace: ' ', '-'}}", "options": [ {% for option in product.options %}{% if option.name == optionName %}{"title": "{{ option.name | remove: variant_option[0] | remove: Option_Name_Seperator }}", "stock_quantity": "{{ option.quantity }}", "id": "{{ option.id }}", "product_id": "{{ product.id }}", "parent": "{{ variant_option[0] | downcase | escape | replace: ' ', '-'}}", "price":"{{ option.price | money: 'sign' | strip_html }}", "stock_status":"{% if option.quantity == 0 %}sold-out{% else %}in-stock{% endif %}"},{% endif %}{% endfor %} ]}, {% endfor %} ] }, ] };(function($) { if ($('span[data-swatch]').css('background-color') != 'rgba(0, 0, 0, 0)' && $('span[data-swatch]').css('background-image') != 'none') { var swatchStyles = document.getElementById("color_swatch_styles"); swatchStyles.innerHTML = tmpl("color_swatch_styles_template", optGroups); } var imageGallery = document.querySelector('{{ Image_Gallery_Zone }}'); imageGallery.innerHTML = tmpl('product_images_template', productData); $("{{ Product_Form_Zone }}").prepend("<div id='multiple_product_options' data-mpo-id='{{ product.id }}_id'>" + tmpl('multiple_product_options_template', productData) + "</div>"); $(".select:last").remove(); $(document).ready(function() { $('.select').append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 7.6" enable-background="new 0 0 15 7.6"><path d="M15 1.1l-7.5 6.5-7.5-6.3 1-1.2 6.5 5.5 6.5-5.6z"></path></svg>'); $('.relpro_inner').find("div.product").slice({{ ppr }},{{ ppr | plus: 1}}).remove(); var currentImage = $(".featured img").attr("src"); $('.featured').zoom({url: currentImage}); for ( var a = 0; a < optGroups.length; a++ ) {$("#multiple_product_options:first span.color-swatch:not([data-product-image])").on('click', function(){ $(".product-image-gallery:first .featured .extra-image, .extra-image-gallery").remove(); });if (optGroups[a].product_image) { $('span[data-swatch="' + optGroups[a].option_name + '"], input[data-title="' + optGroups[a].option_name + '"], option[data-title="' + optGroups[a].option_name + '"]').attr('data-product-image', optGroups[a].product_image.replace(',','')); }$('#multiple_product_options:first [data-product-slug="' + optGroups[a].product_slug + '"] span[data-product-image][data-swatch="' + optGroups[a].option_name + '"]').on("click", function() { var prodImg = $(this).attr('data-product-image'); $(".product-image-gallery:first .featured:not(:has(.extra-image))").prepend('<div class="extra-image"></div>'); $(".product-image-gallery:first .featured .extra-image").html('<a class="fadeIn cboxElement" href="' + prodImg + '"><img src="' + prodImg + '"></a>'); }); } }); $('span[data-swatch]').each(function() { if ($(this).css('background-color') == 'rgba(0, 0, 0, 0)' && $(this).css('background-image') == 'none') { $(this).remove(); } }); })(jQuery);{% endif %}
var cartData = { "first_option_group_name": "{{ First_Option_Group_Name }}", "items": [ {% for item in cart.items %} { "title": "{{ item.product.name }}", "id": "{{ item.id }}", "images": [{% for image in item.product.images %}"{{ image | product_image_url | constrain: '900'}}",{% endfor %}], "url": "{{ item.product.url }}", "unit_price": "{{ item.unit_price | money_with_sign | strip_html }}", "quantity": "{{ item.quantity }}", "total_price": "{{ item.price | money_with_sign | strip_html }}", "stock_status": "{{ item.product.status }}", "onSale": "{{ item.product.on_sale }}", "index": "{{ forloop.index }}", "current_option": "{{ item.option.name }}", "product_options":[ {% for option in item.product.options %} {% assign: variant_option = item.option.name | split: ' / ' %} {% capture optionName %}{{ variant_option[0] }} / {{ variant_option[1] }}{% endcapture %} {"title": "{{ variant_option[0] }}", "tag": "{{ variant_option[0] | replace: ' ', '+' | replace: '/', '-' }}", "relationship": {% if item.option.name contains ' / ' %}"parent"{% else %}null{% endif %}, "value": "{{ variant_option[0] | downcase | escape | replace: ' ', '-'}}", "options": [ {% if item.option.name == optionName %}{"title": "{{ item.option.name | remove: variant_option[0] | remove: ' / ' }}", "id": "{{ item.option.id }}", "parent": "{{ variant_option[0] | downcase | escape | replace: ' ', '-'}}", "price":"{{ item.option.price | money: 'sign' | strip_html }}"},{% endif %} ]}, {% endfor %} ] }, {% endfor %} ] }; var swatchStyles = document.getElementById("color_swatch_styles"); swatchStyles.innerHTML = tmpl("color_swatch_styles_template", optGroups);(function($) { var cartLoop = $('{{ Cart_Zone }}'); cartLoop.html(tmpl('new_cart_template', cartData)); $(".swatch-options label[data-title]").each(function(){ $(this).click(function(){ var selectedOption = $(this).attr("data-title"); var productId = $(this).parents("li").attr("data-product-id"); var productUrl = $(this).attr("data-item-url"); $("li[data-product-id=" + productId + "] .item_images img[src*='_" + selectedOption + "_']:first").each(function() { var currentOptionImage = $(this).attr('src'); $("li[data-product-id=" + productId + "] .current-image").attr('src', currentOptionImage).parents("a").attr("href", productUrl + "?" + cartData.first_option_group_name.toLowerCase() + "=" + selectedOption.replace("+", "%20")); }); }); }); $(document).ready(function() { $("a.remove-btn").click(function() { var product_id = $(this).attr('data-product-id'); Cart.removeItem(product_id, function(cart) { $("button.update_btn").trigger('click'); }); }); $("#choose-country select").on('change', function() { $("button.update_btn").trigger('click'); }); $(".swatch-options label[data-title]").trigger("click");}); $('span[data-swatch]').each(function() { if ($(this).css('background-color') == 'rgba(0, 0, 0, 0)' && $(this).css('background-image') == 'none') { $(this).remove(); } }); })(jQuery);
</script><div id="color_swatch_styles"></div>
<script id="color_swatch_styles_template" type="text/html"><style class="stylesheet" type="text/css">.extra-image+a[href*=product_images]{display:none}.fadeIn{min-height:250px;transition:.5s ease all;transition-delay: .5s}<% for ( var a = 0;a < optGroups.length;a++ ){ %> <% if (optGroups[a].product_slug){ %>.parent-options[data-product-slug="<%=optGroups[a].product_slug%>"]<% }%>.color-swatch[data-swatch="<%=optGroups[a].option_name%>"]{<% if (optGroups[a].swatch.indexOf("#")>-1){ %>background-color:<%=optGroups[a].swatch %><% }%> <% if (optGroups[a].swatch.indexOf(".")>-1){ %>background-image:url(<%=optGroups[a].swatch %>);<% }%>}<% }%></style></script>
</section></div>{% unless page.full_url contains '/cart' %}<script>(function($) { var productGridData = { "selection_type": "{{ First_Option_Group_Type }}", "first_option_group_name": "{{ First_Option_Group_Name }}", {% if page.full_url contains "/product/" %}"current_product_id": "{{ product.id }}",{% endif %} "products": [ {% if page.full_url contains '/product/' %} {% for product in products.all %} {% unless product.id == currentProduct %} { "title": "{{ product.name }}", "images": [{% for image in product.images %}"{{ image | product_image_url | constrain: '900'}}",{% endfor %}], "url": "{{ product.url }}", "maxPrice": "{{ product.max_price | money_with_sign | strip_html }}", "defaultPrice": "{{ product.default_price | money_with_sign | strip_html }}", "maxPriceVal": {{ product.max_price | money }}, "defaultPriceVal": {{ product.default_price | money }}, "status": "{{ product.status }}", "onSale": "{{ product.on_sale }}", "index": "{{ forloop.index }}", "ppr": "{{ p_pr }}", "creationDate": "{{ product.created_at | date: '%m-%d-%y' }}", "categories":[{% for category in product.categories %}{"value": "{{ category.permalink }}"},{% endfor %}], "product_options":[ {% for option in product.options %} {% assign: variant_option = option.name | split: Option_Name_Seperator %} {% capture optionName %}{{ variant_option[0] }} / {{ variant_option[1] }}{% endcapture %} {"title": "{{ variant_option[0] }}", "tag": "{{ variant_option[0] | replace: ' ', '+' | replace: '/', '-' }}", "relationship": {% if option.name contains Option_Name_Seperator %}"parent"{% else %}null{% endif %}, "value": "{{ variant_option[0] | downcase | escape | replace: ' ', '-'}}", "options": [ {% for option in product.options %}{% if option.name == optionName %}{"title": "{{ option.name | remove: variant_option[0] | remove: Option_Name_Seperator }}", "id": "{{ option.id }}", "parent": "{{ variant_option[0] | downcase | escape | replace: ' ', '-'}}", "price":"{{ option.price | money: 'sign' | strip_html }}", "status":"{% if option.quantity == 0 %}sold-out{% else %}in-stock{% endif %}"},{% endif %}{% endfor %} ]}, {% endfor %} ] }, {% endunless %} {% endfor %} {% assign prodLimit = theme.featured_products %}{% else %}{% assign prodLimit = theme.products_per_page %}{% endif %} {% if page.full_url contains '/products' or page.full_url contains '/category' or page.permalink == 'home' %} {% for product in products.current limit: prodLimit %} { "title": "{{ product.name }}", "images": [{% for image in product.images %}"{{ image | product_image_url | constrain: '900'}}",{% endfor %}], "url": "{{ product.url }}", "maxPrice": "{{ product.max_price | money_with_sign | strip_html }}", "defaultPrice": "{{ product.default_price | money_with_sign | strip_html }}", "maxPriceVal": {{ product.max_price | money }}, "defaultPriceVal": {{ product.default_price | money }}, "status": "{{ product.status }}", "onSale": "{{ product.on_sale }}", "index": "{{ forloop.index }}", "ppr": "{{ p_pr }}", "creationDate": "{{ product.created_at | date: '%m-%d-%y' }}", "categories":[{% for category in product.categories %}{"value": "{{ category.permalink }}"},{% endfor %}], "product_options":[ {% for option in product.options %} {% assign: variant_option = option.name | split: Option_Name_Seperator %} {% capture optionName %}{{ variant_option[0] }} / {{ variant_option[1] }}{% endcapture %} {"title": "{{ variant_option[0] }}", "tag": "{{ variant_option[0] | replace: ' ', '+' | replace: '/', '-' }}", "relationship": {% if option.name contains Option_Name_Seperator %}"parent"{% else %}null{% endif %}, "value": "{{ variant_option[0] | downcase | escape | replace: ' ', '-'}}", "options": [ {% for option in product.options %}{% if option.name == optionName %}{"title": "{{ option.name | remove: variant_option[0] | remove: Option_Name_Seperator }}", "id": "{{ option.id }}", "parent": "{{ variant_option[0] | downcase | escape | replace: ' ', '-'}}", "price":"{{ option.price | money: 'sign' | strip_html }}", "status":"{% if option.quantity == 0 %}sold-out{% else %}in-stock{% endif %}"},{% endif %}{% endfor %} ]}, {% endfor %} ] }, {% endfor %} {% endif %} ] }; var swatchStyles = document.getElementById("color_swatch_styles"); swatchStyles.innerHTML = tmpl("color_swatch_styles_template", optGroups); $(document).ready(function() { $(".pol-inner:not(:has(span[data-swatch]))").remove(); }); $('span[data-swatch]').each(function() { if ($(this).css('background-color') == 'rgba(0, 0, 0, 0)' && $(this).css('background-image') == 'none') { $(this).remove(); } }); var prodLoop = $('{{ Products_Grid_Zone }}'); prodLoop.html(tmpl('new_products_grid_template', productGridData)); })(jQuery);</script>{% endunless %}
<script type="text/javascript">var LicenseKey = "{{ License_Key }}"; var shopURL = "{{ store.url }}";</script>
<script type="text/javascript" src="https://s3.amazonaws.com/themefiend/multiple-product-options/legend-theme_mpo-script.js"></script><style data-theme="Lunch Break" type="text/css">.mfp-wrap, .mfp-bg {display: none;}html {overflow: auto !important;margin:0px !important}.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {cursor: default}.product_images .product_thumbnails li {width: 20%}li.product .color-swatch {margin:-1px; width: 20px;height: 20px;}ul.products li img:not(:first-of-type){display: none}.pol-inner input {position: absolute;left: -9999px;}.pol-inner > span[data-index] {display: inline-block;margin-right: 5px;}.select select{width: 100%;padding: 0px 15px;}.select.sub-options label {display: none}span.color-swatch {border-radius: 2px}#multiple_product_options li label {border-radius: 2px}</style>
