Автор оригинала: Max Kostinevich.
В этой статье я покажу вам, как создать и добавить простой социальный доказательств/Fomo Widget в магазин Shopify. Вместо использования третьего приложений мы будем вытащить список или недавно приобретенные элементы, используя действительно простую функцию без сервеса, которые мы будем размещать на работниках CloudFlare бесплатно.
Итак, какое социальное доказательство/Fomo виджет?
Я уверен, что вы видели эти виджеты много раз на разных магазинах электронной коммерции.
Целью таких виджетов является увеличение скорости преобразования, доверия и доверия. На рынке много виджетов, их функциональность и дизайн довольно похожи друг на друга, и они довольно дороги (особенно если вы просто начинаете свой интернет-магазин).
Итак, давайте сделаем наш собственный виджет социального доказательства в трех простых шагах.
Шаг № 1 – Создайте новое приложение для частного шоу
Во-первых, нам нужно создать частное приложение Shopify, которое позволяет нам получить доступ к данным нашего магазина через API. Чтобы сделать это, войдите в свою палителю Admin Dashboard и перейдите в Приложения → Управление частными приложениями → Создать новое частное приложение , заполните все необходимые поля (например, имя приложения и адрес электронной почты), и убедитесь, что приложение разрешено читать Заказы Информация:
После сохранения приложения вы можете захватить свои учетные данные приложений (вам понадобится эти учетные данные на следующем шаге), как показано на скриншоте ниже:
Шаг № 2 – Создать новый работник CloudFlare
Итак, что Dealflare рабочий является? Короче говоря, Dealflare работника – это контейнер, который позволяет вам запустить функцию без сервеса, написанную в Node.js. «Смертный» означает, что вам не нужно иметь сервер для этой функции или даже подумать о конфигурации контейнера – все сделано CloudFlare для вас.
Если вы не работали с CloudFlare раньше, вам нужно подписаться на Cloudflare.com и перейти к рабочему каталогу.
Затем создайте новый работник со следующим исходным кодом:
А затем введите учетные данные приложений, которые вы создали на предыдущем шаге:
Итак, что делает эту функцию? Эта функция выполняет каждый раз, когда она получает Получить Запрос и читает последние 50 заказов из вашего магазина. Поскольку мы не хотим выставлять информацию с частной заказа (например, электронную почту клиента и другую конфиденциальную информацию), мы возвращаем отфильтрованные данные, которые включают в себя имя клиента, город клиента и приобретенный товар. Эти данные будут использоваться самим виджетом.
Шаг № 3 – добавить виджет в свою тему Shopify
После того, как вы создали работник CloudFlare, вам нужно войти в свою пакет Dashboard Admin Shopify и перейти на Интернет-магазин → Темы → Редактировать код текущей темы и создать новый Widget.js Файл внутри /Активы/ каталог со следующим контентом:
А потом вам нужно добавить следующий код перед закрытием Тег в Theme.liquid файл:
Не забудьте заменить URL-адрес актуальным URL-адресом вашего работника CloudFlare. Если вы сделали все правильно, вы должны увидеть что-то вроде этого в вашем магазине Shopify:
Исходный код доступен на Github Gist и на CodeSandbox Отказ
Вы можете взглянуть на живую демонстрацию здесь Отказ
Несколько примечаний:
- Для демонстрационных целей я не добавил изображения продукта и ссылки на продукты к этому виджету, поскольку эта информация не включена в загрузку полезной нагрузки, поэтому она потребует дополнительного запроса API в нашей функции безвесочной, чтобы получить всю эту информацию.
- Я также не включил в реальное время покупки, поскольку новые заказы будут редко добавлены в демонстрационный магазин.
Не стесняйтесь Свяжитесь со мной Если вам нужна помощь с настройкой или настройкой этого виджета.
Этот пост был первоначально опубликован на мой сайт Отказ