Ionic 3 + WooCommerce：如何为商品变体绑定对应价格

我明白你现在的困扰——已经能通过API拉取商品并展示，但变体的价格总是对应不上，对吧？别担心，我们一步步来搞定这个问题：

1. 先确保API能拿到完整的变体数据 #

首先，你当前的API请求products?category=34&per_page=10默认不会返回变体的详细信息（比如价格、属性对应关系），所以得修改请求参数，让WooCommerce返回变体数据：

修改你的list.ts里的API调用：

this.WooCommerce.getAsync('products?category=34&per_page=10&_embed=variations').then((result) => {
  console.log(JSON.parse(result.toJSON().body));
  this.products = JSON.parse(result.toJSON().body);
  console.log(this.products);
  
  // 初始化产品的数量、选中变体和价格
  this.products.forEach(product => {
    product.quantity = 1;
    // 初始化选中属性的存储对象
    product.selectedAttributes = {};
    
    // 如果商品有变体，默认选中第一个变体并设置价格
    if (product.variations && product.variations.length > 0) {
      product.selectedVariation = product.variations[0];
      product.selectedPrice = product.variations[0].price;
      
      // 把默认变体的属性值存入selectedAttributes
      product.selectedVariation.attributes.forEach(attr => {
        product.selectedAttributes[attr.name] = attr.option;
      });
    } else {
      // 没有变体的话用商品本身的价格
      product.selectedPrice = product.price;
    }
  });
}, (err) => {
  console.log(err)
})

2. 修改HTML模板，关联属性选择与变体价格 #

现在你的HTML里的属性选择器需要绑定到商品的选中属性，并且在选项变化时触发价格更新：

替换你原来的属性选择部分代码：

<ion-item *ngFor="let attr of product.attributes">
  <ion-select [(ngModel)]="product.selectedAttributes[attr.name]" 
              placeholder="{{attr.name}}"
              (ionChange)="updateSelectedVariation(product)">
    <ion-option *ngFor="let opt of attr.options" [value]="opt">
      {{ opt }}
    </ion-option>
  </ion-select>
</ion-item>

同时，把价格显示的部分改成使用选中变体的价格：

<p>Rs.{{parseFloat(product.selectedPrice) * product.quantity}}</p>

3. 实现变体匹配方法 #

在list.ts里添加一个方法，用来根据用户选中的属性找到对应的变体，并更新价格：

updateSelectedVariation(product: any) {
  // 遍历所有变体，找到与选中属性完全匹配的那个
  const matchedVariation = product.variations.find(variation => {
    return variation.attributes.every(attr => {
      return product.selectedAttributes[attr.name] === attr.option;
    });
  });

  if (matchedVariation) {
    // 找到匹配变体后更新选中状态和价格
    product.selectedVariation = matchedVariation;
    product.selectedPrice = matchedVariation.price;
  } else {
    // 如果没有匹配到（比如属性组合无效）， fallback到商品基础价格
    product.selectedPrice = product.price;
  }
}

关键说明 #

• WooCommerce的每个变体都包含attributes数组，里面记录了这个变体对应的属性选项（比如"尺寸: 大"），我们就是通过对比用户选中的属性和变体的属性来找到对应价格的。
• 注意price字段是字符串类型，所以用parseFloat()转成数字再计算总价，避免出现字符串拼接的问题。

这样修改后，用户选择不同的属性选项时，价格就会自动切换到对应变体的价格啦！

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