<plugin root>/src/Resources/app/storefront/src/
example-plugin
, so the full path would look like this: <plugin root>/src/Resources/app/storefront/src/example-plugin
example-plugin.plugin.js
.Plugin
class.init()
method. This method will be called when your plugin gets initialized and is the entrypoint to your custom logic. The plugin initialization runs on DOMContentLoaded
event, so you can be sure, that the dom is already completely loaded. In your case you add a callback to the scroll
event from the window and check if the user has scrolled to the bottom of the page. If so we display an alert. Your full plugin now looks like this:window.innerHeight
contains the height of the window, as you might have guessed.window.pageYOffset
, which contains the current scroll position on the Y-axis. It represents the top value of the current scroll, which basically means: If your website is 5000px high and you scroll to the very bottom, the value would not be 5000px, but rather 5000px - window.innerHeight
. Thus, we have to add up the innerHeight
to actually get the bottom of the website.body
tag. If it is higher or equal the total height of the website, you reached the end of the website.main.js
file in a directory <plugin root>/src/Resources/app/storefront/src
, which then will be loaded automatically. Consider this to be your main storefront JavaScript entrypoint.main.js
file inside your <plugin root>/src/Resources/app/storefront/src
folder and get the PluginManager from the global window object. Then register your own plugin:data-example-plugin
attribute. You can then use this.el
inside your plugin to access the DOM element your plugin is bound to.[data-example-plugin]
, so you have to add DOM elements with this attribute on the pages you want your plugin to be active.<plugin root>/src/Resources/views/storefront/page/content/
folder and create a index.html.twig
template. Inside this template, extend from the @Storefront/storefront/page/content/index.html.twig
and overwrite the base_main_inner
block. After the parent content of the blog, add a template tag that has the data-example-plugin
attribute.options
object inside your plugin and assign your options with default values to it. In your case define a text
option and as a default value use the text you previously directly prompted to the user. And instead of the hard coded string inside the alert()
, use your new option value.product-detail
folder inside your <plugin root>/src/Resources/views/storefront/page
folder and add an index.html.twig
file inside that folder. In your template extend from the default @Storefront/storefront/page/product-detail/index.html.twig
and override the block page_product_detail_content
.data-example-plugin
tag to activate your plugin on product detail pages as well. Next add a data-{your-plugin-name-in-kebab-case}-options
(in this example: data-example-plugin-options
) attribute to the DOM element you registered your plugin on (the template tag). The value of this attribute are the options you want to override as a JSON object.replace_recursive
Twig filter for this case.slider.mouseDrag
with your plugin. The variable can be overwritten with replace_recursive
:*.js
files are located. You have your main.js
as an entry point inside of the following directory: <plugin root>/src/Resources/app/storefront/src
.<plugin root>/src/Resources/app/storefront/dist/storefront/js/<plugin-name>.js
. This file will be recognized automatically by Shopware.