Checkbox always returns true after commerce/cart/update-cart

[john-henry]

Hi Ben

I have a shipping step in my checkout page

{{ sprig('checkout/_steps/shipping', {},{id:'shipping'}) }}

In this template checkout/_steps/shipping I have a checkbox that, when checked, I want to update the cart and refresh order summary.

{% if sprig.isRequest %}
    <script>
        document.querySelector('#orderSummary').dispatchEvent(new Event('refresh'));
        console.log('{{ success ? 'success' : 'error' }}');
    </script>
{% endif %}

<input sprig s-action="commerce/cart/update-cart" s-method="post" type="checkbox" id="fields[rushShipping]" name="fields[rushShipping]" value="1" class="opacity-0 absolute h-6 w-6" {% if cart.rushShipping == '1' %}checked{% endif%}  />

{{ sprig('checkout/_includes/order-summary.twig', {}, { id: 'orderSummary, 's-trigger': 'refresh' }) }}

The issue is everytime I click the checkbox it repopulates the checkmark. I can never select 'none' It always returns true for that checkbox. Its lightswitch field in backend

I also tried s-trigger on input field for clickand change but nothing works

[bencroker]

What about if you use the fields variable to check the value?

{% if fields.rushShipping ?? false %}checked{% endif%}

[bencroker]

Note that you can also use htmx’s API to simplify some of your JavaScript code, see https://putyourlightson.com/articles/htmx-has-a-javascript-api-btw

{% if sprig.isRequest %}
    <script>
        htmx.trigger('#orderSummary', 'refresh');
    </script>
{% endif %}

Or, using s-listen you can remove the JavaScript code altogether.

{{ sprig('checkout/_includes/order-summary.twig', {}, { id: 'orderSummary' }) }}
{{ sprig('checkout/_steps/shipping', {}, { 's-listen': '#orderSummary' }) }}

[john-henry]

Thanks @bencroker Nothing works and I havent been successful in using htmx.trigger for anything since sprig script tag was removed

What is the fields variable? Am I missed a trick?

I can get it to refresh order summary first go but any time after that it doesn't and just keeps putting the tick back after a second in the checkbox

[bencroker]

Nothing works

Welcome to web development!

I can get it to refresh order summary first go but any time after that it doesn't and just keeps putting the tick back after a second in the checkbox

Maybe you need to explicitly revert the value to 0 when the field is unchecked. Can you try adding a hidden input field before the checkbox?

{{ hiddenInput('fields[rushShipping]', 0) }}

<input sprig s-action="commerce/cart/update-cart" s-method="post" type="checkbox" id="fields[rushShipping]" name="fields[rushShipping]" value="1" class="opacity-0 absolute h-6 w-6" {% if cart.rushShipping == '1' %}checked{% endif%}  />

[john-henry]

Woohoo that worked. Thanks @bencroker

[bencroker]

Great!

I havent been successful in using htmx.trigger for anything since sprig script tag was removed

The new considerations are documented at https://putyourlightson.com/plugins/sprig#javascript

[john-henry]

Yes the manual @bencroker RTFM :)