Javascript

Выбор изображения по варианту

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

Модификация содержит id привязанного изображения (image_id).

По image_id нужно искать картинку варианта в массиве изображений товара.

Далее искать изображение в галерее товара и переключаться на него

Но в common.v2 в событии update_variant:insales:product возвращается объект со свойством first_image, в котором уже определено изображение варианта!

        
          // для swiper
EventBus.subscribe('update_variant:insales:product', function (data) {
  if (variant.action.quantityState.change) {
    return;
  }
  // определяем что смена варианта произошла у основного товара
  var $productForm = $('#product-order[data-product-id="'+data.product_id+'"]');
  // если нужна смена изображений для вариантов без фото нужно убрать проверку на data.image_id
  if ($productForm.length && data.image_id) {
    var sliderClass = '.js-product-gallery'; // селектор слайдера
    var slideClass = '.swiper-slide';
    var imageSize = 'original_url'; // Важно указать правильный размер original_url, large_url, medium_url
    var imagePath = slideClass + ' [src="'+data.first_image[imageSize]+'"]';
    var index = $(imagePath).parents(slideClass + ':first').index();
    if ($(sliderClass)[0].swiper) {
      $(sliderClass)[0].swiper.slideTo(index);
    }
  }
});
// для owl
EventBus.subscribe('update_variant:insales:product', function (data) {
  if (variant.action.quantityState.change) {
    return;
  }
  // определяем что смена варианта произошла у основного товара
  var $productForm = $('#product-order[data-product-id="'+data.product_id+'"]');
  // если нужна смена изображений для вариантов без фото нужно убрать проверку на data.image_id
  if ($productForm.length && data.image_id) {
    var sliderClass = '.js-slider-product';
    var slideClass = '.owl-item';
    var imageSize = 'original_url'; // original_url, large_url, medium_url
    var imagePath = slideClass + ' [src="'+data.first_image[imageSize]+'"]';
    var index = $(imagePath).parents(slideClass + ':first').index();
    $(sliderClass).trigger('to.owl.carousel', index);
  }
});

Как работать с API магазина на платформе InSales

Разрабатывая сайт на платформе InSales самым важным аспектом является знание всех возможностей которые предоставляет платформа.

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

Обращение к API может быть как через отправки форм, так и через AJAX-запросы.

Пример формы добавления товара в корзину:

<form action="{{ cart_url }}" method="post">

  <input type="hidden" name="variant_id" value="{{ product.variants.first.id }}" />

  <input type="number" name="quantity" value="1" />

  <button type="submit">Купить</button>

</form>

Пример AJAX-запроса для получения информации о товаре:

$.post('/products_by_id/62898073.json')
  .done(function (product) {
    console.log(product);
  })

Для успешной разработки тем необходимо знать максимум возможностей API.

Описание AJAX-запросов можно почитать на тут.