Magento 2 Hyvä Theme Development On Demand Training
In stock
SKU
v11
€259.00
- Courses included: 1
- Total video time: 11 hours
- Access period: 1Y
- € 259 for 1 year
- € 24 per hour of video available to you
Full details on this course (and its variations) can be found here: https://www.yireo.com/training/magento2-frontend-development-hyva-themes
| Price | €259.00 |
|---|---|
| Access period | 1 year |
Included courses
Magento 2 Hyvä Theme Development
Status: Complete
Last updated: 2023-10-08
Number of lessons: 81
Number of slides: 324
Videos: 10.8 hours
Preview this course
Want to see what this course is like? Checkout our Courseware Demo to preview this course and others.
Course content
Magento 2 Hyvä Theme Development
- Introduction
- Introduction to Hyvä Themes
- Overview of Hyvä theme packages
- Overview of Hyvä modules
- Hyvä admin
- Assignment: Install Hyva Admin
- Quick start
- Project kickstart
- Requirements for Hyvä
- Assignment: Prepare your Magento environment for Hyva
- Development tools for Hyvä
- Assignment: Install of the relevant development tools
- Installation of Hyvä packages
- Assignment: Install Hyva
- Assignment: Remove the demo content
- Creating a new Hyva theme
- Assignment: Create a new Hyva theme
- Extending the `Hyva/default` theme
- Discovering the theme
- Using browser syncing
- Tailwind CSS
- Introducing Tailwind CSS
- Quick start without Hyva
- Assignment: Kickstart a simple non-Magento app using Tailwind
- Using Windy for Tailwind CSS development
- Hyvä build modes
- Tailwind configuration file
- Configuring breakpoints
- Configuring colors
- Tailwind and PostCSS
- Optimizing CSS classes
- Purging Magento modules
- Configuring fonts
- Tailwind plugins
- Using the prose plugin
- Assignment: Make sure your WYSIWYG output displays properly
- Using apply
- Tips and tricks
- Just-In-Time compilation
- Hyva_CmsTailwindJit module
- Tailwind 3 upgrade
- Using PHPStorm for Tailwind development
- ViewModel classes
- Using ViewModels
- Creating a ViewModel for Hyva
- Assignment: Create a ViewModel
- Working with icons
- Alpine JS
- Introducing AlpineJS
- Basic syntax
- `x-model` directive
- Magics
- The `$el` magic
- The `$nextTick` magic
- `x-ref` directive
- Watching variables
- `x-cloak` directive
- `x-spread` directive
- Nested data
- State management in AlpineJS
- Copying a slider from alptail
- Events in AlpineJS
- Hyva private content
- Depending on `window.hyva`
- Mixing AJAX call with events
- Loading a CMS Block via GraphQL
- Checkout with Hyva
- Checkout options
- Hyvä React checkout
- Customizing the React checkout
- Fixing the cart ID
- Fix duplicate React versions
- Fix the vendor folder
- Overriding components
- React or Preact developer tools
- React checkout architecture
- Using context in the React checkout
- Using the React checkout in production
- Dealing with CORS issues
- Compatibility modules
- Compatibility modules
- Rewriting Luma scripts to Alpine
- Using compatibility modules
- Creating a custom compatibility module
- Converting an Example Widget module
- Widgets
- Introduction to Hyvä widgets
- Tips & tricks
- Performance tuning
- Setting equal heights