Kickstart Your Hyvä Adventure: Crafting Lightweight Magento

Khởi Đầu Hành Trình Hyvä: Xây Dựng Magento Tinh Gọn

Đơn Giản Hóa, Tăng Tốc, Thành Công: Xây Dựng Magento / Adobe Commerce với Hyvä + Tặng kèm 6 tháng MIỄN PHÍ JetBrains IDE

4.4

(69 đánh giá)

558 học viên

Giảng viên

Adam Varga

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

50.000đ 1.109.000đ -95%

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

10.5 giờ video

88 bài giảng

7 bài quiz

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 31/05/2026

#Ecommerce Development #Hyva Theme #Magento #Tailwind Css

Bạn sẽ học được gì

Thành Thạo Hyvä: Nắm vững nền tảng về Hyvä theming, bao gồm thiết lập, tùy chỉnh và các best practices khi phát triển Magento.

Kỹ Năng Responsive Design: Học cách tạo giao diện người dùng Magento nhẹ, tương thích mọi thiết bị với Tailwind CSS và AlpineJS cho trải nghiệm hiện đại.

Kỹ Thuật Triển Khai Thực Tế: Thực hành trực tiếp với ViewModels, quản lý icon, và xây dựng component tương tác cho các site thương mại điện tử năng động.

Tận Dụng ViewModel: Khám phá cách dùng ViewModels để tách biệt logic khỏi giao diện, giúp code gọn gàng và dễ bảo trì hơn.

Xây Dựng Component Tùy Chỉnh: Phát triển kỹ năng tạo các component có thể tái sử dụng, nâng cao chức năng và trải nghiệm người dùng cho cửa hàng Magento.

Hiểu Về Layout Handles: Tìm hiểu layout handles trong Hyvä để quản lý cấu trúc trang và tạo bố cục linh hoạt, động.

Ứng Dụng Qua Đồ Án Cuối Khóa: Áp dụng kiến thức vào một đồ án tổng hợp, thể hiện kỹ năng xây dựng theme Hyvä hoàn chỉnh.

Hyva Object và HeroIcons: Các best practices để tích hợp Hyvä với HeroIcons và window hyva Object.

Hyvä Custom và Product Sliders: Giới thiệu về Custom và SSR Product Sliders kèm bài tập thực hành (ToDos).

Modals: Tạo modal sản phẩm nổi bật hiện đại bằng Modal ViewModel với modal lồng nhau và tham chiếu Model API liên quan.

BASE_URL và fetch(): Sử dụng BASE_URL và fetch() để tạo Khách hàng trực tiếp (on the fly).

Alpine JS Plugins của Hyvä: Tăng hiệu suất và tính tương tác cho khách hàng.

Sự Kiện JavaScript trong Hyvä: Làm việc với các sự kiện JavaScript khác nhau như toggle-auth, update-gallery, toggle-cart.

Hyvä SectionData: Tìm hiểu về quản lý SectionData trong theme Hyvä.

Hyvä Forms và Tích Hợp reCAPTCHA: Học về xác thực form từ cơ bản đến nâng cao và tích hợp reCAPTCHA.

Các Mẫu (Patterns) Hyvä: Tìm hiểu các mẫu Hyvä khác nhau như Components trong Alpinejs.

Hyvä Section Cards và Thuộc Tính Sản Phẩm: Điều chỉnh trang chi tiết sản phẩm với các Section Cards và thuộc tính sản phẩm mới.

Yêu cầu

Kiến Thức Cơ Bản về HTML, CSS và JavaScript: Quen thuộc với nền tảng phát triển web sẽ giúp bạn hiểu các khái niệm trong khóa học.

Hiểu Biết về Magento: Kiến thức nền tảng về Magento là một lợi thế, vì khóa học tập trung nâng cao phát triển giao diện người dùng trên nền tảng này.

Thiết Lập Môi Trường Phát Triển: Học viên cần tự thiết lập được môi trường phát triển cục bộ, bao gồm PHPStorm và các gói cần thiết cho Hyvä theming.

Đối tượng phù hợp

Nhà Phát Triển Frontend: Lý tưởng cho các lập trình viên muốn nâng cao kỹ năng phát triển giao diện người dùng Magento với các kỹ thuật theming hiện đại như Hyvä.

Người Đam Mê Magento: Phù hợp cho người dùng Magento muốn học cách tạo theme nhẹ, tương thích mọi thiết bị và cải thiện cửa hàng thương mại điện tử.

Nhà Thiết Kế Web: Thích hợp cho các nhà thiết kế muốn kết hợp nguyên tắc thiết kế với kỹ năng phát triển thực tế để tạo giao diện Magento bắt mắt.

Nội dung khóa học

21 phần • 86 bài giảng

1 Giới Thiệu Theme Hyvä

2 Bắt Đầu Với Theme Hyvä Bằng License Key (MIỄN PHÍ)

3 Cài Đặt Theme Hyvä Trực Tiếp Từ GitHub Repository

4 Cách Nhận Bản Quyền JetBrains IDE 6 Tháng MIỄN PHÍ và Các Ưu Đãi Độc Quyền

5 Cài Đặt Module Phát Triển Tùy Chỉnh Hyvä và Hướng Dẫn Bài Tập Thực Hành

1 Tạo Theme Con Dựa Trên Theme Hyvä

2 Bắt Đầu và Cấu Hình Theme Hyvä Với Tailwind CSS v4

3 Tổng Quan về Hyvä Themes

1 Cấu Hình Tailwind CSS

2 Browserlist

3 Cài Đặt gói npm

4 Thiết Lập PostCSS Trong PHPStorm và Trình Duyệt Đồng Bộ (Browser Sync)

1 Giới Thiệu về Tailwind

2 Bài Kiểm Tra Thực Hành Master Tailwind - ToDo

3 Bài Kiểm Tra Thực Hành Master Tailwind - Lời Giải

4 Windy for Tailwind

1 Bắt Đầu Với Email Styling Trong Theme Hyvä

2 Cài Đặt và Sử Dụng MageOS Cache Clean Cho Magento 2

3 Thêm Style Email Tùy Chỉnh Với _email-extend.less

4 Tùy Chỉnh Layout Header và Footer Email

5 Kích Hoạt và Điều Chỉnh Hỗ Trợ Tailwind CSS v4 Cho Email Templates

6 Email Styling Với Tailwind v4 – Sửa Lỗi Triển Khai Nội Dung Tĩnh (Static Content Deployment Fix)

7 Tổng Quan về Module Hyvä

8 tailwind.config.js so với hyva.config.json

1 Tạo Style Cho Layout Containers

2 Layout Handles Trong Hyvä

1 Giới Thiệu về Alpine.js

2 Giới Thiệu Alpine.js Nâng Cao

3 Phép Thuật (Magics) Trong Alpine.js

4 Hỗ Trợ Alpine.js Trong PHPStorm

5 Bài Kiểm Tra Thực Hành Master Alpine.js - ToDo

6 Bài Kiểm Tra Thực Hành Master Alpine.js - Lời Giải

1 HeroIcons Trong Hyvä

2 Ví Dụ Về Hero Icons

3 Bài Tập Master Icons Binding trong Hyvä - ToDo

4 Bài Tập Master Icons Binding trong Hyvä - Lời Giải

1 Ví Dụ Sử Dụng ViewModel Với Triển Khai Footer

2 ViewModelRegistry Trong Hyvä Themes

3 Tạo Khung (Skeleton) Modal Sản Phẩm Nổi Bật

4 Tạo ViewModel Sản Phẩm Nổi Bật Với Modal và Bộ Sưu Tập Sản Phẩm

5 Tạo Style và Hoàn Thiện Modal Sản Phẩm Nổi Bật Với Tailwind CSS

1 Tham Chiếu Modal ViewModel API

2 Tạo Modal Lồng Nhau

3 Chỉ Sử Dụng JavaScript Cho Modals

1 Tạo Slider Tùy Chỉnh Trong Hyvä

2 Giới Thiệu SSR Hyvä Product Slider và Bài Tập (ToDo)

3 Lời Giải Cho Hyvä Product Slider

1 Nội Dung Riêng Tư Trong Hyvä

2 Đối Tượng window.hyva

3 Bài Kiểm Tra Thực Hành Với Hyva Object - ToDo

4 Bài Kiểm Tra Thực Hành Với Hyva Object - Lời Giải

1 Tạo Khách Hàng Sử Dụng Fetch API và BASE_URL

1 Sử Dụng Plugin Alpine Intersect Cho Tương Tác Dựa Trên Cuộn Trang

2 Tối Ưu Quản Lý DOM Với Plugin Alpine Ignore

3 Cải Thiện Hiệu Suất Tải Trang Với Plugin Alpine Defer

4 BONUS: Tạo Hoạt Ảnh Tải Trang Với Alpine.js

1 Thiết Lập sectionData và Xử Lý Nó Với Alpine.js

2 Nhận Dữ Liệu Khách Hàng Bằng JavaScript Thuần

3 Làm Mới và Vô Hiệu Hóa Dữ Liệu Section Khách Hàng

1 toggle-authentication

2 toggle-cart

3 toggle-cart - ToDo và Lời Giải

4 update-gallery - ToDo và Lời Giải

1 Tạo Form Cơ Bản Với Các Loại Input và Xác Thực HTML5

2 Tạo Style Cho Input Dựa Trên Trạng Thái

3 Áp Dụng Ràng Buộc Khi Người Dùng Tương Tác và Khi Gửi

4 Xác Thực Form JavaScript Nâng Cao - ToDo và Lời Giải

5 reCAPTCHA Trong Form Tùy Chỉnh

1 Lưu Trữ Trạng Thái Dùng Chung Trên Thuộc Tính Dữ Liệu (data attribute) Của Phần Tử Cha

2 Chia Sẻ Trạng Thái Qua Sự Kiện

3 Chia Sẻ Trạng Thái Qua Biến Toàn Cục

4 Gọi Phương Thức Của Phạm Vi Cha

5 Bài Tập Tạo Product Boxes Hoàn Chỉnh - ToDo

6 Bài Tập Tạo Product Boxes Hoàn Chỉnh - Lời Giải

7 Giao Tiếp Giữa Các Component Alpine.js

1 Tạo Section Card Mới Cho Trạng Thái Tồn Kho Sản Phẩm

2 Phát Triển ViewModel Mới Để Hiển Thị Số Lượng Tồn Kho

3 Thiết Kế Vòng Tròn Số Lượng Tồn Kho Để Hiển Thị Trực Quan Hơn

4 Thay Đổi Tiêu Đề Section Card Cho Trạng Thái Tồn Kho

5 Trình Bày Các Thuộc Tính Trên Trang Chi Tiết Sản Phẩm

1 Tổng Quan Về Tạo Style Nội Dung CMS Với Hyvä

2 Tạo Style Cho Nội Dung Văn Bản CMS Với prose

3 Module CMS Tailwind JIT

4 Cấu Hình Tailwind Tùy Chỉnh

5 Ví Dụ Về Magento Page Builder Hyvä Quote

1 Đề Xuất Khóa Học - Hướng Dẫn Toàn Diện Về Hyvä Checkout - Từ Con Số 0 Trở Thành Chuyên Gia

Giới thiệu khóa học

Are you ready to supercharge your Magento store's performance and user experience? This course is your gateway to mastering Hyvä, the revolutionary theme framework that brings unparalleled speed and simplicity to Magento development.

In Kickstart Your Hyvä Adventure, I’ll guide you step-by-step through the process of building a lightweight, high-performance Magento / Adobe Commerce storefront using Hyvä. You’ll discover how Hyvä streamlines frontend development with its modern tooling—Tailwind CSS for rapid styling and Alpine.js for dynamic interactivity-while drastically reducing bloat and enhancing site speed.

Thinking about getting Hyvä certified? Now’s your chance!

What You'll Learn:

The core principles behind Hyvä’s minimalistic approach to Magento theming.
How to configure Hyvä with Tailwind CSS and Alpine.js for clean, responsive design.
Techniques for crafting sleek, high-performance Magento stores with a fraction of the resources.
How to leverage Hyvä’s ViewModel and Registry for flexible, maintainable code.
Best practices for integrating Hyvä with HeroIcons, Custom and Product Sliders and with the window.hyva Object.
Using BASE_URL and fetch() to Create a Customer on the Fly
Hyvä's Alpine.js Plugins for Better Performance and Interactivity
Hyvä JavaScript Events
Working with SectionData within the Hyvä Theme
Hyvä Forms with Basic and Advanced Validations
Hyvä Forms with reCAPTCHA Integration
Hyvä Patterns (Components)
Hyvä Section Cards
Hyvä Product Attribute Management on PDPs
Hyvä with GraphQL
Hyvä Content
Hyvä Tailwind V4 Support
Email Template Setup and Styles + Tailwind V4 Support
Hyvä Modules
tailwind.config.js vs hyva.config.json

Who Is This Course For? This course is perfect for Magento developers looking to streamline their workflows, store owners who want a faster, more responsive site, and anyone excited to explore the future of Magento development through Hyvä.

By the end of this course, you'll have the tools and knowledge to build lightweight, fast, and modern Magento storefronts using Hyvä, setting you up for success in the competitive e-commerce landscape.

This is just the start! I’ll keep the course updated with the latest Hyvä insights to help your Magento eCommerce platform stay lightweight and fast.

Exclusive Offer for You:

As a valued student, you’ll gain access to exclusive offers that will further enhance your learning experience:

6 Months FREE Access to Top JetBrains IDEs:
- PhpStorm – Perfect for PHP and Adobe Commerce / Magento development.
- WebStorm – The ultimate IDE for modern JavaScript and front-end development.
- IntelliJ IDEA – Ideal for Java and Kotlin developers.
- PyCharm – The go-to IDE for Python development.
- And More JetBrains IDEs...
Automatic 40% Discount on your selected IDE subscription after the free 6-month period — ensuring you continue to save as you grow your skills.
Stay tuned for even more exciting discounts and offers exclusively for my students!