Настройка товарных турбо-страниц Яндекс

Яндекс сейчас активно внедряет и развивает так называемые турбо-страницы для мобильных устройств. Это легкие версии страниц вашего сайта, которые по смыслу схожи с amp страницами от Гугла. Изначально Яндекс предлагал веб-мастерам использовать турбо-версии для статейных страниц, что было особенно актуально для новостных порталов, блогов и т.д. Ранее я писал о том, как подключить турбо-страницы для вашего сайта здесь и здесь для CMS Bitrix.

На момент написания данной статьи, турбо-страницы Яндекс уже рекомендуются для использования на 100% страниц любых сайтов. В сервисе Яндекс.Веб-мастер не так давно появились отдельные настройки для товарных турбо-страниц, т.е. специально для интернет-магазинов. Давайте рассмотрим, как именно происходит подключение товарных турбо-страниц для CMS WordPress (плагин WooCommerce) и 1С-Bitrix.

Подключение товарных турбо-страниц для WordPress

Во первых в веб-мастере Яндекс в разделе «Турбо-страницы -> Источники» есть выбор двух типов источников. Ранее для подключения статейных турбо-страниц мы использовали ссылку на источник типа RSS, так как это было наиболее легким способом реализации. Для товарных турбо-страниц лучше подходит YML, а именно стандартный фид используемый для сервиса Яндекс.Маркет.

В WordPress мы можем генерировать товарный файл YML с помощью бесплатного и свежего плагина YML for Yandex Market, который имеет все необходимые настройки и абсолютно корректно работает с движком при условии установки последних обновлений. После генерации файла вставляем ссылку на источник в веб-мастере, файл почти сразу должен пройти предварительную проверку и получить статус «Без ошибок». Если будут некритичные ошибки, то часть товаров все равно будет показываться, а другая часть останется без турбо-версий.

Далее переходим в раздел «Турбо-страницы -> Настройки», заполняем все необходимые опции, но нас больше всего интересует раздел «Настройки товарных страниц». Для WordPress ставим следующие настройки:

  • URL добавления товара: другой
  • http://имя-вашего-сайта-wordpress/?add-to-cart={offer_id}

Возвращаемся в раздел «Турбо-страницы -> Источники» и посылаем YML фид на проверку, нажатием кнопки «Вкл».

Последнее что осталось сделать, идем в админку WordPress, раздел «WooCommerce -> Настройки -> Товары», ставим там галочку «Перенаправить в корзину после успешного добавления».

Подключение товарных турбо-страниц для Bitrix

Делаем практически тоже самое, только для движка Битрикс. Для генерации файла используем бесплатное решение от самого Яндекса — «Подготовка прайс-листа для Маркета и Беру». После настроек и генерации файла точно так же подключаем его в сервисе Яндекс.Вебмастер как тип источника YML. Когда фид обработался идем в раздел «Турбо-страницы -> Настройки» и в разделе «Настройки товарных страниц» ставим параметр — URL добавления товара: 1-С Битрикс. Однако, данный параметр сработает у вас в случае, если вы используете стандартный компонент каталог Битрикс.

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

  • URL добавления товара: другой
  • {offer_url}?turbo=yes

Далее потребуется отредактировать код шаблона bitrix:catalog.element, другими словами карточку товара. Где нибудь вверху нужно добавить код типа:

<?php
$turboAddToCart = $_GET['turbo'];
if ($turboAddToCart == "yes") { 
?>
<script>
jQuery(document).ready(function(){
		function foo() {
			jQuery('css селектор кнопки "Добавить в корзину"').trigger('click');
			window.location.href = "здесь прямая ссылка на корзину";
		}
		setTimeout(foo, 1000);
	});
</script>
<?php } ?>

Таким образом, когда произойдет клик по кнопке «Добавить в корзину» с товарной турбо-страницы Битрикс, то пользователь попадет сначала на страницу товара, url которой будет содержать GET параметр turbo=yes, а код, который мы добавили в карточку товара при обнаружении данного параметра совершит клик по кнопке «Добавить в корзину» уже на полной версии сайта, таким образом товар попадет в корзину, и уже после этого произойдет редирект на страницу корзины, которую вы должны прописать в коде. На забудьте прописать css селектор кнопки, чтобы jQuery скрипт смог обнаружить вашу кнопку «Добавить в корзину» на странице карточки товара.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *