Skip to content

Instantly share code, notes, and snippets.

@sparkalow
Forked from piotrpog/product.twig
Created December 9, 2021 18:48
Show Gist options
  • Save sparkalow/0f546dd4b1ef68538b90bd2d61e25f80 to your computer and use it in GitHub Desktop.
Save sparkalow/0f546dd4b1ef68538b90bd2d61e25f80 to your computer and use it in GitHub Desktop.
commerce product page with sprig
{% extends 'shop/_layouts/main' %}
{% block main %}
{{ sprig('product_content', {productId: product.id}) }}
{{ sprig.script }}
{% endblock %}
{% 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 %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment