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

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

```HTML
<link href="https://static.kak2c.ru/v2/kak2c.checkout.css" rel="stylesheet">
<script type="text/javascript" src="https://static.kak2c.ru/v2/kak2c.checkout.js"></script>
<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>
    document.addEventListener("DOMContentLoaded", function (){
        cactusStorefront({idshop: 'shopXXXXXX'});
    });
</script>
```

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

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

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

```HTML
<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](http://www.mysite.ru/mykatalog), нужно указать «/mykatalog».*

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

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

*Заменить на*

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

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

```HTML
<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 см. выше. **Внимание! эти атрибуты должны быть заданы одинаково у всех имеющихся на сайте блоков каталога и избранных коллекций. Даже если на одной странице имеется несколько таких блоков, эти атрибуты необходимо задать им всем с одинаковыми значениями.**

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

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

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

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

<span class="confluence-embedded-file-wrapper confluence-embedded-manual-size">![](https://docs.kak2c.ru/download/thumbnails/26771543/image2020-4-18_0-14-9.png?version=1&modificationDate=1587158180561&api=v2)</span>

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

```HTML
<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 добавляется обеим этим элементам когда корзина пуста. Может использоваться для различной стилизации пустой или непустой корзины.

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

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

***Примечание:** описанный здесь способ замены штатного значка корзины будет работать только совместно с витриной Кактус. Если Вы используете виджет корзины отдельно от витрины, воспользуйтесь [этим руководством](https://wiki.kak2c.ru/books/%D0%BA%D0%B0%D0%BA%D1%82%D1%83%D1%81-%D0%B4%D0%BB%D1%8F-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2/page/%D0%B7%D0%B0%D0%BC%D0%B5%D0%BD%D0%B0-%D0%B8%D0%BA%D0%BE%D0%BD%D0%BA%D0%B8-%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D1%8B-%D0%BF%D0%BE-%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E-%D0%BD%D0%B0-%D1%81%D0%BE%D0%B1%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D1%83%D1%8E).*