Tag: Theme

Posted on

How to create modal popup in magento 2 using Magento_Ui/js/modal/modal?

How to create a Popup Modal using Javascript in Magento 2?

Create a .phtml template file with the given content to make Modal popup using Magento 2,

<div class="main-block">
    <div class="content">
    	<a href="javascript:void(0)" id="chart"><?php echo __('Chart size');?></a>
    </div>
    <!-- Your Popup content with main div display none -->
    <div id="popup-chart" style="display:none;">
        YOUR POPUP CONTENT GOES HERE
    </div>
</div>
<script>
require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal',
            'domReady!'
        ],
        function($, modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: []
            };

            modal(options, $('#modal-form'));
        }
);
</script>

In the above template file, we can show a popup based on clicking on the chart size. When click on the chart link defined in our DOM element popup modal will be displayed.

Call Magento_Ui/js/modal/modal js file as a dependency.

There are many default options are available for modal.js file.

Different types of options you can provide as per your requirement in above options object.

List of default options for a modal popup, if you want to override the default value set options value in your custom template in the options object.

    type: 'popup',
    title: '',
    subTitle: '',
    modalClass: '',
    focus: '[data-role="closeBtn"]',
    autoOpen: false,
    clickableOverlay: true,
    popupTpl: popupTpl,
    slideTpl: slideTpl,
    customTpl: customTpl,
    modalVisibleClass: '_show',
    parentModalClass: '_has-modal',
    innerScrollClass: '_inner-scroll',
    responsive: false,
    innerScroll: false,
    modalTitle: '[data-role="title"]',
    modalSubTitle: '[data-role="subTitle"]',
    modalBlock: '[data-role="modal"]',
    modalCloseBtn: '[data-role="closeBtn"]',
    modalContent: '[data-role="content"]',
    modalAction: '[data-role="action"]',
    focusableScope: '[data-role="focusable-scope"]',
    focusableStart: '[data-role="focusable-start"]',
    focusableEnd: '[data-role="focusable-end"]',
    appendTo: 'body',
    wrapperClass: 'modals-wrapper',
    overlayClass: 'modals-overlay',
    responsiveClass: 'modal-slide',
    trigger: '',
    modalLeftMargin: 45,
    closeText: $.mage.__('Close'),
    buttons: [{
        text: $.mage.__('Ok'),
        class: '',
        attr: {},

        /**
         * Default action on button click
         */
        click: function (event) {
            this.closeModal(event);
        }
    }],
Posted on

How to Call CMS Static Block in Phtml File using Magento 2?

If you have created CMS Static Block and you want to call it from the template file,
You can call like below way in Magento 2,

<?php 
      echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')
                 ->setBlockId('block_identifier')
                 ->toHtml();
?>

Where block_identifier is your static block identifier. Clear Cache and Check your result.

Posted on

How to resolve Uncaught ReferenceError: jQuery is not defined(anonymous function) error magento 2?

Many time during custom development in Magento 2 using require js we have faced error like,

Uncaught ReferenceError: jQuery is not defined(anonymous function).
Uncaught TypeError: $(…).customjs is not a function.

Above issue can be resolved using require js paths and shim attribute of requirejs.
Most of the time issue occurs because of jQuery is not loaded before our custom js file due to AMD(asynchronously module dependencies) nature of require js.

Many of the custom js or Third party js library depends on Jquery to load first.
In Magento 2, Magento team used require js concept for improvement of site speed.

So you need to add dependencies in requirejs-config.js file as below. let’s assume you are using slider js names myslider.min.js and they depend on jquery. Your requirejs-config.js file will be as below,

var config = {
    paths: {
            'myslider': 'Vendor_Module/js/myslider.min'
    },
    shim: {
            'myslider': {
                deps: ['jquery'] //gives your parent dependencies name here
            }
    }
};

Gives pathname under the paths object, Your myslider.min.js stay at app/code/<Vendor>/<Module>/view/frontend/web/js/myslider.min.js

Gives dependencies using shim attribute. Our slider depends on jquery.