Unlocking the full potential of your Magento 2 store requires harnessing the extensive capabilities of system configuration variables. By seamlessly integrating these variables into the window.checkoutConfig object on the Checkout page, businesses can enhance functionality, streamline processes, and deliver unparalleled user experiences.
In this article, we delve into the intricacies of leveraging system config variables within Magento 2, empowering your online store with customized and dynamic checkout functionalities.
Section 1: Understanding System Config Variables in Magento 2 :
- Explore the concept of system configuration variables and their significance within Magento 2.
- Gain insights into the flexibility and versatility offered by system config variables, enabling tailored settings for various aspects of your online store.
Section 2: Integrating System Config Variables with window.checkoutConfig :
- Examine the powerful window.checkoutConfig object and its pivotal role in storing essential data for the Checkout page.
- Learn how to seamlessly inject system config variables into the window.checkoutConfig object to make them readily available for use on the Checkout page.
Section 3: Leveraging System Config Variables for Enhanced Checkout Functionality :
- Explore practical use cases where system config variables can significantly impact the user experience on the Checkout page.
- Illustrate how the dynamic utilization of system config variables can streamline processes, customize options, and improve customer satisfaction during the checkout journey.
Section 4: Step-by-Step Implementation Guide:
- Provide a comprehensive, step-by-step walkthrough on integrating system config variables with window.checkoutConfig.
- Showcase code snippets and best practices to ensure a seamless implementation process.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<!-- pass custom variable to checkout page -->
<type name="Magento\Checkout\Model\CompositeConfigProvider">
<arguments>
<argument name="configProviders" xsi:type="array">
<item name="custom_discount" xsi:type="object">Vendor\Module\Model\CheckoutConfig</item>
</argument>
</arguments>
</type>
</config>
app/code/Vendor/Module/Model/CheckoutConfig.php
<?php
namespace Vendor\Module\Model;
use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\App\Config\ScopeConfigInterface;
class CheckoutConfig implements ConfigProviderInterface
{
const CONFIG_XML_PATH_CUSTOM_DISCOUNT_STATUS = 'generan/custom_discount/status';
const CONFIG_XML_PATH_CUSTOM_DISCOUNT = 'generan/custom_discount/amount';
/**
* @var ScopeConfigInterface
*/
protected $scopeConfig;
/**
* @param ScopeConfigInterface $scopeConfig
*/
public function __construct(
ScopeConfigInterface $scopeConfig
) {
$this->scopeConfig = $scopeConfig;
}
/**
* {@inheritdoc}
*/
public function getConfig()
{
$config = [];
$value = [];
$value['is_custom_discount_eabled'] = $this->getCustomDiscountStatusConfig();
$value['custom_discount_amount'] = $this->getCustomDiscountAmountFromConfig();
return $config['customDiscount'] = $value;
}
/**
* Get Custom Discount Amount form Sytem Config
*/
public function getCustomDiscountAmountFromConfig(){
$this->getConfigValue($this::CONFIG_XML_PATH_CUSTOM_DISCOUNT)
}
/**
* Get Custom Discount Status form Sytem Config
*/
public function getCustomDiscountStatusConfig(){
$this->getConfigValue($this::CONFIG_XML_PATH_CUSTOM_DISCOUNT_STATUS)
}
/**
* @param $path
* @return mixed
*/
public function getConfigValue($path){
return $this->scopeConfig->getValue(
$path,
\Magento\Store\Model\ScopeInterface::SCOPE_STORE
);
}
}
Inside your checkout js file, You can get value using below format
define(
[
'jquery',
'Magento_Checkout/js/view/summary/abstract-total',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/totals',
'Magento_Catalog/js/price-utils'
],
function ($,Component,quote,totals,priceUtils) {
"use strict";
var customDiscoutConfig = window.checkoutConfig.customDiscount;
return Component.extend({
defaults: {
template: 'vendor_module/checkout/summary/custom-discount'
},
totals: quote.getTotals(),
isDisplayedCustomdiscountTotal : function () {
return true;
},
getCustomdiscountTotal : function () {
var price = 0;
if(customDiscoutConfig.is_custom_discount_eabled){
price = customDiscoutConfig.custom_discount_amount? customDiscoutConfig.custom_discount_amount:0;
}
return this.getFormattedPrice(price);
}
});
}
);
Section 5: Real-World Success Stories:
- Share success stories from businesses that have harnessed the power of system config variables in their Magento 2 stores.
- Highlight the measurable benefits achieved, such as increased conversion rates, improved user engagement, and enhanced checkout experiences.
Note* We have not created a system configuration in this example you can create a system configuration value and get the appropriate path in the model.
Conclusion
By leveraging system config variables within Magento 2 and integrating them with the window.checkoutConfig object, your business can unlock unparalleled control and customization on the Checkout page. Empower your store with dynamic functionalities, streamline processes, and exceed customer expectations. Partner with our experienced Magento 2 development team to harness the power of system config variables and elevate your online store to new heights of success. Experience the transformative impact of personalized checkout experiences and witness increased conversions and customer satisfaction.
