Наше интерактивное меню превращает ваш сайт в интернет-магазин.
Написано Харрисом Цимом, Китом Чу и Matthias Reichenbach.
Внимание, мы переехали! Если вы хотите и дальше быть в курсе последних технических материалов Square, посетите наш новый сайт https://developer.squareup.com/blog.
Три недели назад мы представили нашим продавцам встроенные меню. С тех пор тысячи продавцов встроили витрины своих магазинов (также известные как меню) на свои сайты, чтобы стимулировать продажи. Мы получили много отличных отзывов и услышали общую тему: сделать процесс встраивания еще более упорядоченным и эффективным. Сегодня мы запускаем Menu Embed v2, который добавляет поддержку корзины покупок.
В первоначальном выпуске, когда покупатель нажимал на элемент в меню продавца, он попадал на страницу этого элемента на Square Market. Этот поток отталкивал покупателей от сайтов продавцов, а также делал покупку нескольких товаров излишне утомительной. Мы значительно улучшили опыт с сегодняшним выпуском. Когда покупатель нажимает на товар, отображается адаптивное модальное окно, чтобы он мог настроить свой заказ прямо на сайте продавца.
Мы также включили вкладку корзины в правой части сайта. При нажатии на нее выдвигается корзина покупок, чтобы клиенты могли легко редактировать и просматривать свою покупку перед оформлением заказа.
Когда они будут готовы, клиенты могут просто оформить заказ через поток white label в Маркете.
Хьюстон, у нас проблема с дизайном
Когда мы приступили к созданию встраиваемых меню, мы столкнулись с техническими трудностями, ограничивающими гибкость дизайна. Например, у некоторых продавцов есть крошечные меню, что ограничивает пространство, с которым нам приходится работать. Это представляет собой проблему: как показать вспомогательную информацию о каждом элементе? Представьте магазин сэндвичей, в котором продается только один товар — назовем его «Сэндвич», — но он бывает разных размеров (маленький, средний, большой) и имеет несколько разных модификаторов (добавьте майонез, уберите соленые огурцы, дополнительный сыр). Наши дизайнеры экспериментировали с рядом подходов, но обеспечить отличный опыт для всех вариантов содержимого меню оказалось сложной задачей. В конце концов мы согласились, что открытие модального окна с дополнительной информацией было правильным подходом.
Вы можете задаться вопросом: «Открыть модальное окно несложно, так почему же вы не сделали этого с самого начала?» Надежное решение этой проблемы оказалось не таким тривиальным, как мы изначально думали! Встроенный iframe занимает небольшую область, которая отображается вместе с остальной частью сайта продавца. Открытие модального окна требует доступа ко всей области просмотра браузера, а не только к части внутри iframe. Если мы просто изменим размер iframe, это не только вызовет раздражение у зрителя, но и может быть нарушена целостность дизайна сайта продавца. Мы думали об открытии двух окон iframe, чтобы сделать взаимодействие более плавным, но у этого решения было несколько серьезных подводных камней.
История нескольких фреймов
Использование нескольких iframe во многих случаях является жизнеспособным решением, если встраивание не слишком сложное. Как только определенный порог перейден, все быстро усложняется. Проблема усугубляется тем, что использование нескольких фреймов может потребовать многократной инициализации полноценных веб-приложений. В нашем случае такой подход не только значительно увеличил бы время загрузки как для сервера, так и для браузера, также стало бы все более проблематично синхронизировать данные между фреймами. Поддержание согласованности данных в хранилище данных — очень сложная задача информатики, даже если масштаб на стороне клиента может быть относительно меньшим.
Взрыв iframe
Square стремится к элегантности как в проектировании, так и в реализации дизайна. Поскольку использование нескольких iframe не обеспечивает оптимального взаимодействия, мы придумали решение, которое: взрыв iframe. Взяв скрипт, который мы встроили на страницу, мы фиксируем положение iframe так, чтобы он заполнил область просмотра, а затем скрыли его содержимое. При этом мы можем показать модальное окно, которое кажется тесно интегрированным с сайтом, на котором оно встроено.
Тем не менее, возникла новая проблема: если мы поместим iframe вне потока документа, содержимое страницы рухнет, разрушив иллюзию. Даже если бы мы могли удерживать положение iframe, нам еще предстояло найти способ сохранить меню на месте и реагировать так, чтобы оно убедительно выдерживало взаимодействие. Как мы это сделали, подробно описано ниже и довольно просто, но потребовались бесчисленные часы рендеринга и оптимизации производительности, чтобы все чувствовалось правильно.
Когда покупатель щелкает элемент в меню, скрипт на странице создает временный заполнитель с теми же размерами, что и iframe. iframe незаметно расширяется до размера области просмотра и открывает модальное окно. Затем стили заполнителя передаются обратно в iframe и применяются к исходному меню, поэтому создается впечатление, что меню по-прежнему зафиксировано на месте под модальным окном. Поскольку взорванный iframe расположен в верхней части сайта, мы можем перехватить щелчок, когда покупатель хочет закрыть модальное окно. Результатом является прекрасное решение, которое сохраняет наши стандарты проектирования и дизайна.
Демо
Этот небольшой фрагмент кода…
<a href="https://mkt.com/boba-guys"
data-menu-item-images="small"
data-menu-item-template="column"
data-menu-item-descriptions="show"
class="sq-embed-menu">Order Online</a>
<script src="https://cdn.sq-api.com/market/embed.js" charset="utf-8"></script>
Если вы хотите протестировать этот опыт со своим собственным меню, начните с входа в вашу панель управления.
Что дальше?
Мы продолжим создавать встроенные решения мирового уровня для вашего бизнеса. Если у вас есть какие-либо отзывы о том, как мы можем улучшить и настроить встроенные меню, сообщите нам об этом!
