3

I know the following:

  • That checkout is done with knockoutjs.
  • Somehow data from PHP is passed to knockoutjs

Where is this passing made ?

If we look at project-root/vendor/magento/module-checkout/view/frontend/web/js/checkout-data.js

getData = function () {
            var data = storage.get(cacheKey)();

            if ($.isEmptyObject(data)) {
                data = {
                    'selectedShippingAddress': null, //Selected shipping address pulled from persistence storage
                    'shippingAddressFromData': null, //Shipping address pulled from persistence storage
                    'newCustomerShippingAddress': null, //Shipping address pulled from persistence storage for customer
                    'selectedShippingRate': null, //Shipping rate pulled from persistence storage
                    'selectedPaymentMethod': null, //Payment method pulled from persistence storage
                    'selectedBillingAddress': null, //Selected billing address pulled from persistence storage
                    'billingAddressFromData': null, //Billing address pulled from persistence storage
                    'newCustomerBillingAddress': null //Billing address pulled from persistence storage for new customer
                };
                saveData(data);
            }

            return data;
        };

What/Where is this persistence storage and how can I manipulate the data that is being fed to knockout

2

Here are answers to your query:

  1. What/Where is this persistence storage: If we look at dependancy injection of current model, "storage" is an alias of "Magento_Customer/js/customer-data" js model. By exploring this file there are few methods written inside it like; get, set etc. These methods are responsible to persist / get data to / from cache storage. Yes that's right the data is persisted to cache storage. If you inspect element from your browser, select tab Storage expand Local Storage and select current domain, there would be list of keys and their values. If you select or explore "mage-cache-storage" it would contain a list of objects. It also contains object "checkout-data", is an object which keeps all information related to checkout like selectedShippingAddess etc.

    Now look back into "checkout-data" js model a variable "cacheKey" is declared with value "checkout-data" which is accessible in any method of the model. From "mage-cache-storage" objects there would also be "checkout-data" object present inside it. So this object holds all information related to checkout like selectedShippingAddess etc. which is stored inside each of its objects individually. (SEE SCREEN-SHOT) enter image description here

  2. how can I manipulate the data that is being fed to knockout: Inside "checkout-data" js model there are bunch of setters and getters. These setters and getters are used differently in several situations, like if you enter some data into shipping address, next time you reload the page data is already filled in forms. This is due to the checkout-data model calling "setShippingAddressFromData" by taking object data as an argument which is further passed to storage set method, is responsible for persisting data to cache.

    setShippingAddressFromData: function (data) { var obj = getData(); obj.shippingAddressFromData = data; saveData(obj); }

    Object variable saveData is already declared at top which takes an object argument and sets it into session:

    var saveData = function (checkoutData) { storage.set(cacheKey, checkoutData); },

    Now about Storage which is alias of 'Magento_Customer/js/customer-data' js model contains a function "set":

    set: function (sectionName, sectionData) {
        var data = {};
    
        data[sectionName] = sectionData;
        buffer.update(data);
    }
    

This takes section name and section data. section Name is the key while section data is its value, which is passed to buffer object variable with update function saves data to local storage.

Similarly to get data getData() is called which returns data after processing through "storage" by calling get(cacheKey) function by passing cacheKey variable i.e "checkout-data" value.

get: function (sectionName) {
            return buffer.get(sectionName);
        },

this calls buffer to get section name from local storage which loads data in return. Now in "checkout-data" js model the needed object is get from it:

getShippingAddressFromData: function () {
      return getData().shippingAddressFromData;
}

Let me know if you need further explanation. Good Luck!

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.