Skip to content
CDA Custom Fields

Hyvä themes

CDA Custom Fields ships native Hyvä support, including:

  • Tailwind storefront templates for all surfaces (cart, PDP, customer account, registration, profile, address book, contact, review, newsletter, wishlist, order success).
  • Magewire component for Hyvä Checkout (Shipping / Payment / Review steps).
  • Automatic theme detection — if a Hyvä theme is active, Hyvä templates render; on Luma, Luma templates render. No config flag, no manual switch.

Install Hyvä compatibility

Section titled “Install Hyvä compatibility”

Beyond the standard install, add the compatibility module:

Terminal window
composer require cda/module-custom-fields-hyva-compat
bin/magento module:enable CDA_CustomFieldsHyvaCompat
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush

The compatibility module hard-requires magewirephp/magewire and hyva-themes/magento2-hyva-checkout. Composer will refuse to install it on stores without Hyvä — this is intentional, since pulling Magewire into a Luma-only project would break setup:di:compile.

How theme detection works

Section titled “How theme detection works”

CDA’s Theme\Detector walks the parent-theme chain looking for hyva in the theme code. This covers:

  • Hyva/default
  • Hyva/default-pwa
  • Hyva/reset
  • Custom child themes named Vendor/hyva-childtheme etc.

If found AND the CDA_CustomFieldsHyvaCompat module is enabled, the afterToHtml plugins (Contact, Review, Newsletter, Address Book) select the Tailwind template path. Otherwise they fall back to the Luma template. Same field, same data, theme-appropriate markup.

Hyvä Checkout — Magewire component

Section titled “Hyvä Checkout — Magewire component”

For the checkout steps (Shipping, Payment, Review), CDA ships a server-rendered Magewire component that:

  • Renders all applicable fields based on applies_to in one wire snippet.
  • Captures values via wire:model.lazy and updates the cart through Magewire’s $wire.set() mechanism.
  • Reactive x-show for conditional logic — fields hide/show as the customer types into their dependencies, without a full step re-render.
  • File and image fields upload via a hardened endpoint (HMAC-signed URLs, magic-byte MIME validation) and store the returned metadata into the Magewire component’s values[code] state.

The component lives in CDA\CustomFieldsHyvaCompat\Magewire\CustomFields and is referenced by layouts/hyva_checkout_index_index.xml.

Hyvä storefront — Tailwind templates

Section titled “Hyvä storefront — Tailwind templates”

For non-checkout surfaces (cart, PDP, customer account, etc.), the Hyvä templates use the same Tailwind utility classes that Hyvä’s own theme uses:

  • border-container-border, bg-container, text-primary, text-secondary — match your theme’s color tokens automatically.
  • mt-6 space-y-4 standard spacing.
  • No custom CSS — your theme’s typography and color overrides apply transparently.

If you’ve customized your Hyvä theme’s color palette via theme-config.json, CDA fields automatically inherit those colors. No CSS overrides needed.

What’s NOT covered yet

Section titled “What’s NOT covered yet”

A few minor surfaces ship with Luma-only templates today and fall back gracefully:

  • Order Success page (Hyvä uses a different layout structure)
  • Magewire-driven Contact / Review / Newsletter forms in some Hyvä Checkout configurations

These are scheduled for a future v3.x release. They DON’T affect functionality — fields still capture values and persist — only the storefront markup uses generic spacing instead of Tailwind tokens.

Troubleshooting Hyvä installs

Section titled “Troubleshooting Hyvä installs”

Class "Magewirephp\Magewire\Component" not found

Section titled “Class "Magewirephp\Magewire\Component" not found”

You installed cda/module-custom-fields-hyva-compat on a store without Hyvä. Either install Hyvä (composer require hyva-themes/magento2-hyva-checkout) or disable the compat module (bin/magento module:disable CDA_CustomFieldsHyvaCompat).

Fields render but Tailwind styles missing

Section titled “Fields render but Tailwind styles missing”

Your Hyvä theme might not include CDA’s Tailwind utility classes in its build. Check tailwind.config.js content paths — they should include app/code/CDA/**/view/frontend/templates/**/*.phtml AND vendor/cda/**/view/frontend/templates/**/*.phtml. Re-run npm run build in your Hyvä theme directory.

Magewire component renders but won’t update

Section titled “Magewire component renders but won’t update”

Check Hyvä Checkout’s JS console. If you see Livewire/Magewire errors, your installed Magewire version may be below CDA’s minimum (^1.5||^2.0). Run composer show magewirephp/magewire to check.