140x140

Система Автоматизированной Разработки

Каталог товара с формой заказа на ContentO

Каталог товара с формой заказа на ContentO

2018-02-23

Этот материал о том как быстро реализовать каталог товара с формой заказа на ContentO. В последнее время форма заказа больше известна как функция быстрой покупки.

Чтобы было понятней сколько времени займет реализация каталога этапы работ предлагаю разбить на 15-ти минутки. В конце мы посмотрим сколько примерно потрачено времени. Создавать пример каталога будем на нашем демо домене http://demo2.contento-cap.ru. Как вы помните на этом домене изначально был демо-конструктор, но после того как мы отказались от этой опции было решено сделать пример каталога на Contento. Мы не будем учитывать в этих 15-ти минутках время потраченное на скриншоты и прочие необходимости для создания этого материала. И так - поехали!

Первая 15-ти минутка

В административной панели заходим в раздел "Контент / Все таблицы" и кликаем на кнопку "Добавить таблицу". На этом этапе создадим таблицу в базе данных с нужной нам структурой материала для описания товара. Предлагаю сделать следующую структуру:
- Таблица БД будет содержать поля для заголовка, актикула, цены, описания, фотогалереи товара, и фото товара для списка каталога.

Итак мы кликнули на кнопку добавления таблицы. Теперь нам нужно назвать эту таблицу и начать добавлять поля. Имя таблицы необходимо заполнить латинскими буквами, заголовок таблицы можете назвать как угодно, я назвал "Каталог товара" - его будет видно в разделе меню "Контент" админ-панели ContentO. В поле "Количество на 1 странице" - поставьте количество вывода будущего товара на 1 страницу./p>

Создаем каталог товара на ContentO

Теперь создадим поле для заголовка. Выберете тип поля "текстовое поле" и кликните зеленую кнопку "+none". На скриншоте вы видите что у меня стоят галочки на "Показывать в списке?" и "Обязательный?" Это значит что наш заголовок будет показываться в списке материалов в админ панели и что поле "Название товара" обязательное для заполнения.

Создаем каталог товара на ContentO

Для артикула товара и цены можно также использовать тип "Текстовое поле". Создадим их по аналогии поля для заголовка.

Далее для полного описания товара добавим тип поля "WisyWig редактор".

Для фотогалереи товара добавим тип поля "Несколько файлов". После галереи добавим поле "Загрузка файла elfinder". обратите внимание что в этом поле можно задать тип обработки файлов. Я установил обрезку изображение выше 200px.

Теперь кликнем на "Создать таблицу". После этого мы увидим что добавлена новая таблица "Каталог товара" и появился раздел в меню "Контент / Каталог товаров". Если вы захотите добавить к этой таблице дополнительные поля кликните на "Управление полями" и добавьте необходимое.

Создаем каталог товара на ContentO

Мы уже можем добавить в наш каталог несколько товаров. Для этого перейдите в раздел "Контент / Каталог товаров" и кликните на "Добавить".

Создаем каталог товара на ContentO

Добавьте несколько товаров и на этом предлагаю завершить первую 15-ти минутку.

Создаем каталог товара на ContentO

Вторая 15-ти минутка

Теперь выведем список товара который мы добавили в базу данных. Как вы знаете наша демо тема использует стандартные стили bootstrap 3. Наш каталог будет использовать эти же стили.

В разделе админ панели "Контент / Каталог товаров", сверху страницы, вы видите две подсказки о том как вывести из базы данных информацию списком, и страницу материала отдельно:

Создаем каталог товара на ContentO

Выведем сначала содержимое каталога списком. Для этого кликнем на подсказку "Список документов". Мы видим что для вывода информации из таблицы нашего каталога нам нужно создать файл catalog_list.php по пути themefrontend/plugin/content/catalog_list.php. Ниже в блоке приведен пример php кода который выведет нашу информацию списком:

Создаем каталог товара на ContentO

Создадим в редакторе файл catalog_list.php и сделаем в нем html разметку для нашего будущего списка товаров. Повторюсь что выводить информацию можно в любом нужном вам оформлении. Я буду использовать плитку по 4 товара в ряд.

Создаем каталог товара на ContentO

Теперь используем php код из подсказки и расставим его в html разметке:

Создаем каталог товара на ContentO

Зальем файл catalog_list.php на сервер и сделаем ссылку на каталог в меню. Получился такой список товара тестового каталога:

Создаем каталог товара на ContentO

Кофе-тайм

Третья 15-ти минутка

Создадим по аналогии шаблон отдельного материала (товара). Для этого кликнем на подсказку в админке "Отдельный документ". Мы видим что ContentO предлагает создать файл catalog_one.php и находиться он должен по адресу /public_html/themefrontend/plugin/content/catalog_one.php. Ниже в блоке пример вывода информации из БД для отдельного материала:

Создаем каталог товара на ContentO

Создадим файл и сделаем нужную html разметку и стили. После этого используя подсказки выведем в нашу верстку информацию. Ниже на скриншоте вы видите полностью готовый файл catalog_one.php с комментариями:

Создаем каталог товара на ContentO

Зальем файл на сервер по нужному адресу посмотрим что получилось:

Создаем каталог товара на ContentO

Теперь создадим форму заказа для нашего каталога. Для этого перейдем в конструктор форм "Формы / все формы" и кликнем на "Добавить форму". Добавим поля: имя, телефон, емайл, поле "Обычный текст" для товара (оно будет заполняться заголовком товара при клике на кнопку "Заказать", для этого мы используем js), поле "Обычный текст" для адреса доставки, поле чекбокс для согласия с политикой приватности (фз 152), и сделаем их обязательными для заполнения. После сохранения формы уже можно сделать необходимые настройки - добавить емайл куда будут отправляться сообщения и создать шаблон письма используя подсказку:

Создаем каталог товара на ContentO

Перейдем в "шаблон формы" и используя подсказки ContentO подключим нашу форму к сайту. Ниже вы видите саму подсказку. Создадим по приведенному примеру свою форму, а также подключим файл js к сайту в файле main.php:

Создаем каталог товара на ContentO