Skip to content

7. Luma Theme Fallback

Important

This feature is provided by the module hyva-themes/magento2-theme-fallback.

Please add it as a dependency to your project using composer if you want to use the Luma theme fallback.

Luma Checkout

If you are looking for documentation on using the Luma Checkout with Hyvä, please check the appropriate section of the documentation.

About the theme fallback

Specific routes can be configured to use a different theme (that is, Luma based theme) instead of Hyvä.

This feature is what allows the Luma Checkout to be used with Hyvä.

On those pages, the Hyvä theme is not active. Neither Tailwind CSS nor Alpine.js are loaded.

Instead, RequireJS and all other Luma theme dependencies are loaded by the browser.

As a consequence any styling for the Hyvä theme will have to be rebuilt using the standard Magento approaches, for the pages that use the theme fallback.

Configuration

To set up a Luma theme fallback, in the Magento admin panel, configure the following settings:

  1. HYVA THEMES->Fallback theme->General Settings->Enable
    The configuration path is hyva_theme_fallback/general/enable

  2. HYVA THEMES->Fallback theme->General Settings->Theme full path
    The configuration path is hyva_theme_fallback/general/theme_full_path
    The default is frontend/Magento/luma

  3. HYVA THEMES->Fallback theme->General Settings->The list of URL's parts
    The configuration path is hyva_theme_fallback/general/list_part_of_url
    To use the Luma checkout, configure the paths default
    checkout/index, paypal/express/review and paypal/express/saveShippingMethod
    These paths are supplied as the default configuration by the Hyva_LumaCheckout module.

History

Before the Hyva_ThemeFallback module existed, the Hyva_LumaCheckout module provided the fallback mechanism for the checkout only.

The new module Hyva_ThemeFallback module was created to allow reusing the theme fallback on arbitrary routes.

How does it work?

The module adds a before-plugin to all frontend controllers.
In a nutshell: the plugin checks if a configured value matches either the current route/controller/action or the SEO friendly URL path, and if so, it applies the fallback theme.

Stated more explicitly: the theme fallback is applied when: 1. The current route/controller/action request path matches the configured url pattern. - Example: the configured url is customer/account.

  Then for all requests such as `customer/account/*` the fallback will be applied.
- Example: the configured url is `customer/account/login`.

  Then the fallback will be applied only for the login page.

  1. A part of the current request path matches the configuration.

    • Example: the configured value is demo-product.html.

    Then the fallback will be applied to all pages containing demo-product.html in the path.