How Do I Listen To And React To JavaScript Events In Shopware 6 Storefront

Question

I am building a Shopware 6 JavaScript plugin for the storefront. I created a button and need to listen to it and react accordingly when it is 'Clicked'.

Below is my code which does not seem to work.

main.js file code below

//Resources\app\storefront\src\main.js

import TestClickPlugin from './testclick/testclick.plugin';

const PluginManager = window.PluginManager;
PluginManager.register('TestClickPlugin', TestClickPlugin, '.swp');

plugin file code below

//Resources\app\storefront\src\testclick\testclick.plugin.js
import Plugin from 'src/plugin-system/plugin.class';

export default class TemporaryWatermarkPlugin extends Plugin {

    init() {

       document.querySelector(".swp").addEventListener("click",  this.logThis().bind(this));       
    }

    logThis() {
        console.log("It Works!!!!!");     
    }
   
}

And lastly, my twig file code below

//Resources\views\storefront\page\product-detail\buy-widget.html.twig

{% sw_extends '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}

    {% block page_product_detail_buy_inner %}

        {{ parent() }}


            {% block swp_block %}

                <div>
                   <button class="swp">Click Me </button>
                </div>

            {% endblock %}

    {% endblock %}

How do I get the function logThis() to run when clicked in the storefront.

Answer 1

Change

this.logThis().bind(this)

to

this.logThis.bind(this)

since you want to reference the function, not call it.

Also in the init function you may want to use this.el instead of document.querySelector(".swp") since you already registered the plugin for that element.