I'm working on solution that shows product variants with ability to select attributes in the front end. Now I have code like this:
{% set colour = colour ?? [] %}
{% set length = length ?? [] %}
{% set addedToCart = success is defined %}
{% set colours = craft.categories().group('spalva').relatedTo(productId).all() %}
{% set lengths = craft.categories().group('ilgis').relatedTo(productId).all() %}
{% set variantQuery = craft.variants().productId(productId) %}
{% if colour %}
{% do variantQuery.andRelatedTo(colour) %}
{% endif %}
{% if length %}
{% do variantQuery.andRelatedTo(length) %}
{% endif %}
{% do variantQuery %}
{% set variants = variantQuery.all() %}
<form sprig s-method="post" s-action="commerce/cart/update-cart">
<input type="hidden" name="qty" value="1">
<fieldset>
<p class="is-size-4 has-text-black mb-3">Pasirinkite stotelės spalvą</p>
<div class="columns is-multiline">
{% for colourOption in colours %}
<div class="column is-6">
<label class="labl">
<input sprig type="radio" name="colour" value="{{ colourOption.id }}" {{ colour == colourOption.id ? 'checked' }}>
<div>{{ colourOption.title }}</div>
</label>
</div>
{% endfor %}
</div>
</fieldset>
<fieldset>
<p class="is-size-4 has-text-black">Parinkome laido ilgį</p>
<p class="is-size-7 has-text-black mb-3">Į plana įskaičiuotas 5m integruotas laidas (už papildomą mokestį galima pasirinkti ilgesnį).</p>
<div class="columns is-multiline">
{% for lengthOption in lengths %}
<div class="column is-6">
<label class="labl">
<input sprig type="radio" name="length" value="{{ lengthOption.id }}" {{ length == lengthOption.id ? 'checked' }}>
<div>{{ lengthOption.title }}</div>
</label>
</div>
{% endfor %}
</div>
</fieldset>
<fieldset class="mb-8">
{% if colour and length %}
{% for variant in variants %}
<div class="columns is-multiline has-border pt-3 pb-3 mt-5 has-text-black">
<div class="column is-half">
{% set price = variant.price / 24 %}
<p class="mb-2"><span data-variant-price-full class="is-size-5 has-text-weight-normal">{{ price|number(decimals=2) }}</span><span class="is-size-7"> €/mėn.</span></p>
<p class="is-size-7">Sutartis 24 mėn<br/>
Pradinė įmoka 0 €</p>
</div>
<div class="column is-half has-text-right">
<span class="is-size-5 has-text-weight-normal"><span data-variant-price-full>{{ variant.salePrice }}</span></span><span class="is-size-7"> €</span>
</div>
</div>
<input style="display: none!important" type="radio" name="purchasableId" value="{{ variant.id }}" checked>
{% endfor %}
<div class="columns mt-5">
<div class="column is-12">
<button type="submit" class="button is-fullwidth is-cart">Pridėti į mano krepšelį</button>
</div>
</div>
<div class="columns mt-5">
<div class="column is-12">
{% if addedToCart and success %}
was added to your cart!
{% endif %}
</div>
</div>
{% else %}
{% set products = craft.products()
.id(productId)
.all() %}
{% for product in products %}
{% set price = product.defaultVariant.salePrice / 24 %}
<div class="columns is-multiline has-border pt-3 pb-3 mt-5 has-text-black">
<div class="column is-half">
<p class="mb-2"><span data-variant-price-full class="is-size-5 has-text-weight-normal">{{ price|number(decimals=2) }}</span><span class="is-size-7"> €/mėn.</span></p>
<p class="is-size-7">Sutartis 24 mėn<br/>
Pradinė įmoka 0 €</p>
</div>
<div class="column is-half has-text-right">
<span class="is-size-5 has-text-weight-normal"><span data-variant-price-full>{{ product.defaultVariant.salePrice }}</span></span><span class="is-size-7"> €</span>
</div>
</div>
{% endfor %}
{% endif %}
</fieldset>
</form>
Everything is working fine but I'm looking for the solution on stock check. Let's say I have two colour options - Black and White and both of them can be 2 or 5 metres length. I need to check if any option with the Black have stock and if not - disable of choosing Black input. If one of two exist - let user to choose Black but then show that 2 or 5 metres are out of stock.
Can someone help me out with this?