Уникальные ссылки для каждого торгового предложения (SKU) в Битрикс

Решение, как в Битрикс сделать уникальный URL для каждого торгового предложения SKU, чтобы при переходе по такой ссылке, отображался нужный цвет или размер

При выгрузке (экспорте) товаров с торговыми предложениями SKU (цвета, размеры) на Яндекс.Маркет, Яндекс требует отдельную ссылку для каждого торгового предложения и служба контроля качества (СКК) проверяет, чтобы при переходе по такой ссылке, на детальной карточке товара отображался нужный цвет и размер. В штатном шаблоне Битрикс магазина такая функция не предусмотрена. Для решения проблемы нужно сделать несколько изменений в файлах шаблона и в файле экспорта в Яндекс.Маркет.

ВНИМАНИЕ! Данное решение подходит только для штатного шаблона. Если у вас нестандартный шаблон, обращайтесь к онлайн-консультанту (кнопка слева экрана «Помочь в решении?»).

Решение:

В файле экспорта в Яндекс.Маркет /bitrix/php_interface/include/catalog_export/yandex_run.php найдём строку:

$strOfferTemplateURL = '#PRODUCT_URL###ID#';

Заменим на:

$strOfferTemplateURL = '#PRODUCT_URL#/?pid=#ID#';

В файле штатного шаблона Битрикс (Современный интернет-магазин bitrix.eshop) /ВАШ_ШАБЛОН/components/bitrix/catalog/default/bitrix/catalog.element/.default/script.js найдём код:

window.JCCatalogElement.prototype.SetCurrent = function()
{
	var i = 0,
		j = 0,
		strName = '',
		arShowValues = false,
		arCanBuyValues = [],
		arFilter = {},
		tmpFilter = [],
		current = this.offers[this.offerNum].TREE;

После этого кода, вставим:

//CUSTOM START
	paramsUrl = window.location.search,
	pidRegExp = new RegExp(/[?&]pid=(\d+)/),
	pid = pidRegExp.exec(paramsUrl);

	if (pid && pid[1]) {
	  for (i = 0; i < this.offers.length; i++)
	  {
	     if (this.offers[i].ID == pid[1]) {
	        current = this.offers[i].TREE;
	     }
	  }
	}
//CUSTOM END

В script.js найдём код:

window.JCCatalogElement.prototype.SelectOfferProp = function()

В конце функции, перед скобкой } вставим код (Это влияет на смену ссылок с pid=123 при выборе SKU)

loc = '?pid=' + this.offers[this.offerNum].ID;
history.pushState({}, '', loc);

Внесём правки в шаблоне списка товаров /ВАШ_ШАБЛОН/components/bitrix/catalog/default/bitrix/catalog.section/.default/template.php - добавим в ссылку, ведущую на детальную страницу, ?pid=123 (ID первого торгового предложения).

Это чтобы при переходе между торговыми предложениями внутри карточки товара, менялся URL. Например, /product/?pid=23 для белого цвета, /product/?pid=24 - для черного. При клике на черный ссылка в адресной строке, меняется с pid=23 на pid=24.

Найдём код по CSS классу bx_catalog_item_images:

<a id="<? echo $arItemIDs['PICT']; ?>" href="<? echo $arItem['DETAIL_PAGE_URL']; ?>" class="bx_catalog_item_images" style="background-image: url('<? echo $arItem['PREVIEW_PICTURE']['SRC']; ?>')" title="<? echo $imgTitle; ?>">

Заменим на:

<a id="<? echo $arItemIDs['PICT']; ?>" href="<? echo $arItem['DETAIL_PAGE_URL']; ?>?pid=<?=$arItem['OFFERS']['0']['ID']?>" class="bx_catalog_item_images" style="background-image: url('<? echo $arItem['PREVIEW_PICTURE']['SRC']; ?>')" title="<? echo $imgTitle; ?>">

Не понятно? Нажми тут для помощи!