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.

  • Share the code for the js file (vendor/paradoxlabs/authnetcim/view/frontend/web/js/view/payment/method-renderer/authentcim.js) – Anshu Mishra Apr 10 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 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 – Anshu Mishra Apr 11 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 at 14:05
  • Magento dev docs, mage2.tv and swiftotter study guides – Anshu Mishra Apr 12 at 5:45
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);
  • 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 at 1:23
  • var config=window.checkoutConfig.payment.authnetcim; -> This is how you get data in js – Sohel Rana Apr 10 at 4:00
  • Show how you tried. – Sohel Rana Apr 10 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 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 at 4:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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