0

I see following code in authnetcim/view/frontend/web/js/view/payment/method-renderer/authnetcim.js. I understand that it's using cc.html template to display the content. How to know which Block or Helper classes are called to get data for use inside this .js and in cc.html template? I need to check customer session data and display a message around 'Place Order' button, so trying to understand which back-end code needs to be modified, so that I can get that data into HTML template file.

define(
[
    'ko',
    'ParadoxLabs_TokenBase/js/view/payment/method-renderer/cc'
],
function (ko, Component) {
    'use strict';
    var config=window.checkoutConfig.payment.authnetcim;
    return Component.extend({
        defaults: {
            template: 'ParadoxLabs_Authnetcim/payment/cc'

Wrote custom Model ConfigProvider.php that extends ParadoxLabs\Authnetcim\Model\ConfigProvider, then added below method

public function getCustomerName() { if ($this->customerSession->isLoggedIn()) { return $this->customerSession->getCustomer()->getFirstname(); } return false; }

Added below code to getConfig() method:

public function getConfig()
{
    if (!$this->methods[static::CODE]->isAvailable()) {
        return [];
    }

    $config             = parent::getConfig();
    $selected           = null;
    $storedCardOptions  = [];


    $config = array_merge_recursive($config, [
        'payment' => [
            static::CODE => [
                'useVault'                => true,
                'canSaveCard'             => $this->canSaveCard(),
                <few other attributes here>
                'canStoreBin'             => $this->getCanStoreBin(),
        'customerName' => $this->getCustomerName(), -- new custom attribute
            ],
        ],
    ]);
$config['customerName'] = $this->getCustomerName();
    return $config;
}

`$config['customerName'] = $this->getCustomerName();

Overwrote vendor/paradoxlabs/authnetcim/view/frontend/web/js/view/payment/method-renderer/authentcim.js to add new function as below, using requirejs-config.js in my custom module:

getCustomerName: function () { return config.customerName; }

Code in cc.html copied from vendor/paradoxlabs/authnetcim/view/frontend/web/template/paymentcc.html template to access customerName data, inside the custom module:

<!-- ko if: (getCustomerName())-->

I do see it working if I hard code a name inside the authentcim.js getCustomerName() function, so I am guessing it's an issue with getting model data into config object that is of type window.checkoutConfig.payment.authnetcim.

6
  • Share the code for the js file (vendor/paradoxlabs/authnetcim/view/frontend/web/js/view/payment/method-renderer/authentcim.js) Apr 10, 2019 at 13:36
  • @AnshuMishra not sure why extending vendor specific ConfigProvider didn't work. I tried your approach at magento.stackexchange.com/questions/246902/… and I now see data in the .js and .html files. I abelive that this approach would add new variable to existing checkoutConfig object and not replace existing data, is that understanding correct?
    – cnu
    Apr 10, 2019 at 19:52
  • yes, that will not replace existing data. Also, avoid using preferences as much as possible, try using plugins, event observers, types and virtual types in di xml Apr 11, 2019 at 4:04
  • sure, starting to understand n number ways we can customize Magento 2 behavior, it's bit overwhelming for new folks. Do you recommend any good book or site for proper reading and understanding of above mentioned concepts?
    – cnu
    Apr 11, 2019 at 14:05
  • Magento dev docs, mage2.tv and swiftotter study guides Apr 12, 2019 at 5:45

1 Answer 1

1

This is thirdparty module. I assume they follow magento standard.

Open etc/frontend/di.xml

Find out following tag

<type name="Magento\Checkout\Model\CompositeConfigProvider">

Inside configProviders have one class which actually pass data to js.

You can check magento default module

and here

[Update]

According to getConfig() method, you should try to pass value following way:

$config['payment'][static::CODE]['customerName'] = $this->getCustomerName();

OR

$config = array_merge_recursive($config, [
'payment' => [
    static::CODE => [
            'useVault'                => true,
            'canSaveCard'             => $this->canSaveCard(),
            'canStoreBin'             => $this->getCanStoreBin(),
            'customerName'            => $this->getCustomerName(),
        ],
    ],
]);

Now this value is accessible by the following code:

var config=window.checkoutConfig.payment.authnetcim;

config.customerName

You can check all data inside console like:

console.log(window.checkoutConfig.payment.authnetcim);
12
  • I found existing custom ConfigProvider class and created new one in a module to add a new method as below, but not getting the data inside the .js function. Am I missing anything? $config = parent::getConfig(); $config['customerName'] = $this->getCustomerName(); .js file function to get above config data getCustomerName: function () { return config.customerName; }
    – cnu
    Apr 10, 2019 at 1:23
  • var config=window.checkoutConfig.payment.authnetcim; -> This is how you get data in js
    – Sohel Rana
    Apr 10, 2019 at 4:00
  • Show how you tried.
    – Sohel Rana
    Apr 10, 2019 at 4:01
  • Wrote custom Model ConfigProvider.php that extends ParadoxLabs\Authnetcim\Model\ConfigProvider, then added below method public function getCustomerName() { if ($this->customerSession->isLoggedIn()) { return $this->customerSession->getCustomer()->getFirstname(); } return false; } Added below code to getConfig() method: $config['customerName'] = $this->getCustomerName(); .js function: getCustomerName: function () { return config.customerName; }` Code in .html template to access customerName data <!-- ko if: (getCustomerName())-->
    – cnu
    Apr 10, 2019 at 4:16
  • I do see it working if I hard code a name inside the .js getCustomerName() function, so I am guessing it's an issue with getting model data into config object that is of type window.checkoutConfig.payment.authnetcim.
    – cnu
    Apr 10, 2019 at 4:17

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.