Hyvä Compatibility

Compatibility Categories

Checking Compatibility

# Search for Hyvä compatibility
composer show --available | grep hyva

# Check specific extension
composer show vendor/extension

# Look for compatibility module
composer require hyva-themes/magento2-compatibility-vendor

Popular Extensions Compatibility

Hyvä Compatibility Modules

# Official compatibility modules
composer require hyva-themes/magento2-compatibility-amasty
composer require hyva-themes/magento2-compatibility-mirasvit
composer require hyva-themes/magento2-compatibility-aheadworks

What is a Compatibility Layer?

A compatibility layer converts legacy KnockoutJS/RequireJS output to Hyvä-compatible HTML.

Create Compatibility Layer

<?php
namespace Vendor\HyvaCompat\Renderer;

class LegacyRenderer
{
    public function renderLegacyBlock(
        \Magento\Framework\View\Element\Template $block
    ): string {
        $html = $block->toHtml();
        
        // Convert KnockoutJS to Alpine.js
        $html = $this->convertKnockoutToAlpine($html);
        
        // Add Tailwind classes
        $html = $this->addTailwindClasses($html);
        
        return $html;
    }
    
    private function convertKnockoutToAlpine(string $html): string
    {
        // Replace data-bind with Alpine directives
        $html = str_replace(
            'data-bind="text: name"',
            'x-text="name"',
            $html
        );
        
        return $html;
    }
}

Plugin Approach

<?php
namespace Vendor\HyvaCompat\Plugin;

class BlockPlugin
{
    public function afterToHtml(
        \Magento\Framework\View\Element\Template $subject,
        $result
    ): string {
        if ($this->isLegacyBlock($subject)) {
            return $this->convertToHyva($result);
        }
        return $result;
    }
}

Layout XML Override

<!-- Override legacy block -->
<referenceBlock name="legacy.block" remove="true"/>

<referenceContainer name="content">
    <block class="Vendor\HyvaCompat\Block\HyvaBlock"
           name="hyva.compatible.block"
           template="hyva_template.phtml"/>
</referenceContainer>

Migration Steps

1. Audit Current State

   • List all custom modules
   • Check extension compatibility
   • Identify KnockoutJS usage

2. Plan Migration

   • Prioritize compatible modules
   • Create compatibility layers
   • Plan testing phases

3. Implement

   • Install Hyvä theme
   • Override templates
   • Create compatibility modules

4. Test

   • Functional testing
   • Performance testing
   • User acceptance testing

Audit Checklist

- [ ] List all custom modules
- [ ] Check each module's frontend
- [ ] Identify KnockoutJS usage
- [ ] Check RequireJS dependencies
- [ ] Test CSS/LESS customizations
- [ ] Review JavaScript components

Phased Migration

Phase 1: Install Hyvä, test basic functionality
Phase 2: Override critical templates
Phase 3: Create compatibility layers
Phase 4: Migrate custom modules
Phase 5: Performance optimization

Options for Incompatible Extensions

1. Find Alternative

   • Search for Hyvä-compatible replacement
   • Check Hyvä marketplace

2. Create Compatibility

   • Build compatibility layer
   • Override templates

3. Replace Functionality

   • Implement with Alpine.js
   • Use native Magento features

4. Keep Legacy

   • Run mixed frontend (not recommended)

Replacement Strategy

// If extension provides widget
// Replace with Alpine.js component

class HyvaWidget extends Template
{
    public function getData(): array
    {
        return [
            'items' => $this->legacyExtension->getItems()
        ];
    }
}

<!-- Hyva template -->
<div x-data="{ items: <?= $block->escapeHtml(json_encode($block->getData())) ?> }">
    <template x-for="item in items" :key="item.id">
        <div x-text="item.name"></div>
    </template>
</div>

Decision Matrix