Getting/setting a product variant and updating with sprig

Question

I am trying to use Sprig and commerce to set the product variant using a query string? I want to pass the variant and use sprig to change some information depending on the variant selected. Normally, I would do this via the input/radio button ‘name’ field to set this in the query string and check it and then show.

However, with commerce products the name field is purchasables[1][id] So I am a little stuck as to how I can do this?

here is what I have so far…

  {% set product = craft.products.id(_productId).one ?? null %}
  {% set cart = cart is not defined ? craft.commerce.carts.getCart() : cart %}

  {% set params = {} %}
  {% set variantId = variantId ?? null %}

  {% set variantIds = [4553, 4554, 4555, 4556, 4557] %} (this will be done properly once working, whereby I will set the variant ids for the specific product).
  {% set defaultVariantId = product.defaultVariant.id %}

  {% if craft.app.request.queryParam('variant') %}
    {% set variantId = craft.app.request.queryParam('variant') %}
    {% set params = params|merge({variant:variantId}) %}
  {% endif %}

  {% set variantId = variantId in variantIds ? variantId : defaultVariantId %}
  {% set variant = craft.variants.id(variantId).one ?? null %}
  {% set discounts = variant.setDiscounts[cart.paymentCurrency] %}

  {% do sprig.pushUrl('?' ~ params|url_encode) %}

<div sprig s-replace="#qtyOptions">
  <h3 class="mb-3 text-gray-700 uppercase">{{ variantHeading|default('Options') }}</h3>
  <div class="flex flex-wrap items-center mb-12">
    {% for variant in product.variants %}
      <label class="mr-3 mb-3 relative transition cursor-pointer variant-option choice-button focus-within:ring-1 focus-within:ring-offset-2 focus-within:ring-blue-500"
             for="{{ variant.id }}"
      >
        <input type="radio"
               @click="selectedVariant={{ variant.id }}, variantTitle='{{- variant.title|trim -}}'"
               id="{{ variant.id }}"
               name="purchasables[1][id]"
               value="{{ variant.id }}"
               class="sr-only"
          {{ variant.id == variantId ? 'checked' : loop.first ? 'checked' : '' }}
        >
        <span class="block py-2 px-4 text-sm text-gray-400 border border-gray-300 transition variant-label hover:border-gray-400 hover:text-gray-500">
          {{ variant.title }}
        </span>
      </label>
    {% endfor %}
    
    <div class="text-sm text-gray-400 font-light mb-3 self-center">
      Can’t find the right size? <a href="{{ siteUrl('contact') }}" class="text-blue-500 underline hover:text-sea-500">Contact Us</a>
    </div>
  </div>
  <div id="qtyOptions">
    
    {{ variant.title }}
    
    <div class="text-center p-2 align-middle">
      {{ variant.priceAsCurrency }}
      <div class="block text-xs text-gray-300">({{ variant.priceAsCurrency }} each)</div>
    </div>
  </div>

[bencroker]

Yes, the way you’ve implemented it is fine, I was just suggesting how I would pass the query string parameter to the Sprig component.

[bencroker]

I’m not sure, at this stage I’ve seen too much code without understanding the big picture. Hidden input fields (regardless of which approach you use) should work, but I’ll just point out that you should also be able to access the values of the radio fields in your code, which should help you drop the s-val.

  <input type="radio"
         name="purchasables[1][qty]"
         value="{{ purchasables[1].qty ?? qtyParam }}"