Magento 2.3.4 – Refresh window.checkoutConfig

checkoutjavascriptknockoutjsmagento2.3PHP

We are adding shipping price of quote object to myTestData which is pulled onto the page using window.checkoutConfig.myTestData:

use Magento\Checkout\Model\ConfigProviderInterface;

class Config implements ConfigProviderInterface
{
  protected $checkoutSession;

  public function __construct(
    \Magento\Checkout\Model\Session $checkoutSession
  ) {
    $this->checkoutSession = $checkoutSession;
  }

  /* Get Quote */
  public function getQuote()
  {
    return $this->checkoutSession->getQuote();
  }

  /* Return Config Details */
  public function getConfig()
  {
    $config = [];
    $config['myTestData'] = $this->getQuote()->getShippingAddress()->getShippingAmount();

    return $config;
  }

This returns the proper shipping amount on first load of the cart, but if we change shipping method, myTestData does not get updated to reflect the new value. How can we make sure window.checkoutConfig.myTestData gets refreshed if / when cart is updated?

EDIT, if not using checkoutConfig, is there another way to pass dynamic block variables to javascript object any time the cart updates?

Best Answer

PHP functions run when page is reload so you can do this in you custom controller what ever you want

steps

create a ajax call on shipping select to a controller

like on shipping select radio button add

onlick="myfunction()"

and in js file use like this

   function myfunction() {
    jQuery.ajax({
        url: '/routename/controller_folder/controller_file',
        type: 'POST',
        dataType: 'json',
        data: {
            yourvariable: your_variable_value
        },
        complete: function(response) {

        }
    });
}

in your controller get that value in execute function like

$yourvariable = $this->getRequest()->getParam('yourvariable');

now do what ever you like with this variable

By this when ever the shipping method changes it will call that ajax with updated JS variable

hope you get my point if need more details feel free to comment if helps then up-vote please

Related Solutions

Magento – Magento 2 : problem in the Checkout page : window.checkoutConfig is undefined

I was also faced that problem. When my config file is

public function getConfig()
{
    $config = [
        'payment' => [
            'customPayment' => [
                'threed_secure' => $this->get3DSecure(),
            ]
        ]
    ];
    return $config;
}
public function get3DSecure()
{
    //Data from system.xml fields
    return $this->getConfigData('threed_secure');
}

Then i have created helper file and define that function here

public function get3DSecure(){
    return $this->_scopeConfig->getValue('payment/customPayment/threed_secure');
}

Called that function using helper When i have changed it to following code then it succeds

class Payfullapi extends \Magento\Framework\App\Helper\AbstractHelper
{
protected $method;
public function __construct(
    Payfullapi $helper
) {
    $this->helper = $helper;
}
/**
* {@inheritdoc}
*/
public function getConfig()
{
     $config = ['payment' => ['customPayment' => [
     'threed_secure' => $this->get3DSecure()
    return $config;
}
/**
* Get config from admin
*/
public function get3DSecure()
{
    //Data from system.xml fields
    return $this->helper->get3DSecure();
} 
}

If u want any help just comment here...! I will help u....!

Magento – window.checkoutConfig Javascript (usage)

Usually the best place to start looking is at the place where it's used. In this case, the onepage checkout.

If you look at public/vendor/magento/module-checkout/view/frontend/templates/onepage.phtml you'll note the following line:

window.checkoutConfig = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getCheckoutConfig()); ?>;

Ergo, if you want to have this configuration anywhere else you need to include this in your template as well. If you take a look at the getCheckoutConfig()-method of Block/Onepage.php you'll see:

/**
 * Retrieve checkout configuration
 *
 * @return array
 * @codeCoverageIgnore
 */
public function getCheckoutConfig()
{
    return $this->configProvider->getConfig();
}

On it's turn $this->configProvider maps to Magento\Checkout\Model\CompositeConfigProvider. Now, if you just re-use this model in your own block class using dependency injection you can simply mimic the same code in your own class:

/**
 * @var \Magento\Checkout\Model\CompositeConfigProvider
 */
protected $configProvider;

/**
 * Constructor call.
 * @param Template\Context $context
 * @param \Magento\Checkout\Model\CompositeConfigProvider $configProvider
 * @param array $data
 */
public function __construct(
    Template\Context $context,
    \Magento\Checkout\Model\CompositeConfigProvider $configProvider,
    array $data = []
)
{
    $this->configProvider = $configProvider;
    parent::__construct($context, $data);
}

/**
 * Retrieve checkout configuration
 *
 * @return array
 */
public function getCheckoutConfig()
{
    return $this->configProvider->getConfig();
}

Now you can use getCheckoutConfig() in your own template/block as well:

<script type="text/javascript">
    window.checkoutConfig = <?php echo \Zend_Json::encode($block->getCheckoutConfig()); ?>;
</script>

Best Answer

Related Solutions

Magento – Magento 2 : problem in the Checkout page : window.checkoutConfig is undefined

Magento – window.checkoutConfig Javascript (usage)

Related Topic