Интеграция виджета через Digital Data Layer (DDL)
1) Добавить строки вызова вначале скрипта (карточки товара):
<link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap" rel="preload" as="font">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap" rel="preload" as="font">
<link href="https://sx24.ru/CalcShoes/assets/js/widgets/select2.css?ver=2" rel="stylesheet" />
<link href="https://sx24.ru/CalcShoes/assets/js/widgets/simplebar.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/9d6c38ab7c.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/js/widgets/jquery.min.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/js/widgets/simplebar.min.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/plugins/localforage/localforage.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/plugins/select2/select2.min.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/plugins/select2/select2_locale_ru.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/widget/app2.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/widget/sx24API.js"></script>
Для CMS BITRIX, добавить:
<link href="https://sx24.ru/CalcShoes/assets/widget/app2-bitrix.css?ver=14" rel="stylesheet"/>
Для других CMS, добавить:
<link href="https://sx24.ru/CalcShoes/assets/widget/app2.css?ver=14" rel="stylesheet"/>
2) Добавить кнопку и событие, вызывающее виджет, на карточке товара:
<img src="https://sx24.ru/CalcShoes/assets/widget/ButtonOpenWidget.png" onclick="load(true);" style="cursor:pointer" id="ButtonOpen"/>
3) Добавить функцию вызова, указать язык, артикул и пол в конце скрипта (карточки товара):
<script type="text/javascript">
function LoadSX24(isshow) { sx24Load( { Language: 'указать язык', //Rus Eng Esp, VendorCode: 'указать вендорный код', Sex: 'указать пол', // M W U //использовать DDL на странице, для получения Language, VendorCode и //Sex UseDDL: true, //Селектор «кнопки» в формате jQuery, открывающей загруженный widget jSelectorControlOpen: "#ButtonOpen", //Если надо, перед загрузкой виджета будет сделана проверка //VendorCode, в случае отсутствия, виджет не будет загружен и //«кнопка» показа виджета скроется CheckExistsVendorCode: true, //Указывает, отображать виджет после успешной загрузки IsShowWidget: isshow }, () => { //Лямбда вызовется при успешной загрузке виджета }); } $(document).ready(() => { //По готовности страницы – загрузка виджета в память без отображения, //если аргумент – false. При true – виджет отобразится сразу после //загрузки, смотрите функцию выше. LoadSX24(); });
</script
Пример установки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap"
rel="preload"
as="font">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap"
rel="preload"
as="font">
<link href="https://sx24.ru/CalcShoes/assets/js/widgets/select2.css?ver=2"
rel="stylesheet"
/>
<link href="https://sx24.ru/CalcShoes/assets/js/widgets/simplebar.css"
rel="stylesheet"
/>
<script src="https://kit.fontawesome.com/9d6c38ab7c.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/js/widgets/jquery.min.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/js/widgets/simplebar.min.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/plugins/localforage/localforage.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/plugins/select2/select2.min.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/plugins/select2/select2_locale_ru.js"></script>
<link rel="stylesheet" href="https://sx24.ru/CalcShoes/assets/widget/app2.css?ver=14"
/>
<script src="https://sx24.ru/CalcShoes/assets/widget/app2.js"></script>
<script src="https://sx24.ru/CalcShoes/assets/widget/sx24API.js"></script>
</head>
<body>
<img src="https://sx24.ru/CalcShoes/assets/widget/ButtonOpenWidget.png"
onclick="sx24Show();"
style="cursor:pointer; display:none"
id="ButtonOpen" />
<select id="language"
onchange="LoadSX24(true);">
<option>Rus</option>
<option>Eng</option>
<option>Esp</option>
</select>
VendorCode = <input id="VendorCode"
placeholder="input
VendorCode" value="M9691"
onkeydown="if (event.keyCode == 13) { event.preventDefault = false; LoadSX24(true); }">
<select id="sex"
onchange="LoadSX24(true);">
<option selected>M</option>
<option>W</option>
<option>U</option>
</select>
<script type="text/javascript">
function LoadSX24(isshow)
{
sx24Load(
{
Language: $("#language").val(),
VendorCode: $("#VendorCode").val(),
Sex: $("#sex").val(),
UseDDL: true,
jSelectorControlOpen: "#ButtonOpen",
CheckExistsVendorCode: true,
IsShowWidget: isshow
},
() =>
{
});
}
$(document).ready(LoadSX24());
</script>
</body>
</html>
свяжется с Вами