Как вывести изображение выбранной вариации Woocommerce в слайдер Swiper JS?

Для вывода изображения выбранной вариации Woocommerce в слайдер Swiper JS вам потребуется несколько шагов.

Шаг 1: Установка и настройка Swiper JS
Первым делом вам нужно установить и настроить Swiper JS. Для этого вам потребуется следующее:
1. Загрузите Swiper JS из официального репозитория (https://swiperjs.com/get-started/) или используйте ссылку CDN.
2. Подключите Swiper CSS и JavaScript к вашему проекту.
3. Создайте контейнер, в котором будет размещаться слайдер.

Пример кода для инициализации Swiper:

<link rel="stylesheet" href="dist/css/swiper.css">

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- Сюда будут добавлены слайды -->
  </div>
  <div class="swiper-pagination"></div>
</div>

<script src="dist/js/swiper.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    // Настройте слайдер по своему усмотрению
  });
</script>

Шаг 2: Получение изображения выбранной вариации Woocommerce
Для получения изображения выбранной вариации Woocommerce вам потребуется использовать функции и классы, предоставляемые Woocommerce.

Ваш код должен выглядеть примерно так:

<?php
global $product;

if ( $product->is_type( 'variable' ) ) {
    $variation_id = $product->get_variation_default_attribute( 'variation_id' );
    $variation = wc_get_product( $variation_id );
    
    if ( $variation ) {
        $image_url = $variation->get_image_url();
        
        echo '<div class="swiper-slide">';
        echo '<img src="' . esc_url( $image_url ) . '">';
        echo '</div>';
    }
}
?>

Вышеуказанный код проверяет, является ли товар вариативным (variable). Если это так, код получает ID выбранной вариации и получает изображение этой вариации с помощью функции $variation->get_image_url(). Затем он выводит изображение внутри слайда Swiper.

Шаг 3: Добавление изображений в Swiper
Наконец, вам нужно добавить полученное изображение в слайдер Swiper JS. Для этого вам нужно модифицировать код Swiper, создавать слайды динамически, основываясь на выбранной вариации.

Пример кода:

<script>
  var swiper = new Swiper('.swiper-container', {
    // ... другие настройки Swiper ...
    on: {
      init: function() {
        var images = <?php echo json_encode( $product->get_gallery_image_ids() ); ?>;
        
        // Очистите контейнер слайдов
        jQuery('.swiper-wrapper').empty();

        // Добавьте слайды на основе изображений галереи товара
        jQuery.each(images, function(index, imageId) {
          var imageUrl = wp_get_attachment_url(imageId);
          var slide = '<div class="swiper-slide"><img src="' + imageUrl + '"></div>';
          jQuery('.swiper-wrapper').append(slide);
        });

        // Добавьте слайд с изображением выбранной вариации
        <?php
        if ($product->is_type('variable')) {
          $variation_id = $product->get_variation_default_attribute('variation_id');
          $variation = wc_get_product($variation_id);

          if ($variation) {
            $image_url = $variation->get_image_url();
            echo "swiper.appendSlide('<div class="swiper-slide"><img src="" . esc_url($image_url) . ""></div>');";
          }
        }
        ?>
      },
      // ... другие обработчики событий Swiper ...
    },
  });
</script>

Код выше показывает настройку слайдера Swiper с использованием функции on init, чтобы динамически создать и добавить слайды внутри контейнера .swiper-wrapper. Сначала он очищает контейнер слайдов с помощью jQuery('.swiper-wrapper').empty(). Затем он добавляет слайды для всех изображений галереи товара.

Затем код проверяет, является ли товар вариативным, и если да, то получает изображение выбранной вариации и добавляет его в слайдер с помощью swiper.appendSlide().