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

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

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

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

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

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

image-1592831349565.png

image-1592831426154.png

image-1592831610273.png

 

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

image-1592831904009.png

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

image-1592832149214.png

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

image-1592832876559.png

Синтаксис шаблонов описан в документации Vue.

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

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

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

image-1592836465530.png

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

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

image-1592836711746.png

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

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

image-1592836873239.png

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

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

image-1592838821051.png

 

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

image-1592839163796.png

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

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

image-1592839520783.png

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