如何解决woocommerce 变量产品的条件逻辑
我的产品有 2 种组合:
- OS = Mac -> 下拉菜单应该有 2 个选项“Macbook Air”、“Macbook Pro”。
- OS = Windows -> Dropdown 应该有这两个而不是“Surface Book”、“Lenovo ThinkBook”。
我有一个标签变体,您可以在其中选择操作系统“Mac”或“Windows”。 根据客户的选择,他应该看到与此相关的选项。
现在我有一个包含所有 4 种型号“Air、Pro、Surface、Thinkbook”的下拉菜单..
因此,如果客户在第一个变体中选择“Mac”,则他应该只能在下一个变体中选择“Macbook Air”和“Macbook Pro”。
这可以通过functions.php而不使用任何其他wordpress插件吗?
解决方法
不,你不能用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 以查看它的实际效果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。