How is the «Magento_Checkout/js/checkout-data» object implemented and used?

dmitry_fedyuk · April 17, 2016, 12:04pm

Context: How to get the checkout data on the frontend checkout page’s client side (with JavaScript)?

Interface and its implementation

The «Magento_Checkout/js/checkout-data» JavaScript object interface and its implementation

An alias for RequireJS (it is never used)

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/requirejs-config.js#L14-L14


checkoutData:           'Magento_Checkout/js/checkout-data',

Usage examples

1. Magento_Checkout/js/model/checkout-data-resolver.js

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/model/checkout-data-resolver.js#L14-L14


'Magento_Checkout/js/checkout-data',

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/model/checkout-data-resolver.js#L49-L50


if (checkoutData.getShippingAddressFromData()) {
    address = addressConverter.formAddressDataToQuoteAddress(checkoutData.getShippingAddressFromData());

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/model/checkout-data-resolver.js#L57-L60


if (checkoutData.getBillingAddressFromData()) {
    address = addressConverter.formAddressDataToQuoteAddress(
        checkoutData.getBillingAddressFromData()
    );

2. Magento_Checkout/js/view/billing-address.js

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/billing-address.js#L133-L133


checkoutData.setSelectedBillingAddress(null);

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/billing-address.js#L144-L144


checkoutData.setSelectedBillingAddress(this.selectedAddress().getKey());

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/billing-address.js#L167-L168


checkoutData.setSelectedBillingAddress(newBillingAddress.getKey());
checkoutData.setNewCustomerBillingAddress(addressData);

3. Magento_Checkout/js/view/shipping.js

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/shipping.js#L110-L110


var shippingAddressData = checkoutData.getShippingAddressFromData();

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/shipping.js#L119-L119


checkoutData.setShippingAddressFromData(shippingAddressData);

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/shipping.js#L198-L199


checkoutData.setSelectedShippingAddress(newShippingAddress.getKey());
checkoutData.setNewCustomerShippingAddress(addressData);

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/shipping.js#L223-L223


checkoutData.setSelectedShippingRate(shippingMethod.carrier_code + '_' + shippingMethod.method_code);

4. Magento_Checkout/js/view/cart/shipping-estimation.js

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/cart/shipping-estimation.js

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/*jshint browser:true jquery:true*/
/*global alert*/
define(
    [
        'jquery',
        'Magento_Ui/js/form/form',
        'Magento_Checkout/js/action/select-shipping-address',
        'Magento_Checkout/js/model/address-converter',
        'Magento_Checkout/js/model/cart/estimate-service',
        'Magento_Checkout/js/checkout-data',
        'Magento_Checkout/js/model/shipping-rates-validator',
        'uiRegistry',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/checkout-data-resolver',
        'mage/validation'
    ],

This file has been truncated. show original

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/cart/shipping-estimation.js#L14-L14


'Magento_Checkout/js/checkout-data',

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/cart/shipping-estimation.js#L58-L66


if (!quote.isVirtual()) {
    checkoutProvider.on('shippingAddress', function (shippingAddressData) {
        checkoutData.setShippingAddressFromData(shippingAddressData);
    });
} else {
    checkoutProvider.on('shippingAddress', function (shippingAddressData) {
        checkoutData.setBillingAddressFromData(shippingAddressData);
    });
}

5. Magento_Checkout/js/view/cart/shipping-rates.js

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/cart/shipping-rates.js#L14-L14


'Magento_Checkout/js/checkout-data'

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/cart/shipping-rates.js#L81-L90


/**
 * Set shipping method.
 * @param {String} methodData
 * @returns bool
 */
selectShippingMethod: function (methodData) {
    selectShippingMethodAction(methodData);
    checkoutData.setSelectedShippingRate(methodData['carrier_code'] + '_' + methodData['method_code']);
    return true;
}

6. Magento_Checkout/js/view/form/element/email.js

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js#L15-L15


'Magento_Checkout/js/checkout-data',

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js#L18-L18


], function ($, Component, ko, customer, checkEmailAvailability, loginAction, quote, checkoutData, fullScreenLoader) {

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js#L21-L21


var validatedEmail = checkoutData.getValidatedEmailValue();

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js#L30-L30


email: checkoutData.getInputFieldEmailValue(),

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js#L66-L69


if (self.validateEmail()) {
    quote.guestEmail = self.email();
    checkoutData.setValidatedEmailValue(self.email());
}

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js#L78-L78


checkoutData.setInputFieldEmailValue(self.email());

7. Magento_Checkout/js/view/payment/default.js

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js#L15-L15


'Magento_Checkout/js/checkout-data',

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js#L77-L77


billingAddressData = checkoutData.getBillingAddressFromData();

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js#L85-L87


checkoutProvider.on(billingAddressCode, function (providerBillingAddressData) {
    checkoutData.setBillingAddressFromData(providerBillingAddressData);
}, billingAddressCode);

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/payment/default.js#L167-L175


/**
 * @return {Boolean}
 */
selectPaymentMethod: function () {
    selectPaymentMethodAction(this.getData());
    checkoutData.setSelectedPaymentMethod(this.item.method);


    return true;
},

8. Magento_Checkout/js/view/shipping-address/address-renderer/default.js

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/shipping-address/address-renderer/default.js#L13-L13


'Magento_Checkout/js/checkout-data',

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/shipping-address/address-renderer/default.js#L15-L15


], function($, ko, Component, selectShippingAddressAction, quote, formPopUpState, checkoutData, customerData) {

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Checkout/view/frontend/web/js/view/shipping-address/address-renderer/default.js#L42-L46


/** Set selected customer shipping address  */
selectAddress: function() {
    selectShippingAddressAction(this.address());
    checkoutData.setSelectedShippingAddress(this.address().getKey());
},

9. Magento_Vault/js/view/payment/method-renderer/vault.js

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Vault/view/frontend/web/js/view/payment/method-renderer/vault.js#L11-L11


'Magento_Checkout/js/checkout-data'

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Vault/view/frontend/web/js/view/payment/method-renderer/vault.js#L13-L13


function (Component, selectPaymentMethod, checkoutData) {

github.com

magento/magento2/blob/072a1ae/app/code/Magento/Vault/view/frontend/web/js/view/payment/method-renderer/vault.js#L40-L40


checkoutData.setSelectedPaymentMethod(this.getId());

dmitry_fedyuk · April 17, 2016, 12:09pm