Broken HTML has been detected in theme's sections/main-cart-footer.liquid - shopify

I have an error message in my Shopify store on the cart page. HTML error found Broken HTML has been detected in your theme's sections/main-cart-footer.liquid(opens a new window)file. Check that there are no missing or extra HTML tags present. See code below, can anyone help me address the errors and how to fix them.
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
<div class="page-width{% if cart == empty %} is-empty{% endif %}" id="main-cart-footer" data-id="{{ section.id }}">
<div>
<div class="cart__footer">
{%- if section.settings.show_cart_note -%}
<cart-note class="cart__note field">
<label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
<textarea class="text-area text-area--resize-vertical field__input" name="note" form="cart" id="Cart-note" placeholder="{{ 'sections.cart.note' | t }}">{{ cart.note }}</textarea>
</cart-note>
{%- endif -%}
<div class="cart__blocks">
{% for block in section.blocks %}
{%- case block.type -%}
{%- when '#app' -%}
{% render block %}
{%- when 'subtotal' -%}
<div class="js-contents" {{ block.shopify_attributes }}>
<div class="totals">
<div>
<h3 class="totals__subtotal">{{ 'sections.cart.subtotal' | t }}</h3>
<p class="totals__subtotal-value"><span class="csapps-cart-original-total">{{ cart.total_price | money_with_currency }}</span></p>
</div>
<div data-tbnadhide='NO_DISCOUNT' style='display:none;'>
<h3 class="totals__subtotal">Discount</h3>
<p class="totals__subtotal-value"><span class="csapps-cart-original-total">-<span data-tbnadfield='CART_DISCOUNT'></span></span></p>
</div>
<div data-tbnadhide='NO_DISCOUNT' style='display:none;'>
<h3 class="totals__subtotal">Total</h3>
<p class="totals__subtotal-value"><span class="csapps-cart-original-total"><span data-tbnadfield='CART_TOTAL' class='ymq_cart_total_price'></span></span></p>
</div>
<div>
{%- if cart.cart_level_discount_applications.size > 0 -%}
<ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount in cart.cart_level_discount_applications -%}
<li class="discounts__discount discounts__discount--end">
{%- render 'icon-discount' -%}
{{ discount.title }}
(-{{ discount.total_allocated_amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
<small class="tax-note caption-large rte">
{%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif cart.taxes_included -%}
{{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
</small>
</div>
{%- else -%}
<div class="cart__ctas" {{ block.shopify_attributes }}>
<noscript>
<button type="submit" class="cart__update-button button button--secondary" form="cart">
{{ 'sections.cart.update' | t }}
</button>
</noscript>
<button type="submit" id="checkout" class="cart__checkout-button button" name="checkout"{% if cart == empty %} disabled{% endif %} form="cart">
{{ 'sections.cart.checkout' | t }}
</button>
</div>
{%- if additional_checkout_buttons -%}
<div class="cart__dynamic-checkout-buttons additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{%- endif -%}
{%- endcase -%}
{% endfor %}
<div id="cart-errors"></div>
</div>
</div>
</div>
</div>
{% javascript %}
class CartNote extends HTMLElement {
constructor() {
super();
this.addEventListener('change', debounce((event) => {
const body = JSON.stringify({ note: event.target.value });
fetch(`${routes.cart_update_url}`, {...fetchConfig(), ...{ body }});
}, 300))
}
}
customElements.define('cart-note', CartNote);
{% endjavascript %}
<script>
document.addEventListener('DOMContentLoaded', function() {
function isIE() {
const ua = window.navigator.userAgent;
const msie = ua.indexOf('MSIE ');
const trident = ua.indexOf('Trident/');
return (msie > 0 || trident > 0);
}
if (!isIE()) return;
const cartSubmitInput = document.createElement('input');
cartSubmitInput.setAttribute('name', 'checkout');
cartSubmitInput.setAttribute('type', 'hidden');
document.querySelector('#cart').appendChild(cartSubmitInput);
document.querySelector('#checkout').addEventListener('click', function(event) {
document.querySelector('#cart').submit();
});
});
</script>
{% schema %}
{
"name": "t:sections.main-cart-footer.name",
"class": "cart__footer-wrapper",
"settings": [
{
"type": "checkbox",
"id": "show_cart_note",
"default": false,
"label": "t:sections.main-cart-footer.settings.show_cart_note.label"
}
],
"blocks": [
{
"type": "subtotal",
"name": "t:sections.main-cart-footer.blocks.subtotal.name",
"limit": 1
},
{
"type": "buttons",
"name": "t:sections.main-cart-footer.blocks.buttons.name",
"limit": 1
},
{
"type": "#app"
}
]
}
{% endschema %}
{% comment %}<!-- ymq option done -->{% endcomment %}
<script id="docapp-shipping-speedup" defer="defer">
(() => { if (!document.documentElement.innerHTML.includes('\\/shop' + '\\/js' + '\\/cart-shipping-calculator-pro.min.js') || window.cartShippingCalculatorProAppLoaded) return; let script = document.createElement('script'); script.src = "https://d1an1e2qw504lz.cloudfront.net/shop/js/cart-shipping-calculator-pro.min.js?shop=texaslonestartamales.myshopify.com"; document.getElementById('docapp-shipping-speedup').after(script); })();
</script>
<script id="docapp-shipping-speedup">
(() => { if (!document.documentElement.innerHTML.includes('\\/shop' + '\\/js' + '\\/cart-shipping-calculator-pro.min.js') || window.cartShippingCalculatorProAppLoaded) return; let script = document.createElement('script'); script.src = "https://d1an1e2qw504lz.cloudfront.net/shop/js/cart-shipping-calculator-pro.min.js?shop=texaslonestartamales.myshopify.com"; document.getElementById('docapp-shipping-speedup').after(script); })();
</script>

Related

removing item from cart if condition not match.shopify

I can add a free product in cart if the specific product is added into the cart. but when we remove the specific product from cart then free product is still there. i need to remove the free product from the caryt if the specific product is removed.
<script>
$(".rb-free").click(function(e){
rbaddItemToCart();
});
$(".rb-free-c").click(function(e){
rbaddItemToCart();
});
function rbaddItemToCart(){
$.ajax({
type: 'POST',
url: '/cart/add.js',
async: false,
data: {
quantity: '1',
id: '44518734987569'
},
success: function (data) {
console.log('atc success: '+1 + id);
}
});
}
</script>
<div class="actions">
<div class="action-list addtocart">
<div class="button-wrapper">
{%- if product.available -%}
<div class="button-wrapper-content">
<button type="submit" name="add" class="btn-cart add-to-cart bordered uppercase {% **if product.handle == 'white-heat-ultra-burn' %} rb-free {% endif %}**">
<span>{{ 'products.product.add_to_cart' | t }}</span>
</button>
<!--<p>we’ll supply – will go</p>-->
</div>
{%- else -%}
<div class="button-wrapper-content">
<button href="javascript:;" class="btn-cart add-to-cart" disabled="disabled">
<span>{{ 'products.product.sold_out' | t }}</span>
</button>
</div>
{%- endif -%}
</div>
</div>
<div class="action-list wishlist">
{% include 'wishlist-item' %}
</div>
</div>

Shopify Dawn Theme - Liquid Question - Blank Spaces are showing up in my collections section where conditions have not been met

Concept: I have built a custom section on the home page that should only show the first variant of products within a collection. NOTE: Gift with purchase is offered with specific variant sizes only, and size varies from product to product.
Attempted Solution: Use "variant.weight" as a selector and only show items where the variant has inventory available and is the correct weight. NOTE: This store will not ship via Shopify & does not need to use weight for shipping purposes.
Issue/Problem: There are blank spots where items in the collection do not qualify either because the variant does not meet the weight requirement or there is no available inventory.
Ask:
How can I fix this code so that the blank spaces go away? I assume I need to add {% else %} code, but I have no idea what to add to that line. I tried {% continue %} and that did not accomplish what I was looking to accomplish.
Can I show out-of-stock items as "Sold Out" rather than have them
removed? (I realize I wrote the code to remove items with no
inventory, I iterate through my code as I am still learning)
Is there a more elegant fix/solution that I missed?
Site: https://test-store-colleen.myshopify.com/
Password: thanksforyourhelp
Snap of collection on the home page with the issue
This is the snippet code:
{% comment %}
Renders a product card
Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_image_outline: {Boolean} Show card outline. Default: true (optional)
- show_rating: {Boolean} Show the product rating. Default: false
Usage:
{% render 'product-card-gwp', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{%- for variant in product_card_product.variants -%}
{% assign theweight = variant.weight | weight_with_unit: variant.weight_unit %}
{%- if theweight == '9 g' and variant.inventory_quantity != 0 -%}
<div class="card-wrapper">
{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% endunless %}
<div class="card-information">
<div class="card-information__wrapper">
{%- if show_vendor -%}
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ product_card_product.vendor }}</div>
{%- endif -%}
{%- if product_card_product.featured_media -%}
<h3 class="card-information__text h5">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title | escape }}
</a>
</h3>
{%- endif -%}
{% capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-listing', product: product %}{% endcapture %}
{% unless the_snippet_review_avg contains 'Liquid error' %}
{{ the_snippet_review_avg }}
{% endunless %}
{% comment %} TODO: metafield
<span class="caption-large light">{{ block.settings.description | escape }}</span>
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
<div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
<span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
</p>
{%- endif -%}
{% endcomment %}
{% comment %}
Original code NOTE: Also added line for "Free Shipping" below
{% render 'price', product: product_card_product, price_class: '' %}
Colleen modified code below to show the first variant price under the product on the collection gwp page
{% endcomment %}
{% render 'price', product: product_card_product, use_variant: product_card_product.first_available_variant.id, price_class: price--large -%}
<div class="caption-with-letter-spacing light"> FREE SHIPPING </div>
<div class="caption-with-letter-spacing light"> </div>
</div>
</div>
<div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
<div class="card__inner">
{%- if product_card_product.featured_media -%}
{%- liquid
assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio
if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}
<div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
<div class="media media--transparent media--{{ media_size }} media--hover-effect"
{% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
>
<img
srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
src="{{ product_card_product.featured_media | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.featured_media.alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.featured_media.width }}"
height="{{ product_card_product.featured_media.height }}"
>
{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
src="{{ product_card_product.media[1] | img_url: '533x' }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product_card_product.media[1].alt | escape }}"
loading="lazy"
class="motion-reduce"
width="{{ product_card_product.media[1].width }}"
height="{{ product_card_product.media[1].height }}"
>
{%- endif -%}
</div>
</div>
{%- else -%}
<div class="card__content">
<h2 class="card__text h3">
<a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
{{ product_card_product.title }}
</a>
</h2>
</div>
{%- endif -%}
<div class="card__badge">
{%- if product_card_product.available == false -%}
<span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
{%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
</div>
</div>
</div>
</div>
{% comment %}
Code added by Colleen to create add to cart button
{% endcomment %}
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product_card_product.first_available_variant.id }}" />
<input type="hidden" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Buy Now" class="button" />
</form>
{% endif %}
{% endfor %}
This is the section code:
{% comment %}
also edited en.default.schema.json to add settings for
featured-collection-gwp
{% endcomment %}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
-%}
<div class="collection page-width{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
<div class="title-wrapper-with-link{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}>
<h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
{%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
{{ 'sections.featured_collection.view_all' | t }}
{%- endif -%}
</div>
<slider-component class="slider-mobile-gutter">
<ul id="gwp-section"
class="grid grid--2-col product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
<li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}" style="text-align:center;">
{% render 'product-card-gwp',
product_card_product: product,
media_size: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
add_image_padding: section.settings.add_image_padding,
show_vendor: section.settings.show_vendor,
show_image_outline: section.settings.show_image_outline,
show_rating: section.settings.show_rating
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'product-card-placeholder' %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
<div class="slider-buttons no-js-hidden{% if section.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if section.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
<span class="slider-counter--total">{{ products_to_display }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
{%- if section.settings.show_view_all and more_in_collection -%}
<div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
<a href="{{ section.settings.collection.url }}"
class="button"
aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
>
{{ 'sections.featured_collection.view_all' | t }}
</a>
</div>
{%- endif -%}
</div>
{% schema %}
{
"name": "t:sections.featured-collection-gwp.name",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "text",
"id": "title",
"default": "GWP Collection",
"label": "t:sections.featured-collection-gwp.settings.title.label"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection-gwp.settings.collection.label"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 12,
"step": 2,
"default": 8,
"label": "t:sections.featured-collection-gwp.settings.products_to_show.label"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-collection-gwp.settings.show_view_all.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.featured-collection-gwp.settings.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection-gwp.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "add_image_padding",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.add_image_padding.label"
},
{
"type": "checkbox",
"id": "show_image_outline",
"default": true,
"label": "t:sections.featured-collection-gwp.settings.show_image_outline.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection-gwp.settings.show_rating.label",
"info": "t:sections.featured-collection-gwp.settings.show_rating.info"
}
],
"presets": [
{
"name": "t:sections.featured-collection-gwp.presets.name"
}
]
}
{% endschema %}
Here for the code below;
before you {% render 'product-card-gwp %}, do a if condition;
{% if condition is met %}
<li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}" style="text-align:center;">
{% render 'product-card-gwp',
product_card_product: product,
media_size: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
add_image_padding: section.settings.add_image_padding,
show_vendor: section.settings.show_vendor,
show_image_outline: section.settings.show_image_outline,
show_rating: section.settings.show_rating
%}
</li>
{% endif %}
also, use variant.weight, and variant.weight_unit instead, this will give you more flexibility since weight is a number and not a string.
{% assign theweight = variant.weight%}
{%- if theweight == 9 and variant.inventory_quantity != 0 -%}
I received a suggestion from another forum to add some code to the theme.liquid above the </body> tag.
The solution works, but as the poster warned, is not the most elegant solution and could potentially cause other issues. However, posting here in case it could help someone else with a similar issue.
<style>
</style>
<script>
function removeEmptySpaces(){
var $items = document.querySelectorAll(`#gwp-section .grid__item`);
for (var each of $items){
var $child = each.querySelector(`form`);
if (!$child){
each.remove();
}
}
}
removeEmptySpaces()
</script>

Shopify liquid template: repeat HTML code only once

I could successfully add a second hard coded store address in my Shopify template. Now, I'm attempting to add a second address.
The challenge I'm facing is this hard coded address is getting repeated because of a for loop which binds the value from the settings.json file.
The hard coded address is getting repeated three times, since it is being considered by the for loop. But the for loop cannot be removed, because it binds the first address, contact, and visiting hours.
I've tried using an if block with with my hard code, but it didn't work out.
Here is my code:
<div class="container main content main-wrapper">
{% if section.settings.image == nil %}
<h1 class="center">{{ page.title }}</h1>
<div class="feature_divider"></div>
{% endif %}
<div class="sixteen columns featured_links">
<div class="section clearfix feature">
{% for block in section.blocks %}
<div class="{% if section.settings.featured_promos_per_row == 2 %}eight columns {% cycle 'alpha', 'omega' %}{% elsif section.settings.featured_promos_per_row == 3 %}one-third column {% cycle 'alpha', '', 'omega' %}{% else %}four columns {% cycle 'alpha', '', '', 'omega' %}{% endif %} {% if section.settings.featured_links_style != blank %}{{ section.settings.featured_links_style }} {% cycle 'delay-025s', 'delay-05s', 'delay-075s', 'delay-1s' %}{% endif %} center">
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}">
{% endif %}
<div class="{% if section.settings.rounded_image != blank %}rounded{% endif %}">
{% if block.settings.image != nil %}
<img src="{{ block.settings.image | img_url: '300x' }}"
alt="{{ block.settings.image.alt }}"
data-src="{{ block.settings.image | img_url: '2048x' }}"
class="lazyload"
{% comment %} data-sizes="auto" {% endcomment %}
data-srcset=" {{ block.settings.image | img_url: '2048x' }} 2048w,
{{ block.settings.image | img_url: '1600x' }} 1600w,
{{ block.settings.image | img_url: '1200x' }} 1200w,
{{ block.settings.image | img_url: '1000x' }} 1000w,
{{ block.settings.image | img_url: '800x' }} 800w,
{{ block.settings.image | img_url: '600x' }} 600w,
{{ block.settings.image | img_url: '400x' }} 400w"
/>
{% else %}
{% capture i %}{% cycle "1", "2", "3", "4", "5", "6" %}{% endcapture %}
{{ 'collection-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--promotions' }}
{% endif %}
</div>
{% if block.settings.title != blank %}
<h3>{{ block.settings.title | escape }}</h3>
{% if section.settings.show_divider %}
<div class="feature_divider"></div>
{% endif %}
{% endif %}
{% if block.settings.link != blank %}
</a>
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{% if section.blocks===1%}
<div class="store-new">
<br><p>XYZ</p><p>XYZ,<br>XYZ<br>XYZ</p>
</div>
{% endif %}
</div>
{% if section.settings.featured_promos_per_row == 2 %}
{% cycle '', '<br class="clear " />' %}
{% elsif section.settings.featured_promos_per_row == 3 %}
{% cycle '', '', '<br class="clear" />' %}
{% else %}
{% cycle '', '', '', '<br class="clear" />' %}
{% endif %}
{% endfor %}
</div>
{% if section.settings.contact_address != blank %}
<br class="clear" />
<div class="embed-container maps">
<iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q={{ section.settings.contact_address | replace: ' ', '+' }}&z={{ section.settings.zoom_level }}&output=embed"></iframe>
</div>
{% endif %}
</div>
</div>
Can someone please help me understand why is this happening?
you can use
{{ if forloop.index0 == 1 }}
or
{{ if forloop.index == 2 }}
instead of
{% if section.blocks===1%}

how to show related produts by tag - shopify

I have a "Related Products" section on my Product page, based with 'Vatage' theme. Now it shows products that a related by "collection". Is it possible to show related products that have the same Tag?
i tried with other codes, but i failed..
please somebody help me.
This is my related-products.liquid code.
Thanks.
{% capture number_of_related_products_to_fetch %}{{ number_of_related_products_to_show | plus: 1 }}{% endcapture %}
{% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
{% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% endif %}
{% endfor %}
{% endif %}
<div class="desktop-12 mobile-3">
<h4 class="section-title">{{ 'products.product.related_products' | t }}</h4>
<div id="product-loop">
{% assign current_product_found = false %}
{% for prod in collection.products limit: 7 %}
{% if prod.title == product.title %}
{% assign current_product_found = true %}
{% else %}
{% unless current_product_found == false and forloop.last %}
<div class="product-index desktop-2 tablet-2 mobile-half" id="prod-{{ product.id }}" data-alpha="{{ prod.title }}" data-price="{{ prod.price }}">
<a href="{{ prod.url | within: collection }}" title="{{ prod.title | escape }}">
<img src="{{ prod.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
</a>
<div class="product-info">
<div class="product-info-inner">
<a href="{{ prod.url | within: collection }}">
<h3>{{ prod.title }}</h3>
</a>
<div class="price">
{% if product.price < prod.compare_at_price %}
<div class="onsale">{{ prod.price | money }}</div>
<div class="was">{{ prod.compare_at_price | money }}</div>
{% else %}
<div class="prod-price">{% if prod.price_varies %} {{ 'products.general.from' | t }} {{ prod.price_min | money }} - {{ prod.price_max | money }} {% else %}{{ prod.price | money }}{% endif %}</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endunless %}
{% endif %}
{% endfor %}
</div>
</div>
<!-- Solution brought to you by Caroline Schnapp -->
<!-- See this: http://wiki.shopify.com/Related_Products -->
{% assign image_size = 'compact' %}
{% assign heading = 'Other fine products' %}
{% if product.tags.size > 0 %}
<h3>{{ heading }}</h3>
<ul class="related-products"></ul>
<style type="text/css">
.related-products { list-style-type:none }
{% case image_size %}
{% when 'small' %}
.related-products * { font-size:12px; text-align:center; padding:0 }
.related-products h4 { border:none; margin:10px 0 0 0; line-height:1.3 }
.related-products div.image { height:100px }
.related-products li { float:left; width:120px; height:160px; margin-right:20px }
{% when 'compact' %}
.related-products * { font-size:13px; text-align:center; padding:0 }
.related-products h4 { border:none; margin:5px 0 0 0; line-height:1.5 }
.related-products div.image { height:160px }
.related-products li { float:left; width:180px; height:220px; margin-right:25px }
{% when 'medium' %}
.related-products * { font-size:14px; text-align:center; padding:0 }
.related-products h4 { border:none; margin:10px 0 0 0; line-height:1.8 }
.related-products div.image { height:240px }
.related-products li { float:left; width:260px; height:300px; margin-right:25px }
{% endcase %}
.related-products { overflow:hidden }
.related-products span.money { font-size:0.8em }
.related-products li:last-child { margin-right:0 }
</style>
<script>!window.jQuery && document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><\/script>')</script>
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
<script type="text/javascript" charset="utf-8">
//<![CDATA[
var recommendations = [];
{% for tag in product.tags %}
recommendations.push('{{ tag | handle }}');
{% endfor %}
if (recommendations.length) {
var list = jQuery('ul.related-products');
for (var i=0; i<recommendations.length; i++) {
jQuery.getJSON(recommendations[i] + '.js', function(product) {
list.append('<li><div class="image"><img src="' + product.images[0].replace(/(\.jpg|\.png|\.jpeg|\.gif)/, '_{{ image_size }}$1') + '" /></div><h4>' + product.title + '</h4><span class="money">' + Shopify.formatMoney(product.price, "{{ shop.money_format }}") + '</span></li>');
});
}
}
//]]>
</script>
{% endif %}
Reference : https://gist.github.com/carolineschnapp/1002949
Or use paid apps from store.

Shopify Store - Variant Not adding To Cart

I cannot get my swatch variants to change what product is being added to the cart. No matter what I add it is adding the 'emerson' product. Here is my product.liquid code. I am also using the swatches app.
{% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}
<!-- Bold D&H //product -->
{% if product.metafields.inventory.ShappifyHidden == "true" %}
Product is not available
{% break %}{% endif %}
<!-- // end product D&H -->
{% include 'shappify-bdl-no-select' %}
<!-- Bold: Discount D&H -->
{% if product.metafields.inventory.ShappifyHidden == "true" %}
Product is not available
{% else %}
<div id="col-main" class="span12 bva">
<div itemscope itemtype="http://schema.org/Product" class="product-scope">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
<meta itemprop="name" content="{{ product.title }}" />
<!-- NEW -->
<div class="gallery span8">
<span class=”desc”> {{ product.metafields.lifestyle.gallery }} </span>
</div>
<div class="product-top bva span9">
<div id="product-image" class="product-image bva">
<div id="product" class="row-fluid clearfix">
<div id="product-image" class="span12 product-image">
<div class="product-image-wrapper bva">
<div class="product-thumb-slides">
{% for variant in product.variants %}
{% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
{% assign image_variant_available = true %}
{% assign image = variant.image %}
{% assign index = forloop.index | minus: 1 %}
<div data-swatch="{{ image.alt | downcase | handleize }}" data-swatch-color="{{ image.alt }}" data-index="{{ index }}" data-variant-id="{{ variant.id }}">
<img src="{{ image | img_url: 'compact' }}" alt="{% if image.alt contains 'youtube' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}" />
</div>
{% endfor %}
</div>
<div id="product-image" class="span12 product-image">
<div class="product-image-wrapper">
<a target="_blank" href="{{ product.featured_image | product_img_url: 'original' }}" class="main-image{% if settings.main_image_display == 'zoom' or settings.main_image_display == 'both' %} elevatezoom{% endif %}{% if settings.main_image_display == 'lightbox' %} fancybox{% endif %}">
<img itemprop="image"id="main-image" class="img-zoom img-responsive image-fly" src="{% if shappify_bdl_options_count > 1 %}{{ product.featured_image | product_img_url: 'grande' }}{% else %}{{ product.featured_image | product_img_url: 'original' }}{% endif %}" alt="{{ product.title | escape }}" />
<span class="main-image-bg"></span>
</a>
{% if product.images.size > 1 %}
{% if settings.viewmore_image_display == 'carousel' %}
<div class="gallery_main_wrapper">
{% endif %}
<div id="gallery_main" class="product-image-thumb {% if settings.viewmore_image_display == 'scroll' %}scroll scroll-mini{% endif %} clearfix">
{% for image in product.images %}
{% assign image_variant_available = false %}
{% if image.variants.size > 0 %}
{% for variant in image.variants %}
{% if variant.available %}
{% assign image_variant_available = true %}
{% endif %}
{% endfor %}
{% else %}
{% assign image_variant_available = true %}
{% endif %}
{% if image_variant_available %}
{% if image.alt contains '-alt' %}
{% else %}
<a class="image-thumb{% if forloop.index == 1 %} active{% endif %}" href="{{ image | product_img_url: 'original' }}" data-image-zoom="{{ image | product_img_url: 'original' }}" data-image="{{ image | product_img_url: 'original' }}"onclick="if($('.selector-wrapper .single-option-selector[data-option=\'option1\'] option[value=\'{{ image.alt | replace: "'", "\\'" }}\']').length > 0 && $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val() != '{{ image.alt | replace: "'", "\\'" }}') $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val('{{ image.alt | replace: "'", "\\'" }}'), $('.selector-wrapper .single-option-selector[data-option=\'option1\']').trigger('change');">
<img src="{{ image | product_img_url: 'small' }}" alt="{% if image.alt contains 'youtube' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}" />
</a>
{% endif %}
{% endif %}
{% endfor %}
{% for image in product.images %}
{% if image.alt contains 'youtube' %}
{% assign embed_url = image.alt %}
<div class="image-thumb-video play-icon">
<img src="{{ image | product_img_url: 'small' }}" alt="{{ product.title | escape }}" />
<a class="play-container fancy" href="{{ embed_url }}" title="{{ product.title }}">
{{ 'play-icon.svg' | asset_url | img_tag: 'Play Video', 'play-image' }}
</a>
<p>WATCH<br>VIDEO</p>
</div>
{% endif %}
{% endfor %}
</div>
{% if settings.viewmore_image_display == 'carousel' %}
</div>
{% endif %}
{% endif %}
</div>
{% if settings.tweet_code == 'below' %}
{% if settings.tweet_code_page != empty %}
<a id="tweet_code" class="btn btn-2" href="{{pages[settings.tweet_code_page].url}}"><i class="icon-hand-right"></i> {{settings.tweet_code_discount_button}}</a>
{% endif %}
{% endif %}
</div>
<script>
jQuery(document).ready(function($){
$('.product-thumb-slides').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.product-slick-gallery',
dots: false,
arrows: true,
focusOnSelect: true,
vertical: true,
centerMode: false,
infintie: false,
nextArrow: '<i class="fa fa-chevron-down slick-next"></i>',
prevArrow: '<i class="fa fa-chevron-up slick-prev"></i>',
});
$('.product-slick-gallery').slick({
arrows: false,
dots : false,
asNavFor: '.product-thumb-slides'
});
$('.quantity').spinner({
min: 1,
change: function(event,ui){
$(this).attr("value", this.value);
//$('.add-cart').attr('data-quantity', this.value);
}
});
$('.product-thumb-slides').on('beforeChange', function(event, slick, currentSlide, nextSlide){
var variantID = $('.product-thumb-slides .slick-slide[data-index="'+nextSlide+'"]').data('variant-id');
var swatch_color = $('.product-thumb-slides .slick-slide[data-index="'+nextSlide+'"]').data('swatch-color');
// console.log(variantID);
//$('.add-cart').attr('data-variant-id', variantID);
$('.hidden-variant-field').attr('value', variantID);
$('.color-name-dynaimc').html(swatch_color);
var $swatch = $('.swatch-element[data-variant-id="'+variantID+'"]');
// console.log($swatch);
if($swatch.hasClass('soldout')){
$('.add-cart').addClass('out-of-stock');
$('.cart-button').html('SOLD OUT');
}else{
$('.add-cart').removeClass('out-of-stock');
$('.cart-button').html('ADD TO CART');
}
});
var productDesc = $('.product-info .product-description p:nth-child(2)').html();
$('.product-info .product-description p:nth-child(2)').html('<strong>DESCRIPTION</strong>'+productDesc);
$('.color-name-dynaimc').html( $('.product-thumb-slides .slick-slide[data-index="0"]').data('swatch-color') );
//$('.add-cart').attr('data-variant-id', $('.product-thumb-slides .slick-slide[data-index="0"]').data('variant-id') );
$('.hidden-variant-field').attr('value', $('.product-thumb-slides .slick-slide[data-index="0"]').data('variant-id') );
// $('.add-cart').click(function(event){
// event.preventDefault();
// var variantID = $(this).data('variant-id');
// var quantity = $(this).data('quantity');
// CartJS.addItem( variantID, quantity);
// setTimeout(function(){
// location.reload();
// },500);
// });
});
</script>
</div>
</div>
</div>
<div class="product-share">
SHARE THIS PRODUCT:
<img src="{{ 'facebook-logo-01.png' | asset_url }}" class="fa fa-facebook social-sharing-icon" style="max-width: 30px" data-network="facebook">
<img src="{{ 'twitter-logo-silhouette-01.png' | asset_url }}" class="fa fa-twitter social-sharing-icon" style="max-width: 30px" data-network="twitter">
<img src="{{ 'pinterest-logo-button-01.png' | asset_url }}" class="fa fa-pinterest social-sharing-icon" style="max-width: 30px" data-network="pinterest">
</div>
</div>
<div class="product-details bva">
<div class="titles">
<div itemprop="name" class="product-name">
<h1>{{ product.title }} <span class="mobile-only">- <span class="color-name-dynaimc"></span></span></h1>
</div>
<div class="detail-price" itemprop="price">
<span class="price">{{ product.price | money }}</span>
</div>
</div>
<div class="variants-wrapper clearfix{% if hide_default_title %} hide{% endif %}">
<select id="product-select-{{ product.id }}" name="id">
{% for variant in product.variants %}
{% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
{% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
<option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<form action="/cart/add" method="post" class="product-actions variants " enctype="multipart/form-data">
<div id="product-actions-{{ product.id }}" class="options qty-cart">
<!--<input id="quantity" type="number" name="quantity" value="1" min="1" class="span4 item-quantity" />-->
<div class="input-box">
<input id="quantity" type="text" name="quantity" class="quantity item-quantity" value="1" min="1" />
</div>
<div class="action-wrapper product add-cart">
<div class="product-wait"></div>
<input type="hidden" name="id" value="{{ variant.id }}" class="hidden-variant-field"/>
<button class="cart-button {% if variant.inventory_quantity < 0 %}out-of-stock{% endif %}" unbxdattr="AddToCart" unbxdparam_sku="{{product.id}}" data-parent=".product-information" type="submit" name="add">ADD TO CART</button>
</div>
</div>
</form>
{% unless bundle_loaded == 'true' %}
{% include 'shappify-bdl-load-bundle' %}
{% assign bundle_loaded = 'true' %}
{% endunless %}
<div class="rumepoints">
<strong>You Will Earn:</strong> <span class=”desc”> {{ product.metafields.totes.rumepoints }} </span> <u>RuMe Rewards Points</u> for this item
</div>
</div>
</div>
</div>
</div>
<div class="descriptionusesfeatures">
<div class="product-description">
<strong>DESCRIPTION</strong><br><br>
{{ product.description }}
</div>
<div class="description-right">
<div class="usesforhtml"><strong>USES FOR:</strong><br><br>
<span class=”desc”> {{ product.metafields.usesfor.usesforhtml }} </span>
</div>
<br>
<div class="productfeatures"><strong>FEATURES:</strong><br><br>
<span class=”desc”> {{ product.metafields.features.productfeatures }} </span>
</div>
</div>
</div>
<!-- END -->
{% if settings.product_description_show == 'below' %}
<div itemprop="description" class="description text-left">
<h1>{{ product.title }}</h1>
<!-- {{ product.description }} Replaced with shortcodes version,below -->
{% include 'shortcodes' with product.description %}
</div>
{% endif %}
{% if settings.reviews_enable %}
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
{% endif %}
</div>
{% include 'related-products' %}
<!-- yotpo -->
<div class="yotpo yotpo-main-widget"
data-product-id="{{ product.id }}"
data-name="{{ product.title | escape }}"
data-url="{{ shop.url }}{{ product.url }}"
data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}"
data-description="{{ product.description | escape }}">
</div>
<!-- yotpo -->
</div>
<!-- end slider wrapper -—>
<!-- Bold: Discount D&H -->
{% endif %}
<script type="text/javascript">
(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/V3G5rrxyCEg9hXApffAzbDMC6CsghmTdUpbf8D2z/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
</script>
<script type="text/javascript">
$("a.fancy").click(function() {
$.fancybox({
'padding' : 40,
'autoScale' : false,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'title' : this.title,
'width' : 1280,
'height' : 720,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?autoplay=1',
'type' : 'swf', // <--add a comma here
'swf' : {'allowfullscreen':'true'} // <-- flashvars here
});
return false;
});
</script>
<script>
// To change what your customers would see if they try to
// add to cart without completing an option, edit the yellow text enclosed within the quotation marks.
var errorMessages = {
for_text_inputs : "Please add your personalized text before adding to cart.",
for_number_inputs: "Please enter a custom quantity.",
for_checkboxes : "Please select your options before adding to cart",
for_dropdowns : "Please select an option before adding to cart"
};
jQuery("form[action='/cart/add'] [type=submit]").on("click", function(e) {
if (
window.Shoppad &&
window.Shoppad.apps &&
window.Shoppad.apps.customizery &&
window.Shoppad.apps.customizery.overrideDeprecatedValidation
) return true;
$io = $('#infiniteoptions-container');
var invalidTextInputs = $io.find("input[type=text][required], textarea").filter(function (idx, el) {
return $(el).val() === '';
});
var invalidNumberInputs = $io.find('input[type=number][required]').filter(function (idx, el) {
return $(el).val() === '';
});
var invalidFieldSets = $io.find('fieldset[data-required=true]').filter(function (idx, fieldSet) {
if ($(fieldSet).find('input[type=checkbox]').length === 0) {
return false;
} else {
return $(fieldSet).find('input[type=checkbox]').filter(function (idx, el) {
return el.checked === true;
}).length === 0;
}
});
var invalidDropdowns = $io.find('select[required]').filter(function (idx, select) {
return !select.selectedOptions[0] || select.selectedOptions[0].disabled === true;
});
var onFail = function (messageType) {
e.stopImmediatePropagation();
alert( errorMessages[messageType] );
return false;
};
if (invalidTextInputs.length > 0) {
return onFail( 'for_text_inputs' );
} else if (invalidNumberInputs.length > 0) {
return onFail( 'for_number_inputs' );
} else if (invalidFieldSets.length > 0) {
return onFail( 'for_checkboxes' );
} else if (invalidDropdowns.length > 0) {
return onFail( 'for_dropdowns' );
} else {
return true;
}
});
</script>
{% include 'shappify-bdl-load-bundle' %}
<script type="text/javascript">
// initialize multi selector for product
jQuery(document).ready(function($){
/* selectCallback */
var selectOptionsCallback = function(variant, selector) {
var add_to_cart = '#add-to-cart';
var $price = '#purchase-' + selector.product.id.toString() + ' .detail-price';
if (variant && variant.available) {
// selected a valid variant
$(add_to_cart).removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
if(variant.compare_at_price == null){
$($price).html('<span class="price">'+Shopify.formatMoney(variant.price, "{{shop.money_format}}")+'</span>');
{% if settings.show_multiple_currencies %}
/* Update currency */
currenciesCallbackSpecial('#product-information span.money');
{% endif %}
} else {
$($price).html('<del class="price_compare">' + Shopify.formatMoney(variant.compare_at_price, "{{shop.money_format}}") + '</del>' + '<span class="price_sale">'+Shopify.formatMoney(variant.price, "{{shop.money_format}}") + '</span>');
{% if settings.show_multiple_currencies %}
/* Update currency */
currenciesCallbackSpecial('#product-information span.money');
{% endif %}
}
} else {
$(add_to_cart).addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
var message = variant ? "Sold Out" : "Unavailable";
$($price).html('<span class="unavailable">' + message + '</span>');
}
if (variant && variant.inventory_quantity && variant.inventory_management == 'shopify') {
jQuery("#stock").html(variant.inventory_quantity).parent().show();
}
else{
jQuery("#stock").parent().hide();
}
{% if settings.trans_product_sku %}
if (variant && variant.sku) {
jQuery("#sku").html(variant.sku).parent().show();
}
else{
jQuery("#sku").parent().hide();
}
{% endif %}
{% if settings.product_barcode_show %}
if (variant && variant.barcode) {
jQuery("#barcode").html(variant.barcode).parent().show();
}
else{
jQuery("#barcode").parent().hide();
}
{% endif %}
//Swapping images JS
$('.product-image-thumb img[alt="'+ $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val() +'"]').first().parent().trigger('click');
};
new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json | remove:'\u003E' | remove:'\u003C' | remove:'\u00a0' }}, onVariantSelected: selectOptionsCallback });
<!-- START Hide OOS Product Varients -->
{% if product.options.size == 1 %}
{% for variant in product.variants %}
{% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
{% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
{% unless variant.available %}
jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
{% endunless %}
{% endif %}
{% endfor %}
//jQuery('.single-option-selector').trigger('change');
{% endif %}
<!-- END Hide OOS Product Varients -->
// Add label if only one product option and it isn't 'Title'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('#product-actions-{{ product.id }} .selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
{% endif %}
// Auto-select first available variant on page load.
{% assign found_one_in_stock = false %}
{% for variant in product.variants %}
{% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
{% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in product.options %}
$('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
});
</script>
{% include 'windsor-product-tracking' %}Ò
This ended up being a javascript not being able to fire issue. We moved the script higher in the file and corrected the issue.