Shiptor надёжная доставка посылок
Отследить посылку
Помощь
8 800 100-72-69

Интеграция

Центр помощи

Примеры интеграции виджета Чекаута Shiptor в CMS

Версия 1 от 21.04.2021 — История изменений
  1. Центр помощи
  2. Интеграция
  3. Чекаут Shiptor

Интеграция с InSales 

Чтобы посмотреть, как виджет работает на платформе InSales, используйте демо. 

Чтобы начать работать с Чекаутом, добавьте номенклатуру или отредактируйте уже существующую в ЛК Shiptor. Для этого понадобится:

  • Выгрузить CSV-файл из бэк-офиса InSales: 

  • Вручную или через загрузку CSV-шаблона заполнить данные в номенклатуре в ЛК Shiptor. ID модификации (варианта) — уникальное свойство товара для InSales. Его значение должно присутствовать при заполнении данных по номенклатуре в ЛК Shiptor в поле «Артикул магазина».

  • Указать название, габариты (ДхШхВ), вес товара и розничную цену продажи. 

1. Подключение Чекаута

Для подключения виджета Чекаута в InSales зайдите в панель управления сайтом (Бэк-офис) и выберите раздел «Дизайн».

В разделе «Текущие темы» выберите редактирование шаблона: 

Откройте папку «Сниппеты» и в footer вставьте код:

<div id="shiptor_widget" class="_shiptor_widget" data-wk="Ваш ВИДЖЕТ КЛЮЧ из настроек Чекаута"></div>
<script type="text/javascript" src="https://checkout.shiptor.ru/embed/order.js"></script>

2. Настройка кнопки «Купить»

Зайдите в Шаблоны > product.liquid и найдите стандартную кнопку «Купить». Чтобы она не отображалась на странице, закомментируйте её. После этого подключите кнопку «Купить» Чекаута. 

 <button type="button" data-role="shiptor_widget_add_basket" data-q="1" data-product="{{product.id}}" data-id="{{product.variants.first.id}}"
              class="button button--large mc-grid-9 inline-middle">{{text}}</button>

Если на сайте присутствуют вариации товара, то добавьте их учёт:

 <div class="product-variants grid-row">
        <select name="variant_id" id="variant-select" class="" data-role="shiptor_widget_variant_change" data-target="{{product.id}}">
          {% for variant in product.variants %}
            <option value="{{ variant.id }}">{{ variant.title | escape }}</option>
          {% endfor %}
        </select>
      </div>
    {% else %}
      <input type="hidden" name="variant_id" value="{{ product.variants.first.id }}" data-role="shiptor_widget_variant_change" data-target="{{product.id}}"/>

 

В некоторых случаях может потребоваться добавление скрипта, который будет подставлять необходимую вариацию товара: 

Для синхронизации количества передаваемых товаров необходимо добавить дополнительные настройки: откройте файл quantity и вставьте код:

data-target="{{product.id}}" data-role="shiptor_widget_change_quantity"

3. Скрытие стандартной корзины

Чтобы скрыть стандартную корзину InSales, откройте файл header и внесите изменения: 

 <div class="mc-grid-12
                        sm-padded-vertical xs-padded-vertical
                        sm-hidden xs-hidden"
             style="display:none">
              {% include "cart_widget" with 'header' %}
            </div>

Обратите внимание, что данные о названии, габаритах, весе и стоимости товара Чекаут получает из номенклатуры ЛК Shiptor. Сформированные покупателем заказы не будут отображаться в административной панели магазина InSales, а только в ЛК Чекаута.

После внесения любых изменений в товарную номенклатуру Shiptor необходимо очищать кеш. Для этого в КЧ выберите Настройки > Магазины и нажмите кнопку «Очистить кеш запросов», которая располагается внизу страницы. 

Подробнее о подключении Чекаута и настройке дополнительных функций читайте в инструкции. 

Создайте тестовый заказ через виджет. Фактически, проверяя правильность расчета, проверяется корректность настройки системы. Итоговый результат нужно сравнивать с калькулятором в ЛК Shiptor. Если при расчете доставки на сайте и в полученном заказе в кабинете Чекаута отображаются корректные суммы, то дальнейшей настройки системы не требуется.

Интеграция с CS-Cart

Чтобы начать работать с Чекаутом, добавьте номенклатуру или отредактируйте уже существующую в ЛК Shiptor. Для этого понадобится:

  • Указать «КОД» товара, который будет соответствовать «Артикулу магазина» в ЛК Shiptor.

  • Выгрузить номенклатуру из админпанели CS-Cart в CSV-файл: 

  • Вручную или через загрузку CSV-шаблона заполнить данные в разделе «Номенклатуры» ЛК Shiptor. Данные из столбца «Product code» должны соответствовать столбцу «Артикул магазина».

  • Указать название, габариты (ДхШхВ), вес товара и розничную цену продажи. 

1. Подключение Чекаута

Для подключения виджета Чекаута в CS-Cart зайдите в панель управления сайтом и выберите раздел Дизайн > Шаблоны.

Найдите шаблон своего сайта, откройте файл responsive / templates / index.tpl и вставьте код подключения Чекаута:

<script type="text/javascript" src="https://checkout.shiptor.ru/embed/order.js"></script>
<div id="shiptor_widget" class="_shiptor_widget" data-wk="Ваш ВИДЖЕТ КЛЮЧ из настроек Чекаута"></div>

2. Настройка кнопки «Купить»

Зайдите в responsive / templates / buttons / add_to_cart.tpl и найдите стандартную кнопку «Купить». Её необходимо закомментировать, чтобы она не отображалась на странице:

и подключить кнопку «Купить» Чекаута:  

<button 
            id="{$but_id}" 
            class="ty-btn__primary ty-btn__big ty-btn__add-to-cart cm-form-dialog-closer ty-btn"
            data-role="shiptor_widget_add_basket" 
            {*data-id="RRRR5"*}
            data-id="{$product.product_code}"
            data-q="1" 
            >{$but_text|default:__("add_to_cart")}</button>
        <script type="text/javascript">
            $(function() {
                 var set = {
                    in_btn: '.cm-increase.ty-value-changer__increase',
                    ds_btn: '.col-sm-12.col-md-6.col-lg-6.upmenu',
                    to_crt: '.ty-btn__primary.ty-btn__big.ty-btn__add-to-cart.cm-form-dialog-closer.ty-btn',
                    inpt: '.ty-value-changer__input.cm-amount'
                };
                $(set.in_btn).bind('click', function(){
                    var submit_button = $(this).closest('form').find(set.to_crt);
                    submit_button.attr('data-q', parseInt(submit_button.attr('data-q'))+1);
                });
                $(set.ds_btn).bind('click', function(){
                    var submit_button = $(this).closest('form').find(set.to_crt);
                    if(parseInt(submit_button.attr('data-q')) > 1)
                        submit_button.attr('data-q', parseInt(submit_button.attr('data-q'))-1);
                });
                $(set.inpt).on('keyup', function() {
                    var submit_button = $(this).closest('form').find(set.to_crt);
                    submit_button.attr('data-q', $(this).val());
                });
                $(set.inpt).on('change', function() {
                    var submit_button = $(this).closest('form').find(set.to_crt);
                    submit_button.attr('data-q', $(this).val());
                });
            });
        </script>

3. Скрытие стандартной корзины

Для отключения стандартной корзины зайдите в раздел Дизайн > Макеты.

Отключите блок стандартной корзины: 

Обратите внимание, что данные о названии, габаритах, весе и стоимости товара Чекаут получает из номенклатуры ЛК Shiptor. Сформированные покупателем заказы не будут отображаться в административной панели магазина CS-Cart, а только в ЛК Чекаута.

После внесения любых изменений в товарную номенклатуру Shiptor необходимо очищать кеш. Для этого в КЧ выберите Настройки > Магазины и нажмите кнопку «Очистить кеш запросов», которая располагается внизу страницы. 

Подробнее о подключении Чекаута и настройке дополнительных функций читайте в инструкции.

Создайте тестовый заказ через виджет. Фактически, проверяя правильность расчета, проверяется корректность настройки системы. Итоговый результат нужно сравнивать с калькулятором в ЛК Shiptor. Если при расчете доставки на сайте и в полученном заказе в кабинете Чекаута отображаются корректные суммы, то дальнейшей настройки системы не требуется.

Интеграция с Tilda

Чтобы посмотреть, как виджет работает на платформе Tilda, используйте демо.

Чтобы начать работать с Чекаутом, добавьте номенклатуру или отредактируйте уже существующую в ЛК Shiptor. Для этого понадобится:

  • Вручную или через загрузку CSV-шаблона заполнить данные в разделе «Номенклатуры» ЛК Shiptor. При этом артикул в карточке товара должен соответствовать параметру «Артикул магазина».

  • Указать название, габариты (ДхШхВ), вес товара и розничную цену продажи. 

1. Настройка кнопки «Купить»

Зайдите в редактор карточки товара:

Подключите передачу товара в корзину Чекаута: в параметре «Ссылка» укажите ссылку вида #shiptor_widget_000, где 000 - значение поля «Артикул магазина». 

2. Подключение Чекаута

Для подключения виджета Чекаута в режиме редактирования нижнего блока выберите редактор HTML.

Вставьте код подключения виджета: 

<script type="text/javascript" 
src='https://checkout.shiptor.ru/embed/integration/tilda/widget.js'></script>
<script type="text/javascript">
    var shiptorTildaParams = {
        'styles': {paddingTop: '14px'},
        'widgetkey': 'Ваш ВИДЖЕТ КЛЮЧ из настроек Чекаута'
    };
    new ShiptorTildaIntegration(shiptorTildaParams);
</script>

! Обратите внимание, что данные о названии, габаритах, весе и стоимости товара Чекаут получает из номенклатуры ЛК Shiptor. Сформированные покупателем заказы не будут отображаться в административной панели магазина Tilda, а только в ЛК Чекаута. 

После внесения любых изменений в товарную номенклатуру Shiptor необходимо очищать кеш. Для этого в КЧ выберите Настройки > Магазины и нажмите кнопку «Очистить кеш запросов», которая располагается внизу страницы. 

3. Настройка работы с вариативными товарами

1. Установите Чекаут:

  • Перейдите на страницу, где должен быть размещен виджет. 
  • В самом конце страницы добавьте новый блок Категория - Другое, Тип - HTML код (Т868).
  • Вставьте код Чекаута:
    • В параметре «attrs» укажите все необходимые атрибуты.
    • В параметре «styles» введите параметры стилизация кнопки.
    • В параметре «LANG» укажите название для вариативных параметров товара[*].

2. Сформируйте кнопку покупки товара:

  • Выберите действие для кнопки «Ссылка». 
  • В качестве ссылки укажите параметр #shiptor_widget_ХХХ, где ХХХ - это артикул товара.

3. Вариативные товары:

  • Добавьте товару «Параметры». 
  • В поле «Название параметра» введите shiptor_props_XXX, где ХХХ - это обозначение параметра товара[*].
  • Если у вариантов отличаются артикулы, то в качестве значений параметров укажите «значение #артикул» (например: Белый #sh573 (перед артикулом необходимо установить знак «#», чтобы система могла его распознать)).

 

Подробнее о подключении Чекаута и настройке дополнительных функций читайте в инструкции. 

Создайте тестовый заказ через виджет. Фактически, проверяя правильность расчета, проверяется корректность настройки системы. Итоговый результат нужно сравнивать с калькулятором в ЛК Shiptor. Если при расчете доставки на сайте и в полученном заказе в кабинете Чекаута отображаются корректные суммы, то дальнейшей настройки системы не требуется.

Интеграция с WooCommerce

Чтобы посмотреть, как виджет работает на платформе WooCommerce, используйте демо.

Чтобы начать работать с Чекаутом, добавьте номенклатуру или отредактируйте уже существующую в ЛК Shiptor. Для этого понадобится:

  • Выгрузить номенклатуру из административной панели WooCommerce в CSV-файл:
  • Вручную или через загрузку CSV-шаблона заполнить данные в разделе «Номенклатуры» ЛК Shiptor. Данные из столбца «ID» должны соответствовать столбцу «Артикул магазина». Обратите внимание, что для товаров с вариациями необходимо брать id-вариации.
  • Указать название, габариты (ДхШхВ), вес товара и розничную цену продажи.

1. Подключение Чекаута

Обратите внимание, что пример интеграции разработан на базе темы HESTIA и может отличатся для другого шаблона. 

Рекомендуем для интеграции виджета Чекаута Shiptor создать дочернюю тему и активировать ее. Процесс подробно описан в инструкции. Это необходимо, чтобы не терять изменения, необходимые для интеграции Чекаута при обновлении основной темы (шаблона).

Виджет встраивается на сайт в виде файла, подключаемого с нашего хостинга:

<script type="text/javascript"src="https://widget.shiptor.ru/embed/order.js"></script>

Чтобы подключить виджет, нужно вставить его код в футер дочерней темы. В WordPress для этого используется функция 
add_action( ’wp_enqueue_scripts’, ’your_function_name’); Можете воспользоваться javascript-файлом, где уже прописан код добавления скрипта Чекаута и контейнера с дата-атрибутами. 

Остаётся только подключить javascript-файл, где подключение остальных файлов и функций уже прописано. Пример файла functions.php: 

<?php

/**
 * Добавление в дочернюю тему родительский стилей и добавление кастомного js-файла
 */
add_action( 'wp_enqueue_scripts', 'enqueue_hestia_child_theme_styles', PHP_INT_MAX);
function enqueue_hestia_child_theme_styles() {
    wp_enqueue_style( 'hestia-theme-css', get_template_directory_uri().'/style.css' );

    if ( !is_shop() ){
        wp_register_script( 'checkout-widget-script', get_stylesheet_directory_uri(). '/assets/checkout_widget_help.js', array(), '1.1.1', true );
        wp_enqueue_script( 'checkout-widget-script' );
    }
}

//
add_action('woocommerce_after_add_to_cart_button','add_product_sku');
function add_product_sku(){
    global $product;

    //Проверяем: если продукт вариативный, получаем id-вариации и добавляем атрибут Чекаута data-id,
    if($product->is_type('variable')){ ?>
        <script>
            jQuery( document ).ready( function( $ ) {
                $('input.variation_id').change( function(){
                    if( '' != $('input.variation_id').val() ) {
                        var var_product_sku = $('input.variation_id').val();
                        $('button').attr('data-id',var_product_sku);
                    }
                });
            });

        </script>
    <?php  }

    //Проверяем: если продукт простой, получаем артикул товара и добавляем атрибут Чекаута data-id,
    if($product->is_type( 'simple' )){
        //echo '<input type="hidden" id="product_sku_hidden" class="" value=" '.$product->get_sku().' ">';
        echo '<input type="hidden" id="product_sku_hidden" class="" value=" '.$product->get_id().' ">'; ?>

        <script>
            jQuery( document ).ready( function( $ ) {
                var product_sku = $('input[id="product_sku_hidden"]').val();
                if(product_sku.length !==0){
                    product_sku = product_sku.trim();
                    var basketAddButton = document.querySelector('button[name="add-to-cart"]');
                    if(!!basketAddButton){
                        basketAddButton.setAttribute('data-id',product_sku);
                        /*basketAddButton.setAttribute('data-role','shiptor_widget_add_basket');*/
                    }
                }
            });
        </script>

    <?php }

}
//Проверяем: если страница /shop, то подключаем скрипт Чекаута и добавляем атрибуты data-id, data-q=1,(1 - потому что тут можно выбрать только один товар)
function cs_wc_loop_add_to_cart_scripts() {
    if ( is_shop() ) : ?>

        <script>
            jQuery( document ).ready( function( $ ) {
                $(".add_to_cart_button").removeClass("ajax_add_to_cart");
                $('.product_type_simple').each(function (e) {
                    //var product_sku = $(this).attr("data-product_sku");
                    var product_sku = $(this).attr("data-product_id");
                    var qty = 1;
                    $(this).attr('data-id',product_sku);
                    $(this).attr('data-role','shiptor_widget_add_basket');
                    $(this).attr('data-q',qty);
                });
                (function (s) {
                    var c = '<script type="text/javascript"  src=' + s + '><\/script>',
                        e = '<div id="shiptor_widget" class="_shiptor_widget" data-wk="ВАШ_ВИДЖЕТ_КЛЮЧ" data-basketShowOnAdd="0"></div>';
                    $("body").append(e, c);
                })("https://widget.shiptor.ru/embed/order.js");
            });

        </script>

    <?php endif;
}
add_action( 'wp_footer', 'cs_wc_loop_add_to_cart_scripts' );

В functions.php добавьте javascript-файл с названием checkout_widget_help.js, в котором уже прописаны все подключения и контейнер с дата-атрибутами:

jQuery( document ).ready(function($) {


    // Отключаем аякс запрос к стандартной корзине
    $(".add_to_cart_button").removeClass("ajax_add_to_cart");

    //Учитываем количество товаров при изменении количества
    $( document ).on( 'change', '.quantity .qty', function() {
        $( this ).parent( '.quantity' ).next( '.add_to_cart_button, .single_add_to_cart_button' ).attr( 'data-q', $( this ).val() );
    });


    // Добавление атрибутов Чекаута в секции Похожие товары
    $('.product_type_simple').each(function (e) {
        //var product_sku = $(this).attr("data-product_sku");
        var product_sku = $(this).attr("data-product_id");
        var qty = 1;
        $(this).attr('data-id',product_sku);
        $(this).attr('data-role','shiptor_widget_add_basket');
        $(this).attr('data-q',qty);
    });

    // подключаем скрипт Чекаута
    (function (s) {
        var c = '<script type="text/javascript"  src=' + s + '><\/script>',
            e = '<div id="shiptor_widget" class="_shiptor_widget" data-wk="ВАШ_ВИДЖЕТ_КЛЮЧ" data-basketShowOnAdd="0"></div>';
        $("body").append(e, c);
    })("https://widget.shiptor.ru/embed/order.js");

    // Изменение типа кнопки в корзину и добавление атрибута 'shiptor_widget_add_basket'
    var basketAddButton = document.querySelector("single_add_to_cart_button");
    $('button[type=submit]').attr('type', 'button');
    $('button').attr('data-role','shiptor_widget_add_basket');


});

После этого в футере перед закрывающим тегом body будет отображаться такой код

2. Настройка кнопки «В корзину»

Добавьте атрибуты к кнопке «В корзину»
data-id="10" data-q="1" data-role="shiptor_widget_add_basket" 

Все это можно сделать уже в подключенном файле checkout_widget_help.js или, что предпочтительнее, модифицировать файл, который отвечает за вывод кнопки «В корзину». В WooCommerce за это отвечает файл simple.php (подробнее). 

Чтобы модифицировать файл simple.php или любой другой файл плагина WooCommerce, нужно в дочерней теме создать точно такую же иерархию папок и файлов, как в самом плагине. Но это всё без учёта папки templates. То есть, если simple.php файл в плагине находится в /wp-content/plugins/woocommerce/templates/single-product/add-to-cart/simple.php, то в дочерней теме его путь выглядит следующим образом /wp-content/plugins/woocommerce/single-product/add-to-cart/simple.php (папка templates отсутствует). 
Иерархия показана на скриншоте: 

!Обратите внимание, что данные о названии, габаритах, весе и стоимости товара Чекаут получает из номенклатуры ЛК Shiptor. Сформированные покупателем заказы не будут отображаться в административной панели магазина WooCommerce, а только в ЛК Чекаута. 

После внесения любых изменений в товарную номенклатуру Shiptor необходимо очищать кеш. Для этого в КЧ выберите Настройки > Магазины и нажмите кнопку «Очистить кеш запросов», которая располагается внизу страницы. 

Подробнее о подключении Чекаута и настройке дополнительных функций читайте в инструкции. 

Создайте тестовый заказ через виджет. Фактически, проверяя правильность расчета, проверяется корректность настройки системы. Итоговый результат нужно сравнивать с калькулятором в ЛК Shiptor. Если при расчете доставки на сайте и в полученном заказе в кабинете Чекаута отображаются корректные суммы, то дальнейшей настройки системы не требуется.

Интеграция с WordPress

Чтобы посмотреть, как виджет работает на платформе WordPress, используйте демо.

Чтобы начать работать с Чекаутом, добавьте номенклатуру или отредактируйте уже существующую в ЛК Shiptor. Для этого понадобится:

  • Добавить товары раздел «Номенклатуры» ЛК Shiptor вручную или с помощью CSV-файла. 
  • Проверить, чтобы у каждого товара или вариации был уникальный «Артикул магазина». По этому полю будет происходить поиск товара в номенклатуре Shiptor.

 

1. Подключение Чекаута

Рекомендуем для интеграции виджета Чекаута Shiptor создать дочернюю тему и активировать ее. Процесс подробно описан в инструкции. Это необходимо, чтобы не терять изменения, обязательные для интеграции Чекаута при обновлении основной темы (шаблона).

Виджет встраивается на сайт в виде файла, подключаемого с нашего хостинга:

<script type="text/javascript"src="https://widget.shiptor.ru/embed/order.js"></script>

Чтобы подключить скрипт Чекаута, откройте functions.php и найдите функцию, которая отвечает за это.

Если такой функции нет, ее можно написать самостоятельно. Например так: 

 function twentyseventeen_scripts() {
   	wp_enqueue_script( 'shiptor-checkout_script', 'https://widget.shiptor.ru/embed/order.js', array(), '1.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'twentyseventeen_scripts' );

В качестве альтернативного варианта добавьте в уже существующую функцию строку: 

wp_enqueue_script( 'shiptor-checkout_script', 'https://widget.shiptor.ru/embed/order.js', array(), '1.0', true );

Здесь: 

  1. 'shiptor-checkout_script' - название задаётся произвольно. 
  2. 'https://widget.shiptor.ru/embed/order.js' - ссылка на скрипт Чекаута должна точно соответствовать.
  3. true - сигнал для функции добавить этот файл в футере страницы, перед закрывающим тегом body.

Для дальнейшей настройки откройте footer.php и в конце файла непосредственно перед закрывающим тегом </body> добавьте html-блок:

<div id="shiptor_widget" class="_shiptor_widget" data-cod="1" data-kladr="77000000000" data-city="Москва" data-wk="ВАШ_ВИДЖЕТ_КЛЮЧ" style="display:none";></div>

2. Настройка кнопки «Купить»

Для подключения Чекаута к кнопке «Купить» необходимо создать товар. Поскольку не используется никакого постороннего плагина, товар создается с помощью добавления страницы с html-разметкой. На данном этапе самое важное правильно задать параметры для кнопки «Купить» (также она может называться «В корзину», «Добавить» и т.п.). Добавьте строку для кнопки:

	<p data-role="shiptor_widget_add_basket" data-id="xma2l" data-q="1"><button>Купить</button></p>

Вместо <p>, <button> можете использовать другие теги. Здесь главное — это его внутренние атрибуты:

  • data-role="shiptor_widget_add_basket";
  • data-id="xma2l", где xma2l — «Артикул магазина» в номенклатуре Shiptor;
  • data-q="1 — количество товара, добавляемого в корзину.

!Обратите внимание: данные о названии, габаритах, весе и стоимости товара Чекаут получает из номенклатуры ЛК Shiptor. Сформированные покупателем заказы не будут отображаться в административной панели магазина WordPress, а только в ЛК Чекаута. 

После внесения любых изменений в товарную номенклатуру Shiptor необходимо очищать кеш. Для этого в КЧ выберите Настройки > Магазины и нажмите кнопку «Очистить кеш запросов», которая располагается внизу страницы. 

Подробнее о подключении Чекаута и настройке дополнительных функций читайте в инструкции. 

Создайте тестовый заказ через виджет. Фактически, проверяя правильность расчета, проверяется корректность настройки системы. Итоговый результат нужно сравнивать с калькулятором в ЛК Shiptor. Если при расчете доставки на сайте и в полученном заказе в кабинете Чекаута отображаются корректные суммы, то дальнейшей настройки системы не требуется.

Интеграция с Shop-Script (Webasyst)

Чтобы посмотреть, как виджет работает на платформе Shop-Script, используйте демо.

Чтобы начать работать с Чекаутом, добавьте номенклатуру или отредактируйте уже существующую в ЛК Shiptor. Для этого понадобится заполнить данные в разделе «Номенклатуры».

Выгрузите номенклатуру в CSV-формате в разделе «Все товары»:

В полученом файле данные из столбца «Код артикула» должны соответствовать столбцу «Артикул магазина» в номенклатуре Shiptor.

Укажите название, габариты (ДхШхВ), вес товара и розничную цену. Данные о названии, габаритах, весе и стоимости товара Чекаут получает из номенклатуры ЛК Shiptor. После внесения любых изменений в номенклатуру на сайте, обновите информацию в Shiptor и очистите кеш запросов.

1. Подключение Чекаута

Инструкция описывает подключение виджета в шаблон стандартной темы «Дефолт 3.0». Код для нестандартного шаблона может отличаться, но принцип действия виджета неизменен.

Для подключения виджета Чекаута в ShopScript зайдите в панель управления сайтом (Бэк-офис), перейдите в раздел Магазин > Витрина > Шаблоны и откройте файл Index.html.

Прокрутите страницу до конца и непосредственно перед закрывающим тегом </body> вставьте код виджета.

<div id="shiptor_widget" class="_shiptor_widget"   data-wk="Ваш ВИДЖЕТ КЛЮЧ из настроек Чекаута" ></div>
<script type="text/javascript" src="https://widget.shiptor.ru/embed/order.js"></script>

2. Скрытие стандартной корзины.

Отключите на сайте стандартную корзину, закомментировав ее код.

 

Аналогичным способом скройте ссылку на нее.

3. Настройка кнопки «Купить»

Перейдите в product.cart.html и найдите кнопку добавления товара в корзину. Допишите ей роль и остальные необходимые параметры.

data-id={$product. skus[$product. sku_id].sku|escape} data-role="shiptor_widget_add_basket" data-product="{$product. id}ware"

Если у товаров есть модификации исполнения (обязательно с индивидуальным артикулом), найдите и измените элемент выбора варианта путём добавления следующих параметров:

data-role="shiptor_widget_variant_change" data-target="{$product. id}ware"

Также измените 

value="{$sku. sku|escape}"

Если на сайте предоставляется выбор количества товаров для заказа, измените соответствующий элемент, указав следующие параметры.

data-role="shiptor_widget_change_quantity" data-target="{$product. id}ware"

Добавьте скрипт для срабатывания кнопок во всплывающем окне.

<script>
    [].slice.call(document.querySelectorAll('[data-role="shiptor_widget_add_basket"]')).forEach(function(el){
        el.addEventListener('click', JCShiptorWidgetOrder.instance.add2BasketHandler);
    });
    [].slice.call(document.querySelectorAll('[data-role="shiptor_widget_variant_change"]')).forEach(function(el){
        el.addEventListener('change', JCShiptorWidgetOrder.instance.changeVariantHandler);
    });
    [].slice.call(document.querySelectorAll('[data-role="shiptor_widget_change_quantity"]')).forEach(function(el){
        el.addEventListener('change', JCShiptorWidgetOrder.instance.changeQuantityHandler);
    });
</script>

Для работы виджета на страницах категорий и прочих списков товаров необходимо изменить файлы list-thumbs-mini.html и list-thumbs.html

Перед циклом {foreach $products as $p} добавьте код

{$all_skus = $wa->shop->skus(array_keys($products))}

В начало этого цикла добавьте код

{$skus = $all_skus[$p. id]}
{$sku = reset($skus)}

Добавьте условие в кнопку «Купить»: если у товара отсутствует вариативность, она добавляет его в корзину, если нет — открывается всплывающее окно.

{if $p. sku_count === 1} data-id="{$sku. sku}" data-role="shiptor_widget_add_basket" data-product="{$p. id}ware" {/if}

!Обратите внимание, что данные о названии, габаритах, весе и стоимости товара Чекаут получает из номенклатуры ЛК Shiptor. Сформированные покупателем заказы не будут отображаться в административной панели магазина ShopScript, а только в ЛК Чекаута. 

После внесения любых изменений в товарную номенклатуру Shiptor необходимо очищать кеш. Для этого в КЧ выберите Настройки > Магазины и нажмите кнопку «Очистить кеш запросов», которая располагается внизу страницы. 

Подробнее о подключении Чекаута и настройке дополнительных функций читайте в инструкции. 

Создайте тестовый заказ через виджет. Фактически, проверяя правильность расчета, проверяется корректность настройки системы. Итоговый результат нужно сравнивать с калькулятором в ЛК Shiptor. Если при расчете доставки на сайте и в полученном заказе в кабинете Чекаута отображаются корректные суммы, то дальнейшей настройки системы не требуется.

Интеграция с UMI.CMS

Чтобы посмотреть, как виджет работает на платформе UMI.CMS, используйте демо.

Чтобы начать работать с Чекаутом, добавьте номенклатуру или отредактируйте уже существующую в ЛК Shiptor. Для этого понадобится:

  • Добавить товары в номенклатуру в ЛК Shiptor вручную или с помощью CSV-файла. 
  • Проверить, чтобы у каждого товара или вариации был уникальный «Артикул магазина». По этому полю будет происходить поиск товара в номенклатуре Shiptor.

1. Подключение Чекаута

Для установки виджета необходимо внести изменения в файлы сайта. Подключитесь к сайту по FTP или любым другим удобным способом, зайдите в каталог /templates/demomarket/php/layout и откройте index.phtml. В нём добавьте контейнер виджета и скрипт обработки вариаций товара перед закрывающим тегом </body>.

<div id="shiptor_widget" 
			class="_shiptor_widget" 
			data-basketShowOnAdd="0" 
			data-cod="1" 
			data-kladr="77000000000" 
			data-city="Москва" 
			data-wk="5$6GOSDZ1H2624C" 
			style="display:none" >
		</div>
		<script type="text/javascript" src="https://widget.shiptor.ru/embed/order.js"></script>
		<script type="text/javascript">
			function variableSelect(elems) {
				jQuery(elems).each(function() {
					jQuery(this).bind('click', function(){
						setTimeout(function(){
							var variables_selected = true,
								variables_selects = $('[data-characteristic-name]').not('.hidden');
								offer_id = site.TradeOffers.getOfferId();
							for (var i =0; i < variables_selects.length; i++) {
								if (variables_selects.eq(i).find('option:selected').attr('data-value') == "") {
									variables_selected = false;
								}
							}
						    if(!!offer_id && variables_selected) {
						        var sku = jQuery('[data-sku="' + offer_id + '"]').text().trim();
					        	console.log(sku);
						        jQuery('[data-role="shiptor_widget_add_basket"]').attr('data-id', sku).removeAttr('style');
						    }
						}, 100);
					});
				});
			};
			jQuery(document).ready(function(){
				var elem = 'span.ui-selectmenu-button';
				if(!!jQuery(elem) && jQuery(elem).length) {
					jQuery('[data-role="shiptor_widget_add_basket"]').css({opacity: 0.5, pointerEvents: 'none'});
				}
				jQuery(elem).on('click', function(){
					var elems = '.ui-menu-item-wrapper';
					if(!!jQuery(elems) && jQuery(elems).length) {
						variableSelect(elems)
					}
				});
			});

		</script>

2. Настройка кнопки «Купить»

Чтобы товар корректно добавлялся в корзину, настройте кнопку «Купить» и отображение артикулов на странице товара. Перейдите в директорию /templates/demomarket/php/catalog/product/preview и откройте файл price.phtml. Замените стандартную кнопку «Купить» на кнопку от виджета, вставив код: 

<a href="#" 
		data-role="shiptor_widget_add_basket" 
		data-product="<?= $product->getId() ?>" 
		data-id="<?= $product->getId() ?>" 
		data-q="1" 
		class="transparent_btn goods_btn <?= $this->getAddToCartButtonClass($product) ?>">
		<?= $this->getAddToCartButtonMessage($product) ?>
		</a>

Закомментируйте стандартную кнопку. 

Аналогично добавьте кнопку виджета на страницу товара и скройте кнопку покупки в 1 клик. Для этого откройте buy.phtml в директории /templates/demomarket/php/catalog/product/main/price и выполните последовательность действий по аналогии со скриншотом ниже.

Чтобы вывести на странице товара артикулы вариаций, зайдите в директорию /templates/demomarket/php/library, откройте файл DemomarketPhpExtension.php и в методе getCharacteristicSet в конце последнего цикла добавьте строку: 

$result['Артикул'][$tradeOffer->getVendorCode()][] = $tradeOffer->getId();

Внесите изменения в файл шаблона /templates/demomarket/php/catalog/product/main/price/trade_offers.phtml.

<div style="display:none" id="custom_area_for_sku">
	<?php 
	if(!empty($characteristicSet['Артикул'])): ?>
	<?php foreach($characteristicSet['Артикул'] as $sku => $id): ?>
			<div class="custom_sku_item" data-sku="<?=$this->escape($id[0]); ?>"><?= $this->escape($sku); ?></div>
	<?php endforeach; ?>
	<?php endif; ?>
</div>

<div class="additional_options">
	<?php foreach ($characteristicSet as $title => $valueList): ?>

		<?php
			if($title === "Артикул"){
				continue;
			}
		?>

Совместно кодом, ранее добавленным в /templates/demomarket/php/layout/index.phtml, получается блок вида: 

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

3. Скрытие стандартной корзины

Для скрытия стандартной корзины перейдите в директорию /templates/demomarket/php/layout/header/middle и в файле index.phtml закомментируйте её элемент. 

 Более подробную информацию о том, как настроить работу с заказами, можно узнать из инструкции. 

Интеграция с PrestaShop

Чтобы посмотреть, как виджет работает на платформе PrestaShop, используйте демо.

Чтобы начать работать с Чекаутом, добавьте номенклатуру или отредактируйте уже существующую в ЛК Shiptor. Для этого понадобится:

  • Добавить товары в номенклатуру в ЛК Shiptor вручную или с помощью CSV-файла. 
  • Проверить, чтобы у каждого товара или вариации был уникальный «Артикул магазина». По этому полю будет происходить поиск товара в номенклатуре Shiptor.

Для вариативных товаров в качестве «Артикула магазина» используйте код вариации из поля карточки «Код» (Reference) в разделе «Комбинация». 

Для простых товаров используется значение из поля «Код» (Reference) основных настроек товара в качестве «Артикула магазина». 

1.Подключение Чекаута

Для установки виджета Чекаута необходимо внести определённые изменения в файлы сайта. Для этого подключитесь к сайту по FTP или любым другим удобным способом и зайдите в каталог /themes/название вашей темы/assets/js/custom.js. Добавьте в него контейнер виджета и скрипт обработки вариаций товара:

jQuery( document ).ready(function($) {

	//Hide basket for desktop and mobile versions
	$('#_mobile_cart, #_desktop_cart').remove();

	var sku = $('[itemprop="sku"]').text();
	$('[data-role="shiptor_widget_add_basket"]').attr('data-id', sku);
     
    var s = "https://widget.shiptor.ru/embed/order.js",
    	c = '<script type="text/javascript"  src=' + s + '><\/script>',
        e = '<div id="shiptor_widget" class="_shiptor_widget" data-wk="5$6G34" data-basketShowOnAdd="0" style="height:auto"></div>';
    jQuery("body").append(e, c);


    $('input[name="qty"]').on('change', function(){
		var qty = jQuery('#quantity_wanted1').val();
		$('[data-role="shiptor_widget_add_basket"]').attr('data-q', qty);
	});

    
	$(document).on('change', '.my_custom_class', function(e){
		e.preventDefault();
		btn = $('[data-role="shiptor_widget_add_basket"]');
		btn.attr('disabled', 'disabled');

    	setTimeout(function(){
    		var sku = $('[itemprop="sku"]').text();
			btn = $('[data-role="shiptor_widget_add_basket"]');
			btn.attr('data-id', sku);
			btn.show('disabled', '');
			$(btn).on('click', JCShiptorWidgetOrder.instance.add2BasketHandler);
    	}, 2000);
		
	});
    
});

2. Настройка кнопки «Купить»

Для правильного добавления в корзину вариативного товара необходимо внести правки в файл /themes/название вашей темы/templates/catalog/_partials/product-variants.tpl. В файле добавьте новый класс my_custom_class к уже имеющимся select и input, чтобы в коде с помощью обработчика событий change можно было отследить изменения этих полей. 

<div class="product-variants">
  {foreach from=$groups key=id_attribute_group item=group}
    {if !empty($group.attributes)}
    <div class="clearfix product-variants-item">
      <span class="control-label">{$group.name}</span>
      {if $group.group_type == 'select'}
        <select
          class="my_custom_class form-control form-control-select"
          id="group_{$id_attribute_group}"
          data-product-attribute="{$id_attribute_group}"
          name="group[{$id_attribute_group}]">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
          {/foreach}
        </select>
      {elseif $group.group_type == 'color'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="float-xs-left input-container">
              <label>
                <input class="my_custom_class input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
                <span
                  {if $group_attribute.html_color_code}class="color" style="background-color: {$group_attribute.html_color_code}" {/if}
                  {if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})" {/if}
                ><span class="sr-only">{$group_attribute.name}</span></span>
              </label>
            </li>
          {/foreach}
        </ul>
      {elseif $group.group_type == 'radio'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="input-container float-xs-left">
              <label>
                <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
                <span class="radio-label">{$group_attribute.name}</span>
              </label>
            </li>
          {/foreach}
        </ul>
      {/if}
    </div>
    {/if}
  {/foreach}
</div>

Внесите изменения в файл /themes/название вашей темы/templates/catalog/_partials/product-add-to-cart.tpl, чтобы добавить передачу информации при нажатии на кнопку «Купить» в виджет. 

Для этого в блоке <div class="add"> замените стандартный атрибут data-button-action="add-to-cart" и type="sumbit" на type="button" и data-role="shiptor_widget_add_basket".

Также в секции, которая отвечает за количество, необходимо изменить id поля, чтобы запретить платформе отправлять ajax-запросы при изменении количества: <div class="qty"> 
<input...

Например: было id="quantity_wanted", стало id="quantity_wanted1". Т.е. необходимо задать уникальный id и убедится, что на странице нет такого названия. 

 

История изменений