Magento项目中如何为商品属性选项配置库存状态标识

实现方案 #

前置规则定义 #

首先明确库存状态映射：

• 1 = 有货：当前选项关联的有效商品全部可售（可售数量≥1）
• 2 = 部分变体有货：当前选项关联的有效商品部分可售、部分不可售
• 3 = 定制生产：当前选项关联的有效商品全部不可售

核心工具函数（基于Underscore.js封装） #

// 库存状态常量
const STOCK_STATUS = {
  IN_STOCK: 1,
  PARTIAL_STOCK: 2,
  CUSTOM_PRODUCTION: 3
}

/**
 * 计算指定商品数组的库存状态
 * @param {Array} productIds 商品ID数组
 * @param {Object} saleableQtyMap 可售数量映射表
 * @returns {Number} 库存状态ID
 */
function calcStockStatus(productIds, saleableQtyMap) {
  if (!productIds || productIds.length === 0) return STOCK_STATUS.CUSTOM_PRODUCTION
  // 统计可售商品数量
  const saleableCount = _.filter(productIds, pid => {
    return saleableQtyMap[pid]?.saleableQty >= 1
  }).length
  const totalCount = productIds.length

  if (saleableCount === totalCount) return STOCK_STATUS.IN_STOCK
  if (saleableCount > 0) return STOCK_STATUS.PARTIAL_STOCK
  return STOCK_STATUS.CUSTOM_PRODUCTION
}

/**
 * 获取已选选项对应的有效商品交集
 * @param {Array} selectedOptions 已选选项对象数组
 * @returns {Array} 交集商品ID数组
 */
function getSelectedValidProducts(selectedOptions) {
  if (!selectedOptions || selectedOptions.length === 0) return []
  const productArrays = _.map(selectedOptions, opt => opt.products)
  return _.intersection(...productArrays)
}

/**
 * 批量为所有属性选项设置库存状态
 * @param {Array} attributes 原始属性配置数组
 * @param {Array} selectedOptions 已选选项数组
 * @param {Object} saleableQtyMap 可售数量映射表
 * @returns {Array} 追加了stock_status字段的属性配置
 */
function batchSetOptionStockStatus(attributes, selectedOptions, saleableQtyMap) {
  const validProducts = getSelectedValidProducts(selectedOptions)
  _.each(attributes, attribute => {
    _.each(attribute.options, option => {
      let targetProductIds = option.products
      // 有已选选项时，取当前选项和已选商品的交集作为有效统计范围
      if (validProducts.length > 0) {
        targetProductIds = _.intersection(validProducts, option.products)
      }
      option.stock_status = calcStockStatus(targetProductIds, saleableQtyMap)
    })
  })
  return attributes
}

Magento前端调用逻辑 #

适配Magento可配置商品的属性选择交互，在页面初始化和属性变更时触发计算，渲染状态到页面：

// 页面初始化执行一次，渲染默认状态
updateOptionStockStatus([])

// 监听属性选择事件（支持下拉选择、色板点击两种交互）
$('.product-options-wrapper').on('change click', '.super-attribute-select, .swatch-option', function() {
  // 获取当前所有已选的选项对象，需适配你当前项目的DOM结构
  const selectedOptions = []
  $('.super-attribute-select option:selected, .swatch-option.selected').each(function() {
    const optId = $(this).val() || $(this).attr('option-id')
    // 匹配attributes数组中的对应选项
    _.each(attributes, attr => {
      const matchedOpt = _.find(attr.options, opt => opt.id === optId)
      matchedOpt && selectedOptions.push(matchedOpt)
    })
  })
  updateOptionStockStatus(selectedOptions)
})

// 统一更新并渲染选项库存状态
function updateOptionStockStatus(selectedOptions) {
  const updatedAttributes = batchSetOptionStockStatus(attributes, selectedOptions, saleableQtyMap)
  // 渲染状态到DOM
  _.each(updatedAttributes, attr => {
    _.each(attr.options, opt => {
      const $optEl = $(`.swatch-option[option-id="${opt.id}"], .super-attribute-select option[value="${opt.id}"]`)
      // 清空原有状态
      $optEl.removeClass('stock-in stock-partial stock-custom').removeAttr('title')
      // 追加新状态
      switch(opt.stock_status) {
        case STOCK_STATUS.IN_STOCK:
          $optEl.addClass('stock-in').attr('title', '有货')
          break
        case STOCK_STATUS.PARTIAL_STOCK:
          $optEl.addClass('stock-partial').attr('title', '部分变体有货')
          break
        case STOCK_STATUS.CUSTOM_PRODUCTION:
          $optEl.addClass('stock-custom').attr('title', '定制生产')
          break
      }
    })
  })
}

样式适配示例 #

可根据业务需求自定义不同状态的展示样式：

.stock-in { border-color: #00bd23; }
.stock-partial { border-color: #ff9500; }
.stock-custom { border-color: #999; }

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