Good morning,
i’d like to create a simple configurator for a t-shirt where i can select the main color, the color of some part and the color of other parts. I will bring the image with the appropriate color starting from an image of each part, passed to a php script created by me which manipulate the color. So i will have a link to the script that gives me the image, based on the query string i pass. Is there something already done where i can take inspiration? I just start to use stimulus and i think i can fit my requirements to update the preview based on the thumbs i selected for the color and for the model of the t-shirt
Welcome! As Obi-Wan once said, “you’ve just taken your first step into a larger world”.
The first thing I would recommend to you is to get this working without Stimulus first. If there is a URL that can be reached by clicking on the color swatch which then does a full redirect to the same page that contains the properly-colored image, then that’s where I would start. Then you can “progressively enhance” this by hijacking the click and updating the page in place (without a redirect). This provides a convenient fallback for the (increasingly few, I know) people who have disabled JS in their browser.
Then you can decorate that link with a set of data-attributes to mark it out as something your controller should intercept. I would put a single reference to the controller on a common DOM parent to the image and the link(s) that change the colors/models. On the image, add a data-target identifying it as the output image. Then in the link, I would add a data-action directive to capture the click on the link, and fire a method in your controller to update the output image. Because they are in the same controller, you will have access to both the link and the image at the same time.
But start with something that already works, at the expense of being “old-school and ugly”. That way your enhancement doesn’t have to do a bunch of grunt work.
Learn how to use Fetch in a Stimulus controller. Here’s one (of many) places to look at this: Ajax with fetch(), Polyfills & async/await > Symfony UX: Stimulus | SymfonyCasts
Once you have the basics of this worked out, you can refine your app to return only the updated image (from a different URL) and adjust your controller method to use that instead of the whole-page version. But leave the original full-page refresh around, just for the folks who need it. Like search engines.
Walter
1 Like
Thank you for the reply. I just wanted to make it quickly, that’s why i studied stimulus and used outlets too. But i will give a try to old-school method