Написано DJ Walker Отношения с разработчиками
Опубликовано 18 мая 2018 года в Beyond static , Frontend пятница

Представьте себе: 2018 год, вашему клиенту нужен интернет-магазин. Вы знаете, что статичные сайты великолепны: они легко масштабируются, имеют минимальную поверхность атаки и очень быстры. Однако, поскольку статический сайт не может выполнять внутренний код, он не сможет делать некоторые вещи, необходимые для электронной коммерции, такие как обработка заказов клиентов. Можете ли вы действительно использовать статический сайт для управления витриной электронной коммерции?

Конечно вы можете! Используя внешние сервисы для тяжелой работы и подключая их к нашему статическому сайту с помощью JavaScript, мы можем делать все что угодно с нашим статическим сайтом!

Для статических сайтов нашими лучшими вариантами добавления электронной коммерции являются Snipcart и Shopify Buy Buttons. Оба варианта имеют разные преимущества, но для наших целей отличительной особенностью Snipcart является его адаптивность к любой контент-стратегии.

Смотрите, кнопки Shopify Buy Buttons работают, предоставляя вам фрагменты кода, которые вы можете скопировать и вставить на свой сайт, чтобы отобразить продукт и позволить пользователю добавить его в свою корзину. Чтобы использовать это эффективно, вам необходимо адаптировать свою контент-стратегию к этому ограничению. Snipcart, напротив, узнает о ваших продуктах из атрибутов данных в HTML вашего сайта. Пока вы предоставляете некоторые важные данные , все на вашем сайте может стать продуктом Snipcart!

Другими словами, нам пришлось бы адаптировать наш рабочий процесс, чтобы приспособиться к Shopify , но Snipcart адаптируется к нам.

Easynetshop кстати это такая же кнопка причем отечественная! Она заточена для онлайн оплаты яндексом, и робокассой, стоит всего 0/290/490 рублей и там доступна оплата ваших товаров через русские агрегаторы! это яндекс деньги, робокасса, киви, и тоже карточки. ИТАК snipcart более заточена на Зарубежные системы оплаты, причем в ней есть в бесплатном тестовом режиме больший функционал, а Easynetshop заточена а том числе на Отечественные системы оплаты, недорогая, хоть и с меньшими фичами в бесплатном режиме.

а пока, Snipcart опубликовал подробное сравнение своей кнопки с другими зарубежными кнопками, но статья не об этом, так что, сравнение с Русской кнопкой будет в следующих статьях либо каждый может сам самостоятельно попробовать ее: Easynetshop

Эта запись блога покажет вам, как легко интегрировать Snipcart с веб-сайтом Hugo. Мы также будем использовать Forestry CMS, чтобы завершить работу с пользовательским интерфейсом управления продуктами.

Демо-проект

Сопровождающий этот пост в блоге - образец веб-сайта Hugo, который интегрирует Snipcart, чтобы обеспечить интерфейс электронной коммерции. Попробуйте демонстрацию в реальном времени, чтобы понять, как работает Snipcart, или посмотрите на исходный код, чтобы увидеть, как это было сделано. Если вы хотите начать прямо сейчас, вы можете импортировать этот демонстрационный сайт в лесное хозяйство с помощью кнопки ниже. Обязательно настройте свой ключ API после импорта сайта, чтобы включить функции Snipcart.

Сделайте это сами, Импортируйте нашу демонстрацию Snipcart

Начальная загрузка проекта

Мы используем Create Static Site для настройки нового проекта Hugo с готовым к сборке конвейером. Мы можем вызвать create-static-site с помощью npx :

npx create-static-site snipcart-hugo - шаблон hugo

Это создаст новый проект в snipcart-hugo/ .

Посмотрите наш пост в блоге о начале работы с Create Static Site для получения дополнительной информации об использовании этой утилиты.

Если вы не хотите использовать создание статического сайта для своего проекта, вы можете просто использовать команду нового сайта Hugo для инициализации нового сайта Hugo. Обратите внимание, что все пути к файлам, на которые мы ссылаемся, имеют префикс site/ из-за соглашений о создании статического сайта. Ваши пути к файлам будут немного отличаться, если вы используете ванильную установку Hugo.

Начало работы с Snipcart

Чтобы протестировать демонстрационный проект, вам необходимо предоставить ключ API Snipcart. Чтобы получить его, зарегистрируйтесь в учетной записи Snipcart и войдите в панель управления. Оттуда перейдите в раздел API Keys настроек вашей учетной записи. Вам будет представлен ваш открытый ключ API тестовый . Мы собираемся сохранить этот ключ в наших параметрах сайта в файле site/config.toml , чтобы мы могли отредактировать его позже в Forestry, если мы хотим:

тестовая версия snipcart включает в себя весь свой функционал, в т.ч. расчет доставки и скидки, даже статистика заказов ведется, но только по 30 дней, вобщем доступно все кроме онлайн оплаты, а как только вы прикрепили карту, то если не получится отключить флажок LIVE/TEST через 30 дней вам выставят счет в $32.36

 [ params ] snipcart_test_api_key = "YOUR-API-KEY" snipcart_live_api_key = ""

Замените YOUR-API-KEY на открытый ключ API тестирования из своей учетной записи Snipcart.

Обратите внимание, что здесь мы объявили два значения: snipcart_test_api_key и snipcart_live_api_key . Когда вы будете готовы к запуску, вы также добавите свой действующий ключ API здесь.

Ваш ключ API тестирования должен работать в большинстве локальных сред разработки. Однако если это не работает, попробуйте добавить домен среды разработки в разделе « Домены и URL-адреса » в настройках учетной записи.

Чтобы встроить необходимые сценарии Snipcart, мы добавим следующее в site/layouts/partials/head.html перед закрывающим тегом head :

<!-- snipcart assets -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" id="snipcart" data-api-key="
  {{- if eq (getenv "HUGO_ENV") "development" -}}
  {{ .Site.Params.snipcart_test_api_key }}
  {{- else -}}
  {{ .Site.Params.snipcart_live_api_key }}
  {{- end -}}
"></script>
<link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" type="text/css" rel="stylesheet" />

Мы используем переменную HUGO_ENV для загрузки ключа API тестирования в нашей среде разработки и ключ API в нашей производственной среде. Это позволит нам продолжать тестировать нашу реализацию в среде разработки, используя ключ API тестирования, даже после запуска нашего магазина.

Если вы уже импортировали демо-версию в Forestry, вам нужно войти в панель управления сайтом и перейти в раздел « Параметры сайта», чтобы добавить свой ключ API.

Импортируйте нашу демонстрацию Snipcart

API Key Security

Хотя я размыл ключ на скриншоте, ключ API, который вы получаете от Snipcart, является открытым ключом API. Этот ключ вставляется прямо в HTML. Поскольку этот ключ уже общедоступен, можно добавить этот ключ непосредственно в ваше git-репо.

Настройка наших продуктов

Давайте добавим новый раздел контента для продуктов, добавив каталог products разделе site/content . Здесь будут храниться файлы markdown, определяющие каждый продукт.

Хранение продуктов в отдельном разделе контента позволит легко определить макеты для конкретных продуктов. Создайте файл с именем single.html в site/layouts/products для использования в качестве шаблона для отдельного продукта.

Определение продукта :

Для работы с Snipcart нашим продуктам понадобятся некоторые конкретные вопросы, например, цена продукта. В качестве примера, вот site/content/products/axe.md из демо-проекта:

+++
cartImage = "/uploads/2018/05/15/axe-thumb.jpg"
date = "2018-05-15T18:53:23Z"
image = "/uploads/2018/05/15/axe.jpg"
price = 50
shortDescription = "Swing with purpose."
title = "Axe"
+++

Параметр price необходим, а параметры shortDescription и cartImage улучшат процесс покупки, если они будут заполнены.

Определение валюты вашего магазина

Snipcart не требует, чтобы валюта была определена с ценой. Вы можете установить валюту для своего магазина в разделе « Региональные настройки » на панели инструментов Snipcart.

Наш демонстрационный проект также включает настройку валюты в разделе « Параметры сайта» . Это используется только для определения того, как отображать цену в наших шаблонах. Чтобы настроить способ отображения цен в выбранной вами валюте, вы можете изменить частичную цену .

Чтобы помочь нашим пользователям в создании продукта, мы могли бы создать архетип для продуктов, который будет инициализировать эти специальные поля переднего вопроса, когда мы создаем продукт с помощью команды hugo new . Однако поскольку мы используем Forestry, вместо этого мы создадим шаблон Front Matter в Forestry, который будет настраивать пользовательский интерфейс с соответствующими полями всякий раз, когда кто-то создает новый продукт.

Добавление кнопки покупки

Это руководство посвящено разметке, необходимой для работы нашего проекта со Snipcart. Посмотрите демонстрационный проект, чтобы получить полный исходный код.

Мы можем использовать атрибуты данных, чтобы включить варианты «добавления в корзину» для любого элемента HTML. Для нашего шаблона продукта site/layouts/products/single.html мы прикрепим такие данные к кнопке:

<button
    class="snipcart-add-item"
    data-item-id="{{ .URL }}"
    data-item-name="{{ .Title }}"
    data-item-price="{{ .Params.price }}"
    data-item-url="{{ .Permalink }}"
    {{ with .Params.shortDescription }}
    data-item-description="{{ . }}"
    {{ end }}
    {{ with .Params.cartImage }}
    data-item-image="{{ . | absURL }}"
    {{ end }}
>
Buy {{ .Title }}
</button>

Класс snipcart-add-item говорит Snipcart прослушивать щелчок по этому элементу. Атрибуты data-item-id , data-item-name , data-item-price и data-item-url необходимы, чтобы сообщить Snipcart, какой продукт следует добавить в корзину. Остальные атрибуты являются необязательными.

URL товара

Атрибут data-item-url должен указывать на место, где отображаются данные о продукте Snipcart. Поскольку каждый продукт размещен на отдельной странице, это всего лишь URL-адрес текущего продукта.

URL элемента очень важен: поскольку мы просто вставляем цену продукта в HTML, любой может отредактировать документ, чтобы изменить цену, и, таким образом, заплатить за продукт все, что он хочет. Snipcart мешает этому, сделав собственный запрос на URL товара, чтобы проверить цену товара.

Идентификатор товара

Идентификатор товара должен однозначно идентифицировать ваш продукт для Snipcart. Однако, помимо уникальности для этого продукта, идентификатор не должен быть чем-то конкретным. Поскольку URL-адрес продукта также должен быть уникальным для продукта, имеет смысл использовать его и для идентификатора продукта.

Есть еще несколько атрибутов, которые вы можете выбрать для своих продуктов. Проверьте документацию по определению продукта Snipcart, чтобы увидеть все варианты.

После добавления этой разметки в шаблон single.html у вас должна быть работающая кнопка покупки на страницах вашего продукта. Вам не нужно добавлять эти продукты на панель инструментов Snipcart - Snipcart автоматически подберет их, когда пользователь добавит их в свою корзину.

Если вы хотите сразу увидеть все свои продукты в Snipcart, вы можете использовать интерфейс Fetch Products, и Snipcart будет сканировать ваш сайт, чтобы выбрать любые продукты, определенные на странице. Этот нетрадиционный подход к управлению продуктом делает Snipcart легко адаптирующимся к любой контент-стратегии.

Усовершенствование: добавление пользовательских параметров продукта

На данный момент у нас уже есть действующий магазин на нашем статическом сайте! Однако одна функция, которую вы, возможно, захотите добавить: настраиваемые параметры для ваших продуктов. Это было бы полезно, если у вас есть настраиваемые продукты или продукты, которые имеют различные вариации, такие как размер или цвет. Snipcart предоставляет способ добавления настраиваемых полей в ваш продукт через атрибуты данных настраиваемых полей.

Мы собираемся использовать функцию Forestry Blocks для определения некоторых пользовательских типов полей. Это позволит нам указать любое количество пользовательских полей для каждого отдельного продукта.

В демонстрационном проекте я создал несколько шаблонных шаблонов Front Matter: параметрs text-option, paragraph-text-option , checkbox-option , simple-dropdown-option и advanced-dropdown-option (позволяют изменять цену продукта на основе выбранного варианта). Все они совместно используют шаблон base-product-option котором есть обязательные поля для настраиваемой опции: имя, и то, требуется ли оно. После того, как мы настроили наши частичные шаблоны, нам нужно добавить поле блоков в наши products Front Matter Template.

Осталось только реализовать эти опции в нашем шаблоне. Мы собираемся перебрать каждую опцию и включить разные части в зависимости от того, какой шаблон Front Matter используется опцией. Если вы читали в нашем блоге сообщение о блоках и демонстрационной теме Sawmill, этот шаблон «петли блоков» покажется вам знакомым. Новый HTML для нашей кнопки Snipcart выглядит следующим образом:

<button
    class="button is-primary snipcart-add-item"
    data-item-id="{{ .URL }}"
    data-item-name="{{ .Title }}"
    data-item-price="{{ .Params.price }}"
    data-item-url="{{ .Permalink }}"
    {{ with .Params.shortDescription }}
    data-item-description="{{ . }}"
    {{ end }}
    {{ with .Params.cartImage }}
    data-item-image="{{ . | absURL }}"
    {{ end }}
    {{ with .Params.customOptions }}
        {{- range $index, $option := . -}}
        {{ safeHTMLAttr (partial (printf "custom-options/%s" .template) (dict "Index" (add 1 $index) "Option" $option)) }}
        {{- end -}}
    {{ end }}
>
Buy {{ .Title }}
</button>

В этом случае мы загружаем partial из site/layouts/partials/custom-options/ с именем файла, совпадающим с именем шаблона Front Matter. Таким образом, custom опция, использующая шаблон advanced-dropdown-option будет использовать частичную часть, расположенную в site/layouts/partials/custom-options/advanced-dropdown-option.html. Мы обертываем это в вызов safeHTMLAttr потому что наши partials будут выводить атрибуты HTML на кнопку Snipcart.

Для краткости мы не будем вдаваться в реализацию каждой из этих частичных функций, но все, что они делают, это некоторые дополнительные атрибуты данных, чтобы Snipcart мог понять пользовательские параметры. Например, text-option partial:

data-item-custom{{ .Index }}-name="{{ .Option.name }}"
{{- if .Option.required -}}
data-item-custom{{ .Index }}-required="true"
{{- end -}}

Наши атрибуты данных настраиваемого поля соответствуют формату data-item-custom<number>-<attribute> , где <number> обозначает параметр, а <attribute> является одним из атрибутов, которые настраивают поле.

Взгляните на partials пользовательских параметров, чтобы увидеть, как мы сделали все остальное.

Дополнительная информация о том, как настроить пользовательские параметры с атрибутами данных, доступна в документации Snipcart.

Выходим в продакшен.

Переключите панель управления Snipcart на «Live», чтобы получить доступ к настройкам продакшена и ключу API. Когда вы будете готовы начать работу, вам просто нужно сгенерировать snipcart_live_api_key API-ключ и ввести его в поле snipcart_live_api_key в файле site/config.toml или в параметрах вашего сайта в лесном хозяйстве.

до генерации live key можно использовать оба test key

Вам также необходимо добавить домен вашего рабочего сайта в раздел «Домены и URL-адреса» в настройках учетной записи Snipcart (именно так Snipcart не позволяет другим сайтам использовать ваш открытый ключ API!)

Чтобы создать действующий ключ API, вам необходимо ввести платежную информацию и подключить платежный шлюз. Для получения более подробной информации, смотрите документацию Snipcart

Исходный текст (английский): https://forestry.io/blog/snipcart-brings-ecommerce-static-site/