Visual feedback to user actions
It is good to give visual clues how to accomplish tasks when a user interacts with a page.
This example will show a common way to do this with both jQuery and Knockout.js in Luma, and then how that could be done with Alpine.js.
The example task is to add opacity to an image when a checkbox is checked.
This is the HTML:
With jQuery, a require.js module would be loaded with
x-magento-init, and some code like the following would take care of adding the
opacity-40 class to the image:
Using Knockout, a view model scope would be assigned using
The view model would have an observable property, maybe called
isSelected. This property would be referenced from the DOM as something like this:
<?php // generate a unique JS property name (has to start with a character) $refId = $escaper->escapeHtmlAttr('i' . md5($escapedId)); ?> <input type="checkbox" id="<?= $escapedId ?>" value="1" x-on:change="$refs.<?= $refId ?>.classList.toggle('opacity-40')"/> <img src="<?= $field->getMediaUrl() ?>" x-ref="<?= $refId ?>"/>