Плагин и интернет-магазин Строй поставка

Создание интернет-магазина для компании Строй поставка входящей в топ10 крупнейших поставщиков строительной продукции на рынке Москвы и московской области

Для магазина был впервые использован плагин нашей разработки Argon Shop, данный плагин рассчитан на создание интернет магазинов на Wordpress

Город: Москва, год 2018, демонстрация функционала: http://voitkoze.beget.tech/

Программирование, дизайн и прочие работы по сайту: Иван Войтков

Видео-обзор интернет-магазина и плагина

1. AJAX поиск плагина Argon Shop

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

Для поиска доступны товары магазина, категории и записи из определенных рубрик(что именно будет искать форма указывается при её создании, отдельно для AJAX и обычного поиска).

Поиск по товарам учитывает релевантность выдачи, в первую очередь выводятся прямые совпадения в заголовке и article товара, затем неточные совпадения в заголовках и совпадения в описаниях товаров.

Поиск по магазину Строй поставка осуществляется по товарам, категориям, акциям из соответствующего города(Москва или Истра) и статьям для AJAX поиска. обычный поиск осуществляется по товарам.

2. Вывод и сортировка меню каталога

Для магазинов с большим число товаров(более 50-ти тысяч наименований продукции на магазине Строй поставка), разветленной и объемной структурой каталога ,частыми обновлениям с появляем новых категорий и корректировками старых - достаточно актуальным становится вопрос удобного для восприятия пользователя вывода  всех категорий на сайте.

При реализации магазина Строй поставка было решено реализовать вывод второго, третьего и четвертого уровня(при наведении) категорий каталога на одной плашке. С учетом очень большого числа категорий, при таком выводе их нужно разбивать на 3 столбца. Такой подход позволяет добиться наименьшего числа кликов(достаточно просто навести курсор и просмотреть все категории), но создает определенные сложности при выводе, так как возможности верстки в данном случае ограничены(при условии неизвестного числа категорий второго уровня и вложенных в них 3-го).

Плагин Argon Shop позволяет автоматически рассортировать полученные из базы данных категории каталога на указанное число равных списков(постараться добиться их максимального равенства по занимаемой высоте и числу элементов), при этом учитывая высоту заголовков(родительские категории традиционно выделяются более крупным шрифтом и занимают больше места по высоте, для лучшего восприятия контента).

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

Комплекс подобных мер позволяет сократить общее число запросов при загрузке главной страницы до 10(без оптимизации только на иконках в меню их число могло возрасти в полтора раза).

3. Каталог товаров

3.1 Карточки товаров, История просмотров, Хиты продаж и Новинки

Карточка товара - это краткое представление товара на странице категории, в информационных блоках(хиты продаж, новинки), результатах поиска и других модулях.

Содержит краткую информацию о товаре, название, фото и позволяет добавить товар в корзину или сразу перейти к покупке. Единица измерения по умолчанию "шт"(100р/шт), +для каждого товара можно задать единицу измерения(литры, метры итп).

Отличия кнопок "В корзину" и "Купить" в поведении при клике. Кнопка "В корзину" добавляет товар, кнопка "Купить" добавляет и пользователь сразу переходит к оформлению покупки. При добавлении товара в корзину(без перехода) кнопки добавления заменяются на кнопку "товар добавлен в корзину"(ведет в корзину при клике).

При добавлении товара непосредственно на странице корзины покупок(доступны инфо блоки в сайтбаре: история просмотров, хиты продаж, новинки) текст кнопок меняется на "обновить корзину".

При загрузке страницы карточки уже добавленных в корзину товаров сразу же выводятся с кнопкой "товар добавлен в корзину"(на странице корзины демонстрируются только карточки ещё не добавленных товаров).

При добавлении товара в админке можно поставить флажки "Хит продаж" и "Новинка", выделенные товары демонстрируются в соответствующих блоках в сайтбаре сайта и на фотографии в карточке такого такого товара появляется соответствующая пометка(hit и(или) new).

На странице категории каталога демонстрируются хиты продаж и новинки именно из этой категории(если они есть), в случае отсутствия показываются хиты/новинки из других категорий.

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

3.2 Страница категории каталога

Содержит товары категории, её описание(сверху и снизу страницы), дочерние категории

Дочерние категории подразделяются на два вида, обычные(выводятся так же в меню) и категории-запросы которые демонстрируются только в блоке "Популярные запросы" на странице категории. При добавлении категории в админке есть возможность выбрать является она обычной или "запросом". Категории-запросы сделаны в интересах СЕО продвижения и дополнительного выделения групп товаров.

Блок популярные запросы занимает определенную высоту на странице(на крупных разрешениях), если категории входящие в него(мы точно не знаем сколько их будет) занимают большую высоту(располагаются в 2, 3 и больше линий) появляется кнопка "смотреть все" и блок может растягиваться по высоте при клике на неё. Учитывается возможность изменения разрешения уже загруженной страницы(разворот планшета, к примеру), блок будет меняться вместе с изменением разрешения.

Сортировка товаров плагина Argon Shop работает на AJAX без перезагрузки страницы(страница не дергается вверх при сортировке), выбранный тип сортировки запоминается. К примеру, мы выбираем сортировка по цене от меньшего в большему, переходим на следующую страницу пагинации(1, 2, 3 итд страницы с товарами) или страницу другой категории каталога - выбранная сортировка сохраняется(не сбрасывается на идущую по умолчанию). Выбор хранится длительное время и будет применен даже при заходе на сайт после месячного отсутствия.

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

Это сделано для перехода сразу к просмотру товаров(все блоки по умолчанию закрыты). Товары являются наиболее важной частью категории, при этом даже короткое описание может занимать половину экрана смартфона, дочерние категории(особенно выводимые картинками) займут гораздо больше. Разумеется это создаст неудобство для пользователя и крайне желательно продумать и скорректировать этот момент.

Блоки не дублируются, и на мобильных, и на обычных разрешениях используются одни и те же блоки(меняются только их стили). Подобные выпадающие списки реализованы во многих модулях плагина(каталог, корзина, кабинет и другие), для них даже написана отдельная JS библиотека и встроена в плагин.

Библиотека позволяет выводить подобные списки только посредством php/html с использованием готовых классов и при необходимости создавать несколько видов переключателей(списков). К примеру, на крупных разрешениях есть панель с переключателем "первый блок"/ "второй блок", одновременно можно выбрать только один вариант(второй будет скрыт). На небольших же разрешениях можно открыть одновременно оба варианта друг под другом. Плюс нужно учитывать возможность изменения разрешения(планшеты) и корректировать открытые блоки в зависимости от текущего разрешения устройства. Такие моменты неоднократно встречаются на сайте и для них предусмотрена библиотека.

В меню панели администратора для управления товарами магазина добавлен раздел "Товары", его под-раздел "Каталог" позволяет добавлять и редактировать категории каталога.

Добавление происходит стандартным для WP образом, но были добавлены такие функции как выбор изображения категории, её описание(снизу, сверху) и выбор типа категории обычная или запрос(про это ранее уже говорилось).

Отдельно можно отметить выбор описания для Истры(так же сверху и снизу страницы категории).

Сайт рассчитан на несколько городов(Москва и Истра на текущий момент), причем сайты городов берут информацию из одной базы данных(из одних и тех же разделов, это не мультисайт), то есть товары и категории нужно добавлять только раз и достаточно одной админки для управления двумя сайтами. При этом у каждого сайта своя установка WP, это добавляет свои сложности(оптимально только для небольших сетей), но позволяет избежать многократного дублирования материалов(важный момент при условии 50 тыс+ товаров).

Одним из главных пожеланий заказчика было создание сети сайтов, с размещением каждого сайта на своем поддомене и без дублирования товаров/категорий и прочего при добавлении.

3.3 Страница товара

3.3.1 Цена и скидочная система

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

Более подробно, на простом примере:

Мы покупаем товар стоимостью 200 рублей за единицу и добавляем 2 единицы данного товара в корзину(400 руб), при этом корзина уже содержит другие товары на сумму 9900 рублей. Соответственно, мы достигаем общей суммы покупки 10300 руб.

У нас предусмотрен шаг оптовой цены в 10 000 руб, при котором цена товара который мы покупаем уменьшается с 200 рублей до 190. Такие же скидки предусмотрены и для ранее добавленных в корзину товаров, они при достижении шага в 10 тыс будут стоить не 9900, а 9300.

То есть, на выходе мы получаем итоговую цену в корзине не 10300, а 9490. Был достигнут шаг оптовой цены в 10 000 руб.

В админке, в разделе товары создан под-раздел "Шаги оптовых цен", в котором можно их добавлять и редактировать.

Для каждого товара в админке, при редактировании и добавлении, выводятся поля в которых можно указать его скидку для каждого шага. При этом на товар может не распространяться скидки или присутствовать скидка только на определенные суммы(к примеру, есть скидка при достижении 100 тыс руб, но нет скидки для шага в 20 тыс).

Изменение основной цены при достижении скидки на AJAX и при загрузке страницы

Если достигнут один из шагов скидки, то при загрузке страницы товара его основная цена изменяется на соответствующую цену по скидке. Схожим образом выводится цена в карточках товаров по всему сайту. В таблице со скидочными ценами товара(на его странице), достигнутый шаг выделяется цветом.

При добавлении товара в корзину под полем ввода для удобства пользователя показана итоговая цена(20 единиц товара по 9.99 рублей, цена 199,8 рублей). При расчете учитывается достигнутая скидка, плагин сам рассчитает сколько товаров в корзине/сколько на странице/была ли получена скидка и получив итоговую актуальную цену - покажет её пользователю(используя AJAX, без обновления страницы).

Так же пересчитывается цена в корзине и информере корзины в верхнем фиксированном блоке с панелью управления, при редактировании полученных заказов в панели управления. Подробнее о пересчете цены в корзине и заказах далее(в соответствующих разделах).

3.3.2 Фотографии товара

При создании слайдера изображений товаров учитывался огромный ассортимент магазина(более 50 тыс товаров), это неизбежно приводит к работе слайдера с изображениями самых разных пропорций и размеров. От небольших 50x50 и не занимающих целиком блок на странице, до огромных 2000x3000 и снабженных небольшими схематичными элементами(которые нужно максимально увеличивать, не ограничиваясь только размерами окна браузера).

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

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

Слайдер перелистывается движением пальца по миниатюрам, по крупной картинке, по увеличенному изображению в модальном окне. Разумеется, так же обрабатываются и стандартные клики по стрелкам слайдера, плюс на крупных разрешениях можно листать зажав кнопку мыши(перетаскивая).

3.3.3 Описание, характеристики, применение и страница редактирования товара

Описание товара делится собственно на описание, применение(в формате текстовых блоков) и характеристики, которые стоит рассмотреть более подробно.

Большое число товаров предполагает и большое число их характеристик. Так как товары одной категории зачастую обладают схожим набором признаков(характеристик), то в плагине Argon Shop было реализовано прикрепление характеристик к категориям.

То есть при добавлении(и редактировании) характеристики можно выбрать в каким именно категориям она будет относиться, к примеру характеристика "Объем в литрах" может относиться к емкостям. Это упрощает выбор характеристик при редактировании товаров. После выбора категорий к которым относится товар, сразу же(ajax) подгружаются привязанные к ним характеристики.

В плагине реализован выбор категорий для привязки с учетом многоуровневого каталога(в данном случае 4 уровня, может быть и гораздо больше), на странице добавления и редактирования характеристики категории выводятся в форме меню с выпадающими списками. В котором категории второго уровня вложены в категории первого, категории 3-го во второй итд.

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

Присутствует возможность в один клик открепить характеристику от всех категории или наоборот привязать ко всем.

Виды характеристик

Характеристики делятся на два вида, текстовые(на странице редактирования товара название характеристики и текстовое поле для ввода произвольного текстового или числового значения) и предусматривающие выбор из ряда предложенных вариантов(название характеристики и несколько вариантов с чекбоксами на выбор).

Если при добавлении характеристики добавить для неё несколько дочерних, то они и станут этим вариантами для выбора. К примеру, добавляем характеристику "Цвет" и две дочерние для неё "Черный" и "Белый".

Соответственно, если дочерних характеристик у характеристики(первого уровня) нет, её значение предлагается ввести текстом на странице товара.

СТРАНИЦА РЕДАКТИРОВАНИЯ ТОВАРА

Помимо описанного выше функционала добавления характеристик содержит:

  • Поле ввода названия товара
  • Поля ввода текстовых описания(описание и применение, отдельно для каждого города),
  • Ввод цены и веса
  • Ввод единицы измерения(если стандартная для всего магазина не подходит для этого товара)
  • Выбор является ли товар хитом или новинкой
  • Цены по скидкам(подробнее говорилось в пункте 3.3.1 Цена и скидочная система)
  • Добавление изображений для слайдера, выбор порядка их вывода(перетаскиванием), подробнее в 3.3.2 Фотографии товара
  • Добавление миниатюры товара(выводится в карточке товара)
  • CEO поля

Вывод характеристик на странице товара

На странице товара(не в админке, а для покупателей) характеристики выводятся таблицей, название характеристики/её значений. Если для характеристики было добавлено описание она выводится подчеркнутой и со знаком вопроса - при клике появляется описание. Вывод является настраиваемым функционалом самого магазина, а не плагина

4. Корзина покупок

Ключевой концепцией оформления заказа в магазине Строй поставка(и соответственно плагине Argon Shop) является максимальное удобство для клиента и быстрое оформление без лишних кликов.

На странице корзины можно изменить число товаров в заказе и удалить отдельные позиции без обновления страницы(AJAX), здесь же можно выбрать тип заказа(физлица/юрилица) и после указания информации о себе - отправить заказ одним кликом. Не требуются дополнительные клики "пересчитать стоимость" или "перейти к оформлению заказа", любые изменения рассчитываются сразу и отображаются на странице не требуя дополнительных действий от пользователя.

При оформлении заказа можно сразу же пройти регистрацию, для этого достаточно поставить галочку "Зарегистрировать вас" и ввести желаемый логин и email. В таком случае, указанные при заказе данных сохранятся(в дальнейшем их можно будет отредактировать через личный кабинет) и при оформлении новых заказов будут автоматически браться из личного кабинета.

Подробнее о функционале:

4.1 Изменение числа товаров в корзине

При изменении числа одного из товаров(ввод нового значение в поле, клик на "+" или "-") изменения рассчитываются с использованием ajax(без обновления страницы). Изменяется цена и вес(если указан) измененного товара, общая цена и вес всех товаров, происходит расчет достигнут ли один из шагов скидок. Если достигнута скидка, то пересчитываются цены всех товаров в корзине, в таблице на странице изменяются значения цены за единицу товара и общей цены за товар.

Повторюсь, пересчет происходит на AJAX, обновления страницы не требуются. Это так же важно с учетом работы плагина, он предполагает гибкое размещение элементов на странице, не завязан на строгую сетку элементов. То есть у каждого изменяемого значения(вроде цены за единицу определенного товара) есть свой класс, плагин ориентируется именно на него, а где именно будет выводится эта цена и как выглядеть - определяется при разработке конкретного магазина.

Схожим образом происходит удаление товаров из корзины.

Внесенные изменения сохраняются в куки, то есть можно внести изменения в товары находясь в корзине и выйти из неё(продолжить покупки), изменения при этом сохранятся.

В планах на реализацию

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

Важным моментом является добавление товаров в корзину прямо на её странице, подходящая реализация была сделана для редактирования заказов в админке(об этом далее). Это AJAX поиск по названиям товаров, работающий подобно основному поиску на сайте, но с возможностью сразу же добавить найденный товар.

AJAX доработка добавления товаров из блоков "История просмотров", "Хиты продаж", "Новинки" на странице корзины, на текущий момент добавить товары оттуда можно, но потребуются обновить корзину для отображения добавленного товара в списке. Хотя блоки и предложат обновить корзину(при добавлении на её странице) и это можно будет сделать кликом по появившейся кнопке, все таки это является компромиссным с доступным временем решением.

Так же возможны доработки вывода в блоках с хитами и новинками товаров подобных уже добавленным в корзину. Это будет работать по принципу товаров на кассе в супермаркете, но с предложением потенциально интересных именно данному клиенту товаров.

Обработка ошибок и безопасность

Важной частью работы плагина является обработка ошибок и безопасность, у каждого элемента вносящего изменения по AJAX есть персональный блок для вывода ошибки, если при изменении числа определенного товара возникла ошибка на сервере - её невозможно будет не заметить(появится крупная надпись в красной рамке непосредственно под товаром в который вносились изменения).

При отправке заказа происходит итоговое сравнение числа товаров в корзине(куки) и на странице которую видит пользователь, при любых странностях появится уведомление.

Хотя при наличии уверенного интернет-соединения пользователя и хорошего хостинга магазина вероятность ошибки стремится к нулю, их обработке уделяется пристальное внимание.

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

4.2 Оформление заказа

Оформление заказа делится на три вида: краткое оформление, оформление для физических лиц, оформление для юридических лиц. В зависимости от типа пользователя ему по умолчанию будет предложен один из них, для незарегистрированных пользователей - это краткое оформление, для уже прошедших регистрацию - оформление для физлиц или юрлиц(в зависимости от указанной ими в личной кабинете информации). Так же из личного кабинета берется указанная там информация и сразу же вносится в форму(имя, телефон итд), если ранее заказ уже оформлялся(кстати, при оформлении заказа можно сразу пройти регистрацию, об этом далее) и указанные данные взяты оттуда - можно сразу же отправлять заказ не внося дополнительных изменений.

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

Плагин Argon Shop предполагает настройку какой именно тип оформления будет показан в том или ином случае(можно для незарегистрированных пользователей по умолчанию поставить оформление для физлиц вместо краткого)

Настройка полей форм через панель администратора

Поля для всех трех видов настраиваются на странице настроек плагина, здесь можно добавлять и удалять поля отдельно для каждого вида оформления.

Каждое поле содержит настройки: Название поля, Плейсхолдер(текст показывается в поле до его заполнения), Ширина поля, является ли поле обязательным для заполнения

Настройка полей в админке позволяет редактировать их сразу на всех страницах где выводится та или иная группа полей. Помимо корзины это личный кабинет(возможность поменять указанные данные), страница редактирования заказа и другие страницы.

К примеру, в админке мы можем добавить к информации указываемой при оформлении заказа юридическими лицами дополнительно поле "Второй юридический адрес". Данное поле сразу появится в личном кабинете, в соответствующем разделе корзины и при редактировании заказа(подробнее о кабинете и редактировании заказов далее).

Детали плагина, вывод полей при создании темы

Небольшая сноска по выводу форм при создании темы магазина, в большей степени для веб-разработчиков.

Такие поля как название, placeholder, размер поля и его обязательность для заполнения указываются для функции вывода полей(к примеру, получаем и выводим поля из группы юридические лица).

Обязательные поля получают html5 пометку required и дополнительно проверяются на backend перед отправкой формы(на случае если required не обрабатывается браузером).

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

На странице группа полей выводится просто полями(input), каждое поле с заголовком и placeholder(классы для всего можно передать в параметрах функции вывода), функция вывода сама не оборачивает их в форму. То есть при выводе на странице в одну форму можно вывести 2 или 3 группы полей сразу, для полей каждой группы при этом можно задать отличные классы.

Актуально для групп с повторяющимися полями.

К примеру, группа полей для физических лиц: "адрес", "имя", "телефон" и группа полей для юридических лиц: "адрес", "имя", "телефон", "ИНН" и "КПП"

В таком случае в группе с полями для юрлиц можно оставить только ИНН и КПП.

В корзине, форма для юрлиц будет выводится в виде: FORM поля для физлиц + поля для юрлиц + другие поля . /FORM

Удобно так же при выводе полей в личном кабинете, где на странице редактирования данных(магазин Стройпоставка) только одна форма и в зависимости от выбора чекбокса "Юридическое лицо" в неё добавляются или нет поля для юридических лиц.

Стоит отметить, концепция плагина позволяет максимально широко настроить магазин и его тему под конкретные задачи. Группы полей могут полностью отличаться между собой, верстка корзины и компоновка её элементов не имеет строгого шаблона, эти же принципе распространяются на личный кабинет(про личные кабинет подробнее далее, в соответствующем разделе) и другие разделы сайта.

Прикрепление изображений и регистрация при заказе

При оформлении заказа к нему можно прикрепить несколько файлов. Тип файлов, их размер(максимальный общий размер и размер одного файла) и количество файлов настраиваются при выводе формы(возможность плагина). Так же можно настроить при каком типе оформления можно прикреплять файлы, на сайте Стройпоставка это физлица и юрлица.

Прикрепление файлов происходит по AJAX(после прикрепления показывается название загруженных файлов и их размер, или ошибка в случае превышение числа файлов/размера итп). При добавлении файлов можно выбрать сразу несколько(зажав shift или ctrl для Windows).

Регистрация происходит при выборе флажка зарегистрировать вас, в таком случае предлагается ввести желаемый логин, пароль будет выслан вместе с информацией о заказе на почту(при выборе "Зарегистрировать вас" поле email в форме так же становится обязательным).

Указанная при заказе информация в таком случае сразу же сохранится и в дальнейшем будем доступна для редактирования через личный кабинет, в который будет предложено перейти сразу после оформления заказа(произойдет автоматическая авторизация на сайте).

4.3 Отправка заказа

После оформления каждому заказу присваивается уникальный номер, это актуально для отслеживания статуса заказа и внесения в него изменений незарегистрированными пользователями. Для зарегистрированных, как ранее говорилось, будет предложено перейти в личный кабинет(где можно просмотреть заказ и его текущий статус).

Информация по заказу выводится на странице, после его оформления и отправляется на почту(если почта была указана). Письмо содержит детальную информацию: товары в заказе(число, стоимость) и ссылки на них, номер заказа, пароль/логин(если была регистрация) , прикрепленные файлы, информацию по редактированию/отслеживанию товара и другое. Схожее письмо(конечно не содержащее пароль пользователя) отправляется администратору магазина.

5. Личный кабинет и регистрация/авторизация на сайте

Личный кабинет делится на три вкладке, это редактирование данных пользователя(имя, адрес, телефон итд), настройки аккаунта(изменения пароля и почты) и список заказов с их текущими статусами(+фильтр заказов по статусам).

Помимо регистрации при заказе(об этом говорилось ранее, "Прикрепление изображений и регистрация при заказе") на сайте можно зарегистрироваться при клике на "Мой кабинет". Если пользователь не авторизован на сайте произойдет перенаправление на страницу регистрации/авторизации WP, в данном случае используется базовый функционал WP(вместе со всеми его мерами безопасности).

Отличается перенаправление пользователя после входа/выхода с сайта, при входе администраторы направляются в админку, пользователи в личный кабинет. При выходе все перенаправляются на главную страницу.

+Небольшие косметические меры, в форму регистрации WP был установлен логотип магазина Строй поставка, для единой стилистики.

Стоит отметить, ID страниц кабинета и корзины указываются в настройках плагина и перенаправление в данном случае произойдет именно на указанную в настройках страницу.

Подробнее по вкладками на странице личного кабинета и их возможностям:

5.1 Аккаунт и адрес

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

Сохранение данные происходит на AJAX, без обновления страницы.

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

5.2 Настройки

На данной вкладке, можно изменить email и пароль. Работа формы классическая(достаточно простая), изменение происходит после указания старого пароля, новый пароль нужно указать дважды. Это полностью отличный от стандартного личного кабинета WP функционал(на верхнем уровне, безопасность и API для сохранения данных используются те же самые), ключевым преимуществом которого является встраивание на любую страницу сайта за пределами админки.

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

Форма обрабатывается без обновления страницы, ошибки при вводе данных в поля формы выводятся под тем полем где была допущена та или иная ошибка(то есть, неправильно ввели подтверждение пароля, под полем "повторите новый пароль" выводим ошибку "новый пароль и его подтверждение не совпадают"), общие ошибки формы(к примеру, отсутствие ответа от сервера) выводятся под кнопкой сохранить формы.

5.3 Заказы и статусы заказов

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

Можно воспользоваться AJAX фильтров и выбрать только заказы с определенным статусом(к примеру, только новые). Это актуально для крупных оптовых покупателей.

Управление статусами заказов происходит в админ панели, об этом далее.

В планах на разработку

На текущий момент, информация по заказам в личном кабинете в плагине представлена минимально, детальная информация по каждому заказу и возможность его редактировать доступна только менеджеру магазина через админ панель(об этом далее). Редактирование заказа клиентом предполагается через связь клиента с менеджером, магазин информирует об этом после оформления заказа в корзине.

В дальнейшем, планируется расширить функционал в личном кабинете, выводить детальную информацию по каждому заказу и дать возможность редактировать каждый заказ(со своей спецификой, вроде редактирования только заказов с определенным статусом и пре-модерации - выделения в админке отредактированных заказов). Выглядеть это будет в формате отдельной страницы для каждого заказа в клиентской части магазина, со ссылками на эти страницы в существующем списке заказов(с учетом специфики пользовательских типов записей WP, по сути эти страницы уже есть, но требуют серьезной проработки).

6. Работа с заказами и статусами заказов в панели администратора

Работа с заказами в панели администратора происходит в одноименной вкладке в меню, создаваемой плагином Argon Shop. Здесь можно отслеживать заказы и вносить в них изменения.

Страница со списком заказов в панели администратора

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

Присутствует возможность фильтрации заказов по статусам и датам, массовая работа с заказами(редактирование или удаление).

Статусы заказов

Важным моментом являются статусы заказов(Новый/Выполнен), возможность их свободного добавления и редактирования существующих, единственное исключение статус заказа "Новый"(он должен быть, так как по умолчанию присваивается новым заказам, но и его можно переименовать).

Редактирование статусов заказов происходит в подразделе "Заказы" -> "Статусы Заказов". Добавленный статус автоматически станет доступен для выбора на странице редактирования отдельного заказа(выбор его текущего статуса) и появится в фильтрах заказов по статусам(в личном кабинете и в админке). В фильтре в личном кабинете пользователя статус будет отображаться если он присвоен хотя бы одному из его заказов.

Страница отдельного заказа в панели администратора

Заказ содержит список товаров в нем, данные пользователя оставившего заказ и элементы управления(изменить статус/удалить заказ итп).

Число каждого товара можно изменить(2 стула вместо 1), товар можно удалить из заказа. Встроенный ajax поиск позволяет по названию или артикулу найти товары магазина и добавить их к заказу. Нужно просто ввести название нужного товара и кликнуть + рядом с его названием в появившемся результате поиска.

В полях "информация от заказчика" отображаются те данные которые были оставлены при осуществлении заказа, все данные можно отредактировать(к примеру, если клиент хочет изменить адрес доставки). Недостающие поля можно добавить воспользовавшись особым функционалом плагина. Можно выбрать одну из категорий полей(для физических и юридических лиц) и добавить отсутствующие поля оттуда(просто выбрать нужную категорию в раскрывающемся списке и нажать добавить).

Напомню что группы полей(такие как поля для физлиц) редактируются через админку в разделе настройки магазина.

Помимо выше сказанного доступно так же удаление или архивирование заказа, смена типа доставки/оплаты, выбор статуса заказа.

7. Новости, акции и статьи

Три похожие друг на друга новостные ленты с простым минималистичным оформлением, построены в основном на стандартном функционале WP(записи).

Новости представляют из себя каталог материалов, то есть главная категория "Новости" где приводятся превью всех материалов(краткое описание и ссылка читать далее) и вложенные в неё категории("Сухие смеси", новости по сухим смесям). Уровни вложенности категорий(рубрик) друг в друга не ограничены, для вложенных категорий можно добавить изображение.

Для каждой новости присутствует отдельная страница, где приводится её изображение(миниатюра, она же выводится в общем списке материалов) и текст(может быть с видео и другими изображениями).

Статьи похожи на новости, исключение облако тегов, для каждой статьи можно указать метки(хештеги, её отличительные особенности) которые будут выводится облаком тегов(чаще встречающаяся метка выводится более крупным шрифтом) в блоке под меню сайта. Облако тегов выводится на странице со списком всех статей, странице отдельной статьи и странице с материалами по метке(каждая метка является ссылкой на страницу со статьями в которых она была выбрана).

Акции в отличии новостей и статей имеют отдельный раздел "Архив", где выводятся материалы у которых был выбрано состояние "акция устарела"(выбрать можно на странице редактирования акции в админке).

Так же акции не имеют каталога, только две страницы со списком материалов(с актуальными и неактуальными акциями), плюс отдельная страница для каждой акции. Ссылка на них дается под меню и в каталоге выводимом на главном(там так же выводятся заголовки нескольких актуальных акций, если они есть).

Акции для всех городов(на текущий момент Москва и Истра) различны, добавляются в разные категории и выводятся на отдельных страницах.

В админке акции, статьи и новости добавляются/редактируются схожим образом. В отличии от добавления товаров здесь минимум функционала. Присутствует только блок для ввода текста(текстовый редактор, позволяющий вставлять картинки, видео, выбирать шрифты/размеры текста и другое), выбор категории в которой относится материал, выбор меток и актуальности материала(для акций). Так же выбирается миниатюра записи(типовой функционал WP).

8. Разное

Страница о компании

На странице реализовано три отдельных текстовых блока(О компании, Наши преимущества и Наши клиенты), логотипы(возможно логотип-ссылки) и сертификаты для слайдера добавляются через админку.

Меню сайта

В панели администратора можно добавлять, удалять и редактировать пункты меню в шапке(фиксированном блоке) и подвале сайта используя специальный функционал WP. Меню каталога формируется из категорий первого уровня и их изображений.

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

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

Дизайн и программирование: Иван Войтков