:::: MENU ::::
Posts tagged with: js

Use js mixins magento 2

In this tutorial we will discuss Use js mixins magento 2 .i.e how to use js mixins in magento 2.And in this tutorial i will try to explain it briefly and also make it convenient.

Suppose your code does some task before any js script’s function run or you want to extend a function or to modify some data without overwriting js. And you want to know how to do it.Then this tutorial will help you learn and overcome all these problems easily.

First of all you will need to create requirejs-config.js under app/code/QaisarSatti/HelloWorld/view/frontend, like below:

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/set-shipping-information': {
                'QaisarSatti_HelloWorld/js/action/set-shipping-information-mixin': true
            }
        } // this is how js mixin is defined
    }
};
// Here i am extending "Magento_Checkout/js/action/set-shipping-information" this js with our custom js "QaisarSatti_HelloWorld/js/action/set-shipping-information-mixin".

Furthermore create set-shipping-information-mixin.js file under app/code/QaisarSatti/HelloWorld/view/frontend/web/js/action to extend original function. So here i am just using dummy data to shipping address only , Below is the code:

/*jshint browser:true jquery:true*/
/*global alert*/
define([
    'jquery',
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote'
], function ($, wrapper, quote) {
    'use strict';
 
    return function (setShippingInformationAction) {
 
        return wrapper.wrap(setShippingInformationAction, function (originalAction) {
            var shippingAddress = quote.shippingAddress();
 
            if (shippingAddress['extension_attributes'] === undefined) {
                shippingAddress['extension_attributes'] = {'customvar':"value1"};
            }
            // you can write here your code according to your requirement
            return originalAction(); // it is returning the flow to original action
        });
    };
});

Now console thequote.shippingAddress() in js to you should see the result:

That’s it from this tutorial. I hope it serves the purpose.Furthermore please feel free to drop any suggestions or queries in comments section. That will definitely be highly appreciated.

Author: Qaisar Satti
Category: Magento 2
Last Modified: January 11, 2019


Magento 2 create js Popup

This tutorial is about Magento 2 Create Popup.How to create Popup in magento 2.First of all i assume that you are familiar with magento 2 and hence you are at this level where you want to know how to Create Popup in magento 2. Above all if you are not familiar with advance magento concepts. Than you must look for basics,and please look for magento 2 basic tutorials.

So lets start our tutorial and focus on our topic.Lets suppose you want to create Popup in magento 2.Lets see how we can do this in a simple way.

In Magento 2 we can simply call modal popup using default modal.js library.

Create phtml file

First of all create a phtml(template) file.And paste the following code in it:

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

In above template file we showed popup,based on click on chart link.It means When click on chart link is defined in our DOM element, popup modal will be displayed automatically.

So the next step is to Call Magento_Ui/js/modal/modal object in your require dependency(file).

There are many default options available for modal.js file in magento 2.You can use or you can pass any of them as per your requirement in above options object.
For that below is the List of default options for modal popup.Therefore if you want to override the default value,then you can set options value in your custom template in options object.

You can modify the below code according to your needs.

    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);
        }
    }],

That’s it from this tutorial. I hope it serves the purpose.
Furthermore please feel free to drop any suggestions or queries in comments section. That will definitely be highly appreciated.

Author: Qaisar Satti
Category: Magento 2
Last Modified: October 29, 2018


Magento 2 call js css file homepage

Today we discuss about Magento 2 call js css file homepage.This tutorial include how to add js file on homepage, How to add css file on home.There are two way to add css or js file on homepage.You can add js or css file from admin or you can add file from layout. So let’s start with our example.

Admin Panel

You can add js or css file from admin panel.

content->page -> edit page in design tab Layout Update XML

Add following code.

   <head><script src="js/myfile.js"/></head>
   <css src="css/mystyle.css"/>

Layout File

Add Js

If you are adding js in your theme create cms_inde_index.xml in following path.

app/design/frontend/QaisarSatti/theme/Magento_Theme/layout/cms_inde_index.xml

myfile.js location will

app/design/frontend/QaisarSatti/theme/Magento_Theme/web/js

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head><link src="js/myfile.js"/></head>
</page>

If You want it to add from module xml then create cms_inde_index.xml in following path.

app/code/QaisarSatti/view/HelloWorld/frontend/layout/cms_inde_index.xml

myfile.js location will

app/code/QaisarSatti/view/HelloWorld/frontend/web/js

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head><link src="FME_GoogleMapsStoreLocator::js/myfile.js"/></head>
</page>

Add css

If you are adding cs in your theme create cms_inde_index.xml in following path.

app/design/frontend/QaisarSatti/theme/Magento_Theme/layout/cms_inde_index.xml

mystyle.css location will

app/design/frontend/QaisarSatti/theme/Magento_Theme/web/css

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head><link src="css/mystyle.css"/></head>
</page>

If you want it to add css from module xml then create cms_inde_index.xml in following path.

app/code/QaisarSatti/view/HelloWorld/frontend/layout/cms_inde_index.xml

mystyle.css location will

app/code/QaisarSatti/view/HelloWorld/frontend/web/css

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head><link src="FME_GoogleMapsStoreLocator::css/mystyle.css"/></head>
</page>
Author: Qaisar Satti
Category: Magento 2
Last Modified: August 7, 2018