Глава 3. Коридор открытого интерфейса

[10 ноября 2016 г.]    Российская сборка Magento 2.49.12
Magento 2: модули и услуги
#1 Надежда А
  • Иконка
  • Группа: Администратор
  • Сообщений: 50
  • Регистрация: 12.12.2010

01.07.2011 01:28

Зазеркалье

Magento состоит из двух различных интерфейсов. Существует публичный интерфейс, который открыт для всех, кто посещает веб-сайт, и административный интерфейс, который можно увидеть только тем, кто имеет доступ.
Рисунок 3-1 показывает быстрый взгляд на оба интерфейса.

Прикрепленное изображение: 1.png

Прикрепленное изображение: 2.png
Рисунок 3-1. Сверху общий интерфейс Magento. Снизу интерфейс администрирования. Интерфейс администрирования не доступен для общественности.

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

Прикрепленное изображение: 3.png
Рисунок 3-2. Крупный план главной страницы демо-магазина Magento и пронумерованный список разделов, по которым вы будете проходить.


Заголовок страницы

Как показано на рисунке 3-3, верхняя часть магазина Magento является заголовком страницы. Заголовок страницы предоставляет некоторые важные функции для ваших клиентов. Он также включает в себя приветствие, которое можно настроить, чтобы предоставить клиентам уникальное приветствие.

Прикрепленное изображение: 4.png
Рисунок 3-3. Заголовок страницы Вашего Magento магазина включает строку поиска, выбор языка, а также несколько account ссылок.

Вы можете заменить Magento Demo Store логотип на логотип вашей компании на левой стороне страницы заголовка. Для получения дополнительной информации о том, как заменить этот логотип, вы можете обратиться к главе 8.
С правой стороны есть строка поиска. Клиенты могут искать товары, используя ключевые слова или путем поиска текста, используемого в описании товара. Как администратор, у вас есть возможность настроить условия поиска, которые можно использовать на вашем сайте. Это означает, что если кто-то ищет MP3-плеер, вы можете направлять их либо на конкретные MP3-плееры, которые вы хотите продвигать, либо на категорию MP3 плеер.
Ниже приветствие - несколько ссылок, направленных на обеспечение клиентов дополнительной информацией. Они включают в себя следующее:
• My Account: Эта ссылка позволяет пользователям просматривать их историю заказов, раз0мещать повторные заказы товара и просматривать информацию об аккаунте. Этот раздел включает адреса, связанные с их аккаунтом, списки товарных обзоров, и управление подпиской на рассылку.
• My Wishlist: Если клиенты не готовы купить товар, то они могут добавить его в свой список пожеланий. После добавления товаров в список клиенты могут просмотреть свой список пожеланий, нажав на ссылку "My Wishlist" или "My Account " в заголовке.
• My Cart: Клиенты могут просматривать, обновлять и удалять товары, которые они добавили в свою корзину. Клиенты также имеют возможность приступить к оформлению –заказа на странице My Cart.
• Checkout: Эта ссылка будет принимать клиентов непосредственно к процессупокупки с любыми товарами, которые они в настоящее время имеют в своей корзине.
• Login: Как только они зарегистрированы, постоянные клиенты имеют возможность войти на сайт. Зарегистрированные пользователи могут сохранить объекты в своей корзине и списке пожеланий. Регистрация также позволяет клиентам подписаться на получение рассылок. Зайдя на сайт, эта ссылка изменится на кнопку выхода.
Под списком ссылок есть также выпадающее меню, которое отображает текущий язык Magento демо-сайта. Magento предлагает гибкость, предлагая ваш онлайн-магазин на нескольких языках без необходимости установки нескольких копий Magento на других языках. По умолчанию, Magento включает три языка: английский, французский и немецкий. Если одного из этих языков не хватает, вы можете скачать один из 63 дополнительных языков на http://www.magentoco...agento-connect.


Категории и просмотры категорий

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

Прикрепленное изображение: 5.png
Рисунок 3-4. Расширенное изображение категорий и подкатегорий корневого уровня. Magento имеет раскрывающиеся меню уже встроенным.

Каждая категория и подкатегория имеют целевую страницу, похожую на показанное на рисунках 3-4 и 3-5. Есть целый ряд различных разделов на страницах целевой категории (category landing). Целевые страницы отображают до загружаемого изображения категории, опций сортировки категории и товарных списков в каждой категории.

Прикрепленное изображение: 6.png
Рисунок 3-5. Страница целевой категории (category landing), которая отображает изображение категории, возможности сортировки и товары, перечисленные в этой категории.

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

Прикрепленное изображение: 7.png
Рисунок 3-6. Показывает две различные схемы, в которых товары могут быть показаны, макеты сетки и стиля списка. Это позволяет полную гибкость, как клиенты просматривают ваш сайт.

Клиенты также могут контролировать, как товары выводятся путем выбора опций фильтра на левой стороне экрана. Опции вывода на экран перечислены под заголовком SHOP BY. Опции фильтра могут включать в себя цену, цвет и производителя. Чтобы применить эти фильтры, просто нажмите на одну из ссылок. Клиенты могут применить несколько фильтров для списков категории. Чтобы удалить эти фильтры, просто нажмите опцию очистить все элементы (см. рисунок 3-7).

Прикрепленное изображение: 8.png


Прикрепленное изображение: 9.png
Рисунок 3-7. Показывает несколько примеров опций фильтрации, отображаемые под разделом shop by. Информация на этом рисунке была взята из информации, содержащейся в установке образца данных (sample data installation).

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

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

Без сомнения страница товара является наиболее важной страницей в вашей электронной коммерции. Страницы товара позволяют вам передавать важную информацию о вашей продукции клиентам. Как показано на рисунке 3-8, страницы товара содержат описание товаров, ценообразование и дополнительные фотографии. Magento предлагает следующие опции при создании страницы товара:
• Изображения товара: Magento позволяет загружать несколько изображений ваших товаров. Клиенты также могут увеличивать и показывать товары больше, чем предоставляемая область, предполагая, что JavaScript включен на компьютере клиента.
• Описания товара: Есть два типа описаний товаров: краткий обзор и описание товара. Эти секции используются для описания товара подробно и предоставляют клиентам всю информацию, которая им, возможно, необходима для того, чтобы сделать информированную покупку.
• Цена товара: Magento имеет возможность включать стандартные цены на товары и указывать цены для определенных групп клиентов. Цены могут быть также установлены на основе произведения количества на предлагаемые оптовые скидки. Мы подробнее обсудим клиентские группы и групповое ценообразование в главе 6.
• Дополнительная информация: Данный раздел используется для предоставления дополнительной технической информации, которая возможно должна быть обычно включена в краткий обзор или описание товара.
• Теги товара (Product tags): Страницы товара отображают теги, которые были назначены для каждого товара. Клиенты могут перейти на другие товары, которые делят один и тот же тег.
• Опции товара: Magento предоставляет вам гибкость, чтобы дать продукты дополнительные опции. Эти параметры настраиваются на специфику продукта и включают в себя такие примеры, как размеры, цвета и размеры.
• Отзывы о товаре: Клиенты могут оценивать и делать отзыв о товаре на индивидуальной основе. Администраторы имеют возможность редактировать и удалять каждый отзыв.
• Upsell товары: Upsell товары, перечисленные в разделе "Вас также может заинтересовать следующий товар (ы)". Это позволяет содействовать формированию соответствующих товаров на каждой странице товара.
Прикрепленное изображение: 10.png
Рисунок 3-8. Это крупный план страницы товара. Каждый из разделов, в том числе быстрые описания, описания товара и дополнительной информации являются обновляемыми и настраиваемыми.


Сравнение товаров

Еще одна интересная особенность, которую включает в себя Magento, - это предоставление клиенту возможности сравнить товары бок о бок. Клиенты могут сравнить не только цены между двумя элементами, но они также могут сравнить другую информацию, такую как описание товаров, единицы складского хранения товаров и другие настраиваемые параметры.
Для сравнения элементов клиенты должны сначала добавить товар, используя кнопку «сравнить», которая находится либо на странице категории, либо на странице товара. Также стоит отметить еще раз, что если у клиента выключен JavaScript, он не будет иметь возможность сравнить продукцию. После того, как клиент имеет более одного пункта в своей области сравнения товаров, он может сравнить товары. Клиенты также имеют возможность "распечатать эту страницу", если они захотят, чтобы сравнить товары (см. рисунки 3-9 и 3-10).

Прикрепленное изображение: 11.png

Прикрепленное изображение: 12.png
Рисунок 3-9. Товары необходимо сначала добавить в список сравнения, нажав на ссылку внизу кнопки добавления в корзину. Клиенты должны добавить как минимум два товара в их список сравниваемых пунктов прежде, чем они смогут они могут сравнить товары.

Прикрепленное изображение: 13.png
Рисунок 3-10. Окно сравниваемых товаров. Здесь клиенты могут сравнивать различные товары и детали товара.


CMS страницы и статические блоки

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

Прикрепленное изображение: 14.png

Рисунок 3-11. Это страница CMS. Она позволяет предоставлять клиентам важную информацию о вашем магазине.

Magento также предоставляет другую форму управления контентом, называемую статическими блоками. Статические блоки - отличный способ реализуемого редактируемого содержания на вашем веб-сайте. Колонтитул (footer), показанный на рисунке 3-12, является прекрасным примером того, как использовать статические блоки. Колонтитул, как и другие статические блоки, полностью редактируем внутри административной части Magento. Статические блоки могут быть использованы для новостей, анонсов предстоящих мероприятий и обновления веб-сайта. Если вы понимаете основы HTML и PHP, вы можете разместить статические блоки в любом месте вашего сайта.

Прикрепленное изображение: 15.png
Рисунок 3-12. Колонтитул веб-сайта – это статический блок, и он может быть отредактирован через административный интерфейс Magento.


Процесс оформления заказа

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

Прикрепленное изображение: 16.png
Рисунок 3-13. Корзина. Это последняя остановка перед началом процесса оформления заказа. Клиенты могут обновить товары, ввести дисконтные коды и получить калькуляцию на доставку.


Шаг 1: Метод оформления заказа

Как только клиенты просматривают свою корзину и нажимают кнопку приступить к оформлению заказа (Proceed toCheckout), им будет представлен процесс оформления заказа на одной странице Magento. Первым в этом процессе клиенты должны либо оформить заказ в качестве гостя, либо зарегистрироваться или ввести Логин информацию, если они возвращаются клиентам. Magento позволяет отключить для клиентов возможность оформления заказа с позиции гостя. Эта функция может быть отключена из административной части Magento (см. Рис 3-14).

Прикрепленное изображение: 17.png
Рисунок 3-14. Шаг 1 процесса оформления заказа на одной странице. Клиенты имеют возможность войти, зарегистрироваться или оформить заказ в качестве гостя.


Шаг 2: Информация по счетам

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

Прикрепленное изображение: 18.png
Рисунок 3-15. Шаг 2 из процесса оформления заказа на одной странице. Клиенты должны ввести свою платежную информацию.


Шаг 3: Информация по доставке

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

Прикрепленное изображение: 19.png
Рис 3-16. Шаг 3 из процесса оформления заказа на одной странице контроля. Клиенты должны ввести свою информацию по доставке.


Шаг 4: Способ доставки

На этом этапе клиенты должны выбирать способ доставки для продолжения процесса оформления заказа. Magento предоставляет полный контроль над опциями доставки. Администраторы могут не только контролировать, какие действия доставки доступны, но точно определяют, сколько должна стоить доставка. Magento также имеет встроенные UPS и FedEx онлайн калькуляторы доставки. Это позволяет котрировки по доставке в режиме реального времени, как UPS и FedEx онлайн калькуляторы доставки. Клиенты также могут ввести подарочное сообщение, если их покупка – подарок (см. Рис 3-17).

Прикрепленное изображение: 20.png
Рисунок 3-17. Шаг 4 процесса оформления заказа на одной странице. Клиенты должны ввести свою информацию по доставке.


Шаг 5: Способ оплаты

В шаге 5 клиенты должны выбрать способ оплаты из предоставленного списка. По умолчанию, Magento предлагает несколько различных вариантов оплаты, включая интеграцию с authorize.net, Google Checkout, целевыми заказами, чеками и денежными переводами и кредитными картами, хранящимися в автономном режиме ручной обработки. Есть также более 200 различных модулей оплаты, доступных на http://www.magentoco...magentoconnect. Для получения дополнительной информации об установке и настройке расширений обратитесь к главе 10
(см. Рис 3-18).

Прикрепленное изображение: 21.png

Рисунок 3-18. Шаг 5 процесса оформления заказа на одной странице. Выбор способа оплаты для покупки.


Шаг 6: Обзор заказа

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

Прикрепленное изображение: 22.png
Рис 3-19. Шаг 6 из процесса оформления заказа на одной странице. Клиенты должны пересмотреть заказ и подтвердить его.

На данный момент клиенты могут изменить любую другую информацию, прежде чем они подтвердят свой заказ. Как только клиенты разместили свои заказы, они будут перенаправлены на страницу подтверждения заказа. По электронной почте клиенту и администратору магазина Magento будет отправлено письмо. Если клиенты выбирают регистрацию во время оформления заказа и не оформляют заказ в качестве гостя, они могут просматривать свою информацию о заказе, используя свою ссылку My Account.


Доставка по нескольким адресам

Одной из интересных особенностей Magento является то, что клиенты имеют возможность поставлять заказы с несколькими товарами на несколько адресов. Хотя это может показаться странным, Magento делает большую работу по упрощению процесса. После выбора места для каждого из товаров в свои заказы, товары реорганизуются путем назначения. Клиенты могут даже выбрать различные методы доставки по разным каналам. Заказы затем обрабатываются и дают уникальные номера заказов на основании их назначения.
Доставка по нескольким адресам не доступна для гостей, так что в отличие от основного процесса оформления заказа, клиенты должны зарегистрироваться прежде, чем они смогут начать оформлять заказ. Если перевозка груза по нескольким адресам не является функцией, которую вы хотите использовать в вашем магазине, администраторы могут отключить доставку по нескольким адресам изнутри административного интерфейса.


Шаг 1: Выбор адресов

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

Прикрепленное изображение: 23.png
Рис 3-20. Шаг 1 процесса доставки заказа на несколько адресов. Клиенты назначают конкретный адрес доставки для каждого товара и количества.


Шаг 2: Информация по доставке

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

Прикрепленное изображение: 24.png
Рис 3-21. Шаг 2 процесса доставки заказа на несколько адресов. Magento реорганизует заказы на основании адреса доставки, выбранного в шаге 1.


Шаг 3: Платежная информация

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

Прикрепленное изображение: 25.png
Рис 3-22. Шаг 3 процесса доставки на несколько адресов. Выбор платежного адрес и способа оплаты.


Шаг 4: Размещение заказа

Как только клиенты ввели информацию, им предоставляется страница обзора заказа. На этой странице отображаются платежная информация, способ оплаты, информация по доставке и итоги для каждого из заказов, которые вот-вот будут размещены. Для удобства управления Magento отделяет каждый уникальный адрес доставки в новом заказе. Клиент будет нагружаться только один раз, но разделение каждого заказа адресом доставки позволяет легко обновлять и отслеживать товар (см. рисунок 3-23).

Прикрепленное изображение: 26.png
Рис 3-23. Шаг 4 процесса доставки заказа на несколько адресов. Клиенты должны пересмотреть свои заказы до завершения процесса.


Шаг 5: Успех заказа

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

Прикрепленное изображение: 27.png
Рис 3-24. Шаг 5 процесса оформления заказа на несколько адресов. Процесс заказа завершен.

Все, рассмотренное в этой главе в связи с общим интерфейсом, полностью настраиваемо, и мы подробно остановимся на том, как настроить общий интерфейс в главе 9.


Что дальше?

Вот и все для общего интерфейса, но это только половина Magento. В главе 4 вы будете рассматривать подобный взгляд на административный интерфейс. Как только Ваш магазин был разработан и построен, административный интерфейс, вероятно, где вы будете проводить большую часть вашего времени, обозревает ваш сайт и заказы.
Если вы уже знакомы с административным интерфейсом, и вы ищете, чтобы перейти в магазин и настроить его удалением всей демо информации и функциональности, пожалуйста, посмотрите в главе 8.

Поделиться темой: