Добро пожаловать назад 👋 … Это часть 2 этой серии. Если вы пропустили часть 1, щелкните ссылку выше 👆.
Ранее на…
Частично мы видели то, что и почему нашего приложения, и мы закончили с нашими Определение приложения Конфигурация на кончанном веб-приложении.
Теперь нам нужно установить приложение в наше пространство/среду и ассоциировать его с помощью поля ввода.
Установка приложения в вашем пространстве
Внутри ваших деталей приложения вы сможете установить приложение в вашем пространстве, нажав на правильную CTA.
Здесь вам нужно определить пространство и окружение
(Ваше пространство и окружение могут быть разными)
Не делайте мою ошибку, поскольку в нашем предыдущем эпизоде мы определили местоположение интерфейса как http://localhost: 300 , вам нужно приложение, запущенное на вашей локальной машине, в противном случае установка потерпит неудачу.
Теперь нажмите на кнопку установки, и вы должны увидеть сообщение успеха. Вы только что установили приложение в вашем пространстве, теперь мы можем использовать его 🥳 🥳.
Определите внешний вид нашего поля.
Как предпосылка, я предполагаю, что вы уже знакомы с Containful, и я пропущу часть создания типа содержимого. Я создал образец «Test Commerce Selector» типа содержимого, в котором мы собираемся определить поле типа JSON Object Отказ
Выбор правильного типа поля важен, в противном случае наше приложение не будет видно. В части 1 в нашем определении приложения мы определили местоположение поля ввода в качестве объекта JSON, поэтому нам нужно выбрать этот тип.
Давайте определимся сейчас имя нашего поля и нажмите Создать и настроить кнопка.
Я пропускаю все возможные конфигурации на этом поле, наше внимание находится на вкладке «Внешний вид».
Если приложение установлено правильно, вы должны увидеть его рядом с поведением/внешним видом на по умолчанию.
Нам нужно выбрать его, определить наш параметр экземпляра с выбранной опцией URL и, наконец, подтвердить конфигурацию. Вот как мы говорим, чтобы удовлетворить наше настраиваемое приложение для этого конкретного поля.
(«Тип» – это параметр экземпляра, определенный в нашем этапе определения приложения.)
Мы можем увидеть результат нашей настройки, если мы попытаемся создать запись для нашего типа контента.
«Здравствуйте, поле входа в полевой компонент» говорит 🤔 🤔 … Если вы помните в папке наших компонентов, у нас есть куча файлов .tsx, давайте откроем Field.tsx компонент.
import React from "react"; import { Paragraph } from "@contentful/forma-36-react-components"; import { FieldExtensionSDK } from "@contentful/app-sdk"; interface FieldProps { sdk: FieldExtensionSDK; } const Field = (props: FieldProps) => { // If you only want to extend Contentful's default editing experience // reuse Contentful's editor components // -> https://www.contentful.com/developers/docs/extensibility/field-editors/ returnHello Entry Field Component ; }; export default Field;
Давайте изменим возвращение компонента и посмотрим, что произойдет.
const Field = (props: FieldProps) => { // If you only want to extend Contentful's default editing experience // reuse Contentful's editor components // -> https://www.contentful.com/developers/docs/extensibility/field-editors/ returnThis is my commerce selector custom field ; };
Как только вы сохраните, вы увидите обновленный вывод в кончаще веб-приложении.
В следующем эпизоде …
Вау … Это было очень быстро, но пока так хорошо. Мы создали приложение, установили его и определили поле с нашим пользовательским внешним видом. В части 3 мы поговорим о Commerce.js, определите некоторые фиктивные продукты и начнем работать над нашим местоположением конфигурации приложения.
Оставайтесь 📻 ❤️.
Оригинал: “https://dev.to/wiommi/how-i-built-a-contentful-app-combined-with-commerce-js-ii-1k6g”