Wenn Sie eine Extension installieren (z.B. ein Hyvä Kompatibilitätsmodul / eine Hyvä Kompatibilitätsextension), werden die Styles dieser Extension (in der Regel aus tailwind-source.css) nicht sofort von Hyvä erkannt und entsprechend in Hyvä bzw. Tailwind berücksichtigt. Damit dies geschieht, muss zuerst…
SKU dynamisch ändern für konfigurierbare Artikel im Hyvä Theme (Magento 2)
Im Hyvä Theme (und auch sonst in Magento) ändert sich die angezeigte Artikelnummer (SKU) nicht, wenn Sie verschiedene Optionen eines konfigurierbaren Artikels auswählen auf der Produktseite. Mit einer kleinen Codeanpassung können Sie dies jedoch bewerkstelligen. Überschreiben Sie die Datei /vendor/hyva-themes/magento2-default-theme/Magento_ConfigurableProduct/templates/product/view/type/options/js/configurable-options.phtml…
Modalen Dialog mit Close Button mit Hyvä erstellen (Magento 2)
Mit Hyvä können Sie problemlos eigene modale Dialoge erstellen. So beginnen Sie mit dem Erstellen des modalen Dialoges im Hyvä Theme:
|
1 2 3 4 5 6 7 8 9 10 11 |
$heroicons = $viewModels->require(\Hyva\Theme\ViewModel\HeroiconsOutline::class); $modalDialog = $viewModels->require(\Hyva\Theme\ViewModel\Modal::class) ->createModal() ->withDialogRefName('unique-name') ->withContent(' <div class="absolute top-4 right-4 rounded-t dark:border-gray-600"> <button @click="hide" type="button" class="h-10 w-10 rounded-full p-2">' . $heroicons->renderHtml('x') . '</button> </div>' . 'testcontent') ->addDialogClass('relative sm:w-1/2 md:w-1/2 lg:w-1/2 xl:1/2 2xl:1/2','m-2'); |
Sie können den Dialog mit jedem beliebigen HTML Element öffnen. Im folgenden Beispiel ist es ein span Element,…
Hyvä Sprachpakete installieren (Magento 2)
Es gibt für das Hyvä Theme bereits Sprachpakete für diverse Sprachen. Sie können diese wie gewohnt mit composer installieren. Alle Sprachen finden Sie auf https://docs.hyva.io/hyva-themes/building-your-theme/localization.html, es werden weitere Sprachen ergänzt mit der Zeit. Zum Zeitpunkt dieses Artikels werden die folgenden…
Farbe Radiobutton anpassen im Hyvä Theme (Magento 2)
Sie können die Farbe des Radio Buttons im Hyvä Theme in Ihrem Magento 2 Shop sehr einfach anpassen, entweder mit einer vordefinierten Farbe, das könnte dann so aussehen:
|
1 2 3 |
input[type='radio'] { @apply text-emerald-500 focus:ring-emerald-500 } |
Wenn Sie eine eigene Farbe definiert haben, sieht es ähnlich aus:…
Snowdog Menü CSS überschreiben im Hyvä Theme (Magento 2)
Das Magento 2 Snowdog Menü definiert sein eigenes Layout für z.B. die Hover Textfarbe. Um diese oder anderes CSS des Snowdog Menüs zu überschreiben, gehen Sie folgendermaßen vor: Öffnen Sie die Datei app/design/frontend/Theme/hyva/web/tailwind/postcss.config.js Ihres Hyvä Child Themes Fügen Sie den…
Focus Ringfarbe ändern beim Hyvä Theme (Magento 2)
Wenn Sie die Farbe des Fokusrings in Ihrem Hyvä Theme anpassen und eine individuelle Farbe verwenden möchten, können Sie das in der Datei app/design/frontend/Theme/hyva/web/tailwind/tailwind.config.js erledigen:
|
1 2 3 4 5 6 7 8 9 |
... theme: { extend: { ringColor: { 'thecolor': '#123456' }, } } ... |
Zugriff auf die Farbe haben Sie dann z.B. mit dem Code:
|
1 |
class="... focus:ring-thecolor ..." |
. Wenn Sie…
Mobiles Snowdog Menü wird nicht angezeigt bei Verwendung des Hyvä UI Stacked Headers (Magento 2)
Wenn Sie das Snowdog Magento 2 Menü zusammen mit dem Hyvä UI Stacked Header in Ihrem Magento 2 Shop nutzen, kann es passieren, dass das mobile Snowdog Menü nicht angezeigt wird. Um das Problem zu lösen, entfernen Sie die folgenden…
Hyvä UI Mega Footer (Footer C) einrichten (Magento 2)
Sie möchten in Ihrem Magento 2 Shop den Hyvä UI Mega Footer (auch Footer C) genannt einrichten? Gehen Sie dazu folgendermaßen vor: Kopieren Sie zuerst den Inhalte des Hyvä UI Footer B (B-4-column-newsletter) src Ordners in Ihr Magento 2 Child…
Cannot find module ‘@hyva-themes/hyva-modules’ Problem lösen (Magento 2)
Wenn Sie beginnen mit dem Hyvä Theme zu arbeiten, kann es passieren, dass Sie diese Fehlermeldung bekommen, wenn Sie den npm run watch oder npm run build-prod Befehl im Tailwind Verzeichnisses Ihres Hyvä Child Themes ausführen: Cannot find module ‘@hyva-themes/hyva-modules’…