Shopify Checkout Extensibility — это современный фреймворк, заменяющий checkout.liquid для мерчантов Plus, который позволяет выполнять безопасные настройки оформления заказа, не подверженные сбоям при обновлениях. Используя UI-компоненты и Shopify Functions, разработчики могут изменять процесс оплаты без риска для стабильности и производительности основного платежного потока. Это изменение платформы гарантирует, что пользовательская логика останется совместимой с будущими обновлениями, создавая стабильную среду для высоконагруженных магазинов, которым требуется специализированное поведение чекаута.
Почему Shopify отказывается от checkout.liquid?
Годами checkout.liquid предоставлял возможность внедрения пользовательского кода в процесс оформления заказа. Однако эта гибкость несла в себе серьезные риски для стабильности и производительности магазина. Когда Shopify обновлял свои серверные системы, магазины с сильно измененными файлами checkout.liquid часто сталкивались с поломкой функционала или требовали ручного обслуживания кода для восстановления основных функций. Новый фреймворк Extensibility решает эту проблему, предоставляя контролируемую среду. Вместо редактирования «сырого» кода разработчики теперь используют предопределенные компоненты, которые напрямую взаимодействуют с API Shopify. Это гарантирует, что логика чекаута остается отделенной от интерфейса оформления заказа, предотвращая конфликты при выпуске платформой новых обновлений.
Каковы основные компоненты этого фреймворка?
Архитектура Shopify Checkout Extensibility опирается на два главных столпа: UI Extensions и Shopify Functions. UI Extensions позволяют добавлять пользовательские поля, баннеры или точки сбора данных прямо в процесс оформления заказа. Они создаются с использованием React и выполняются в изолированной среде, гарантируя, что ошибка скрипта в одном компоненте не сможет обрушить весь процесс чекаута. Shopify Functions, в свою очередь, отвечают за бизнес-логику. Они позволяют запускать пользовательский код на стороне сервера для манипулирования скидками, тарифами доставки и способами оплаты на основе конкретных условий, таких как теги клиентов или содержимое корзины. Вместе эти инструменты предоставляют структурированный способ работы со сложными требованиями к оформлению заказа.
Как начать внедрение расширений для чекаута?
Для начала убедитесь, что ваш магазин находится на плане Shopify Plus, так как эта функция зарезервирована для мерчантов с большими объемами продаж. Вам потребуется настроить среду разработки с помощью Shopify CLI. CLI является основным инструментом для создания, тестирования и развертывания ваших расширений. После настройки локальной среды вы можете выбирать из различных целей расширения, таких как страница оформления заказа, страница благодарности или страница статуса заказа. Обычным паттерном для типичного аккаунта является использование этих целей для отображения информации о программе лояльности, предложения динамических вариантов доставки или сбора дополнительных предпочтений клиента до завершения заказа.
Сравнение устаревшего checkout.liquid и checkout extensibility
| Функция | checkout.liquid | Checkout Extensibility |
|---|---|---|
| Доступ к коду | Полный доступ к liquid | Компоненты на базе приложений |
| Риск обновления | Высокий (критические изменения) | Низкий (управляется платформой) |
| Производительность | Переменная | Оптимизированная/Стабильная |
Как Alien Road применяет Shopify Checkout Extensibility
В Alien Road наш подход начинается с фазы исследования, на которой мы проверяем ваши текущие требования к чекауту на соответствие возможностям нового фреймворка. Мы определяем, какие кастомные скрипты могут быть мигрированы в приложения или функции, а какие необходимо переписать с нуля с использованием UI-компонентов. Например, если клиенту нужно отображать поля для пользовательских поздравительных сообщений, мы создаем специальное UI-расширение, которое собирает эти данные и записывает их в атрибуты заказа. Затем мы используем Shopify Functions, чтобы гарантировать правильную передачу этих атрибутов через конвейер выполнения заказа. На протяжении всего этого процесса мы поддерживаем четкую документацию для каждого развернутого расширения, гарантируя, что ваша команда понимает логику каждого внедряемого нами изменения.
Каковы распространенные варианты использования функций чекаута?
Shopify Functions особенно эффективны для автоматизации сложных бизнес-правил, которые раньше было невозможно реализовать с помощью простых промокодов. Вы можете использовать их для создания кастомной логики доставки, например, предлагая бесплатную экспресс-доставку только для определенных почтовых индексов или категорий товаров. Другим частым применением является расширенная настройка платежей, где вы можете скрывать или показывать платежные шлюзы в зависимости от общей суммы заказа или статуса учетной записи пользователя. Эти функции выполняются за миллисекунды, гарантируя, что покупатель не столкнется с задержками во время оформления заказа, и при этом предоставляя индивидуальный опыт, соответствующий логике вашего бренда.
Как управлять новыми компонентами чекаута и развертывать их?
Развертывание осуществляется через панель партнеров Shopify или с помощью CLI. Как только ваши расширения будут готовы, вы можете предварительно просмотреть их в магазине разработки, чтобы убедиться, что пользовательский интерфейс соответствует рекомендациям вашего бренда. Вам следует выполнить следующие шаги для обеспечения плавной миграции с текущей настройки чекаута на новую систему:
- Проведите аудит существующего liquid-кода для выявления необходимого функционала.
- Настройте Shopify CLI и создайте свое первое UI-расширение.
- Протестируйте отдельные компоненты в среде магазина разработки.
- Используйте Shopify Functions для обработки требований серверной логики.
- Выполните развертывание в продакшн-магазине и отслеживайте показатели производительности.
Контрольный список для успешной миграции
Переход с устаревших liquid-файлов — это масштабный проект, требующий планирования. Перед началом убедитесь, что ваши сторонние приложения совместимы с новой архитектурой чекаута, так как некоторые старые приложения могут зависеть от более ранних методов интеграции. Убедитесь, что ваша команда дизайнеров финализировала требования к UI, так как компоненты должны соответствовать стандартной дизайн-системе, предоставляемой фреймворком расширений. Если вы работаете с конфиденциальными данными, подтвердите, что ваши функции используют соответствующие области видимости API для поддержания стандартов безопасности. Типичный аккаунт проводит несколько недель в фазе тестирования, чтобы убедиться, что все краевые случаи, такие как расчеты международных налогов или многовалютный чекауты, покрыты корректно.
- Проверьте статус Shopify Plus и доступ к функциям.
- Задокументируйте каждый кастомный скрипт, присутствующий в checkout.liquid в данный момент.
- Сопоставьте каждый скрипт с UI Extension или Shopify Function.
- Проведите регрессионное тестирование всех платежных шлюзов.
- Проверьте пользовательский интерфейс чекаута как на мобильных устройствах, так и на ПК.
Часто задаваемые вопросы
Доступна ли Shopify Checkout Extensibility для всех планов?
Нет, эта функция в настоящее время доступна исключительно для мерчантов на плане Shopify Plus. Она разработана для обеспечения контроля и гибкости, необходимых для высоконагруженных бизнесов, которым нужно изменять процесс оформления заказа без ущерба для стабильности магазина. Мерчантам на более низких планах следует проверить свой текущий набор функций в панели администратора Shopify, чтобы увидеть доступные варианты настройки.
Заменяет ли это весь liquid-код в чекауте?
Да, Shopify Checkout Extensibility предназначена для замены checkout.liquid. Платформа движется к модели, в которой все настройки оформления заказа обрабатываются через приложения и расширения. Это изменение призвано гарантировать, что ваш чекаут останется функциональным и безопасным, даже когда Shopify выполняет фоновые обновления своей базовой платформы. Вам следует запланировать миграцию на эти новые инструменты для обеспечения долгосрочной совместимости.
Могу ли я по-прежнему использовать существующие приложения для чекаута?
Большинство современных приложений Shopify уже совместимы с новой архитектурой чекаута. Однако, если вы используете более старые приложения, которые полагались на внедрение liquid-кода на страницу оформления заказа, вам может потребоваться обновить их или найти альтернативы. Вам следует проконсультироваться с разработчиком приложения или документацией Shopify App Store, чтобы подтвердить, поддерживает ли конкретное приложение новые компоненты Extensibility.
С чего начать на этой неделе?
Начните эту неделю с аудита вашей текущей страницы оформления заказа. Определите каждый кастомный элемент, который в настоящее время требует перезаписи через liquid. Получив этот список, обратитесь к официальной документации Shopify по UI Extensions и Shopify Functions, чтобы узнать, какие инструменты подходят под ваши нужды. Если процесс кажется вам сложным, подумайте о том, чтобы обратиться в партнерское агентство для руководства внедрением, гарантируя, что ваш чекаут останется производительным и полностью соответствующим текущим требованиям платформы.
Читать далее: Электронная коммерция · Электронная коммерция