javascript - WooCommerce - 如何禁用属性选项菜单，直到选择上面的菜单？

Question

在可变产品的产品页面上，我想使用 javascript/jQuery 来控制属性下拉菜单。

基本上，我希望只有当用户已经从选项菜单 1 中选择了一个选项时，才可以选择选项菜单 2

示例:

我的可变产品

• 平台:选项菜单 1(用户必须选择平台，例如 Mac|PC，然后才能继续...)
• 版本:选项菜单 2(例如完整版 | 升级。必须在...之前选择)
• 运输:选项菜单 3(盒装 | 下载)

如果有人甚至可以向我指出使用 javascript/jQuery 访问这些选项菜单的正确方法，我可以尝试从那里获取它。

感谢您的帮助。

Answer 1

终于解决了...

您需要复制:'/wp-content/plugins/woocommerce/templates/single-product/add-to-cart/variable.php'

到:'/wp-content/themes/my_theme/woocommerce/single-product/add-to-cart/variable.php'

这是为可变产品属性生成选择菜单的文件，因此您正在创建一个版本来编辑您的主题。

在</form>之后大约。第 107 行添加以下内容:

<!-- MySite Menu Additions -->
    <script type="text/javascript">
    <?php if ( ! empty( $available_variations ) ) { ?>

        jQuery(document).ready(function($) {

            <?php
                $loop = 0;
                foreach ( $attributes as $name => $options ) {
                $loop++;
            ?>
                $(function() {
                    $( "#<?php echo $name ?>" ).change(function() {
                        if ($(this).val() != "") { // Because "Choose an option..." has a value of ''
                            $(this).closest( 'tr' ).next().find( '.value-variable' ).prop( "disabled", false );
                        }
                        else
                        {
                            $(this).closest( 'tr' ).nextAll().find( '.value-variable' ).prop( "disabled", true );
                            $(this).closest( 'tr' ).nextAll().find( '.value-variable' ).val( "" );

                        }
                    });
                });

            <?php } //End foreach ?>

        });

    <?php } ?>

    </script>
<!-- End: MySite Menu Additions -->

这对我有用。希望它对某人有帮助。

我在这里获得了更多帮助(可能也有用):

Enable Sequential Select Menus when you don't know the IDs