Logic
We are using Stimulus.js and Siema Carousel to create a Product slideshow Shopify Section. Because stimulus accepts options from element attributes, we can pass customisations to the carousel from the sections HTML markup and thus we can avoid infusing JavaScript.
The code below can give you some understanding of how it is achieved. It's an extraction from a project I have in production and of course without the related stylesheets and css it will not function as a drop-in solution but hopefully gives you some clarity on how leveraging stimulus in a Shopify theme benefits one greatly.
Couple of key points and takeaways are the the way we wire it up, the "controller" context where we pass in option is set on the first div tag:
<div
class="row pt-{{ section.settings.gutter }} pb-3"
data-carousel-draggable-value="{{- section.settings.draggable }}"
data-carousel-interval-value="{{- section.settings.interval | append: '000' -}}"
data-carousel-loop-value="{{- section.settings.loop }}"
data-carousel-per-page-value="{{- section.settings.per_page }}"
data-controller="carousel">
This option are passed the static class values in the controller, eg:
static values = {
startIndex: Number,
draggable: Boolean,
perPage: Number,
loop: Boolean,
interval: Number,
initHidden: Boolean,
hydrate: String,
loadOnClick: Boolean,
duration: Number
}
You will need to read about Stimulus to understand what is happening, so do that. Nonetheless this code stands as an example of how one would leverage stimulus in a Shopify theme project.