Рубрики
Без рубрики

Как я построил кончальное приложение в сочетании с Commerce.js (ii)

Добро пожаловать назад 👋 … Это часть 2 этой серии. Если вы пропустили часть 1, щелкните ссылку выше 👆. … Теги с кончальным, JavaScript, CMS, CommerCejs.

Добро пожаловать назад 👋 … Это часть 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/
  return Hello 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/
  return This 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”