Magento2 – Loading Admin Settings into JavaScript

javascriptmodulesystem.xml

so I'm trying to add some new configurations to my checkout page, and I added 3 new settings to the admin page, but now I would like to load them to my JS file, but I don't know what to do to achieve this.

The Settings in Admin:

enter image description here

The Module Structure (The arrow is the js file to which I would like to load the settings)

enter image description here

The js file code:

define([
    'knockout',
    'jquery',
    'mage/url',
    'Magento_Ui/js/form/form',
    'Magento_Customer/js/model/customer',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/url-builder',
    'Magento_Checkout/js/model/error-processor',
    'Magento_Checkout/js/model/cart/cache',
    'Tmg_Checkout/js/model/checkout/gift-checkout-form'
], function(ko, $, urlFormatter, Component, customer, quote, urlBuilder, errorProcessor, cartCache, formData) {
    'use strict';
    var partial_second_order = window.checkoutConfig.partial_payment_second_order;

    return Component.extend({
        giftFields: ko.observable(null),
        formData: formData.giftFieldsData,
        hideGiftBar: false,
        hideGiftWrap: false,
        hideGiftTicket: false,

        /**
         * Initialize component
         *
         * @returns {exports}
         */
        initialize: function () {
            var self = this;
            this._super();
            formData = this.source.get('giftCheckoutForm');
            var formDataCached = cartCache.get('gift-form');
            if (formDataCached) {
                formData = this.source.set('giftCheckoutForm', formDataCached);
            }

            this.giftFields.subscribe(function(change){
                self.formData(change);
            });

            this.disableGift();

            console.log(window.GiftWrap);
            console.log(window.GiftTicket);
            console.log(window.GiftMessage);

            return this;
        },

        /**
         * Trigger save method if form is change
         */
        onFormChange: function () {
            this.saveGiftFields();
        },

        /**
         * Form submit handler
         */
        saveGiftFields: function() {
            this.source.set('params.invalid', false);
            this.source.trigger('giftCheckoutForm.data.validate');

            if (!this.source.get('params.invalid')) {
                var formData = this.source.get('giftCheckoutForm');
                var quoteId = quote.getQuoteId();
                var isCustomer = customer.isLoggedIn();
                var url;

                if (isCustomer) {
                    url = urlBuilder.createUrl('/carts/mine/set-order-gift-fields', {});
                } else {
                    url = urlBuilder.createUrl('/guest-carts/:cartId/set-order-gift-field', {cartId: quoteId});
                }

                var payload = {
                    cartId: quoteId,
                    giftFields: formData
                };
                var result = true;
                $.ajax({
                    url: urlFormatter.build(url),
                    data: JSON.stringify(payload),
                    global: false,
                    contentType: 'application/json',
                    type: 'PUT',
                    async: true
                }).done(
                    function (response) {
                        cartCache.set('gift-form', formData);
                        result = true;
                    }
                ).fail(
                    function (response) {
                        result = false;
                        errorProcessor.process(response);
                    }
                );

                return result;
            }
        },

        /**
         * Disables gift option for partial payment second orders
         */
        disableGift: function () {
            if (partial_second_order > 0) {
                this.hideGiftBar = true;
            }
        }
    });
});

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="gifts" translate="label" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <tab>sales</tab>
            <label>Gifts</label>
            <resource>Magento_Sales::config_sales</resource>
            <group id="checkout_gifts" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Checkout Gifts</label>
                <field id="gift_wrap" type="text" translate="label" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Gift Wrap</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="gift_ticket" type="text" translate="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Gift Ticket</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="gift_message" type="text" translate="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Gift Message</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
            </group>
        </section>
    </system>  
</config>

In the end what I want is the hideGiftWrap, hideGiftTicket to be the setting values but any help loading them would be enough since that's the part I can't figure out.

Any help would be appreciated.

Best Answer

For example i have load contacts recipient email in checkout page. You should load your settings like below.

Step 1:- Create file di.xml under path PackageName/Module/etc/frontend/

<?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="foo_bar_config_provider" xsi:type="object">PackageName\Module\Model\SampleConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Step 2:- Create file SampleConfigProvider.php file under path PackageName\Module\Model\

You have to add your system configuration settings in this file

<?php

namespace PackageName\Module\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

/**
 * Class SampleConfigProvider
 */
class SampleConfigProvider implements ConfigProviderInterface
{
    protected $scopeConfig;

    public function __construct(
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ) {
        $this->scopeConfig = $scopeConfig;
    }

    /**
     * Retrieve assoc array of checkout configuration
     *
     * @return array
     */
    public function getConfig()
    {

        $config = [
            'contacts' => [
                'email' => $this->scopeConfig->getValue('contact/email/recipient_email'),
            ]
        ];

        return $config;
    }
}

Step 3:- Now in your js file you have to get above configuration like below

define([
    'uiComponent',
    'ko',
    'uiComponent',
    'mage/url'
], function ($, ko, Component, url) {
    'use strict';

    return Component.extend({
        initialize: function(config) {
             console.log(window.checkoutConfig.contacts.email);
             this._super();
        }
    });
});

You can access your admin settings value in js file like - window.checkoutConfig.contacts.email

Related Topic