Skip to content

Instantly share code, notes, and snippets.

@piotrpog
Last active June 15, 2022 19:01
Show Gist options
  • Save piotrpog/3f48d73af2c8fd3d469a232c8ec08b14 to your computer and use it in GitHub Desktop.
Save piotrpog/3f48d73af2c8fd3d469a232c8ec08b14 to your computer and use it in GitHub Desktop.
Commerce product page with sprig. Old version, doesnt work with Craft 4.
{% 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