Salesforce Commerce Cloudの小規模なページ改修(実装編)

2023-08-15

はじめに

今回はSalesforce社のEコマースであるCommerce Cloudの小規模なページの改修について、実装したときに気づいたことを記載します。

想定する読者

Contents
  • 1. 仕様について
  • 2. 実装して気づいたこと
    • 2.1. 画像はコンテンツ画像内に格納する
    • 2.2. スタイルはカートリッジ内に記載する
    • 2.3. 非表示時のデザインを考慮する
    • 2.4. Content Slotsの終了時間に気を付ける
  • 3. 最後に

仕様について

お客様から「定期的にコンテンツを切り替られる機能が欲しい」という要望を受けました。
その要望を受けて、以下の仕様としました。

  • 表示が日時により、自動的に切り替わること
  • 表示・非表示ができること
  • 非エンジニアでも運用できること

この仕様を前提ページの「③Content Slots、Content Assetsを使う」で実現させました。
構成図は Commerce Cloudの小規模なページ改修方法をご参照ください。

実装して気づいたこと

実装してみた気づいたことを記載します。

画像はコンテンツ画像内に格納する

Content Assets内で画像を使用するときは、「マーチャントツール > コンテンツ > インポート & エクスポート > コンテンツ画像・ライブラリの選択 > コンテンツ画像」に画像をアップロードしてください。
そして画像を挿入するときは、「【格納したファイルパス】?staticlink」で格納場所を指定することで画像を使用できます。

スタイルはカートリッジ内に記載する

スタイルはContent Assets内に記載することもできますが、Content Assetsは定期的に変更する部分のため、なるべくシンプルにしておく方がいいです。
そのため、スタイルについてはなるべくプログラム側であるカートリッジ内に記載した方がいいです。

非表示時のデザインを考慮する

仕様に「表示・非表示ができること」とあります。
私のデザインの場合、コンテンツの中にセクションタイトルの部分があります。
コンテンツが非表示の場合にはセクションタイトルも併せて非表示にしないといけないということがありました。
このように非表示の場合まで考えて実装するようにしてください。

Content Slotsの終了時間に気を付ける

仕様に「表示が日時により、自動的に切り替わること」とあります。
Content Slotsに開始時間・終了時間を入れればいいのですが、どうやら終了時間を9:00に設定すると、9:00:59まで表示されてしまうようです。
そのため、9:00:00まで表示したい人は終了時間を8:59に設定し、9:00:59まで表示したい人は終了時間を9:00に設定してください。

最後に

実際に実装してみると、特に問題なく実現できました。
同じような場面で試してみてください。