I want to trigger some event on the swatch click but not on page load in the category page.

  • 1
    Do you mean to trigger a JS event? Commented Sep 19, 2018 at 11:38
  • thanks for replay. Yes but don't want on page load
    – karthik
    Commented Sep 19, 2018 at 11:39

1 Answer 1


You can use regular JS event listeners to bind to the swatch element.

One of the least intrusive ways you can do this by doing something like this in your custom theme:


var config = {
    deps: [


], function ($) {
    $('[class*="swatch-opt"]').on('click', '.swatch-option', function() {
        // This should trigger when swatches are clicked, NOT on page load.
        console.log('Swatch clicked...')

Keep in mind this requirejs-config.js will load your script in all pages, even if they don't have swatches, which might not be ideal so you might want to move the loading into a different block using text/x-magento-init script tags.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.