commerce product page with sprig

product.twig

{% extends 'shop/_layouts/main' %}

{% block main %}

{{ sprig('product_content', {productId: product.id}) }}
{{ sprig.script }}

{% endblock %}

product_content.twig

{% set variantParam = 'variant' %}

{# set product #}
{% set product = craft.products.id(productId).one() %}

{# set variant #}
{% set variant = product.defaultVariant %}

{# overvrite default variant with url param #}
{% if product.variants|filter(v => v.id == craft.app.request.getParam(variantParam)) is not empty %}
	{% set variant = product.variants|filter(v => v.id == craft.app.request.getParam(variantParam))|first %}
{% endif %}


{# product content #}
<h1>{{product.title}}</h1>

<div id="sprig">

	{# show price #}
	Price: {{variant.price|commerceCurrency}}

	{# basket #}
	<form action="">
		{{ actionInput('commerce/cart/update-cart') }}
		{{ csrfInput() }}
		{{ hiddenInput('purchasableId', variant.id) }}
		<button>Add to cart</button>
	</form>

	{# variant switcher #}
	{% if product.variants|length > 1 %}
		<div class="variant-widget">
		{% for option in product.variants %}
			<button 
				class="{{variant.id == option.id ? 'is-selected'}}"
				sprig s-push-url="?{{variantParam ~ '=' ~ option.id}}" 
				s-target="#sprig" 
				s-swap="outerHTML" 
				s-vars="{{variantParam}}: {{option.id}}" 
				s-indicator="#preloader"
			>
				{{option.sku}}
			</button>
		{% endfor %}
		</div>
	{% endif %}

	{# preloader #}
	<div id="preloader">
		Loading
	</div>

</div>

{# show/hide preloader #}
<style>
	#preloader {
		display: none;
	}
	#preloader.htmx-request {
		display: block;
	}
</style>

{% js %}
document.body.addEventListener('htmx:afterSwap', function(evt) {
  // reinitialize js scripts
});
{% endjs %}