Magento 2

Magento 2 – Bài 4: Tùy biến theme

Posted by codetrauvn on

Trong bài này mình sẽ hướng dẫn các bạn cách tùy biến theme cơ bản.

Tóm tắt bài học trước:

  • Tạo theme Yosto/luna kế thừa Magento/blank
  • Đăng ký nó với quản trị

Bạn vào mục sau: STORES | CONFIGURATION | GENERAL | DESIGN chọn theme bạn mới thiết lập, ở đây ví dụ là yosto luna. Refresh cache và f5 trang chủ để xem kết quả. Các bạn nên quan sát cấu trúc theme của Magento/blank. ở trong đó có các folder như media, etc, web, i18n…và có các gói như là Magento_Contact…

Theo nguyên tắc của magento 2 nếu muốn tùy biến 1 module nào đó ở trong theme, các bạn chỉ cần tạo cấu trúc thư mục một các chính xác theo quy tắc. Ví dụ như: Ở trong module Magento/Contact các bạn muốn tùy biến layout index của nó:

  • Copy file contact_index_index.xml thuộc thư mục app/code/Magento/Contact/view/frontend/layout vào trong thư mục app/code/Design/Yosto/luna/Magento_Contact/layout
  • Trong phần nội dung của file xml, thay đổi thử title của nó. Sau đó refresh cache và f5 trang contact để nhìn thấy kết quả

Ví dụ thứ 2, đôi khi bạn muốn tùy biên một file giao diện, như danh sách sản phẩm chẳng hạn. Bạn tìm kiếm trong thư mục app/code  để ý thư mục Magento/Catalog/view/frontend/templates/product/list.phtml. Copy nó vào trong thư mục app/design/Yosto/luna/Magento_Catalog/templates/product .  Sau đó các bạn có thể test sau khi thay đổi file này.

Vậy quy tắc rút ra là: khi muốn tùy biến view của module thì chuyển file theo quy tắc, {Tên vendor}_{Tên Module}/{đường dẫn đến file tính từ thư mục view/frontend nằm trong module gốc}

Magento/Catalog/view/frontend/templates/product/list.phtml => app/design/Yosto/luna/Magento_Catalog/templates/product/list.phtml

Để tùy biến CSS, một các đơn giản nhất các bạn chỉ cần để file css vào trong thư mục web/css ở theme của mình, rồi đưa nó vào trong theme theo cách sau:

  • Tạo thư mục: Magento_Theme/layout
  • Copy file default_head_blocks.xml từ thư mục Magento/blank/Magento_Theme/layout tới thư mục vừa tạo
  • Tại đây trên mục head, bạn để ý cú pháp của nó và làm tương tự, nếu các bạn muốn đưa 1 file từ link bên ngoài vào, các bạn chèn thêm: src_type=”url” ví dụ 
    <css src="https://fonts.googleapis.com/icon?family=Material+Icons" src_type="url"/>

Trên đây là hướng dẫn vô cùng cơ bản về cách làm sao để tùy biến theme. Chi tiết và nâng cao hơn mình sẽ trình bày trong một bài khác.

 

 



 



		
	
			

			
								


			





			
	
		
		



	


		
		
		
			

		
Leave a comment