Отобразить изображения вариантов продуктов WooCommerce в пользовательском месте в шаблоне - PullRequest
Новая
       7

Отобразить изображения вариантов продуктов WooCommerce в пользовательском месте в шаблоне

0 голосов
/ 23 сентября 2018

То, что я хочу сделать, - это отобразить дополнительное изображение варианта продукта на основе выбора варианта в пользовательском месте на странице продукта.

Мне удалось использовать крючок woocommerce_show_product_images и таким образом добавить изображение продукта со всеми изображениями вариантов.Это работает, когда вариационное изображение переключается при выборе.Но таким образом я получаю все эскизы, функции скольжения и прочее.

Затем я попытался получить вариационные изображения другими способами.Сначала я использовал этот код.

Я поместил его в content-single-product.php в дочерней теме: 

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $loop->post->ID ), 'single-post-thumbnail' );?>

<img src="<?php  echo $image[0]; ?>" data-id="<?php echo $loop->post->ID; ?>">

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

После этого я нашел другой ресурс с такими строками кода:

In content-single-product.php 

<?php
    // get the product variations
    $product_variations = $product->get_available_variations();
    if ( !empty( $product_variations ) ) {
        ?>
    <div class="product-variation-images">
    <?php
    foreach($product_variations as $product_variation) {
        // get the slug of the variation
        $product_attribute_name = $product_variation['attributes'];
        ?>
        <div class="product-variation-image product-variation-<?php echo $product_attribute_name ?>" id="product-variation-<?php echo $product_variation['variation_id']; ?>" data-attribute="<?php echo $product_attribute_name ?>">
        <img src="<?php echo $product_variation['image_src']; ?>" alt="">
        </div><!-- #product-variation-image -->
    <?php } ?>
    </div>
    <?php } ?>

Это приводит к появлению пустой страницы после отображения заголовка.

Затем я попытался использовать цикл for, снова в content-single-product.php 

$product = new WC_Product_Variable( $product_id );
$variations = $product->get_available_variations();

foreach ( $variations as $variation ) {
echo "<img src=" . $variation['image']['thumb_src'] .">";
}

, который ничего не делает, без ошибок, без изображения.

Обновление

Теперь я понял это и получил функцию для правильного выполнения.В начале отсутствовал global $product;.

Но обе эти функции отображают все изображения вариаций, доступные в виде списка вместо переключения изображений на выбранный вариант.

Вот рабочая функция в functions.php

add_action ('woocommerce_after_single_product_summary', 'test_code', 5 
);
function test_code () {
global $product; 

    if ( $product->has_child() ) {

$variations = $product->get_children();

foreach ( $variations as $variation ) {

    if ( has_post_thumbnail( $variation ) ) {

            echo get_the_post_thumbnail( $variation );
      }
    }
  }
}

1 Ответ

0 голосов
/ 23 сентября 2018

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

во второй попытке:

вместо: 

<img src="<?php echo $product_variation['image_src']; ?>" alt="">

вы можете использовать: 

<img src="<?php echo $product_variation['image']['src']; ?>" alt="">

или, на мой взгляд, лучше, если вы будете действовать следующим образом, но, конечно, это полностью ваше дело: 

if ( $product->has_child() ) {

    $variations = $product->get_children();

    foreach ( $variations as $variation ) {

        if ( has_post_thumbnail( $variation ) ) {

                echo get_the_post_thumbnail( $variation );
        }
    }
}
...