Click Here Labs が Atlas を使用してコンポーザブル コマースのロックを解除した方法
公開: 2023-04-09WP Engine は現在、エージェンシー パートナー プログラムを通じて、WordPress エージェンシーの最大の共同コミュニティを促進しています。
DE{CODE} 2023 のこのオンデマンド セッションでは、WP Engine Agency Partner Click Here Labs が新しい Atlas BigCommerce Blueprint を使用して Combat Corner のオンライン ストアを再考した方法を学びます。 BigCommerce ブループリントのデモも入手できるので、わずか 10 分で独自の Atlas e コマース サイトを構築できます。
スピーカー:
- Click Here Labs のテクニカル プロダクション ディレクター、Jonathan Jeter 氏
- WP Engine プリンシパル プロダクト マネージャー、Bryan Smith 氏
セッションのスライド:
転写:
ブライアン・スミス: みなさん、こんにちは。 私の名前は Bryan Smith です。ここ WP Engine のプリンシパル プロダクト マネージャーです。 今日は、Click Here Labs が Atlas を使用してコンポーザブル コマースのロックを解除した方法についてお話します。
今日は、Click Here Labs のテクニカル プロダクション ディレクターである Jonathan Jeter が参加します。 彼は向こうのチームを率いています。 彼らは WP Engine エージェンシー パートナーであり、ここ数か月間非常に緊密に協力して、最初のヘッドレスまたはコンポーザブル コマースの顧客を Atlas にもたらしました。
そのケース スタディについては後ほど詳しく説明しますが、その前に、コンポーザブル開発の市場の状況について少しお話したいと思います。 非常に構成可能でヘッドレスです。ここでは、それらを同じ意味で使用しています。 ヘッドレスは、多くの場合、コンポーザブルを意味します。
これらのサイトの需要が高まっているのは、これらのサイトのパフォーマンスが優れているからだけではありません。 それらは大幅にカスタマイズ可能であり、ビジネスの成果が頻繁に変化する可能性がある、絶えず変化するビジネス環境だけでなく、変化するテクノロジ ランドスケープにも迅速に適応できます。 それらは、静的な速度で動的なエクスペリエンスを提供します。これについては、後で説明します。
また、プラットフォームを変更せずにスケーリングすることもできます。 今日紹介するケース スタディでは、Click Here Labs のクライアントは、実際には e コマース バックエンドである BigCommerce にとどまり、WordPress を CMS として統合し、そのすべてをヘッドレス ストアフロントに持ち込むことができました。 しかし、この新しいテクノロジーはすべて法外な費用がかかることが多いため、ここ数年、この方法でサイトを構築する Atlas の最も深刻な開発上の問題点に対処してきました。
もちろん、Atlas は単なるホストではありません。 これは単なるフロントエンド フレームワークではありません。 API レイヤー、カスタム フィールド プラグイン、ローカル開発アプリなど、開始するために必要なものがすべて含まれています。 しかし、おそらく最も重要なのは、学習コミュニティとサポートがあることです。
ただし、これらすべてのツールをすぐに利用できるので、判断に疲れていることを責めることはありません。 指先に非常に多くのオプションがある場合、開始することさえ難しい場合があり、そこでブループリントの出番です。
そのため、ブループリントを開発しました。これにより、必要なすべてのコード プラグイン、コンテンツ モデル、有料構造を備えたスターター サイトをセットアップできます。 10 分もかからずに起動して実行できます。 新しいプロジェクトを開始するプロセスを本当に合理化できます。
それに加えて、プラットフォームとベスト プラクティスを学ぶのにも役立ちます。 これで次のプロジェクトの準備が整いますが、これまで私たちが持っていた青写真は、ポートフォリオやブログ タイプのサイトなど、より静的なタイプのサイトのユース ケースに限定されていました。ヘッドレス ストアフロントほど動的なものはありません。
それが、BigCommerce の青写真を作成した理由です。 ここでデモを行うこのブループリントは、WPGraphQL、Atlas Content Modeler、Faust JS フレームワーク、およびいくつかの新しいもので事前構成されています。Atlas コマース ブロック プラグインにより、製品データを WordPress エディターに取り込み、さらに BigCommerce API に接続するコマース コネクタを使用して、BigCommerce から WordPress にデータを同期し、同期を維持します。
それらからコンテンツ モデルを構築し、そのブロックのプラグインを強化することもできます。 それでは、実際にこれがどのように機能するかをお見せしましょう。デモに飛び乗りましょう…
これで、Atlas ページの WP Engine ポータルが表示されました。 そのため、新しい Atlas アプリを作成するときは、設計図から始めることができます。ここにはいくつかのオプションがあります。 ここで行うことは、右側にある BigCommerce の設計図を選択することです。
また、ここからストアフロントをプレビューしたり、GitHub でコードを表示したりすることもできます。 その設計図を選択して [続行] をクリックします。 次のステップは、GitHub アカウントに接続することです。
そして、私たちが行うことは、私たちのリポジトリをあなたのものにクローンすることです. GitHub アカウントとリポジトリ名を選択すると、[Create App] をクリックします。
したがって、このプロセス中にいくつかのことが起こります。 まず、WordPress サイトをプロビジョニングします。 Atlas アプリの Atlas コードをビルドします。 そして、展開されます。 このプロセスには通常 5 分ほどかかりますが、ここではスピードアップしました。
WordPress サイトが構築されると、ここの画面に表示される BigCommerce コネクタに飛び込むことができます。 構成画面 - 資格情報を入力すると、その製品の同期を開始できます。
そして、これを Atlas サンドボックス アカウントと BigCommerce サンドボックス アカウントに接続しました。 そして、その BigCommerce アカウントにある製品をインポートできます。 約 13 個のデモ製品を入手しました。
ここで注意したいのは、この最初の同期の後、更新を取得するために実際に再実行する必要がないということです。 このプラグインは、Webhook と夜間の cron ジョブをサポートしています。 これらの製品のインポートが完了すると、画像も同期されます。
そして、製品を見に行きます。 よし、製品をロードしました。 こちらの製品ページでご覧いただけます。 これらは、BigCommerce サイトのデモ製品です。
これらのうちの 1 つの [詳細] ページに移動します。ここに表示されているのは、取り込んだデータのすべてのフィールド (タイトル、画像、説明) だけです。 それはすべてそこにあります。
だから今、それはWordPressにあります。 それはあなたのために同期されています。 BigCommerce サイトで変更を加えると、すぐに更新されます。
それでは、Atlas Content Modeler で構築したコンテンツ モデルをお見せしたいと思います。 これはほんの一例です。 そして、私はこれらを念頭に置いていると思います。 これは、私たちがどのようにそれを行ったかを示すための出発点です。
これらのコンテンツ モデルは、ヘッドレス ストアフロントの製品詳細ページを強化します。これについては、この後すぐに説明します。 Atlas Content Modeler を使用したコンテンツ モデリングの柔軟性の例です。 次は、先ほどお話ししたコマース ブロック プラグインを紹介します。
WordPress のブロック エディターでホームページに移動します。 ここに、最新の製品を購入するセクションが表示されます。 これが商業ブロックです。
つまり、ブロックタイプ、最新の製品、人気のある製品、表示したい表示数を選択できます。 そこに4つ表示しています。 これはすべて BigCommerce 側からのものです。 ページのさらに下に別の例があります – 販売アイテムは、それらを使用する方法の代替として使用できます.
これまで、コンテンツ モデルとブロック プラグインを見てきました。 WordPressサイトにインストールされているものはすべてここにあります。 前述のすべてのプラグインです。
OK。 当店は店頭にございます。 これは、URL で確認できるヘッドレス ストアフロントです。 ページで当社の製品ブロックをご覧いただけます。
そして、これはシンプルな店頭です。 それは本当に出発点であることを意味しています。 そのため、できるだけシンプルにしようとしました。 次にショップページに行きます。
ここでは、当社のすべての製品をご覧いただけます。 したがって、このページは実際にはコンテンツ モデル、つまり製品の詳細ページです。 下部にレビュー用のスポットがあることがわかります。 次のステップは、これをカートに追加することです。
また、カートには実際にはヘッドがありません。 したがって、これらはすべて Atlas フロントエンドにあります。 さて、チェックアウトのために、BigCommerce にリダイレクトします。 このブループリントの目的では、それが最も理にかなっていると感じましたが、それ以外はすべてヘッドレス Atlas フロント エンドにあります。
ここで店頭に戻ります。 これが About ページです。これらのさまざまなページ セクションをレイアウトしてできることの例です。 ですから、それを受け取り、使用し、そこから学ぶことができます。 ここでの本当の意図は、すぐに始められるようにすることです。
以上で、Click Here Labs がこの青写真を実際のクライアントのユースケースにどのように適用し、拡張したかについて、Jonathan に説明してもらいます。 あなたに、ジョナサン。
ジョナサン・ジーター: ありがとう、ブライアン。 ブループリントの拡張について説明する前に、まずソリューションの計画について少し説明したいと思います。 非常に柔軟なコンポーザブル コマース ソリューションを開始する前に、適切な要素を使用するために、それを正しく計画したことを確認したいと考えています。
そして、私たちは常に API ドキュメントと機能要件から始めます。 この場合、BigCommerce の場合、API ドキュメントを調べて、クライアントがストアで必要とするすべての機能が API 経由で利用できることを確認しました。 そうでないものについては、それらのニーズや要件を満たす方法を計画する必要がありました。
その計画の一環として、各要件がどこで満たされるかを決定する必要がありますよね? ネイティブの BigCommerce 経由ですか? WordPress経由ですか？ 構築しているフロント エンド アプリケーションまたはサード パーティ製アプリを使用していますか?
この場合、いくつかの決定を下す必要がありました。プラットフォームは非常に柔軟であるため、ここでの主な目標は、サイトを高速化し、前に述べたように、フロントエンド アプリケーションで静的な速度を実現することでした。 そのため、サイトのすべての部分、Google が表示するサイト内のすべてのコンポーネントが、ヘッドレス フロント エンド アプリケーションにあることを確認したかったのです。
次に、たとえば、Bryan がカートについて話し、アカウント セクションについて話しました。 彼はそれらのさまざまなことについて話しました。 さまざまなシステムで、これらのどの部分を実行する予定でしたか? たとえば、この場合、カート、チェックアウト、顧客アカウントがネイティブ アプリケーション内でそれを行うことにしました。
次に、サイトのコンテンツ – それが正しく分類され、顧客が標準の WordPress インターフェースを介してそのコンテンツを快適に追加できるようにしたかったのです。 また、別の方法でフロントエンドに表示できるように、WordPress 内の一部のデータを集約しました。 これは、おそらく BigCommerce 自体では利用できないものであり、サードパーティのアプリケーションを考慮する必要がありました.
CRM、追跡などのためにデータがどこに行き来していたのか、そして最後に計画を立てる必要があります。そのフロント エンドにどのようなコンポーネントを構築し、どこからプルするのかを計画する必要があります。からのデータ？
したがって、究極の柔軟性とは、多くの決定を下す必要があることを意味し、基本的に Atlas (この場合は BigCommerce) で利用できるすべてのツールを使用して e コマース アプリケーションを構築し、そのストアを作成できることを思い出してください。 ですから、その計画を立てて、自分が何をしようとしているのかを理解することが非常に重要であることを強調したかったのです。
クライアントとの話し合いも行い、これが私たちが構築しているものだと言います。 これは、ネイティブ アプリケーションに残るものです。 これがフロントエンドになります。
パスワードで保護されている部分 (たとえば、マイ アカウント、請求履歴など) は、インデックス化されません。 したがって、それらがフロントエンドアプリケーションにあることはそれほど重要ではありません。 それで、あなたがそれを理解し、青写真を設定したら、準備完了です.
では、ブループリントの拡張について話しますよね? では、それに何が関係しているのでしょうか。 ここでは、フロントエンド アプリケーションが開始されていることを確認します。 そして今、ストアをユニークなものにし、クライアントが必要とすることを実行できるようにするための余分な要素をすべて構築する必要があります.
たとえば、BigCommerce では、API で使用できるネイティブ機能がいくつかあります。たとえば、コンパニオン プロダクト、顧客グループなどです。 そのため、クライアントは引き続き BigCommerce ネイティブを使用して、これらのコンパニオン製品を管理し、さまざまな顧客グループを管理し、商品の発売時期や割引コードなどを管理しています。
そのデータを取得し、フロントエンドで表示しています。 また、プラグインは BigCommerce にインストールされていますよね? 製品カスタマイザーがあります。
次に、さまざまな場所からのデータを検討する必要がありました。 そして、これらのコンポーネントは、たとえば製品詳細ページで構築できますよね? カスタマイズ可能な製品がある場合は、色を変更できます。
ロゴを追加できます。 そういうこともできますよね？ このカスタマイザーを使用すると、それが可能になります。 したがって、これらはサードパーティの機能に基づいて構築されたさまざまな部分です。
最後に、フロントエンドに直接組み込まれた機能があります。 たとえば、製品比較表はさまざまな場所で見られます。 3 つの異なる製品を比較し、どのような属性が異なるか、どのように比較するか、製品をまとめて販売する機能、バンドルの割引を確認します。 そして、例えば、BigCommerce ネイティブで利用できるものがありますが、何らかの理由で、API はその機能を実行しません。
ファイル アップローダは、バックエンドのさまざまな機能を使用して、基本的にフロント エンド内で作成しなければならなかったものの例です。 これらはすべて、そのブループリントを拡張するために構築するものであり、これらの一部は、拡張されたブループリント、またはブライアンがここですぐに話すと思われるプレミアム ブループリントに含まれます。
ブライアン・スミス: ありがとう、ジョナサン。 それでは、Atlas のロードマップについて簡単に説明します。 これを現在、次、および後で列に分けました。
現在の列の下に、e コマースに特化した Atlas のイニシアチブが太字で表示されます。 左側の BigCommerce の設計図はライブで、誰でもすぐに試すことができます。 また、ストアフロント API にも取り組んでいます。
これは、WordPress、BigCommerce、またはその他の関心のあるサードパーティ ソースからのコンテンツをまとめるデータ レイヤーです。これらすべてを統合する方法を次に示します。 現在、ベータ版に取り組んでいるので、今後の詳細については続報をお待ちください。
次に、Shopify の設計図に取り組みます。 これは、BigCommerce で行ったものと同様の統合ですが、この場合は Shopify との統合になります。 それを過ぎてから、ヘッドレスのパーソナライゼーションとローカリゼーションに焦点を当てます。 これらが動的なストアフロントにとって非常に重要であることはわかっています。 そして、それが Atlas コマース プラットフォームと緊密に統合されていることを確認したいと考えています。
したがって、BigCommerce のブループリントを使い始める準備ができている場合は、今すぐ無料の Atlas サンドボックス アカウントを開いて試してみることができます。 すでに Atlas アカウントをお持ちの場合は、もちろん設計図もご利用いただけます。 今日試してみてください。
次のプロジェクトで試してみてください。 ご意見をお聞かせください。 みんな、ありがとう。 本日はお時間をいただき、誠にありがとうございました。 すてきな一日を。