$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, dargestellt als ein Hyvä Fragezeichen Icon:

<div x-data="hyva.modal()">
    <span class="text-green" @click="<?= $modalDialog->getShowJs() ?>">
        <?= $heroicons->questionMarkCircleHtml('w-6 h-6') ?>
    </span>
    <?= $modalDialog ?>
</div>

Es ist weiterhin nötig, den folgenden Code in z.B. die Datei catalog_product_view_type_configurable.xml in Ihrem Hyvä Child Theme zu integrieren:

<page>
    <update handle="hyva_modal"/>
</page>

Sie können auch eine andere XML Datei wählen, die Datei catalog_product_view_type_configurable.xml stellt beispielsweise sicher, dass der modale Dialog auf allen Produktseiten von konfigurierbaren Produkten funktioniert. Wählen Sie z.B. die Datei catalog_list_item.xml, stellen Sie sicher, dass Ihr modaler Dialog auf Kategorieseiten funktioniert.

Nachdem Sie den folgenden Befehl ausgeführt haben, sollte sich nun ein modaler Dialog öffnen. Sie können den Dialog per ESC schliessen, indem Sie ausserhalb des Dialoges klicken, oder indem Sie auf den x-Button (Schliessen Button) in der oberen Ecke klicken.

npm --prefix app/design/frontend/Theme/hyva/web/tailwind run build-prod