Как создать интернет-магазин в Craftum: пошаговая инструкция
1. Для того, чтобы создать интернет-магазин необходимо выбрать соответствующий пункт при создании нового сайта:
Добавить функционал в уже существующий сайт можно сверху в панели конструктора — вкладка «Создать магазин»:
После нажатия на неё появится раздел «Товары».
Обзор раздела «Товары»
2. В раздел уже добавлены 8 товаров в качестве примера и демонстрации функционала:
При необходимости вы можете удалить их в любой момент.
3. Нажав на кнопку «Настройки товаров», можно настроить поля для карточки товаров:
А также настроить отдельно каждое из полей:
4. Нажав на иконку настроек в правом верхнем углу, вы можете настроить отображение полей в списке товаров:
5. Далее рассмотрим кнопки на верхней панели конструктора:
Кнопка «Создать товар» позволяет создать новый товар вручную:
Кнопка «Опубликовать все товары» публикует все созданные или импортированные товары. Это необходимо для их дальнейшего отображения на сайте:
Кнопка «Шаблон страницы товара» открывает одноимённую страницу в редакторе — эта страница типовая для всех товаров. Там можно внести все необходимые изменения в дизайн и контент шаблона.
Нажав сверху кнопку с названием товара, вы можете переключаться между ними прямо на этой странице — весь контент обновится у вас на глазах.
6. Изменить любую информацию о товаре можно, кликнув на него в списке товаров или на 3 точки справа — пункт «Редактировать»:
7. В конструкторе также есть возможность загрузить товары из CSV-файла. Сделать это можно по соответствующей кнопке «Загрузить из CSV» справа от поля поиска:
Подробнее об этом функционале можно прочитать в отдельной статье.
8. Если вы выбирали пункт «Интернет-магазин» при создании нового сайта, то разделе «Страницы сайта» появятся 5 автоматически созданных типовых страниц:
- Каталог
- Доставка и оплата
- Контакты
- Обмен и возврат
- Шаблон страницы товара
Все из них можно отредактировать так, как вам необходимо.
Если вы добавляли функционал к уже существующему сайту, то у вас появятся только 4 страницы типовых страницы — все, что перечислили выше, кроме страницы «Каталог» (так как это аналог главной страницы сайта).
Обзор блока с товарами
9. Теперь перейдём к отображению товаров на сайте.
Если вы создавали новый сайт, то на странице «Каталог» заранее добавлены нужные для магазина блоки. Например, блок поиска и карточки товаров:
А также блок пагинации (кнопки снизу), который отвечает за переключение между страницами с товарами:
Если же вы добавляли функционал для существующего сайта, то просто добавьте для него любой блок из категории «Товары»:
11. В настройках блока (сайдбар) с товарами находятся основные настройки для них
Остановимся на них подробнее. Тумблер «Список элементов» отвечает за отображение товаров в блоке. Он связывает контент в нём с данными из «коллекции» — это база данных, в который хранится вся информация о товарах, которые вы импортируете в Craftum. Если тумблер включён, то товары отобразятся в блоке, и наоборот.
По кнопке «Настройка элементов» отвечает за отображение данных в карточках товаров. С её помощью можно задать параметры товара, такие как заголовок, подпись, цена и старая цена.
Для этого в контекстном меню необходимо нажать кнопку «Данные из коллекции» и выбрать соответствующий пункт в списке:
Вся информация для этих полей автоматически подгрузится из коллекции для каждого товара.
Там же в настройках кнопки можно задать тип ссылки «Добавить товар в корзину», настроить это также достаточно один раз — после этого все товары блока будут привязаны к корзине:
Удобнее всего настраивать отображение данных из коллекции по одноимённой кнопке можно прямо в блоке (в редакторе), кликнув на текст или выделив его, а также наведя на изображение в карточке товара:
В разделе «Источник данных» в будущем можно будет выбрать, какую именно коллекцию подключить в блок, сейчас там доступна только коллекция «Товары».
Настройка «Количество» отвечает за количество карточек товаров, которые будут отображены в блоке. Максимально в блоке можно вывести 100 товаров. Далее можно добавить и настроить блок «Пагинация» из раздела «Другое», чтобы переключать страницы с товарами:
Настройка «Пропустить» позволяет начать отображение товаров с определенного порядкового номера. Это может пригодиться, например, когда вы хотите выделить один товар сверху и сделать на него акцент.
Для этого необходимо добавить 2 блока с товарами: в первом отобразиться только один товар (в нём в настройке «Количество» нужно установить значение «1»), а во втором — установить в настройке «Пропустить» также значение «1», тогда товары пропустят первый и начнут отображение со второго. Пример реализации:
Настройка «Сортировка» позволяет отсортировать карточки товаров по нужному параметру:
Важно, чтобы у всех товаров был заполнен выбранный параметр. В противном случае, у тех товаров, где нет данных, конструктор будет считать такие значения нулевыми (будто там проставлен «0»).
Настройка «Фильтры» позволяет связать блок с товарами с блоком поиска. Он также добавляется из раздела «Другое»:
Можно фильтровать по полям в коллекции, а также выбрать одно из трех условий: «Содержит» «Начинается на», «Заканчивается на». Во вкладке «Значение» можно указать то значение, по которому будут фильтроваться товары.
По умолчанию фильтрация происходит в рамках блока с товарами и её можно использовать, чтобы отобразить те или иные товары:
При включении для поля «Значение» тумблера «Динамическое» появится возможность связать товары с поиском:
Так после публикации страницы, при вводе в поиск название товара, например «Второй» автоматически покажется только карточка этого товара:
Последняя настройка — «Динамическая смена страниц», она позволяет настроить пагинацию (кнопки переключения страниц) для блока с товарами. При настройке можно выбрать, какая кнопка при нажатии будет выполнять то или иное действие:
