How to create Confirmation Dialog in Hyva themes
Chapters Close

How to create Confirmation Dialog in Hyva themes

In today’s article, I will explain to you how to create a Confirmation Dialog in Hyva Theme.

With the default Magento Luma/Blank theme, we can add a Confirmation Dialog using jQuery or Knockout.js. However, as you may already be aware, jQuery and Knockout.js do not work with the Hyva theme. 

Let’s delve into understanding how to add a Confirmation Dialog in the Hyva theme.

Steps to Open Hyvä  Confirmation Dialog in Magento 2

Step 1: Setting up the Layout for Magento 2 Hyva Theme Popup Modal

Create the Module Directory:

Inside the app/code directory, create a directory for your module. Replace [VendorName] and [ModuleName] with your desired values.

app/code/[VendorName]/[ModuleName]

Create Module Registration File:

Create a registration.php file in the module directory.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '[VendorName]_[ModuleName]',
    __DIR__
);

Create Module Configuration File:

Create a module.xml file in the etc directory of your module. (app/code/[VendorName]/[ModuleName]/etc/module.xml)

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="[VendorName]_[ModuleName]" setup_version="1.0.0"/>
</config>

Inside the layout folder, create a default.xml file and add the following code And add the code as follows

app/code/[VendorName]/[ModuleName]/view/frontend/layout/default.xml

Use block default class (class=”Magento\Framework\View\Element\Template”)

<?xml version="1.0" encoding="UTF-8"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
       <referenceContainer name="content">
           <block class="[VendorName]\[ModuleName]\Block\[YourBlockClass]" name="[your_block_name]" after="-"
               template="[VendorName]_[ModuleName]::confirmation-box.phtml" />
       </referenceContainer>
  </body>
</page>

New to Hyvä?? Learn about the Hyvä Theme from scratch!

Step 2: Creating the Template for Magento 2 Hyva Theme Confirmation box.

To generate a template for a Magento 2 popup modal within the Hyva Theme, proceed as follows:
1. Establish a template directory at the subsequent location: app/code/[VendorName]/[ModuleName]/view/frontend/templates/

2. Integrate a confirmation-box.phtml file into the templates directory and inject the provided code.

<div x-data="{ isOpen: false }">
   <button @click="isOpen = true" class="btn">Open Confirmation Dialog</button>

   <div x-show="isOpen" class="fixed inset-0 overflow-y-auto">
       <!-- Dialog Overlay -->
       <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
           <!-- Background Overlay -->
           <div x-show="isOpen" class="fixed inset-0 transition-opacity" @click="isOpen = false">
               <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
           </div>

           <!-- Dialog Content -->
           <div x-show="isOpen" class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
               <!-- Your Confirmation Dialog Content Goes Here -->
               <div class="p-6">
                   <p class="text-lg text-gray-700">Are you sure you want to perform this action?</p>
               </div>

               <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                   <button @click="isOpen = false" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-black hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm">
                       Confirm
                   </button>
                   <button @click="isOpen = false" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 sm:mt-0 sm:w-auto sm:text-sm">
                       Cancel
                   </button>
               </div>
           </div>
       </div>
   </div>
</div>

This code uses Alpine.js to create a simple confirmation dialog. When you click the “Open Confirmation Dialog” button, a modal appears with the message “Are you sure you want to perform this action?” along with “Confirm” and “Cancel” buttons. Clicking “Confirm” or “Cancel” closes the modal. 

The code provides a clean and interactive way to confirm user actions on a web page.

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento c:f

Output: 

Magento 2 Hyva Theme Confirmation box
perform action

Read more resources on Hyva themes:

  1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
  2. Hyva Themes Development – For Online Merchants
  3. Hyvä Theme Benefits that your store needs
  4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
  5. Hyvä VS PWA: Where to Invest?
  6. How a Slow Magento Website Can Cost You Advertising Dollars
  7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions
Speak your Mind

Post a Comment

Got a question? Have a feedback? Please feel free to leave your ideas, opinions, and questions in the comments section of our post! ❤️

* This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Grow your online business like 4,513 subscribers

    * This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
    envelope

    Thank You!

    We are reviewing your submission, and will be in touch shortly.