Рекомендательный сервис по подбору размера обуви online
0
  • Корзина 0 товаров в корзине

Integration of the widget using Digital Data Layer (DDL)

1) Add call lines at the beginning of the script (product card):

<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>


For CMS BITRIX, add:

<link href="https://sx24.ru/CalcShoes/assets/widget/app2-bitrix.css?ver=14" rel="stylesheet"/>


For other CMS, add:

<link href="https://sx24.ru/CalcShoes/assets/widget/app2.css?ver=14" rel="stylesheet"/>


2) Add a button and an event that triggers the widget on the product card:

<img src="https://sx24.ru/CalcShoes/assets/widget/ButtonOpenWidget.png" onclick="load(true);" style="cursor:pointer" id="ButtonOpen"/>


3) Add a container to the page for placing the widget:

<!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" //For example
                   
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>


4) Add a call function, specify the language, SKU and gender at the end of the script (product card):

<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

Заказ услуги
Заказать звонок
Купить в 1 клик
Оставьте данные и наш оператор
свяжется с Вами