plans-list.twig

{% 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>