Chuyển đến nội dung chính

How to load Javascript scripts in Magento 2

All assets file relate in frontend will be store in view/web of module structure



Require lib from requirejs-config.js file

var config = {
    map: {
        "*":{
            "lightbox": "VES_Sociallogin/js/lightbox/lightbox.min" //This related to file lightbox/lightbox.min.js
        }
    }

};

Order to call light box js


In any js files you can call to like this. You should use define instead of require in stituation

define([
    "jquery",
    "jquery/ui",
    "lightbox",
    'Magento_Ui/js/modal/alert',
    'uiComponent'
], function($, lightbox, alert, uiComponent){
    "use strict";
    $(window).ready(function(){
        //console.log('hello magento2! File js edited');
        DO ANY CODE YOU WANT HERE

    });

});

Execute js in template mangeto can be done with script tag
script tag with type="text/x-magento-init"
    {
        "*":{
            "VES_Sociallogin/js/lightbox/lightbox":{ //This way like that way do by requireJS-config

            }
        }
    }


    require([
        'PopupLogin',
        'prototype'
    ], function(LoginPopup, prototype){
        Event.observe(window, 'load', function() {
           
         return 
        });
    });

To apply changed. You should delete static file in pub/static//Magento//en_US//




Nhận xét

Bài đăng phổ biến từ blog này

0xc000000f: Fix lỗi mất boot Windows 8.1

Thời gian thực hiện : 5-10' Window 8.1 noUEFI boot  Dùng đĩa cài hoặc usb boot win Không install mà vào repair mode Từ commandline dùng các lệnh sau theo thứ tự từ trên xuống  bootrec /fixmbr bootrec /fixboot bootrec /rebuildbcd bootrec /scanos exit reboot lại máy

Magento 2 Code Standards Part 1: Setup Enviroments

Trong bài này mình sẽ trình bày về việc cấu hình PHP_CodeSniffer cho magento 2. Yêu cầu cơ bản là server cài PHP v5.4 trở lên. Cài đặt thành công composer 1- PHP_CodeSniffer là gì 2- Code Standards có lợi gì cho lập trình viên Trong lập trình có rất nhiều chuẩn để lập trình viên làm theo để tạo được code có cấu trúc mạch lạc và khả năng maintance sau này. Trong PHP nói riêng cũng có kha khá chuẩn PSR1234 blah ... Magento cũng có vài chuẩn , ở đây mình chỉ đề cập đến MQEP2 (Marketplace Extension Quality Program) Khi lập trình các extension cho marketplace của magento v2 thì phải theo chuẩn này 3- Cấu hình Magento 2 đã nhúng sẵn bản 1.5.3 codesniffer của squizlabs vào cho lập trình viên. Nếu trên server chưa cài codesniffer thì có thể dùng ngay bản này Đường dẫn nằm ở vendor/bin/phpcs Tải về các rule để chạy (Các rule này kiểu như các convention được quy định sẵn để bắt lập trình viên làm theo) có suggest hoặc báo trên IDE composer require magento/marketplace-eqp After inst

Add external lib to vendor Magento 2

Magento 2 use autoload implement Code style PSR-4 You can add any custom source lib much easier by add require autoload 1. Upload lib files to vendor dir 2. Add file autoload.php in /vendor/lib-folder/autoload.php with content define('FACEBOOK_SDK_V4_SRC_DIR', '/src/Facebook/'); require __DIR__ . '/src/Facebook/autoload.php'; 3. Save and now you can call lib from anywhere like this ---- Injection from constructor and call instance in class \Facebook\Facebook