Hello Magento Friends,
Hyvä Checkout is a lightweight and fast checkout solution for Magento 2 that enhances the user experience. There may be scenarios where you need to display additional information, collect extra details, or show promotional offers in a popup during the checkout process. Here we will lead you through a process of how to open a popup in Hyvä Checkout.
Steps to Open Popup in Hyvä Checkout:
Step 1: Create a “hyva_checkout_index_index.xml” file in the path provided below
app/code/Vendor/Extension/view/frontend/layout/hyva_checkout_index_index.xml
Now place the code as follows:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.place-order">
<action method="setTemplate">
<argument name="template" xsi:type="string">Vendor_Extension::hyvacheckout/navigation/place-order.phtml</argument>
</action>
</referenceBlock>
</body>
</page>
Step 2: Create a “place-order.phtml” file at the given path below
app/code/Vendor/Extension/view/frontend/templates/hyvacheckout/navigation/place-order.phtml
Now place the code as follows:
<?php
declare(strict_types=1);
use Hyva\Checkout\ViewModel\Navigation;
use Hyva\Theme\Model\ViewModelRegistry;
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;
/** @var Template $block */
/** @var ViewModelRegistry $viewModels */
/** @var Escaper $escaper */
/** @var Navigation $viewModel */
$viewModel = $viewModels->require(Navigation::class);
$navigator = $viewModel->getNavigator();
$checkout = $navigator->getActiveCheckout();
$next = $checkout->getStepAfter($navigator->getActiveStep())
?>
<?php if ($next === null): ?>
<div x-data="{
isPopupOpen: false,
}" class="place-order-popup">
<button type="button"
class="btn btn-primary
disabled:opacity-10
disabled:cursor-not-allowed
bg-green-700 hover:bg-green-600"
x-spread="buttonPlaceOrder()"
x-bind="buttonPlaceOrder()"
@click="
async () => {
isPopupOpen = true;
}">
<?= $escaper->escapeHtml(__('Place Order')) ?>
</button>
<?php endif ?>
<div x-show="isPopupOpen" class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center" x-cloak>
<div class="bg-white p-4 rounded-md">
<div class="flex justify-between p-10 gap-4">
<h1 class="text-2xl font-bold bg-white rounded-lg">Hyva Checkout Popup</h1>
<button class="float-right bg-gray-500 text-white border-none px-4 py-2 rounded-full cursor-pointer" @click="isPopupOpen = false">X</button>
</div>
</div>
</div>Output:
Conclusion:
Adding a popup in Hyvä Checkout is easy with Alpine.js. If you need to show more information, gather extra data, or push an offer, this approach offers an effortless means of improving your Magento 2 checkout process.
If you have any questions or need help, don’t hesitate to ask in the comments!
Happy Reading!
