Hướng dẫn cách thêm Javascript và CSS trong Magento 2
Trong thương mại điện tử, mỗi cửa hàng lại có các tính năng và thiết kế khác nhau. Thiết kế đóng một vai trò quan trọng, nó tạo nên sự ấn tượng, nhân thức về thương hiệu cho cửa hàng của bạn, giúp khách dễ dàng điều hướng, chịu trách nhiệm về khả năng phản hồi, khác biệt với các trang đối thủ, tăng cường SEO và còn ảnh hưởng đến tỷ lệ thoát, thời gian trên site của bạn. Cửa hàng Magento 2 cung cấp layout mặc định khá tốt, tuy nhiên thì nó có thể sẽ không phù hợp với yêu cầu của bạn. Với bất kỳ theme nào phải điều chỉnh thì bạn cần phải thêm CSS bên ngoài vào. Ngoài ra, nếu bạn muốn triển khai jQuery cho các hành động thì bạn cũng cần đưa JS từ bên ngoài. Hoặc bạn cũng có thể thêm JS và CSS do bạn tự custom vào Magento 2. Trong bài viết này mình sẽ hướng dẫn bạn cách thêm Javascript và CSS vào trong Magento 2.
Các bước thêm External JS và CSS vào trong Magento 2
Để thêm JS và CSS từ bên ngoài vào(external) rất đơn giản, bạn chỉ cần mở file layout lên rồi thêm vào đoạn code sau:
<?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>
<script src="https://url-js" src_type="url"/>
<css src="https://url-css" src_type="url"/>
</head>
</page>
Tại src bạn sẽ điền url của external JS và CSS theo mong muốn của bạn.
Các bước thêm JS và CSS tự custom
Bước 1: Tạo 2 file custom.css và custom.js tại app/code/Vendor/Extension/view/frontend/web/css/.
Bước 2: Tạo file default.xml tại app/code/Vendor/Extension/view/frontend/layout/ với đoạn code sau:
<?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>
<css src="Vendor_Extension::css/custom.css"/>
<link src="Vendor_Extension::js/custom.js"/>
</head>
</page>
Sau đó hãy lưu lại.
Như vậy là mình đã hướng dẫn xong cách thêm Javascript và CSS từ bên ngoài hoặc tự custom vào trong Magento 2.
Cảm ơn bạn đã đọc bài viết.
Xem thêm các bài Hướng dẫn Magento 2.
