<p>Ended up going with Sprig, which seems to work pretty well. Open to ideas on how to improve this, especially if there's some better options for performance.</p>
<pre><code>{% set colour = colour ?? '' %}
{% set addedToCart = success is defined %}
{% set variants = craft.variants().productId(productId).relatedTo(colour).all() %}
{% set colours = craft.categories().group('colours').all() %}

&lt;form sprig s-method=&quot;post&quot; s-action=&quot;commerce/cart/update-cart&quot;&gt;
  &lt;input type=&quot;hidden&quot; name=&quot;qty&quot; value=&quot;1&quot;&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Colour&lt;/legend&gt;
    &lt;div&gt;
      {% for colourOption in colours %}
        &lt;label&gt;
          &lt;input sprig type=&quot;radio&quot; name=&quot;colour&quot; value=&quot;{{ colourOption.id }}&quot;&gt;
          &lt;p id=&quot;colour-label&quot; class=&quot;sr-only&quot;&gt;
            {{ colourOption.title }}
          &lt;/p&gt;
          &lt;span class=&quot;h-8 w-8 bg-{{ colourOption.slug }}-500 border-gray-200 rounded-full p-2 {{ colour == colourOption.id ? &quot;ring-4 ring-gold-500&quot; : &quot;ring-2 ring-gray-200&quot; }}&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
      {% endfor %}
    &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;fieldset class=&quot;mb-8&quot;&gt;
    &lt;legend&gt;
      Size
    &lt;/legend&gt;
    &lt;div&gt;
    {% for variant in variants %}
      &lt;label&gt;
        &lt;input type=&quot;radio&quot; name=&quot;purchasableId&quot; value=&quot;{{ variant.id }}&quot;&gt;
        {{ variant.title }}
      &lt;/label&gt;
    {% endfor %}
  &lt;/fieldset&gt;

  &lt;button type=&quot;submit&quot;&gt;Add to cart&lt;/button&gt;
  
  {% if addedToCart and success %}
    &lt;div&gt;{{ product.title }}&lt;/span&gt; was added to your cart!&lt;/div&gt;
  {% endif %}
&lt;/form&gt;
</code></pre>

CC BY-SA 4.0
2021-12-02T00:01:53.063Z
Interested to see this, and am considering re-doing our variatn order forms with a similar approach.  I can't see Sprig being any much different, performance wise, than anything else really - ultimately it's an ajax call to the same controller and it's really the Commerce time here that is the determining factor, I think?  The only time Sprig can distinctly slow things down is if you're repeatedly hitting the server when you could instead be doing something simply on the client side (e.g. sorting and filtering, for example).
Jeremy Daalder
CC BY-SA 4.0
2021-12-07T03:18:02.020Z
Yeah basically what I thought. It's working well in practice!
supazu
CC BY-SA 4.0
2021-11-24T02:40:24.787Z
2021-11-24T02:40:24.787Z
supazu
<p>I'm basically looking for a more up-to-date way to do this: <a href="https://www.vaersaagod.no/en/multi-attribute-variant-selection-in-craft-commerce" rel="nofollow noreferrer">https://www.vaersaagod.no/en/multi-attribute-variant-selection-in-craft-commerce</a></p>
<p>So that I can allow users to select color and size in two separate steps, like Tailwind UI.</p>
<p><a href="https://i.sstatic.net/kQ9zK.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/kQ9zK.png" alt="Tailwind UI Add to Cart" /></a></p>
<p>Does anyone have a guide / examples of how to do this?</p>

<plugin-craftcommerce><variants>
Multi-attribute product variants
# Multi-attribute product variants

(Asked by: username_0 on 2021-11-23)

I'm basically looking for a more up-to-date way to do this: <https://www.vaersaagod.no/en/multi-attribute-variant-selection-in-craft-commerce>

So that I can allow users to select color and size in two separate steps, like Tailwind UI.

[![Tailwind UI Add to Cart](https://i.sstatic.net/kQ9zK.png)](https://i.sstatic.net/kQ9zK.png)

Does anyone have a guide / examples of how to do this?

**Tags:** plugin-craftcommerce, variants


---

## 1 answers

### Answer by username_0 on 2021-11-24. Score: 1 | Accepted answer

Ended up going with Sprig, which seems to work pretty well. Open to ideas on how to improve this, especially if there's some better options for performance.
{% set colour = colour ?? '' %}
{% set addedToCart = success is defined %}
{% set variants = craft.variants().productId(productId).relatedTo(colour).all() %}
{% set colours = craft.categories().group('colours').all() %}


  
  
    Colour
    
      {% for colourOption in colours %}
        
          
          
            {{ colourOption.title }}
          
          
        
      {% endfor %}
    
  
  
    
      Size
    
    
    {% for variant in variants %}
      
        
        {{ variant.title }}
      
    {% endfor %}
  

  Add to cart
  
  {% if addedToCart and success %}
    {{ product.title }} was added to your cart!
  {% endif %}

> **Comments:**
> **username_1**: Interested to see this, and am considering re-doing our variatn order forms with a similar approach.  I can't see Sprig being any much different, performance wise, than anything else really - ultimately it's an ajax call to the same controller and it's really the Commerce time here that is the determining factor, I think?  The only time Sprig can distinctly slow things down is if you're repeatedly hitting the server when you could instead be doing something simply on the client side (e.g. sorting and filtering, for example).  
> **username_0**: Yeah basically what I thought. It's working well in practice!  

---

