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:
The Module Structure (The arrow is the js file to which I would like to load the settings)
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.
You have to add your system configuration settings in this file
You can access your admin settings value in js file like - window.checkoutConfig.contacts.email