Рендеринг с использованием атрибутов вариации продукта jQuery в Woocommerce

Question

Я создаю интернет-магазин woocommerce, и мне нужно показать атрибуты каждого продукта на странице отдельного продукта.Я застрял на переменных продуктах.

Хотя я могу получить текущие атрибуты варианта на консоли, я не могу найти способ напечатать значения этих атрибутов на странице.

Я использовал этот скрипт в файле short-description.php в woocommerce.

 <script>
    jQuery(document).ready(function( $ ){
    $( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
    $('#variation_descr').html(variation.variation_description);
    console.log (variation.attributes);

    } );
        });
    </script>

Любая помощь, пожалуйста?

Answer 1

Попробуйте следующее, используя jQuery each() функцию, которая похожа на цикл foreach PHP ... Я встроил код в подключаемую функцию, которая сделает отображение без необходимости изменения шаблонов (простодля тестирования):

add_action( 'woocommerce_before_single_variation', 'custom_before_single_variation' );
function custom_before_single_variation() {
    ?>
    <div id="variation_descr"></div>
    <script>
        jQuery(function($){
            $(".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
                $('#variation_descr').html(variation.variation_description);
                $.each(variation.attributes, function(attribute,value){
                    $('#variation_descr').append('<p><strong>'+attribute+'</strong>: '+value+'</p>');
                    console.log("Attribute: "+attribute+" | Value: "+value);
                });

            });
        });
    </script>
    <?php
}

Код помещается в файл function.php вашей активной дочерней темы (или активной темы).Проверено и работает.