Magento 2结账摘要AJAX返回运费无法在UI组件中显示问题求助

问题根源 #

• AJAX是异步操作，getShippingAmount函数执行时，AJAX请求还未完成，函数本身没有返回值（默认返回undefined），导致模板绑定不到有效数据。
• 没有使用Knockout的**可观察对象（observable）**存储运费金额，无法触发UI自动更新。

解决方案 #

通过Knockout可观察对象跟踪运费数据，结合异步AJAX更新数据并触发UI渲染：

1. 修改JS组件文件（Magento_Checkout\js\view\summary\item\details.js）

define([
  'uiComponent',
  'jquery',
  'mage/url',
  'ko' // 引入Knockout依赖
], function(Component, $, urlBuilder, ko) {
  'use strict';

  return Component.extend({
    defaults: {
      template: 'Magento_Checkout/summary/item/details'
    },

    initialize: function() {
      this._super();
      // 初始化缓存对象，存储每个商品的运费可观察值
      this.itemShippingCache = {};
    },

    getShippingAmount: function(quoteItem) {
      var self = this;
      var itemId = quoteItem.item_id;

      // 避免重复请求，已缓存直接返回
      if (!this.itemShippingCache[itemId]) {
        // 创建可观察对象，初始显示加载状态
        this.itemShippingCache[itemId] = ko.observable('加载中...');
        
        var ajaxUrl = urlBuilder.build('checkout/shipping');
        $.ajax({
          url: ajaxUrl,
          type: 'POST',
          data: {
            itemId: itemId
          },
          dataType: 'json',
          success: function(data) {
            // 更新可观察对象，自动触发UI渲染
            self.itemShippingCache[itemId](data.amount);
          },
          error: function() {
            // 请求失败时显示默认值
            self.itemShippingCache[itemId]('0.00');
          }
        });
      }
      return this.itemShippingCache[itemId];
    },

    // ...
  });
});

2. 模板文件无需额外修改（Magento_Checkout\template\summary\item\details.html）

<!-- 
Magento_Checkout\template\summary\item\details.html
-->
<span data-bind="text: getShippingAmount($parent)"></span>

关键说明 #

• 用itemShippingCache对象缓存每个商品的运费，避免重复发起AJAX请求
• 可观察对象更新时，Knockout会自动触发UI重新渲染，解决异步数据无法显示的问题
• 加入加载状态和错误处理，提升用户体验

内容的提问来源于stack exchange，提问作者hari prasath