themefiend Multiple product options add-on zoom (disable)












-1















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(/[rtn]/g," ").split(splitter).join("t").replace(/((^|%>)[^t]*)'/g,"$1r").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>









share|improve this question

























  • Even after fixing the code formatting, its a jumbled mess... you'll need to format it better for us to help you

    – sme
    Nov 20 '18 at 10:38











  • So sorry about the mess. I'm new at this and this is the code that ThemeFiend provided. I'll try to format the code and post it, maybe it will come in handy to someone else. Thank you for trying to help.

    – Trogflon
    Nov 20 '18 at 18:08
















-1















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(/[rtn]/g," ").split(splitter).join("t").replace(/((^|%>)[^t]*)'/g,"$1r").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>









share|improve this question

























  • Even after fixing the code formatting, its a jumbled mess... you'll need to format it better for us to help you

    – sme
    Nov 20 '18 at 10:38











  • So sorry about the mess. I'm new at this and this is the code that ThemeFiend provided. I'll try to format the code and post it, maybe it will come in handy to someone else. Thank you for trying to help.

    – Trogflon
    Nov 20 '18 at 18:08














-1












-1








-1








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(/[rtn]/g," ").split(splitter).join("t").replace(/((^|%>)[^t]*)'/g,"$1r").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>









share|improve this question
















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(/[rtn]/g," ").split(splitter).join("t").replace(/((^|%>)[^t]*)'/g,"$1r").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>






javascript html css add-on bigcartel






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 20 '18 at 10:37









sme

2,31921531




2,31921531










asked Nov 20 '18 at 10:33









TrogflonTrogflon

11




11













  • Even after fixing the code formatting, its a jumbled mess... you'll need to format it better for us to help you

    – sme
    Nov 20 '18 at 10:38











  • So sorry about the mess. I'm new at this and this is the code that ThemeFiend provided. I'll try to format the code and post it, maybe it will come in handy to someone else. Thank you for trying to help.

    – Trogflon
    Nov 20 '18 at 18:08



















  • Even after fixing the code formatting, its a jumbled mess... you'll need to format it better for us to help you

    – sme
    Nov 20 '18 at 10:38











  • So sorry about the mess. I'm new at this and this is the code that ThemeFiend provided. I'll try to format the code and post it, maybe it will come in handy to someone else. Thank you for trying to help.

    – Trogflon
    Nov 20 '18 at 18:08

















Even after fixing the code formatting, its a jumbled mess... you'll need to format it better for us to help you

– sme
Nov 20 '18 at 10:38





Even after fixing the code formatting, its a jumbled mess... you'll need to format it better for us to help you

– sme
Nov 20 '18 at 10:38













So sorry about the mess. I'm new at this and this is the code that ThemeFiend provided. I'll try to format the code and post it, maybe it will come in handy to someone else. Thank you for trying to help.

– Trogflon
Nov 20 '18 at 18:08





So sorry about the mess. I'm new at this and this is the code that ThemeFiend provided. I'll try to format the code and post it, maybe it will come in handy to someone else. Thank you for trying to help.

– Trogflon
Nov 20 '18 at 18:08












1 Answer
1






active

oldest

votes


















0














Ok so I was editing this schizophrenic mess of a code and found a piece I thought could be responsible for the zoom. Deleted it and now the zoom is turned off and the code is still working.
Here is the part I deleted



$('.featured').zoom({url: currentImage});


Maybe it will be helpful to someone else too.



I'll post the formatted code when I'm finished editing it.






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391066%2fthemefiend-multiple-product-options-add-on-zoom-disable%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    Ok so I was editing this schizophrenic mess of a code and found a piece I thought could be responsible for the zoom. Deleted it and now the zoom is turned off and the code is still working.
    Here is the part I deleted



    $('.featured').zoom({url: currentImage});


    Maybe it will be helpful to someone else too.



    I'll post the formatted code when I'm finished editing it.






    share|improve this answer




























      0














      Ok so I was editing this schizophrenic mess of a code and found a piece I thought could be responsible for the zoom. Deleted it and now the zoom is turned off and the code is still working.
      Here is the part I deleted



      $('.featured').zoom({url: currentImage});


      Maybe it will be helpful to someone else too.



      I'll post the formatted code when I'm finished editing it.






      share|improve this answer


























        0












        0








        0







        Ok so I was editing this schizophrenic mess of a code and found a piece I thought could be responsible for the zoom. Deleted it and now the zoom is turned off and the code is still working.
        Here is the part I deleted



        $('.featured').zoom({url: currentImage});


        Maybe it will be helpful to someone else too.



        I'll post the formatted code when I'm finished editing it.






        share|improve this answer













        Ok so I was editing this schizophrenic mess of a code and found a piece I thought could be responsible for the zoom. Deleted it and now the zoom is turned off and the code is still working.
        Here is the part I deleted



        $('.featured').zoom({url: currentImage});


        Maybe it will be helpful to someone else too.



        I'll post the formatted code when I'm finished editing it.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 20 '18 at 18:06









        TrogflonTrogflon

        11




        11
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391066%2fthemefiend-multiple-product-options-add-on-zoom-disable%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            Tangent Lines Diagram Along Smooth Curve

            Yusuf al-Mu'taman ibn Hud

            Zucchini