Shopify Limit Tagged Products - shopify

I'm currently working on a Shopify theme, I have a list of all products, I've filtered them to only show anything with the following tag 'Neoprene' - how do I not limit the tagged product to only show 4?
Any help would be grateful!
<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% for product in collections.all.products limit: 9999 %}
{% if product.tags contains 'Neoprene' %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>

<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% assign a = 0 %}
{% for product in collections.all.products limit: 9999 %}
{% if a == 4 %}
{% break %}
{% else %}
{% if product.tags contains 'Neoprene' %}
{% assign a = a | plus : 1 %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>

Related

Shopify: Custom banner grid is not showing half of the pictures

I Have a custom product grid for one of the brands I am selling that has 4 tabs to hover and the content is changing in every tab. When i try to create another grid, 2 of the tabs are not showing the pictures i've inserted. First tab that's not showing pictures
and 2 of the tabs are showing as needed.
Security section
The code is the same for both sections.
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'Switches')" id="defaultOpen">Switches</button>
<button class="tablinks" onmouseover="openCity(event, 'Routers')">Routers</button>
<button class="tablinks" onmouseover="openCity(event, 'Security')">Security</button>
<button class="tablinks" onmouseover="openCity(event, 'Wireless')">Wireless</button>
</div>
<script type="lazyload2">
// Get the element with id="defaultOpen" and click on it
setTimeout(function() { openCity(event, 'Switches'); document.getElementById('defaultOpen').className += " active"});
</script>
<div class="row tabcontent" id="Switches" style="margin-left:-10px;margin-right:-10px;">
<div class="mobile-grid-2 col-md-{{ section.settings.banner_col_1 }} col-sm-{{ section.settings.banner_col_1 }}" style="padding-left:10px;padding-right:0px;padding-bottom:15px;">
{% if section.settings.image_banner_col_1 != blank %}
{% assign img_banner_col_1 = section.settings.image_banner_col_1 | img_url: "master" %}
{% assign img_banner_col_1_alt = section.settings.image_banner_col_1_alt %}
{% else %}
{% assign img_banner_col_1 = 'img566x566.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_1 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e8e8e8);height: 598px;">
<div class="grid-image">
<img class="img-responsive lazyloaded lazy2 main" data-src="{{ img_banner_col_1 }}" alt="{{ img_banner_col_1_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_1 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_1 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_1 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="col-md-{{section.settings.banner_col_2}} col-sm-{{section.settings.banner_col_2}}" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
<div class="row">
<div class="mobile-grid banner_item col-md-12 col-sm-12" style="padding-right:10px; padding-bottom: 10px;">
{% if section.settings.image_banner_col_2_1 != blank %}
{% assign img_banner_col_2_1 = section.settings.image_banner_col_2_1 | img_url: "master" %}
{% assign img_banner_col_2_1_alt = section.settings.image_banner_col_2_1_alt %}
{% else %}
{% assign img_banner_col_2_1 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_2_1 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_2_1}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_2_1_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_2_1 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_2_1 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_2_1 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:10px;">
{% if section.settings.image_banner_col_2_2 != blank %}
{% assign img_banner_col_2_2 = section.settings.image_banner_col_2_2 | img_url: "master" %}
{% assign img_banner_col_2_2_alt = section.settings.image_banner_col_2_2_alt %}
{% else %}
{% assign img_banner_col_2_2 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_2_2 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #eeecea); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_2_2}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_2_2_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_2_2 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_2_2 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_2_2 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-left:0px;">
{% if section.settings.image_banner_col_3 != blank %}
{% assign img_banner_col_3 = section.settings.image_banner_col_3 | img_url: "master" %}
{% assign img_banner_col_3_alt = section.settings.image_banner_col_3_alt %}
{% else %}
{% assign img_banner_col_3 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_3 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #dbe2e4); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_3}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_3_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_3 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_3 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_3 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
And this is the code i am using for other sections
<div class="row tabcontent" id="Security" style="margin-left:-10px;margin-right:-10px;">
<div class="mobile-grid-2 col-md-{{ section.settings.banner_col_7 }} col-sm-{{ section.settings.banner_col_7 }}" style="padding-left:10px;padding-right:0px;padding-bottom:15px;">
{% if section.settings.image_banner_col_7 != blank %}
{% assign img_banner_col_7 = section.settings.image_banner_col_7 | img_url: "master" %}
{% assign img_banner_col_7_alt = section.settings.image_banner_col_7_alt %}
{% else %}
{% assign img_banner_col_7 = 'img566x566.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_7 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e8e8e8);height: 598px;">
<div class="grid-image">
<img class="img-responsive lazyloaded lazy2 main" data-src="{{ img_banner_col_7 }}" alt="{{ img_banner_col_7_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_7 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_7 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_7 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="col-md-{{section.settings.banner_col_8}} col-sm-{{section.settings.banner_col_8}}" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
<div class="row">
<div class="mobile-grid banner_item col-md-12 col-sm-12" style="padding-right:10px; padding-bottom: 10px;">
{% if section.settings.image_banner_col_8 != blank %}
{% assign img_banner_col_8 = section.settings.image_banner_col_8 | img_url: "master" %}
{% assign img_banner_col_8_alt = section.settings.image_banner_col_8_alt %}
{% else %}
{% assign img_banner_col_8 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_8 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_8}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_8_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_8 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_8 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_8 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:0px;">
{% if section.settings.image_banner_col_9 != blank %}
{% assign img_banner_col_9 = section.settings.image_banner_col_9 | img_url: "master" %}
{% assign img_banner_col_9_alt = section.settings.image_banner_col_9_alt %}
{% else %}
{% assign img_banner_col_9 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_9 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_9}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_9_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_9 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_9 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_9 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:10px;">
{% if section.settings.image_banner_col_10 != blank %}
{% assign img_banner_col_10 = section.settings.image_banner_col_10 | img_url: "master" %}
{% assign img_banner_col_10_alt = section.settings.image_banner_col_10_alt %}
{% else %}
{% assign img_banner_col_10 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_10 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #eeecea); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_10}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_10_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_10 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_10 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_10 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
What is the mistake i am making here?
I've tried copying the working grids code and edited from there. Still the same. Can't see banner parts.

can't sort shopify all blog page

I have created a template and under that, I am assigning 5 categories of blogs but it isn't sorting them all, it is sorting them one by one. can anyone help me with this?
{% assign blog_handles = "skin-care,hair-care,foot-care,sun-care,learn" | split: ","| sort:'published_at' %}
{% for handle in blog_handles %}
{% for article in blogs[handle].articles limit: %}
<div class="blog-articles__article article">
<div class="card-wrapper underline-links-hover">
<div class="card article-card card--card article-card__image--medium card--media color-background-1" style="--ratio-percent: 52.33333333333333%;">
<div class="card__inner ratio" style="--ratio-percent: 52.33333333333333%;">
<div class="article-card__image-wrapper card__media">
<div class="article-card__image media media--hover-effect">
<img
srcset="{{ article.image.src | img_url: '533x' }}"
src="{{ article.image.src | img_url: '533x' }}"
alt="{{ article.image.src.alt | escape }}"
class="motion-reduce"
loading="lazy">
</div>
</div>
</div>
<div class="card__content">
<div class="card__information">
<h3 class="card__heading h2">
<a href="{{ article.url }}" class="full-unstyled-link">
{{ article.title | truncate: 50 | escape }}
</a>
</h3>
<div class="article-card__info caption-with-letter-spacing h5">
<span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>
</div>
<p class="article-card__excerpt rte-width">
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt | strip_html | truncatewords: 30 }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 30 }}
{%- endif -%}
</p>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
Thanks in Advance!
The sort filter should be applied to your loop object which contains the published_at info (your handle list doesn't).
Something like that (not tested) should work:
{% assign articles = blogs[handle].articles | sort:'published_at' %}
{% for article in articles %}
Do something
{% endfor %}

High CLS Product Page - need Ideas

i started my online shop a few months back and since im not a programmer i finally reached a point where i need help.
I was trying to improve Pagespeed according to Google and i managed to get the CLS of my Index page to almost 0. - Lazyload, System Fonts, Aspect Ratio of Pictures and so on... i managed to find it all in the Liquid Code of my Shopify Store and optimize it by myself. ... ok i totally crashed the page a few times but thats what backups are for ;-)
But i have no Idea about the Product Pages.
Lighthouse can tell me the Objects causing a CLS of almost 1(!) - mostly its around 0,9 - but i looked at the code of these Objects for 5 days now and i am lost.
its supposed to be caused by the following:
main#MainContent.main-content
div.col-12.col-md-6.order-1
div.page-container.page-element.is-moved-by-drawer
...and sometimes a few more causing small numbers ob CLS
i tried diffrent Templates of my theme but no change
i googled a lot... and i mean A LOT in 5 days...
i tried many suggestions that i found while googling about this issue
i tried to find Code checkers or HTML code Analyzer but that didnt help
i tried things mentioned in this thread: Cumulative Layout Shift with Bootstrap 4 grid
i dont see the Layout shift supposedly caused by these elements
the only Layout shift i can see is somehow NOT mentioned by google - but results don`t change if i remove the app causing the layout shift that i can see. (app is called Legal Pro - needed for keeping the shop up to the requirements of German law. it injects Product data between the Price and the remaining Stock. I can not change the app, only deactivate it. But even when the app is removed, the Lighthouse data does not change. Not even a little!
i would be willing to totally replace the code of the product page with a code with less CLS but adapting complete new code to the existing pages is out of my league. I can change it but not write it. :-/
I`d be very thankful for any help. Just give me something i can google.
(and yes i know there are more issues on that page but CLS is giving me a bad Google ranking right now - one problem at the time)
an example Page can be found here:
https://besonderes-mit-liebe-handgemacht.de/collections/mannergeschenke/products/edle-kugelschreiber-von-hand-gedrechselt-besondere-holzer
the Product page code for the Page is this:
<div class="row product-single">
<div class="col-md-6">
<div class="photos">
<div class="photos__item photos__item--main">
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- for image in product.images -%}
<div class="product-single__photo product__photo-container product__photo-container-{{ section.id }} js{% unless image == featured_image %} hide{% endunless %}"
id="ProductPhoto"
style="max-width: {% include 'image-width' with image: image, width: 480 %}px;"
data-image-id="{{ image.id }}">
<a href="{{ image | img_url: '1200x1200' }}" data-lightbox="image-product"
class="product__photo-wrapper product__photo-wrapper-{{ section.id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1024x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</div>
{%- endfor -%}
<noscript>
<a href="{{ featured_image | img_url: '1200x1200' }}">
<img src="{{ featured_image | img_url: product_image_size }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg-{{ section.id }}">
</a>
</noscript>
{% include 'productVideo' %}
</div>
{%- if product.images.size > 1 -%}
<div class="photos__item photos__item--thumbs">
<div class="product-single__thumbnails product-single__thumbnails-{{ section.id }} product-single__thumbnails--static">
{%- for image in product.images -%}
<div class="product-single__thumbnail-item product-single__thumbnail-item-{{ section.id }}{% if image == featured_image %} is-active{% endif %}" data-image-id="{{ image.id }}">
<a href="{{ image.src | img_url: product_image_size }}" data-zoom="{{ image.src | img_url: '1200x1200' }}" class="product-single__thumbnail product-single__thumbnail-{{ section.id }}">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1024x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</div>
{%- endfor -%}
</div>
</div>
<script >
{%- capture arrow_left -%}{%- include 'icon-arrow-left' -%}{%- endcapture -%}
{%- capture arrow_right -%}{%- include 'icon-arrow-right' -%}{%- endcapture -%}
{%- capture arrow_up -%}{%- include 'icon-arrow-up' -%}{%- endcapture -%}
{%- capture arrow_down -%}{%- include 'icon-arrow-down' -%}{%- endcapture -%}
var sliderArrows = {
left: {{ arrow_left | json }},
right: {{ arrow_right | json }},
up: {{ arrow_up | json }},
down: {{ arrow_down | json }}
}
</script>
{%- endif -%}
{% if section.settings.positiontab == "left" %}
<div class=" {% unless settings.productpage == "product-1" %}pl-5 {% endunless %}" >
<div class="{% unless settings.productpage == "product-1" %}pl-5 {% endunless %}">
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
<div class="col-12 col-md-6 order-1" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product-single__info-wrapper">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<div class="product-single__meta small--text-center">
<h1 itemprop="name" class="product-single__title">{{ product.title }}<span id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
<span class="product-tag gradient-theme">
{{ 'products.product.on_sale' | t }}
</span>
</span>
</h1>
<ul class="pb-3 product-single__meta-list list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
<li>
{%- unless product.compare_at_price_max > product.price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{%- endunless -%}
<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</li>
{% if product.compare_at_price_max > product.price %}
<li>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
{{ current_variant.compare_at_price | money }}
</s>
</li>
{% endif %}
{%- if section.settings.stock_enable -%}
<li>{%- include 'productStock' -%}</li>
{%- endif -%}
</ul>
<div class="review">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
{% if product.metafields.info.shortdesc != blank %}
<div class=" pb-4 rte product-single__description" itemprop="Beschreibung">
{{product.metafields.info.shortdesc}}
</div>
{% endif %}
</div>
{% if product.metafields.info.affiliate_link != blank %}{% comment %}AFFILIATE PRODUCT{% endcomment %}
<a href="{{product.metafields.info.affiliate_link}}" class="my-3 btn btn-theme btn--full product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}">
{{product.metafields.info.affiliate_button}}
</a>
{% else %} {% comment %}NORMAL PRODUCT{% endcomment %}
{% capture "form_class" %}product-form {% if section.settings.product_selector == 'select'%} product-form-select{% endif %} {% if section.settings.enable_payment_button %} product-form--payment-button{% endif %}{%- endcapture %}
{% capture "form_id" %}AddToCartForm-{{ section.id }}{%- endcapture %}
{% form 'product', product, class:form_class, id:form_id %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
{% include 'productOption' %}
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
{% if variant.available %}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
</option>
{% endfor %}
</select>
<div class="product-form__quantity-submit pt-4">
<div class="product-form__item product-form__item--submit {% unless section.settings.enable_payment_button %} btn-disablebuynow {% endunless %}">
<button type="submit"
name="add"
id="AddToCart-{{ section.id }}"
class="btn btn--full btn-theme product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}{% unless current_variant.available %} btn--sold-out{% endunless %}"
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>
{% if section.settings.enable_payment_button %}
<div class="product-form__buynow">
{{ form | payment_button }}
{% if current_variant.available == false %}<style>.shopify-payment-button{display:none}</style>{% endif %}
</div>
{% endif %}
</div>
<div class="js-contact-soldout {% if current_variant.available %}hide{% endif %}">
<span class="btn btn-waitlist btn-theme" data-toggle="modal" data-target="#jsSoldout" title="{{ 'products.product.soldout_messenger' | t }}">{{'products.product.waitlist' | t}}</span>
</div>
<div class="gr-btnjs d-flex py-4 align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div>
{% if settings.enable_compare %}
<span class="btn js-btn-compare mr-4" data-tooltip="true" title="{{ 'products.product.compare_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-exchange' -%}
{%- include 'icon-close' -%}
<span>{{ 'products.product.compare_text' | t }}</span>
</span>
{% endif %}
{% if settings.enable_wishlsit %}
<span data-tooltip="true" class="js-btn-wishlist mr-4" title="{{ 'products.product.wishlist_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-heart' -%}
<span class="wishlist-text">{{ 'products.product.wishlist_text' | t }}</span>
</span>
{% endif %}
</div>
<div>
{%- include 'productSizeGuide' -%}
</div>
</div>
<div>
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
{% endform %}
{% include 'notifySoldoutProduct' %}
{% endif %}
<div class="row text-left pt-2">
<div class="product-single__information col text-uppercase">
{% if section.settings.product_vendor_enable %}
<p class="product-single__vendor"><small class="text-body">{{'products.product.vendor' | t }}: </small><small>{{ product.vendor }}</small></p>
{% endif %}
{% if section.settings.product_type_enable %}
<p class="product-single__type"><small class="text-body">{{'products.product.type' | t }}: </small><small>{{ product.type }}</small></p>
{% endif %}
{% if section.settings.variant_sku_enable %}
<p class="product-single__sku "><small class="text-body">{{'products.product.sku' | t }}: </small><small class="js-variant-sku">{{ current_variant.sku | default:'null' }}</small></p>
{% endif %}
{% if section.settings.variant_available_enable %}
<p class="product-single__availability "><small class="text-body">{{'products.product.available' | t }}: </small><small>{% if current_variant.available %}{{ 'products.product.available' | t }}{% else %}{{'products.product.sold_out' | t }}{% endif %}</small></p>
{% endif %}
</div>
{% if settings.safe_checkout_detail != blank %}
<div class="safe-checkout-detail col">
<img class="lazyload img-fluid w-100" data-src="{{ settings.safe_checkout_detail | img_url: '600x' }}"/>
</div>
{% endif %}
</div>
{% include 'fake-viewer' %}
{% include 'free-shipping' %}
{% include 'shipping-time' %}
{% if settings.enable_countdown_page %}
{% include 'product-countdown' %}
{% endif %}
{% if section.settings.positiontab == "right" %}
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
{% endif%}
</div>
</div>
</div>

Shopify liquid :How to get variant inventory from ajax cart

This question sounds similar to my own question cart-template-variant. I am doing the same thing with ajax cart header.liquid. I just wanted to access inventory from cart object same as cart-template question {% if item.variant.inventory_quantity < 1 %}. I am initially trying to print {{item.variant.inventory_quantity}} into header.liquid since it is ajax cart. inside {% for item in cart.items %} I have printed {{item.variant.inventory_quantity}} but when I add in stock or out of stock product into the cart. It always returns 0. Which is the cart object property I am not passing properly?
I am actually following below advise but I have missed something here.
The code for Ajax cart is in header.liquid. It has a Cart object, which has many properties. See https://help.shopify.com/themes/liquid/objects/cart#cart-items
One of them is items (i.e. cart.items), which gives all the items added to cart. Around line 100, you will see a for loop {% for item in cart.items %}.
Here item = line_item. The line_item has many properties. See https://help.shopify.com/themes/liquid/objects/line_item.
One of them is variant. i.e. line_item.variant. So here inside for loop will be item.variant.
So now you have variant properties. See https://help.shopify.com/themes/liquid/objects/variant
variant.inventory_quantity is one of them.
header.liquid (Ready to share entire file if required.)
<form action="/checkout" method="post" id="cart">
<ul data-money-format="{{ shop.money_format }}" data-shop-currency="{{ shop.currency }}" data-shop-name="{{ shop.name | escape }}">
<li class="mm-subtitle"><a class="continue ss-icon" href="#cart"><span class="icon-close"></span></a></li>
{% if cart.item_count == 0 %}
<li class="empty_cart">{{ 'layout.general.empty_cart' | t }}</li>
{% else %}
{% for item in cart.items %}
{{item.variant.inventory_quantity}}
<a href="/#" >Will be dispatched by June 7</a>
<li class="cart_item {% if forloop.last %}last_cart_item{% endif %}">
<p class="mm-counter">
<span class="icon-minus minus"></span><input type="number" min="0" class="quantity" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" data-line-id="{{ forloop.index }}" readonly /><span class="icon-plus plus"></span>
</p>
<a href="{{ item.url }}">
{% if item.image %}
<div class="cart_image">
<img src="{{ item | img_url: '410x' }}" alt="{{ item.title | escape }}" />
</div>
{% endif %}
<div class="item_info">
{{ item.product.title }}
{% unless item.product.has_only_default_variant or item.variant.title contains "Title" %}
{% for option in item.product.options %}
{% unless option contains "Title" %}
- {{ item.variant.options[forloop.index0] }} {% unless forloop.last %}/{% endunless %}
{% endunless %}
{% endfor %}
{% endunless %}
{% if item.properties %}
{% for p in item.properties %}
{% if p.last != blank %}
<div class="line-item">
{{ p.first }}: {{ p.last }}
</div>
{% endif %}
{% endfor %}
{% endif %}
<div class="price">
<span class="money">{{ item.price | money }}</span>
</div>
</div>
</a>
</li>
{% endfor %}
<li class="mm-label">
<p class="mm-counter price">
<span class="money">{{ cart.total_price | money }}</span>
</p>
<a href="/cart">
<strong>{{ 'layout.general.subtotal' | t }}</strong>
</a>
</li>
<li class="mm-subtitle clearfix">
{% if settings.display_special_instructions %}
<textarea id="cart-note" name="note" rows="2" placeholder="{{ 'layout.general.cart_note' | t }}" class="clearfix">{{ cart.note }}</textarea>
{% endif %}
{% if settings.display_tos_checkbox %}
<aside class="tos tos_checkbox">
<input type="checkbox" class="tos_agree" id="sliding_agree" required />
<label class="tos_label" for="sliding_agree">
{{ settings.tos_richtext }}
</label>
</aside>
{% endif %}
<input type="submit" class="action_button right" value="{{ 'layout.general.checkout' | t }}" />
{{ 'layout.general.edit_cart' | t }}
</li>
{% endif %}
</ul>
</form>

Adding out of stock to product card grid page

I am trying to apply the following "out of stock" code to the product-card-grid.liquid page but it seems to only be working for one item, ie a single listing on the product-template.liquid, instead of all. I think this is because the referenced implementation is only for one page and not for multiple item listings. How do I update it so that this isn't the case?
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
<a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% unless product.featured_image == blank %}
{% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper js">
<div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
src="{{ product.featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt | escape }}">
</div>
</div>
<noscript>
{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
</noscript>
<div class="h4 grid-view-item__title">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
<div class="grid-view-item__meta">
{% include 'product-price' %}
</div>
{% unless product.available %}
<div id="sold-out" style="margin-top: 10px">
{% form 'contact' %}
{% if form.posted_successfully? %}
<p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
{% else %}
<p><a id="notify-me" class="product-page-notify-me" href="#" style="color: #788188;">Email me when available</a></p>
{% endif %}
{% if form.errors %}
<div class="error feedback accent-text">
<p>Please provide a valid email address.</p>
</div>
{% endif %}
{% unless form.posted_successfully? %}
<div id="notify-me-wrapper" class="clearfix" style="display:none">
{% if customer %}
<input type="hidden" name="contact[email]" value="{{ customer.email }}" />
{% else %}
<input style="float:left; width:100%;" required="required" type="email" name="contact[email]" placeholder="your#email.com" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
{% endif %}
<input type="hidden" name="contact[body]" value="Please notify me when {{ product.title | escape }} becomes available." />
<input style="float:left;" class="btn styled-submit" type="submit" value="Send" />
</div>
{% endunless %}
{% endform %}
</div>
{% endunless %}
</a>
</div>
UPDATE
I've tried editing the jQuery as follows, which fixes it but the submit button sends an email for all the items on the product listing page:
jQuery('.notify-me').click(function() {
jQuery($(this).closest('.contact-form').find('.notify-me-wrapper').fadeIn());
return false;
});