Я пытаюсь показать количество каждого переменного товара на одной странице товара в WooCommerce.

Мне удалось показать все объемы запасов для всех вариантов, используя приведенный ниже код от Родольфо Мелогли из Business Bloomer, но в идеале я хотел бы отображать только одно количество запасов при выборе каждого варианта размера.

Прилагаю скриншот, чтобы лучше это объяснить.

enter image description here


Вывод кнопок в формате html:

  • <span class="ivpa_term ivpa_active ivpa_instock" data-term="l">L</span>

Или при нажатии

  • <span class="ivpa_term ivpa_active ivpa_clicked ivpa_instock" data-term="xl">XL</span>

Как вы можете видеть, он показывает все варианты, но я просто хотел бы показать выбранные количества вариантов (S, M, L, XL и т. Д.), Выделенные красным.


Вот код PHP:

add_action( 'woocommerce_after_add_to_cart_form', 'ocapparel_echo_stock_variations_loop' );
function ocapparel_echo_stock_variations_loop(){
    global $product;
    if ( $product->get_type() == 'variable' ) {
        foreach ( $product->get_available_variations() as $key ) {
            $attr_string = array();
            foreach ( $key['attributes'] as $attr_name => $attr_value ) {
                $attr_string[] = $attr_value;
            }
            if ( $key['max_qty'] > 0 ) { 
              echo '<br/>' . implode( ', ', $attr_string ) . ': ' . $key['max_qty'] . ' in stock'; 
            } else { 
              echo '<br/>' . implode(', ', $attr_string ) . ': out of stock'; 
            }
        }
    }
}
1
Artmart 16 Сен 2020 в 16:36

1 ответ

Лучший ответ
  • Первая часть кода предназначена только для целей тестирования, специфичных для вашей темы, где я собираюсь имитировать кнопки.
  • На выходе вариантов предоставляются некоторые дополнительные классы, чтобы определить разницу в коде между каждым вариантом.
  • В части jQuery все варианты скрыты, затем на основе class + data term (L, XL и т. Д.) Выбранный вариант отображается после нажатия определенной кнопки

Эта часть предназначена только для целей отладки , чтобы имитировать кнопки, которые присутствуют в вашей теме, этот код может быть удален (после тестирования)

function output() {
    echo '<span class="ivpa_term ivpa_active ivpa_instock" data-term="l" style="display:block;border:1px solid #f0f;">L</span>';
    echo '<span class="ivpa_term ivpa_active ivpa_clicked ivpa_instock" data-term="xl" style="display:block;border:1px solid #f0f;">XL</span>';
}
add_action( 'woocommerce_before_add_to_cart_form', 'output' );

Показывает все варианты

function ocapparel_echo_stock_variations_loop() {
    global $product;
    
    // Is variable product
    if ( $product->get_type() == 'variable' ) {
        foreach ( $product->get_available_variations() as $key ) {
            $attr_string = array();
            
            foreach ( $key['attributes'] as $attr_name => $attr_value ) {
                $attr_string[] = $attr_value;
            }
            
            $implode = implode( ', ', $attr_string );
            
            if ( $key['max_qty'] > 0 ) { 
              echo '<p class="size size-' . $implode . ' in-stock">' . $implode . ': ' . $key['max_qty'] . ' in stock</p>'; 
            } else { 
              echo '<p class="size size-' . $implode . ' out-of-stock">' . $implode . ': out of stock</p>'; 
            }
        }
        ?>
        <script>
        jQuery(document).ready(function($) {
            // Hide all
            $( 'p.size' ).css( 'display', 'none' );

            // Click
            $( 'span.ivpa_term' ).click(function() {
                // Hide all
                $( 'p.size' ).css( 'display', 'none' );
                
                // Get data term (L, XL, etc...)
                var term = $( this ).attr( 'data-term' );
                
                // Display
                $( '.size-' + term ).css( 'display', 'block' );
            });    
        });
        </script>
        <?php
    }
}
add_action( 'woocommerce_after_add_to_cart_form', 'ocapparel_echo_stock_variations_loop' );
1
7uc1f3r 17 Сен 2020 в 07:31