Hyvä makes it easy to create custom modal dialogs. Start by building your Hyvä modal like this:
|
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'); |
You can open the dialog with any HTML element. The following example uses a span element rendered as a Hyvä question mark icon:
|
1 2 3 4 5 6 |
<div x-data="hyva.modal()"> <span class="text-green" @click="<?= $modalDialog->getShowJs() ?>"> <?= $heroicons->questionMarkCircleHtml('w-6 h-6') ?> </span> <?= $modalDialog ?> </div> |
You also need to include the following code, for example in the file catalog_product_view_type_configurable.xml in your Hyvä child theme:
|
1 2 3 |
<page> <update handle="hyva_modal"/> </page> |
You can also choose another XML file. The file catalog_product_view_type_configurable.xml ensures that the modal works on all configurable product pages, for example. If you use catalog_list_item.xmlinstead, you can make it available on category pages.
After running the following command, you should be able to open the modal. Close it with Escape, by clicking outside the dialog, or with the X button at the top.
|
1 |
npm --prefix app/design/frontend/Theme/hyva/web/tailwind run build-prod |