# Витрина Кактус

# Подключение каталога Кактус через 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).*

# Редактирование шаблона сайта

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

Из ЛК Кактус войдите в редактор Интерннт-магазина, откройте админпанель и выберите в ней вкладку "шаблоны".

[![image-1592831349565.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592831349565.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592831349565.png)

[![image-1592831426154.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592831426154.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592831426154.png)

[![image-1592831610273.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592831610273.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592831610273.png)

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

[![image-1592831904009.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592831904009.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592831904009.png)

Для простоты то что возможно рекомендуется делать именно при помощи редактирования стилей. Например чтобы скрыть ненужный элемент проще всего задать ему стиль display: none; Имя CSS-класса соответствующего элемента можно найти в инспекторе браузера, который открывается по F12.

[![image-1592832149214.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592832149214.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592832149214.png)

HTML разметка представляет собой шаблоны популярного фреймворка VueJS. Это по сути html-код, но с добавлением полей (красная рамка) и директив (синяя рамка):

[![image-1592832876559.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592832876559.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592832876559.png)

Синтаксис шаблонов описан в [документации Vue](https://ru.vuejs.org/v2/guide/).

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

Изменения в коде сразу же отображаются во внешнем виде витрины как только редактор кода теряет фокус. Но в таком виде они будут потеряны при закрытии страницы в браузере, что удобно для быстрых экспериментов. Покупатели их не увидят.

Чтобы сохранить шаблон как черновик нажмите кнопку:

[![image-1592836465530.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592836465530.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592836465530.png)

Изменения не пропадут при выходе из браузера. Но будут видны только если Вы вошли из ЛК в витрину в режиме редактора. Покупатели их по-прежнему не увидят.

Чтобы сделать изменения видимыми покупателю нажмите кнопку:

[![image-1592836711746.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592836711746.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592836711746.png)

Кнопка "сбросить черновик" вернет шаблоны магазина к предыдущей опубликованной версии.

Можно удалить все Ваши изменения шаблона независимо от того опубликованы они или нет и вернуть магазин к версии по умолчанию:

[![image-1592836873239.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592836873239.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592836873239.png)

### Пример. Правка на странице товара.

Заменим надпись "Весь товар сертифицирован" на ссылку на страницу контактов.

[![image-1592838821051.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592838821051.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592838821051.png)

Находим отмеченный красной рамкой шаблон.

[![image-1592839163796.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592839163796.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592839163796.png)

Заменяем текст в синей рамке на следующий:

```HTML
<router-link class="cactus-item__page cactus-color__hover-text"
	to="/contacts"
>
	<i class="fe-phone cactus-item__page-icon"></i>
	<div class="cactus-item__page-title">Контакты</div>
</router-link>
```

Нажимаем кнопку "Сохранить". Смотрим полученный результат:

[![image-1592839520783.png](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/scaled-1680-/image-1592839520783.png)](https://wiki.kak2c.ru/uploads/images/gallery/2020-06/image-1592839520783.png)

Если он нас устраивает, возвращаемся в редактор шаблонов и нажимаем кнопку "Опубликовать", Чтобы результат стал виден покупателям.