あなたのストアは、contentfulでより強力に作る

インpart 1 あなたが設定したこのシリーズのMedusa あなたのCMSシステムとしてcontentfulで、ギャツビーの店頭を追加しました.この部分では、Contentfulにさらに導入を取得し、どのように学ぶ medusa-plugin-contentful あなたのストアをより強力にするために活用することができます.フロントページ、製品ページ、チェックアウトフローとは別に、ほとんどのeコマースストアはまた、約と連絡先ページのような誤ったページが必要です.このガイドでは、このページをクールにすることができますので、リッチテキストコンテンツモジュールをあなたのcontentful空間に追加されます.また、どのようにコンテンツモジュールを使用して製品のページをより多くの生活を与えるために使用することができます.
あなたがこのガイドで何をするか

リッチテキストコンテンツモジュールを追加する

リッチテキストをあなたの/about ページ

あなたの製品ページに「関連製品」セクションを加えてください

トピック

満足のいく移行

製品濃縮

リッチテキストコンテンツモジュールの作成
このガイドで使用するContentful Migrations あなたの内容が時間とともに進化する方法のバージョン管理された記録を保つために.Contentfulアプリでは、彼らのダッシュボードから直接コンテンツモデルを作成することができますが、あなたが1にできるようになる移行ツールを使用するとすぐにあなたのcontentful空間を複製し、2)CI/CDパイプラインの一部として移行を組み込む.You can read more about how to use CMS as Code here .
移行を準備するには、新しいファイルを作成しますcontentful-migrations/rich-text.js 次のコードを追加します.

// contentful-migrations/rich-text.js

module.exports = function (migration, context) {
  const richText = migration
    .createContentType("richText")
    .name("Rich Text")
    .displayField("title");

  richText.createField("title").name("Title (Internal)").type("Symbol");
  richText.createField("body").name("Body").type("RichText");
};

この小さなスニペットは、2つのフィールドを持つContentful空間でコンテンツモデルを作成します:意味のある方法でエントリを名前するのに使用されるタイトル(つまり、顧客に表示されません)と、表示するリッチテキストを含む本体です.移行を実行するには、次の手順に従います.

yarn migrate:contentful --file contentful-migrations/rich-text.js

Contentful空間に移動し、コンテンツモデルをクリックすると、リッチテキストモデルがスペースに追加されていることがわかります.

ページモデルの妥当性検査規則は、ヒーローとタイルのセクションをContent - modulesフィールドに追加するだけでよいので、別のマイグレーションを必要とし、ページが新しいリッチテキストモジュールを利用できるようにする必要があります.で新しい移行contentful-migrations/update-page-module-validation.js 次の行を追加します.

// contentful-migrations/update-page-module-validation.js

module.exports = function (migration, context) {
  const page = migration.editContentType("page");

  page.editField("contentModules").items({
    type: "Link",
    linkType: "Entry",
    validations: [
      {
        linkContentType: ["hero", "tileSection", "richText"],
      },
    ],
  });
};

スペースの移行後、新しいコンタクトページを作成できます

yarn migrate:contentful --file contentful-migrations/update-page-module-validation.js

リッチテキストの追加
新しいリッチテキストモジュールのコンテンツ＞Page＞を使用して、コンテンツを追加するページをクリックします.今、あなたのストアについての詳細を追加するには、新しいリッチテキストモジュールを使用します.あなた自身のテキストを書くことができますまたはコピー/ペーストする場合は、以下のテキストを使用します.

About Medusa

Medusa is an open-source headless commerce engine for fast-growing businesses. Getting started with Medusa is very easy and you will be able to start selling online with a basic setup in no time, however, the real power of Medusa starts showing up when you add custom functionality and extend your core to fit your needs.

The core Medusa package and all the official Medusa plugins ship as individual NPM packages that you install into a Node project. You store and plugins are configured in your medusa-config.js file making it very easy to manage your store as your business grows. Custom functionality doesn't have to come from plugins, you can also add project-level functionality by simply adding files in your src/ folder. Medusa will automatically register your custom functionalities in the bootstrap phase.

テキストを追加すると、発行の変更をクリックすることができます.

リッチテキストモジュールをサポートするためのストアフロントの更新

If you want to jump straight to the final frontend code visit medusajs/medusa-contentful-storefront@part-2.

新しく作成されたリッチテキストモジュールを表示するにはsrc/components/rich-text/rich-text.jsx .

// src/components/rich-text/rich-text.jsx

import React from "react"
import { renderRichText } from "gatsby-source-contentful/rich-text"

import * as styles from "../../styles/rich-text.module.css"

const RichText = ({ data }) => {
  return (
    <div className={styles.container}>
      <div className={styles.content}>
        {data.body ? renderRichText(data.body) : ""}
      </div>
    </div>
  )
}

export default RichText

The renderRichText 関数はgatsby-source-contentful 簡単にHTMLにリッチテキストモジュールで入力テキストを変換するプラグイン.リッチテキストコンポーネントをレンダリングするにはsrc/styles/rich-text.module.css .

/* src/styles/rich-text.module.css */

.container {
  display: flex;
  padding-top: 100px;
  padding-bottom: 100px;
}

.content {
  margin: auto;
  max-width: 870px;
}

今すぐあなたのStorefrontサーバーを再起動する場合は、まだあなたの新しいリッチテキストモジュールを見ることができなくなります.最後に作成する最後の手順は、ページのコンポーネントがページのコンテンツモジュール内のリッチテキストに遭遇したときに、新しいリッチテキストコンポーネントをレンダリングできるようにすることです.あなたのエディタでファイルを開くsrc/pages/{ContentfulPage.slug}.js 次の行を追加します.
ファイルの先頭にRichText コンポーネント

...
import RichText from "../components/rich-text/rich-text"
...

現在contentModules.map 関数はRichText コンポーネントContentfulRichText モジュールが発生しました.switch文にケースを追加します.

    case "ContentfulRichText":
      return <RichText key={cm.id} data={cm} />

最後に、GATSBYデータ層からリッチテキストファイルを取得する必要がありますcontentModules { 追加

    ... on ContentfulRichText {
      id
      body {
        raw
      }
      internal {
        type
      }
    }

ローカルギャツビーサーバーを再起動してくださいhttp://localhost:8000/about , 今、あなたの新しく追加されたリッチテキストモジュールが表示されます.


製品ページの充実
あなたは現在、Contentfulのページモデルがどのように再利用可能でモジュラーな方法で新しいコンテンツ・モジュールを含むように拡張されることができるかについて見ました.同じアイデアは、お客様の製品ページに完全にお客様の製品の周りのお好みの普遍を作成できるように拡張することができます.あなたは“メデューサシャツ”製品の下に関連する製品のセクションを作成するために上記と同じテクニックを使用します.

製品の移行
まず、製品コンテンツモデルに新しいフィールドを追加します.マイグレーションを使用してファイルを作成できますcontentful-migrations/product-add-modules.js :

// contentful-migrations/product-add-modules.js

module.exports = function (migration, context) {
  const product = migration.editContentType("product");

  product
    .createField("contentModules")
    .name("Content Modules")
    .type("Array")
    .items({
      type: "Link",
      linkType: "Entry",
      validations: [
        {
          linkContentType: ["hero", "tileSection", "richText"],
        },
      ],
    });
};

移行:

yarn migrate:contentful --file contentful-migrations/product-add-modules.js

タイル関連セクションの追加
移行後、製品にコンテンツモジュールを追加することができます、関連するコンテンツを持つ製品ページを豊かにする.このガイドでは、“関連製品”を保持するタイルセクションを追加しますが、機能はさらにショーケースルックブックの画像、インスピレーションコンテンツや詳細な製品の説明に拡張することができます.
新しいコンテンツ・モジュール・フィールドを見つけることができるところで、Medusaシャツは下までずっとスクロールします

「タイルを追加」をクリックすると、新しいタイルセクションが開きます.タイトルのために、「関連製品」を書いてください、そして、タイルのために、内容を加えてください.

をクリックして、メデューサシャツの製品が公開されていることを確認します.
あなたのデータは現在、店頭で使用する準備ができていますが、まだ新しいコンテンツを表示できるようにするには、ストアフロントコードに変更のカップルを作る必要があります.

製品ページへのコンテンツモジュールの追加
ページコンポーネントのように、GatsbyのGraphSQLデータ層からコンテンツモジュールを取得する必要があります.
ファイルにsrc/pages/products/{ContentfulProduct.handle}.js ファイルの下部にあるGraphSQLクエリに以下を追加します.

  # src/pages/products/{ContentfulProduct.handle}.js

  contentModules {
    ... on ContentfulTileSection {
      id
      title
      tiles {
        ... on ContentfulProduct {
          id
          title
          handle
          thumbnail {
            gatsbyImageData
          }
          internal {
            type
          }
        }
        ... on ContentfulTile {
          id
          title
          cta
          image {
            gatsbyImageData
          }
          link {
            linkTo
            reference {
              slug
            }
          }
          internal {
            type
          }
        }
      }
      internal {
        type
      }
    }
  }

このスニペットは、製品に定義されているコンテンツモジュールを照会し、コンポーネントのデータを使用できるようになります.
次はsrc/views/products.jsx ファイルを追加し、次のスニペットを追加します.
インポートTileSection コンポーネント

import TileSection from "../components/tile-section/tile-section"

最後の終了直前にJSXのコンテンツモジュールを追加するdiv :

  // src/views/products.jsx

  <div className={styles.contentModules}>
    {product.contentModules?.map((cm) => {
      switch (cm.internal.type) {
        case "ContentfulTileSection":
          return <TileSection key={cm.id} data={cm} />
        default:
          return null
      }
    })}
  </div>

ギャツビーサーバーの再起動と訪問http://localhost:8000/product/medusa-shirt これで、製品ページコントロールの下に新しい「関連製品」タイルセクションが表示されます.


概要
このガイドでは、満足して使用してリッチテキスト入力のための新しいコンテンツモデルを作成しましたcontentful-migration . さらに、新しいリッチテキストプラグインをレンダリングするには、店頭を拡張しました.このガイドのコンセプトは、あなたのストアをモジュラーでスケーラブルな方法でより強力にするためにどのようにcontentfulを使用することができるかを示すためのものです.このガイドでカバーされているコンテンツモジュールは、他のカスタムモジュールを追加するためにさらに拡張することができます.たとえば、ニュースレターのシグネチャを追加することができます.モジュールでは、コードに遭遇したときにニュースレターフォームが表示されます.

次は何
このガイドの次の部分では、割引コード、地域ベースのショッピングなどのサポートを追加するなどのサイトにさらに商業機能を実装する方法を学びます.(近日)

Deploying Medusa on Heroku

Deploying Medusa Admin on Netlify