1. Create Your Component
Assuming the path to your component is Briteskies_ProductConfigurator/js/configurator.js, use the contents below. Notice the return function gets a config
and element
parameter.
The config
parameter will contain options that you define when initializing the component from your template.
The element
parameter will be a reference to the DOM object you target when initializing the component from your template:
define([
'jquery',
'slick'
], function ($) {
return function(config, element) {
var speed = config.autoplaySpeed;
// When document is ready
$(function () {
$(element).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
autoplay: true,
autoplaySpeed: speed
})
});
};
});
2. Map Your Component (Make it available to requirejs)
In your module's requirejs-config.js file, define a configurator component and point to its path. I've omitted your other code to see only the changes to be added:
var config = {
map: {
"*": {
configurator: 'Briteskies_ProductConfigurator/js/configurator'
}
}
};
3. Initialize Component From Your Template
In the template that will hold the content needing the slick slider, you can target an element and specify which component to use.
The DOM object(s) that the ".main-gallery"
key below matches gets passed as the element
parameter mentioned in Step 1.
The json object defined after the "configurator"
key below gets passed as the config
parameter mentioned in Step 1.
Bonus: If you are using your own Block for the template, you could fetch system configuration values and make them available to your component (say for toggling autoplay speed, whether to use arrows, slides to show, etc...):
<script type="text/x-magento-init">
{
".main-gallery" : {
"configurator" : {
"autoplaySpeed": 5000
}
}
}
</script>
Best Answer
You can use the sample Magento_SamplePaymentGateway module files as basis for your custom module structure and files.
Magento_Sales
module: to be able to get order detailsMagento_Payment
module: to use the Magento payment provider gateway infrastructureMagento_Checkout
module: to be able to add the new payment method to checkout .Specify these dependencies in your
composer.json
andmodule.xml
files.%Vendor_Module%/composer.json
file, specify the dependencies like in the following example:Add the same dependencies in
%Vendor_Module%/etc/module.xml
like in the following example:After this follow Magento DevDocs
For more reference