themefiend Multiple product options add-on zoom (disable)
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
add a comment |
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
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
add a comment |
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
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
javascript html css add-on bigcartel
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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.
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
add a comment |
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.
add a comment |
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.
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.
answered Nov 20 '18 at 18:06
TrogflonTrogflon
11
11
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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