Javascript - letronghieu4897/magento GitHub Wiki

Javascript

Javascript

Go Footer


1. Foreach Object in javascript

Go Header

 Object.entries(OBJECT).forEach(([key, val]) => {
      console.log(key);
      console.log(val);
 });

2. REST API on Javascript

Go Header

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

define([
    'jquery',
    'Magento_Checkout/js/view/summary/abstract-total',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/shipping-rate-registry',
    'Magento_Checkout/js/model/url-builder',
    'mage/storage',
    'mage/url'
], function ($, Component, quote, rateRegistry, urlBuilder, storage, url) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/summary/shipping'
        },
        quoteIsVirtual: quote.isVirtual(),
        totals: quote.getTotals(),

        /**
         * @return {*}
         */
        getShippingMethodTitle: function () {
            var shippingMethod = '',
                shippingMethodTitle = '';

            if (!this.isCalculated()) {
                return '';
            }
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 
            var timeNow = new Date().getTime();
            var urlRequest = 'rest/default/V1/guest-carts/' + quote.getQuoteId() + '/totals?_=' + timeNow;
            var urlFull = url.build(urlRequest);
            var resultResponse = [];
            var shippingTitle = '';
            storage.get(urlFull, JSON.stringify({})
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 
            ).done(
                function (response) {
                    console.log(response);
                    if (response.length === 0) {

                    } else {
                        Object.entries(response).forEach(([key, val]) => {
                            if(key === 'total_segments') {
                                if(val.length != 0) {
                                    Object.entries(val).forEach(([keyTotalSegment, valTotalSegment]) => {
                                        if(valTotalSegment.code === 'shipping') {
                                            shippingTitle = valTotalSegment.title;
                                        }
                                    });
                                }
                            }
                        });
                    }
                }
            ).fail(
                function (response) {
                    console.log(response);
                }
            );

            return shippingTitle;
            // shippingMethod = quote.shippingMethod();
            //
            // if (typeof shippingMethod['method_title'] !== 'undefined') {
            //     shippingMethodTitle = ' - ' + shippingMethod['method_title'];
            // }
            //
            // return shippingMethod ?
            //     shippingMethod['carrier_title'] + shippingMethodTitle :
            //     shippingMethod['carrier_title'];
        },

        /**
         * @return {*|Boolean}
         */
        isCalculated: function () {
            return this.totals() && this.isFullMode() && quote.shippingMethod() != null; //eslint-disable-line eqeqeq
        },

        /**
         * @return {*}
         */
        getValue: function () {
            var price;

            if (!this.isCalculated()) {
                return this.notCalculatedMessage;
            }
            price = this.totals()['shipping_amount'];

            return this.getFormattedPrice(price);
        }
    });
});

3. Apply function knockoutJS after render

Go Header

app/code/Netpower/OnePageCheckout/view/frontend/web/template/checkout/payments/list.html

css: {disabled: $parent.afterRenderApply()},

app/code/Netpower/OnePageCheckout/view/frontend/web/js/view/checkout/payments/list.js

afterRenderApply : function() {
           $("#payment-method-tab .payment-tab-title .title:first-child").removeClass('inactive');
           $("#payment-method-tab .payment-tab-title .title:first-child").addClass('active');
       },

It will be applied when html render to data-bind css: {disabled: $parent.afterRenderApply()}. Function inside {} will run don't need call.

Footer

Go Header