Skip to main content

Подключение каталога Кактус через IFrame

В заголовок или в тело страницы добавьте код:

Где вместо shopXXXXXX указать домен Вашего магазина.

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

В то место верстки, где должен отображаться каталог товаров добавить код:

<iframe id="cactus-container" frameborder=0 scrolling="no" style="width:100%;" data-home-page="/" data-other-page="/catalogue"></iframe>

 

В атрибутах data-home-page и data-other-page необходимо указать URI страниц Вашего сайта на которых будет отображаться соответственно главная страница каталога и все другие страницы. Т.е. Вы на своем сайте можете сверстать 2 разные страницы для каталога. Одну для главной страницы например с большим баннером. Вторую, более компактную — для всех других страниц каталога: страницы коллекции, страницы товара и пр. Если на Вашем сайте главная и все другие страницы каталога будут отображаться в одинаковом окружении – просто укажите обеим этим атрибутам одно и то же значение. В приведенном выше примере главная страница каталога отображается на корневой странице сайта. А все другие страницы – на странице catalogue. В верстке обеих указанных в атрибутах data-home-page и data-other-page страниц вашего сайта должен быть вставллен приведенный выше код.

Примечание 1: URI — это URL без доменного имени. Т.е. если страница Вашего сайта на которой находится каталог называется http://www.mysite.ru/mykatalog, нужно указать «/mykatalog».

Примечание 2: Для тестового окружения строки

<script type="text/javascript" src="https://storefront.kak2c.ru/js/iframe-outer.js"></script>
<link href="https://storefront.kak2c.ru/css/iframe-outer.css" rel="stylesheet">

Заменить на

<script type="text/javascript" src="https://storefront-test.kak2c.ru/js/iframe-outer.js"></script>
<link href="https://storefront-test.kak2c.ru/css/iframe-outer.css" rel="stylesheet">

Блок избранной коллекции (не обязательно)

<iframe class="cactus-favorite" frameborder=0 scrolling="no" style="width:100%;" data-home-page="/iframe-page" data-other-page="/iframe-page/slave" data-collection-id="XXXX"></iframe>

Блоки избранных коллекций можно размещать как на странице с блоком каталога так и без него. На одной странице может быть несколько таких блоков. На странице которая задана как "неглавная" в атрибутах data-other-page всех блоков обязательно должен быть блок каталога.

Вместо XXXX укажите Id коллекции, которую будет отображать блок.

Описание атрибутов data-home-page и data-other-page см. выше. Внимание! эти атрибуты должны быть заданы одинаково у всех имеющихся на сайте блоков каталога и избранных коллекций. Даже если на одной странице имеется несколько таких блоков, эти атрибуты необходимо задать им всем с одинаковыми значениями.

Строка поиска по каталогу (не обязательно)

<input type="text" id="cactus-search-input" class="cactus-search-autocomplete">
<button id="cactus-search-button" type="button">Искать</button>
<script>
    document.addEventListener("DOMContentLoaded", function (){
        document.getElementById('cactus-search-button').addEventListener("click", function (){
            var val = document.getElementById('cactus-search-input').value;
            if (val.trim()) {
                window.location.hash = '#/search?query=' + val;
            }
        });
    });
</script>

Код примерный. Элемент ввода строки поиска и элемент собственно запускающий поиск необязательно должны быть input и button. ID элементов может быть произвольный. Чтобы запустить поиск достаточно присвоить странице с витриной хэш #/search?query=искомая строка. Но чтобы работал suggestion (т.е. подсказка, появляющаяся по мере ввода пользователем значения) элемент ввода должен быть input type="text" и иметь класс cactus-search-autocomplete.

Кастомный значок корзины (не обязательно)

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

Код для примера представляет собой просто надпись «корзина» с количеством товаров. При клике на него откроется штатный попап корзины.

<a href="javascript: void(0);" id="cactus-cart" class='cactus-cart_empty'>
    Корзина: <span id="cactus-cart-quantity" class='cactus-cart_empty'>0</span>
</a>

id cactus-cart и cactus-cart-quantity должны быть именно такими, как указаны в примере. cactus-cart — элемент при клике на который должен открываться попап корзины.

сactus-cart-quantity – элемент, в который помещается текущее количество товаров в корзине

Класс cactus-cart_empty добавляется обеим этим элементам когда корзина пуста. Может использоваться для различной стилизации пустой или непустой корзины.

Чтобы скрыть штатную иконку корзины нужно добавить следующий стиль:

<style>
    .basket-round {
        display: none;
    }
</style>

Примечание:  описанный здесь способ замены штатного значка корзины будет работать только совместно с витриной Кактус. Если Вы используете виджет корзины отдельно от витрины, воспользуйтесь этим руководством.

Наверх