Выпадающий список переменных продуктов Woocommerce 2, заставьте первый всегда отображать все параметры

У меня есть 2 выпадающих поля выбора в моем переменном продукте WooCommerce.

1-й - это тип продукта (в моем случае произведение искусства в рамке или без него), 2-й - размер произведения.

Благодаря этому коду :

add_filter( 'woocommerce_dropdown_variation_attribute_options_args', 'dropdown_variation_attribute_options', 10, 1 );
function dropdown_variation_attribute_options( $args ){

    // For attribute "Type"
    if( 'Type' == $args['attribute'] )
        $args['show_option_none'] = __( 'Select Framed or Unframed Artwork', 'woocommerce' );

    // For attribute "Sizes"
    if( 'Size' == $args['attribute'] )
        $args['show_option_none'] = __( 'Select Size of Artwork', 'woocommerce' );

    return $args;
}

Я могу отображать текст по умолчанию, когда ничего не было выбрано для каждого поля выбора в раскрывающемся списке отдельно.

Проблема, с которой я столкнулся сейчас, заключается в том, что мне нужно заставить 1-й раскрывающийся список всегда отображать все параметры, а при выборе - сбросить 2-й.

Пример:

Я предлагаю варианты A, B, C, D в первом раскрывающемся списке. Второй выпадающий список будет иметь варианты 1,2,3,4.

Допустим, я выбираю A, второе раскрывающееся поле выбора теперь ограничивает варианты до 1 и 3, поскольку A недоступен с 2 и 4.

Допустим, я выбираю 3 сейчас во втором раскрывающемся поле выбора, что ограничит выбор первого раскрывающегося поля выбора до A и B, поскольку C и D недоступны в 3.

Но мне нужно видеть C и D в первом, чтобы люди всегда могли начать с самого начала, когда они выбирают продукт.

Любая помощь будет оценена по достоинству.


javascript wordpress php dropdown woocommerce
person user2264325    schedule 28.01.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Пожалуйста, проверьте код ниже. Надеюсь, это поможет тебе.

jQuery(document).ready(function($){
    if (jQuery('form.variations_form').length) {
        let $form              = jQuery('form.variations_form');
        let $first_attr_select = $form.find( '.variations select' ).eq(0);
        let first_attr_val     = $first_attr_select.val() || '';

        $first_attr_select.on('change', function(e){
            if (!e.isTrigger) {
                // store the real value only
                first_attr_val = this.value;
            }
        });

        $form.on('woocommerce_update_variation_values', function(){
            let first_attr_name       = $first_attr_select.data( 'attribute_name' ) || $first_attr_select.attr( 'name' ),
                show_option_none        = $first_attr_select.data( 'show_option_none' ),
                option_gt_filter        = ':gt(0)',
                attached_options_count  = 0,
                new_attr_select         = $( '<select/>' ),
                first_attr_val_valid = true;

            let variations          = $form.data('product_variations');

            new_attr_select.html( $first_attr_select.data( 'attribute_html' ) );

            // Loop through variations.
            for ( let variation of variations ) {
                if ( typeof( variation ) !== 'undefined' && first_attr_name in variation.attributes ) {
                    let attr_val         = variation.attributes[ first_attr_name ],
                        variation_active = variation.variation_is_active ? 'enabled' : '';

                    if ( attr_val ) {
                        // Decode entities.
                        attr_val = $( '<div/>' ).html( attr_val ).text();

                        // Attach to matching options by value. This is done to compare
                        // TEXT values rather than any HTML entities.
                        var $option_elements = new_attr_select.find( 'option' );
                        for (var i = 0, len = $option_elements.length; i < len; i++) {
                            var $option_element = $( $option_elements[i] ),
                                option_value = $option_element.val();

                            if ( attr_val === option_value ) {
                                $option_element.addClass( 'attached ' + variation_active );
                                break;
                            }
                        }
                    } else {
                        // Attach all apart from placeholder.
                        new_attr_select.find( 'option:gt(0)' ).addClass( 'attached ' + variation_active );
                    }
                }
            }

            // Count available options.
            attached_options_count = new_attr_select.find( 'option.attached' ).length;

            // Check if current selection is in attached options.
            if ( first_attr_val ) {
                first_attr_val_valid = false;

                if ( 0 !== attached_options_count ) {
                    new_attr_select.find( 'option.attached.enabled' ).each( function() {
                        var option_value = $( this ).val();

                        if ( first_attr_val === option_value ) {
                            first_attr_val_valid = true;
                            return false; // break.
                        }
                    });
                }
            }

            // Detach the placeholder if:
            // - Valid options exist.
            // - The current selection is non-empty.
            // - The current selection is valid.
            // - Placeholders are not set to be permanently visible.
            if ( attached_options_count > 0 && first_attr_val && first_attr_val_valid && ( 'no' === show_option_none ) ) {
                new_attr_select.find( 'option:first' ).remove();
                option_gt_filter = '';
            }

            // Detach unattached.
            new_attr_select.find( 'option' + option_gt_filter + ':not(.attached)' ).remove();

            // Finally, copy to DOM and set value.
            $first_attr_select.html( new_attr_select.html() );
            $first_attr_select.find( 'option' + option_gt_filter + ':not(.enabled)' ).prop( 'disabled', true );

            // Choose selected value.
            if ( first_attr_val ) {
                // If the previously selected value is no longer available, fall back to the placeholder (it's going to be there).
                if ( first_attr_val_valid ) {
                    $first_attr_select.val( first_attr_val );
                } else {
                    $first_attr_select.val( '' ).change();
                }
            } else {
                $first_attr_select.val( '' ); // No change event to prevent infinite loop.
            }

        });
    }
});
person Chengmin    schedule 16.03.2021
comment
Вау, похоже, это работает! Итак, как вы это сделали сейчас, первый атрибут получает все значения независимо от выбранного значения во втором раскрывающемся списке? - person Luuk Van Dongen; 16.03.2021
comment
Да, конечно :-) Вообще-то я очень старался, чтобы это заработало. - person Chengmin; 16.03.2021
comment
@LuukVanDongen Если мой ответ был полезен, пожалуйста, предоставьте милостивую награду. :-) - person Chengmin; 22.03.2021