How to get data from custom shipping method in javascript Magento 2

Question

I am making a magento 2 module, and I had to create a custom shipping method but I am not able to get the data of fields in the checkout page :

This is a part of my system.xml file

 <section id="carriers" translate="label" type="text" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
 <group id="my_shipping_methode" translate="label" type="text" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
 <field id="myfield" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">

and this is the constructor of my module :

<?php namespace A\B\Model\Carrier; 
use Magento\Quote\Model\Quote\Address\RateRequest;
use Magento\Shipping\Model\Rate\Result;
class Shipping extends \Magento\Shipping\Model\Carrier\AbstractCarrier implements
 \Magento\Shipping\Model\Carrier\CarrierInterface
{
 /**
 * @var string
 */
 protected $_code = 'my_shipping_methode';
 /**
 * @var string
 */
 protected $myfield = 'test';

And this is part of my javascript file I call in the checkout to get the code of the shipping method :

this.selectedMethod = ko.computed(function() {
 var method = quote.shippingMethod();
 var selectedMethod = method != null ? method.method_code : null;

I tried to do the same for my field but it didn't work

var myfield = method != null ? method.method_myfield : null;

Please help I am lost

Answer 1

Your protected code should be equal to the name of your system.xml group configuration. Instead of protected $_code = 'thecode';, It should be:

protected $_code = 'my_shipping_methode'; 

• Nicole: Actually I changed the values of my params just to give the example of the situation i am into, and forgot about that , but still it's not really the problem as it's coorect in my code. I fixed that in my question thanks for pointing that.
• fmsthird: great. but why you need a javascript? , I think using the class Shipping Magento\Quote\Model\Quote\Address\RateRequest your shipping method will automatically be added in checkout
• Nicole: Actually the shipping is added correctly and I can see it but The problem is I want to get the value of one of its fields I added my self (myfield) and send it to javascript to do some stuf with it in the checkout page
• fmsthird: what is your goal for this? what is your expected output?
• Nicole: Ok thanks I will keep looking for a workaround I am already lost so I don't want to do it overriding things I am new to magento so I don't think that I will be able to do it anyway for now.

Answer 2

Solved !!

This is how I did it :

<?php
namespace Mageplaza\Simpleshipping\Model;
use Magento\Checkout\Model\ConfigProviderInterface;
/**
 * Class SampleConfigProvider
 */
class SampleConfigProvider extends \Magento\Framework\App\Helper\AbstractHelper implements ConfigProviderInterface
{
 /**
 * Retrieve assoc array of checkout configuration
 *
 * @return array
 */
 public function getConfig()
 {
 $postTest = $this->scopeConfig->getValue(
 'carriers/simpleshipping/myfield',
 \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
 return [
 'foo' => [
 'bar' => $postTest,
 ],
 ];
 }
}

In my javascript :

getSampleTotal: function () {;
 return window.checkoutConfig.foo.bar;
 }

In my template :

<div class="component-wrapper">
 <p data-bind="html: getSampleTotal()"></p>
 </div>

in 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="Mageplaza_Simpleshipping_config_provider" xsi:type="object">Mageplaza\Simpleshipping\Model\SampleConfigProvider</item>
 </argument>
 </arguments>
 </type>
</config>

system.xml

 <section id="carriers" translate="label" type="text" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
 <group id="simpleshipping" translate="label" type="text" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
 <field id="myfield" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">