Перейти к содержимому
BXWiki

Быстрый просмотр товара - всплывающая карточка и её сбои

Разбираемся, как работает быстрый просмотр товара из списка и почему в окне оказывается пусто или не работает выбор варианта.

Решение

Смотрим, что отдаёт запрос быстрого просмотра:

Окно терминала
# окно собирается отдельным запросом за куском карточки товара
curl -s 'https://example.com/catalog/?action=QUICK_VIEW&ELEMENT_ID=123' | head -20

Быстрый просмотр - это не отдельная страница, а ответ на запрос куска карточки. Разбирать пустое окно нужно по этому ответу: разметка списка товаров к нему отношения не имеет.

Настраиваем состав всплывающего окна:

'USE_ELEMENT_COUNTER'  => 'Y',
'QUICK_VIEW'           => 'Y',              // включение быстрого просмотра
'DETAIL_PROPERTY_CODE' => ['MATERIAL'],     // что показать в окне
'OFFERS_PROPERTY_CODE' => ['SIZE', 'COLOR'],
'SHOW_MAX_QUANTITY'    => 'N',
'ADD_PROPERTIES_TO_BASKET' => 'Y',          // свойства уедут в корзину вместе с позицией

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

Проверяем выбор варианта в окне:

// торговым предложениям нужны те же параметры, что и на детальной странице
'OFFERS_CART_PROPERTIES' => ['SIZE', 'COLOR'],
'PRODUCT_PROPERTIES'     => [],
'PRICE_CODE'             => ['BASE'],
// список типов цен совпадает с детальной страницей: иначе цены разойдутся

Без параметров предложений окно показывает товар без выбора размера, и покупка из него уходит с пустыми свойствами позиции. В корзине покупателя это выглядит как заказ без указанного размера и цвета.

Смотрим, что мешает в браузере:

// ошибки скриптов ломают окно молча: разметка есть, обработчик не отработал
console.log(typeof BX.Currency, typeof window.obProductGallery);
// обработчик кнопки быстрого просмотра вешается на список товаров
console.log(document.querySelectorAll('[data-entity="quick-view"]').length);

Всплывающее окно собирается скриптами платформы уже в браузере посетителя. Конфликт со сторонним скриптом шаблона обрывает эту сборку, и человек видит пустое окно при полностью рабочем ответе сервера.

Покупка в один клик - это совсем отдельный от просмотра механизм. Она не открывает карточку вообще, а сразу создаёт заказ с одной позицией и минимумом полей; путать её с быстрым просмотром не стоит, хотя кнопки часто стоят рядом.

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

Тяжёлые картинки во всплывающем окне заметны сильнее, чем на странице: окно открывается по клику, и посетитель ждёт его молча. Здесь особенно уместны уменьшенные копии картинок вместо исходных файлов на несколько мегабайт.

Типичные проблемы

Окно открывается пустым.

Ответ запроса пуст или содержит ошибку выполнения кода. Проверяют именно этот ответ сервера, а не разметку страницы со списком товаров.

В окне нет выбора размера.

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

Покупка из окна уходит без свойств позиции.

Свойства предложения не перечислены в параметрах корзины у компонента. Позиция в корзине создаётся при этом без размера и без цвета.

Окно не открывается после правки шаблона.

Ошибка в скриптах шаблона обрывает сборку окна прямо в браузере. Ответ самого сервера при этом остаётся совершенно корректным.

Окно открывается долго.

В окне выводятся исходные картинки и лишние свойства товара. Состав окна сокращают до того минимума, который нужен для решения о покупке.

Частые вопросы

Нужен ли быстрый просмотр магазину?

Он полезен там, где решение принимают по цене и картинке: одежда, расходники. В сложном каталоге покупатель всё равно уходит на детальную страницу.

Можно ли открыть в окне свой шаблон?

Да, окно рисуется шаблоном компонента и настраивается как обычная карточка. Разметку в нём обычно сокращают до минимума.

Почему в окне нет отзывов и описания?

Их туда не выводят намеренно: окно рассчитано на быстрое решение о покупке. Полный набор данных живёт на детальной странице.

Как проверить, что дело не в сервере?

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

Смежное

Первоисточник