Электронная коммерция
С помощью Astro вы можете создать несколько вариантов электронной коммерции, от ссылок для оформления заказа до “размещенных” страниц оплаты, и до создания целого магазина с использованием API платежного сервиса.
Оверлей обработки платежей
Заголовок раздела Оверлей обработки платежейНекоторые сервисы обработки платежей (например, Lemon Squeezy, Paddle) добавляют форму оплаты, чтобы ваш клиент мог совершать покупки на вашем сайте. Они могут быть размещены поверх содержимого или встроены на страницу вашего сайта. Они могут предлагать некоторую базовую настройку или брендинг сайта и могут быть добавлены в ваш проект Astro в виде скриптов, кнопок или внешних ссылок.
Lemon Squeezy
Заголовок раздела Lemon SqueezyLemon Squeezy - это универсальная платформа для платежей и подписок с поддержкой мультивалютности, глобального налогообложения, интеграцией с PayPal и многим другим. Она позволяет создавать и управлять цифровыми товарами и услугами через панель управления учетной записью и предоставляет URL-адреса товаров для процесса оформления заказа.
Базовая JavaScript-библиотека Lemon.js позволяет продавать ваши продукты Lemon Squeezy с помощью ссылки для оформления заказа.
Базовое использование
Заголовок раздела Базовое использованиеНиже приведен пример добавления элемента Lemon Squeezy “Купить сейчас” на страницу Astro. При нажатии на эту ссылку откроется окно оформления заказа и посетитель сможет совершить одну покупку.
-
Добавьте следующий тег
<script>
на вашу страницу вhead
илиbody
: -
Создайте ссылку на странице, указав URL-адрес вашего продукта. Включите класс
lemonsqueezy-button
, чтобы при нажатии открывался оверлей оформления заказа.
Lemon.js
Заголовок раздела Lemon.jsLemon.js также предоставляет дополнительные возможности, такие как программное открытие оверлеев и обработка событий оверлеев.
Paddle
Заголовок раздела PaddlePaddle - это решение для выставления счетов за цифровые товары и услуги. Он обрабатывает платежи, налоги и управление подписками через оверлей или встроенное оформление заказа.
Paddle.js - это легковесная JavaScript-библиотека, которая позволяет создавать полноценные, интегрированные варианты подписной оплаты с использованием Paddle.
Базовое использование
Заголовок раздела Базовое использованиеНиже приведен пример добавления элемента “Купить сейчас” Paddle на страницу Astro. При нажатии на эту ссылку откроется окно оформления заказа, и посетитель сможет совершить одну покупку.
После того как ваш домен платежной ссылки по умолчанию (ваш собственный веб-сайт) будет одобрен Paddle, вы можете превратить любой элемент на вашей странице в триггер для оверлея оформления заказа с помощью атрибутов данных HTML.
-
Добавьте следующие два тега
<script>
на вашу страницу вhead
илиbody
: -
Превратите любой элемент на вашей странице в кнопку Paddle Checkout, добавив класс
paddle_button
: -
Добавьте атрибут
data-items
, чтобы указатьpriceId
иquantity
вашего продукта Paddle. Вы также можете дополнительно передавать другие поддерживаемые атрибуты данных HTML для предзаполнения данных, обработки успешного оформления заказа или стилизации вашей кнопки и оверлея оформления заказа:
Paddle.js
Заголовок раздела Paddle.jsВместо передачи атрибутов данных HTML вы можете отправлять данные в оверлей оформления заказа с помощью JavaScript для передачи нескольких атрибутов и еще большей настройки. Вы также можете создавать рабочие процессы обновления с помощью встроенного оформления заказа.
Полнофункциональные решения электронной коммерции
Заголовок раздела Полнофункциональные решения электронной коммерцииДля более гибкой настройки корзины покупок на вашем сайте и процесса оформления заказа вы можете подключить более полнофункционального поставщика финансовых услуг (например, Snipcart) к вашему Astro проекту. Эти платформы электронной коммерции также могут интегрироваться с другими сторонними сервисами для управления учетными записями пользователей, персонализации, инвентаризации и аналитики.
Snipcart
Заголовок раздела SnipcartSnipcart - это мощная платформа для интернет-магазина на HTML/JavaScript.
Snipcart также позволяет интегрироваться со сторонними сервисами, такими как службы доставки, включать вебхуки для продвинутой интеграции электронной коммерции между вашей корзиной покупок и другими системами, выбирать из нескольких платежных шлюзов (например, Stripe, Paypal и Square), настраивать шаблоны электронной почты и даже предоставляет живую среду тестирования.
Хотите получить готовое решение Snipcart? Посмотрите astro-snipcart
, полностью функциональный шаблон сообщества Astro, включающий опциональную систему дизайна, готовый к интеграции с вашим существующим аккаунтом Snipcart.
Базовое использование
Заголовок раздела Базовое использованиеНиже приведен пример настройки оформления заказа Snipcart и добавления кнопок “Добавить в корзину” и “Оформить заказ сейчас” на страницу Astro. Это позволит вашим посетителям добавлять товары в корзину без немедленной отправки на страницу оформления заказа.
-
Добавьте скрипт как показано в инструкциях по установке Snipcart на вашу страницу после элемента
<body>
. -
Настройте
window.SnipcartSettings
с любыми доступными настройками Snipcart, чтобы контролировать поведение и внешний вид вашей корзины. -
Добавьте
class="snipcart-add-item"
к любому HTML-элементу, например, к<button>
, чтобы добавить товар в корзину при нажатии. Также включите любые другие элементы данных для общих атрибутов товаров Snipcart, таких как цена и описание, а также любые необязательные поля. -
Добавьте кнопку оформления заказа Snipcart с классом
snipcart-checkout
, чтобы открыть корзину и позволить гостям завершить покупку с помощью модального окна оформления заказа.
Snipcart JavaScript SDK
Заголовок раздела Snipcart JavaScript SDKSnipcart JavaScript SDK позволяет вам программно конфигурировать, настраивать и управлять вашей корзиной Snipcart.
Это позволяет вам выполнять такие действия, как:
- Получать необходимую информацию о текущей сессии Snipcart и применять определенные операции к корзине.
- Прослушивать входящие события и динамически запускать обратные вызовы.
- Прослушивать изменения состояния и получать полный “снимок” состояния корзины.
astro-snipcart
Заголовок раздела astro-snipcartЕсть два созданных сообществом пакета astro-snipcart
, которые могут упростить использование Snipcart.
-
@lloydjatkinson/astro-snipcart
Astro-шаблон: Этот шаблон Astro включает в себя опциональную систему дизайна для полноценного решения электронной коммерции из коробки. Узнайте больше на его собственном обширном сайте документации, включая мотивацию созданияastro-snipcart
как предоставление удобного, нативного для Astro способа взаимодействия с API Snipcart. -
интеграция
@Adammatthiesen/astro-snipcart
: Эта интеграция была сильно вдохновленаastro-snipcart
и предоставляет компоненты Astro (или компоненты Vue), которые вы можете добавить в ваш существующий проект Astro для создания продуктов, управления корзиной и многого другого. Более подробную информацию можно найти в полном руководстве.