Magento 2 provides a robust and flexible framework for customizing the checkout process using UI components. One of the most powerful features is the ability to tailor the checkout experience based on specific website or store configurations. This guide will walk you through the process of adding custom UI components to the checkout and configuring them on a per-website or per-store basis.
Overview
- Creating the Configuration Setting
- Creating the Custom Config Provider
- Registering the Custom Config Provider in
di.xml - Creating the UI Component
- Adding the UI Component to the Layout
- Deploying and Testing
Step 1: Creating the Configuration Setting
First, we need to create a configuration setting that will be scoped to the website or store level. This is done in the system.xml file.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<section id="custom_section" translate="label" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
<class>separator-top</class>
<label>Custom Settings</label>
<tab>general</tab>
<resource>Vendor_Module::config</resource>
<group id="checkout_settings" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Checkout Settings</label>
<field id="enable_component" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Enable Custom Checkout Component</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
<backend_model>Magento\Config\Model\Config\Backend\Default</backend_model>
</field>
</group>
</section>
</system>
</config>
Step 2: Creating the Custom Config Provider
Next, we create a custom config provider that reads the configuration setting and passes it to the frontend.
<?php
namespace Vendor\Module\Model\Checkout;
use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Store\Model\StoreManagerInterface;
class ConfigProvider implements ConfigProviderInterface
{
private ScopeConfigInterface $scopeConfig;
private StoreManagerInterface $storeManager;
public function __construct(
ScopeConfigInterface $scopeConfig,
StoreManagerInterface $storeManager
) {
$this->scopeConfig = $scopeConfig;
$this->storeManager = $storeManager;
}
public function getConfig(): array
{
$websiteId = $this->storeManager->getStore()->getWebsiteId();
$isEnabled = $this->scopeConfig->getValue(
'custom_section/checkout_settings/enable_component',
\Magento\Store\Model\ScopeInterface::SCOPE_WEBSITE,
$websiteId
);
return [
'customComponentConfig' => [
'enabled' => $isEnabled
]
];
}
}
Step 3: Registering the Custom Config Provider in di.xml
We need to register our custom config provider so that Magento includes it in the checkout configuration.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Model\CompositeConfigProvider">
<arguments>
<argument name="configProviders" xsi:type="array">
<item name="customConfigProvider" xsi:type="object">Vendor\Module\Model\Checkout\ConfigProvider</item>
</argument>
</arguments>
</type>
</config>
Step 4: Creating the UI Component
Create a JavaScript component that will be used in the checkout.
define([
'jquery',
'uiComponent',
'knockout',
'Magento_Catalog/js/price-utils',
'Magento_Checkout/js/model/quote'
], function ($, Component, ko, priceUtils, quote) {
'use strict';
return Component.extend({
defaults: {
updateUrl: '',
isEnabled: ko.observable(false)
},
initialize: function () {
this._super();
this.checkIsEnabled();
if (this.isEnabled()) {
this._update();
}
},
checkIsEnabled: function () {
var configValue = window.checkoutConfig.customComponentConfig.enabled;
this.isEnabled(configValue == 1);
},
_update: function () {
},
});
});
Step 5: Adding the UI Component to the Layout
We need to add the UI component to the checkout layout XML file.
<?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.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="custom-checkout-component" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/custom-checkout-component</item>
<item name="config" xsi:type="array">
<item name="updateUrl" xsi:type="string">{{baseUrl}}/rest/V1/vendor-module/get</item>
<item name="template" xsi:type="string">Vendor_Module/checkout/custom-checkout-component</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step 6: Deploying and Testing
Deploy your changes and clear the cache.
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
Go to the Magento admin panel, navigate to Stores > Configuration > Custom Settings > Checkout Settings, and toggle the Enable Custom Checkout Component setting at the website scope. Verify the visibility of the checkout component on the frontend based on this setting.
Conclusion
By following these steps, you can add a custom UI component to the Magento 2 checkout and control its visibility and behavior using configuration settings scoped to specific websites or store views. This approach provides flexibility and customization options to tailor the checkout experience for different parts of your online store.
