woocommerce 变量产品的条件逻辑

Question

我的产品有两种组合：

1. OS = Mac -> 下拉菜单应该有 2 个选项“Macbook Air”、“Macbook Pro”。
2. OS = Windows -> Dropdown 应该有这 2 个，而不是“Surface Book”、“Lenovo ThinkBook”。

我有一个标签变体，您可以在其中选择操作系统“Mac”或“Windows”。 根据客户选择的内容，应该向他显示与此相关的选项。

现在我有一个包含所有 4 种型号“Air、Pro、Surface、Thinkbook”的下拉列表..

因此，如果客户在第一个变体中选择“Mac”，他应该只能选择“Macbook Air”，而在下一个变体中选择“Macbook Pro”。

这是否可以通过functions.php而不使用任何其他wordpress插件来实现？

Answer 1

不，你不能用functions.php来完成它。 PHP 是一种服务器端语言，这意味着它只能在页面加载之前处理逻辑。您需要一种客户端语言（例如 Javascript）来处理此问题而无需重新加载页面，这很好，因为它可以很好地与 Wordpress 配合使用。这是一个最小的示例演示如何在 Vue 中执行此操作，这是一个常见的 JS 框架，也是我最常与 Wordpress 一起使用的框架。您可以阅读Vue documentation 并快速了解其工作原理。

HTML：

<div id="container">
    <select name="os" id="os" @change="setOs">
        <option value="">Select OS</option>
        <option value="mac">Mac</option>
        <option value="windows">Windows</option>
    </select>
    <select name="computer" id="computer" @change="setComputer" v-if="os">
        <option value="">Select Computer</option>
        <option value="air" v-if="os === 'mac'">Macbook Air</option>  
        <option value="pro" v-if="os === 'mac'">Macbook Pro</option>
        <option value="surface" v-if="os === 'windows'">Surface Book</option>
        <option value="thinkbook" v-if="os === 'windows'">Lenovo Thinkbook</option>
    </select>
    <p v-if="computer">Selected computer: {{computer}}</p>
</div>

JS：

var app = new Vue({
  el: "#container",
  data: {
    os: null,
    computer: null
  }, 
  methods: {
    setOs: function(e){
      this.os = e.target.value;
    }, 
    setComputer: function(e){
      this.computer = e.target.value;
    }
  }
})

您可以查看this pen 以了解它的实际效果。