Hyvä: Compatibility Modules

Howto Hyvä

Compatibility Modules!
Meet-Magento Romania – Howto Hyvä: Compatibility Modules – 2021-10-08 – © Vinai Kopp - https://hyva.io

How to make extensions that
were built for Luma
compatible with Hyvä...

Compatibility Modules
Replace Luma code with Hyvä compatible templates:
From ! To "
# .phtml # .phtml
$ .less # .phtml
% .js # .phtml
& .html # .phtml

Compatibility Modules
From ! To .phtml "
# .phtml ✨ HTML5
% .less Tailwind CSS ✨
& .js ✨ vanilla + Alpine.js
' .html HTML5 + Alpine.js ✨

Need to use a
module?

Need to use a module?

First
Check the compat module tracker
— If it already is compatible:
— If not, open an issue in the tracker:

Need to use a module?

Second
Request a skeleton compat module
In Slack, request a skeleton compat module, with both
— the original module Magento_Name
— the original module composer package/name

What does a skeleton repo contain?
.
├── LICENSE.md
├── README.md
├── composer.json
└── src
├── etc
│   ├── frontend
│   │   └── di.xml
│   └── module.xml
└── registration.php

$ cat composer.json
{
"name": "hyva-themes/magento2-orig-module",
"description": "Hyvä Themes Compatibility module for Orig_Module",
"type": "magento2-module",
"require": {
"magento/framework": "*",
"hyva-themes/magento2-compat-module-fallback": "*",
"orig/module": "*"
}
...
}

$ cat src/etc/frontend/di.xml
<config>
<type name="HyvaCompatModuleFallbackModelCompatModuleRegistry">
<arguments>
<argument name="compatModules" xsi:type="array">
<item name="hyva-magento2-orig-module" xsi:type="array">
<item name="original_module" xsi:type="string">Orig_Module</item>
<item name="compat_module" xsi:type="string">Hyva_OrigModule</item>
</item>
</argument>
</arguments>
</type>
</config>

The CompatModuleRegistry

What is it good for?

Automatic
Template Overrides

Automatic Template Overrides
— Original module
Smile_ElasticsuiteCatalog
view/frontend/templates/layer/view.phtml
— Two alternative override options in
Hyva_SmileElasticsuiteCatalog:
view/frontend/templates/layer/view.phtml
view/frontend/templates/Smile_ElasticsuiteCatalog/layer/view.phtml

Other tools

Luma Reference Store View
!

Hyvä Preﬁx Layout Updates
Luma:
default.xml
customer_address_edit.xml
customer_account.xml
Hyvä:
default.xml
hyva_default.xml
customer_address_edit.xml
hyva_customer_address_edit.xml
customer_account.xml
hyva_customer_account.xml

Is this Hyvä?
In Observers / Plugins:
Does the requested store view have a Hyvä theme?

Is this Hyvä?
public function __construct(
HyvaThemeServiceCurrentTheme $currentTheme
) {
$this->currentTheme = $currentTheme;
}
public function execute(Event $event) {
if (!$this->currentTheme->isHyva()) {
return;
}

First steps

Step by Step
1. Copy offending template into compat module
2. Rewrite JavaScript
3. Rewrite Styles
4. Repeat

Rewrite JavaScript

Rewrite Luma JavaScript to
1. Vanilla JS
2. Alpine JS
3. External JS Libraries

Vanilla JS
<script>
function ebizmartsMailChimpCampaignCatcher() {
// ...
}
window.addEventListener('DOMContentLoaded', ebizmartsMailChimpCampaignCatcher);
</script>

Alpine JS
<script>
function initCheckoutGiftCards() {
return {
receiveSectionData(data) { ... },
toggleGiftcardForm() { ... },
}
}
</script>
<div x-data="initCheckoutGiftCards()"
@private-content-loaded.window="receiveSectionData($event.detail.data)">
<div @click="toggleGiftcardForm"
@keydown.enter="toggleGiftcardForm">

External JS Library
<div id="fake-widget-placeholder">
...
</div>
<script>
(function() {
function init() {
const script = document.createElement('script')
script.src = '<?= $escaper->escapeUrl($block->getViewFileUrl('My_Module/js/my-library.js')) ?>';
// The function initLibrary would be provided by the external JS
script.addEventListener('load', () => initLibrary('fake-widget-placeholder'));
document.head.append(script);
}
document.body.addEventListener('touchstart', init, {once: true});
document.body.addEventListener('mouseover', init, {once: true});
})();
</script>

jQuery ➡ Vanilla JS

jQuery
$('#product-addtocart-button')
.click(function(e) {
e.preventDefault();
// some custom check
// if ok
$('#product_addtocart_form')
.submit();
});
Vanilla
document
.getElementById('product-addtocart-button')
.addEventListener('click', (e) => {
e.preventDefault();
// some custom check
// if ok
document
.getElementById('product_addtocart_form')
.submit();
})

https://youMightNotNeedjQuery.com/

Ajax / GraphQL ➡ fetch()
fetch(
url + '?form_key=' + hyva.getFormKey(),
{
method: 'post',
body: JSON.stringify(data),
headers: {contentType: 'application/json'}
}
)
.then(response => response.json())
.then(result => {
// ...
})

window.hyva
— hyva.getCookie(name)
— hyva.setCookie(name, value, days, skipSetDomain)
— hyva.getBrowserStorage()
— hyva.postForm(postParams)
— hyva.getFormKey()
— hyva.formatPrice(value, showSign)

Customer Section Data
<div x-data="" @private-content-loaded.window="console.log($event.detail.data)"></div>
{
messages: {...},
customer: {...},
compare-products: {...},
last-ordered-items: {...},
cart: {...},
directory-data: {...},
instant-purchase: {...},
loggedAsCustomer: {...},
captcha: {...},
persistent: {...},
review: {...},
wishlist: {...},
recently_viewed_product: {...},
recently_compared_product: {...},
product_data_storage: {...},
paypal-billing-agreement': {...}
}

Reload Customer Section Data
no automatic invalidation
window.dispatchEvent(
new CustomEvent("reload-customer-section-data")
);

Rewrite Styles

Replace Luma styles
Luma
<ul class="compare wrapper">
<li class="item link compare">
<a class="action compare no-display" title="Compare products"
Hyvä
<div class="flex items-center order-3">
<a id="compare-link"
class="relative invisible inline-block mx-1 no-underline sm:ml-3 hover:text-black"
title="Compare Products"

Remove additional .less styles
➡ replace with inline Tailwind CSS classes

<remove src="Magezon_Core::css/styles.css"/>

External non-Luma CSS

Used in Critical Rendering Path?
<remove src="Amasty_ShopbyBase::css/swiper.min.css"/>
➡ replace with inline Tailwind CSS classes

Not part of Critical Rendering Path?
document.addEventListener('DOMContentLoaded', function () {
function init() {
const link = document.createElement('link')
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '<?= $escaper->escapeUrl($block->getViewFileUrl('Ho_Templatehints::css/hints.css')) ?>';
document.head.append(link);
}
document.body.addEventListener('touchstart', init, {once: true});
document.body.addEventListener('mouseover', init, {once: true});
}, {once: true});
➡ keep & load when needed

[Commercial] Windy Browser Plugin
Automatically convert styles to Tailwind CSS!
https://usewindy.com/

PHP View Models
Modern View Helpers
/** @var HyvaThemeModelViewModelRegistry $viewModels */
$currentProduct = $viewModels->require(
HyvaThemeViewModelCurrentProduct::class
);

PHP View Models
<?php
$modal = $viewModels->require(HyvaThemeViewModelModal::class)
->createModal()
->withTemplate('My_Module::my-dialog-content.phtml')
->withAriaLabel('Example modal with content template');
?>
<div x-data="hyva.modal()">
<button @click="show" type="button" class="btn">
<?= $escaper->escapeHtml(__('Show Modal')) ?>
</button>
<?= $modal ?>
</div>

Enjoy & Thanks!
https://hyva.io
@hyva_io
@VinaiKopp

Hyvä: Compatibility Modules

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Hyvä: Compatibility Modules

Similar to Hyvä: Compatibility Modules (20)

More from vinaikopp

More from vinaikopp (20)

Recently uploaded

Recently uploaded (20)

Hyvä: Compatibility Modules