Hyvä checkout is a powerful and streamlined solution for Magento 2 eCommerce stores that want to improve their customers’ checkout experience.
Businesses sometimes need more fields to record particular customer data, such as custom preferences, tax IDs, or delivery instructions. Including a custom field in the Hyvä Checkout in Magento 2 lets store owners quickly satisfy business needs, improve customer experience, and gather necessary data.
This guide will cover the procedures for effectively adding a custom field at Hyvä Checkout in Magenta 2, guaranteeing clients a seamless and quick buying experience.
Steps to Add Custom Field at Hyvä Checkout
Step 1: First, we need to create a “hyva_checkout_components.xml” file inside our extension at the following path
app\code\Vendor\Extension\view\frontend\layout\hyva_checkout_components.xml
<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
<body>
<referenceBlock name="hyva.checkout.components">
<container name="checkout.customfield.section" htmlTag="section" htmlId="customfield">
<block name="checkout.customfield.title"
template="Hyva_Checkout::section/title.phtml"
before="-">
<action method="setTitle">
<argument name="title" translate="true" xsi:type="string">Customfield Information</argument>
</action>
</block>
<container name="checkout.customfield.before">
<block name="component-messenger-customfield"
template="Hyva_Checkout::page/messenger.phtml"
before="-"
>
<arguments>
<argument name="event_prefix" xsi:type="string">customfield</argument>
</arguments>
</block>
</container>
<block name="checkout.customfield"
template="Vendor_Extension::hyvacheckout/magewire/component/customfield.phtml">
<arguments>
<argument name="magewire" xsi:type="object">
\Vendor\Extension\Magewire\Checkout\Customfield
</argument>
</arguments>
</block>
<container name="checkout.customfield.after"/>
</container>
</referenceBlock>
</body>
</layout>
Step 2: After that, we need to create a “customfield.phtml” file inside our extension at the following path
app\code\Vendor\Extension\view\frontend\templates\hyvacheckout
\magewire\component\customfield.phtml
And add the code as given below
<?php
declare(strict_types=1);
use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Vendor\Extension\Magewire\Checkout\Customfield as Magewire;
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;
/** @var Template $block */
/** @var Magewire $magewire */
/** @var ViewModelRegistry $viewModels */
/** @var Escaper $escaper */
/** @var HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(HeroiconsOutline::class);
$customfield = $magewire->customfield ? $magewire->customfield : '';
?>
<div>
<div x-data="{
expand: true,
customfield: $wire.entangle('customfield')}">
<div class="p-2 max-w-lg mx-auto">
<div class="mb-4 customfield-field">
<label for="customfield" class="label label-customfield"><span><?= __($magewire->configdata->customfield_label)?></span></label>
<input
type="text"
id="customfield"
wire:change="handleFieldChange($event.target.value,'customfield')"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" value="<?= $customfield ?>"
/>
</div>
</div>
</div>
</div>Step 3: After that, we need to create a “Fee.php” file inside our extension at the following path
app\code\Vendor\Extension\Magewire\Checkout\Customfield.php
<?php
namespace Vendor\Extension\Magewire\Checkout;
use Magento\Checkout\Model\Session as SessionCheckout;
use Magento\Framework\Exception\LocalizedException;
use Magento\Framework\Exception\NoSuchEntityException;
use Magewirephp\Magewire\Component;
use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Quote\Model\QuoteIdMaskFactory;
use Magento\Quote\Api\CartRepositoryInterface;
use Magento\Customer\Api\CustomerRepositoryInterface;
use Hyva\Checkout\Model\Magewire\Component\EvaluationInterface;
use Hyva\Checkout\Model\Magewire\Component\EvaluationResultFactory;
use Hyva\Checkout\Model\Magewire\Component\EvaluationResultInterface;
class Customfield extends Component implements EvaluationInterface
{
protected $scopeConfig;
protected $sessionCheckout;
protected $quoteIdMaskFactory;
public $customfield;
protected $quoteRepository;
protected $customerRepository;
public function __construct(
SessionCheckout $sessionCheckout,
ScopeConfigInterface $scopeConfig,
QuoteIdMaskFactory $quoteIdMaskFactory,
CustomerRepositoryInterface $customerRepository,
CartRepositoryInterface $quoteRepository
) {
$this->sessionCheckout = $sessionCheckout;
$this->scopeConfig = $scopeConfig;
$this->quoteIdMaskFactory = $quoteIdMaskFactory;
$this->customerRepository = $customerRepository;
$this->quoteRepository = $quoteRepository;
}
public function mount(): void
{
$quote = $this->sessionCheckout->getQuote();
$this->customfield = $quote->getCustomfield() ? $quote->getCustomfield() : '';
}
public function saveCustomfield($value,$key)
{
$quote = $this->sessionCheckout->getQuote();
$store_id = $quote->getStoreId();
$quoteIdMask = $this->quoteIdMaskFactory->create()->load($quote->getId(), 'quote_id');
if($value && $key=='customfield'){
$quote->setCustomfield($value);
$this->customfield = $value;
}
$this->quoteRepository->save($quote);
}
public function handleFieldChange($value,$key)
{
$this->saveCustomfield($value,$key);
}
}Bottom Line
Adding custom fields to the Hyvä Checkout in Magento 2 allows for more flexibility and functionality in checkout processes. This customization allows businesses to create a unique experience for customers, whether by customizing the checkout to suit their specific business needs or by including additional customer information.
Perfecting custom enhancements on the frontend, backend, and GraphQL schema can give store owners the ability to manage data integrity and continuous flows. In addition to enhancing customer satisfaction, a properly working checkout process will decrease abandoned cart rates and increase conversion rates.
Hope you found the tutorial helpful. Follow these steps and add custom field at your Magento 2’s Hyvä Checkout. If you are stuck somewhere, contact us and our Magento experts are available to assist you.
