Schedule a call with our team and discuss how can we, not only help you technically but help in increasing your ecommerce’s conversion rate.
Here we are discussing how to create and call custom popup using Magento 2’s Popup Modal Library.
You should create a module first, then after create a requirejs-config.js file at app/code/CustomVendor/CustomModule/view/frontend/
|
1 2 3 4 5 6 7 8 9 10 |
var config = { paths: { 'myjs': "CustomVendor_CustomModule/js/customfile" }, shim: { 'myjs': { deps: ['jquery'] } } } |
You need to create customfile.js at app/code/CustomVendor/CustomModule/view/frontend/web/js/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function( $, modal ) { var options = { type: 'popup', responsive: true, innerScroll: true, buttons: [{ text: $.mage.__('Continue'), class: 'mymodal1', click: function () { this.closeModal(); } }] }; var popup = modal(options, $('#custompopup')); $("#click-here").on('click',function(){ $("#custompopup").modal("openModal"); }); } ); </script> |
Add following code in your phtml file:
|
1 2 3 4 5 6 7 8 |
<div data-mage-init='{"myjs": {}}'> <a href="#" id="click-here">Click Here</a> </div> <div id="custompopup" > This is custom popup using magento popup modal. </div> |
create the event.xml on your module under the Vendor/Module/etc/event.xml and...
If you need a custom meta tag for a specific...
Generally, if you load font as preload, it will load...
Step 1: First you need to add di.xml in the...
Override the vendor/magento/module-sales/view/frontend/templates/email/items/order/default.phtml file on your theme and add the...
