Setting up your environment and initial configuration for Hyvä. Students will be able to configure their local environment for Hyvä theming.

This guide outlines the installation and practical exercises for the key Hyvä development modules: Alpine.js, Tailwind CSS, and their integration with Hyvä Themes with ViewModels / Registry and window.hyva Object. You will find detailed instructions for installing these modules, followed by a breakdown of relevant files, frontend routes, and specific lessons tied to each module.

This quiz is designed to test your knowledge of the Hyvä Theme, a modern front-end framework for Magento 2. Through a series of questions, you will explore key concepts such as performance improvements, technology choices, and the advantages Hyvä offers over the default Luma theme. By completing this quiz, you'll reinforce your understanding of how Hyvä enhances user experience, simplifies development, and improves website performance metrics.

How to create and customize child themes for specific needs. Students will gain the skills to modify existing themes effectively.

Understanding the overall structure and components of Hyvä themes.

This quiz tests your understanding of the various components and functionalities of Hyvä Themes, designed for Magento 2. You'll explore the key features of different Hyvä Themes, including the Default Theme, Reset Theme, and modules like the GraphQL ViewModel. By the end of this quiz, you will have a solid grasp of how these themes and modules contribute to improving performance, customization, and development efficiency in a Magento environment.

Steps to integrate Tailwind CSS into your Hyvä themes. Students will learn to set up Tailwind CSS in their projects.

Setting up Browserlist for optimal compatibility. Students will learn to configure Browserlist for cross-browser support.

Understanding how CSS files are organized and shared in Hyvä. Students will be able to structure their CSS effectively.

How to install and manage npm packages for your Hyvä theme. Students will gain the ability to manage dependencies in their projects.

Configuring PostCSS and live reloading in your development environment. Students will set up their workflow for efficient development.

This quiz is designed to test your knowledge of the key aspects of configuring and optimizing CSS in Hyvä Themes for Magento 2. You'll explore concepts like the integration of Tailwind CSS, browser compatibility via Browserlist, and techniques for sharing CSS between multiple themes. By completing this quiz, you will reinforce your understanding of how to manage modern frontend styling efficiently while ensuring compatibility and performance.

Introduction to Tailwind CSS and its utility-first approach. Students will understand the benefits of using Tailwind for styling.

Practical tasks to enhance understanding of Tailwind CSS. Students will complete exercises to solidify their knowledge.

Solutions and explanations for the Tailwind practice tasks. Students will review correct implementations and learn from examples.

Exploring Windy for Tailwind CSS to improve styling efficiency. Students will learn to utilize Windy for quicker styling.

Techniques for styling layout containers effectively. Students will apply styling principles to create visually appealing layouts.

Managing layout handles for a responsive design. Students will understand how to manipulate layout handles to fit their designs.

This quiz is designed to test your understanding of layout containers and layout handles in Hyvä Themes for Magento 2. Through these questions, you'll explore key concepts such as how to style layout containers using Tailwind CSS, the significance of layout handles, and best practices for structuring and optimizing Hyvä-specific themes. Completing this quiz will help reinforce your knowledge of creating efficient and responsive layouts in Hyvä.

Introduction to Alpine.js and its benefits in frontend development. Students will grasp the fundamentals of using Alpine.js.

Exploring advanced concepts and features of Alpine.js. Students will learn to leverage advanced functionalities for dynamic behaviors.

Leveraging Alpine.js for dynamic behavior and interactivity. Students will implement interactive elements using Alpine.js.

Setting up Alpine.js support in PHPStorm for enhanced development. Students will configure their IDE for optimal Alpine.js development.

Practical tasks to enhance understanding of Alpine.js. Students will complete exercises to solidify their knowledge.

Solutions and explanations for the Alpine.js practice tasks. Students will review correct implementations and learn from examples.

This quiz will test your understanding of both the core and advanced features of Alpine.js, a lightweight JavaScript framework designed for adding dynamic interactivity to web applications. You'll explore essential topics such as reactive data, directives, magic properties, and advanced techniques like transitions and lifecycle hooks. By completing this quiz, you'll reinforce your knowledge of Alpine.js and its powerful tools for building efficient and responsive web components.

Implementing HeroIcons in your Hyvä themes for improved UI. Students will learn to use HeroIcons for better design aesthetics.

Examples of using various icons within your Hyvä themes. Students will explore different icon implementations.

Practice tasks related to icons binding in Hyvä. Students will enhance their icon binding skills through hands-on exercises.

Solutions for the icons binding practice tasks. Students will analyze the correct binding techniques.

Practical example of using ViewModels in Hyvä themes. Students will learn to implement ViewModels for better structure.

Understanding ViewModelRegistry and its application in Hyvä. Students will learn how to manage ViewModels effectively.

Building a skeleton for a featured products modal. Students will practice building modals to enhance product visibility.

Developing a ViewModel for featured products using modal. Students will learn to connect ViewModels via ViewModelsRegistry components.

Finalizing the styles for the featured product modal using Tailwind. Students will apply styling techniques for improved design.

Presentation of the Modal ViewModel API Reference

Extend the Featured Product Modal Dialog with Nested Modal

Presentation of the Modals created only with the JavaScript without using ViewModel

Create Hyvä Custom Slider with our ProductList ViewModel

Presentation of the SSR Hyvä Product Slider and the related ToDo

Solution of the Hyvä Product Slider

Managing and securing private content in Hyvä themes. Students will understand the best practices for handling sensitive data.

Understanding the window.hyva object and its utility in Hyvä. Students will learn to leverage this object for functionality.

Tasks to practice using the Hyvä object. Students will complete practical exercises to reinforce their understanding.

Solutions for the practical tests related to the Hyvä object. Students will review and analyze the correct implementations.

Create customer creation using FETCH API with the REST and the usage of the BASE_URL within the REST API URLs.

Test your understanding of best practices for dynamically building URLs and making secure API requests using the Fetch API in Hyvä Themes. This quiz will challenge your knowledge on constructing URLs within a Magento 2 environment and handling data through authenticated API requests.

In this section, you will learn how to implement the Alpine Intersect Plugin to create scroll-based interactions within your Hyvä-based Magento theme. By utilizing the x-intersect directive, you can trigger actions when elements appear or disappear in the viewport, enabling features like lazy loading and animations.

In this section, you will explore the Alpine Ignore Plugin, which allows you to prevent certain elements from being updated by Alpine.js within your Hyvä-based Magento theme. By applying the x-ignore directive, you can exclude specific parts of the DOM from reactive updates, improving performance and ensuring smoother interactions.

In this lesson, you will learn how to use the Alpine Defer Plugin to enhance the performance of your Hyvä-based Magento theme. The x-defer directive allows you to delay the execution of Alpine.js directives until after the page has fully loaded, reducing the initial load time and improving the overall user experience.

In this bonus lesson, you will learn how to implement a simple and effective loading animation using Alpine.js. You'll discover how to display custom loading text or animations while waiting for content to load or actions to complete, providing a smoother user experience.

Test your knowledge on optimizing Hyvä-based Magento themes using Alpine.js plugins! This quiz will cover key concepts and functionalities of the Alpine Defer, Alpine Ignore, and Alpine Intersect Plugins.

This code initializes a sectionData object to store section-specific details, and defines a function, which updates sectionData e.g. with new customer information when received.

We can receive customer data in Alpine.js by listening to the private-content-loaded event on the window.

This process ensures the customer section data remains accurate and up-to-date by reloading current information and invalidating outdated data as needed.

This event triggers the Hyvä equivalent of the Luma authentication popup.

Components can dispatch this event to show the mini-cart.

toggle-cart event ToDo and the related Solution

update-gallery event ToDo and the related Solution

This section demonstrates how to build a simple form using HTML5 input types and built-in validation features and so give you a quick introduction about the forms within the Hyvä theme.

There are a number of CSS pseudo-classes that are also exposed as Tailwind CSS variants to allow styling input fields depending on their state.

If input constraints are declared on a field, it might display as invalid immediately.

This is not a good user experience. Usually an invalid state message is only displayed when a form is submitted or after a user interacts with a form input.

Hyvä mostly uses built-in browser form validation. For many use cases that's enough, but in some cases JavaScript validation is required (for example, to display custom validation messages in a specific location).

This section provides a guide to integrating reCAPTCHA into forms within the Hyvä Theme. Adding reCAPTCHA helps protect forms from spam and automated submissions, enhancing the security of your pages.

This approach uses the DOM to store the shared data. It probably is the simplest solution, and if it works for your use case, we suggest you follow this pattern.

This approach uses the single threaded nature of JavaScript for userland code to assign consecutive values to nested components.

This solution uses a global state object and the array based ordering of items to access the right records.

This approach is used with events.

Creating completed product boxes with the communication of the components ToDo

Creating completed product boxes with the communication of the components Solution

In Hyvä, data is often sent from one component to another with events.