Перейти к основному контенту

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

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

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

Также в атрибутах 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: фрагмент кода

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

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

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

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

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

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

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

image2020-4-18_0-14-9.png?version=1&modificationDate=1587158180561&api=v2

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

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

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

Наверх