1

I created system.xml file where seller can select multiple options (e.g Days of the week). Now i need to use that data in checkout page as . Where customer can select one option (e.g any day from selected days). How can i get those selected days in my checkout js and html file?

    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator',
        'Magento_Customer/js/model/customer'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator,
        customer
    ) {
        'use strict';
        /**
         * check-login - is the name of the component's .html template
         */
        return Component.extend({
            defaults: {
                template: 'RolusTech_DateAndTime/date-time'
            },


            //add here your logic to display step,
            isVisible: ko.observable(true),
            isLogedIn: customer.isLoggedIn(),
            //step code will be used as step content id in the component template
            stepCode: 'isLogedCheck',
            //step title value
            stepTitle: 'Select Day & Time',



            /**
             *
             * @returns {*}
             */
            initialize: function () {
                this._super();
                // register your step
                stepNavigator.registerStep(
                    this.stepCode,
                    //step alias
                    null,
                    this.stepTitle,
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                     * sort order value
                     * 'sort order value' < 10: step displays before shipping step;
                     * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                     * 'sort order value' > 20 : step displays after payment step
                     */
                    15
                );

                return this;
            },

            /**
             * The navigate() method is responsible for navigation between checkout step
             * during checkout. You can add custom logic, for example some conditions
             * for switching to your custom step
             */
            navigate: function () {

            },

            /**
             * @returns void
             */
            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    }
);

1 Answer 1

4

You should pass system.xml data to customer by CompositeConfigProvider.

define CompositeConfigProvider in your di.xml file

app/code/{{Vendorname}}/{Modulename}/etc/frontend/di.xml

<?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="checkout_custom_shipping_block" xsi:type="object">VendorName\ModuleName\Model\CustomConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Create your Model file.

app/code/{{Vendorname}}/{Modulename}/Model/CustomConfigProvider.php

<?php
namespace Vendorname\Modulename\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

class CustomConfigProvider implements ConfigProviderInterface
{
    protected $scopeConfig;
    const XML_PATH_SETTING_DATA = 'yourvaluepath';

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


    public function getConfig()
    {

        $storeScope = \Magento\Store\Model\ScopeInterface::SCOPE_STORE;
        $yourvalue = $this->scopeConfig->getValue(self::XML_PATH_SETTING_DATA, $storeScope);
        $config = [];
        $config['yourcustomdata'] = $yourvalue;

        return $config;
    }
}

Clear cache and you will get it in javascript customer object.

Get value in javascript.

var customData = window.checkoutConfig.yourcustomdata;
alert(customData);
1
  • It worked perfectly, Thank you for your help Commented May 31, 2022 at 10:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.