Salesforce B2C/B2B Commerce でデザインを変更してみる（後編）

※ これから記載する事項は、私が所属する会社とは切関係のない事柄です。

今回は前回の「Salesforce B2C/B2B Commerce でデザインを変更してみる（前編）」に続く後編です。
静的ファイルの読み込み方法とフォントの追加設定をやってみたいと思います。

静的ファイルの読み込み

リソースの種類

静的リソースには下記の２種類存在します。

静的リソース

Setup > Custom Code > Static Resources からファイルをアップロードして利用するリソースです。

外部リソース

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js のような外部のサーバーにホスティングされているリソースです。外部のリソースを利用する場合はContent Security Policy (CSP)の設定が必要になります。

リソースの読み込み方法

リソースを読み込む方法には下記の３つがあります。

LWC の JS ファイルからの読み込み

loadScript や loadStyle のAPIを利用してJSファイル内からリソースを読み込みます。

Experience Builder からの読み込み（全ページ）

Experience Builder の設定から Advanced > Edit Head Markup から head タグに挿入することで読み込みます。

Experience Builder からの読み込み（特定ページ）

Experience Builder の設定から特定のページの設定内の Edit Head Tag から head タグに挿入することで読み込みます。
※ 全ページでの読み込みと違い script の読み込みはできません。

静的ファイルの読み込みをやってみる

今回は下記のツールを別々の方法で利用してみたいと思います。

Materialize の利用

• Experience Builder からの読み込み（特定ページ）で外部リソースCSSの読み込み
• LWC の JS ファイルからの読み込みで外部リソースJSの読み込み

TuiCss の利用

• Experience Builder からの読み込み（全ページ）で静的リソースCSSの読み込み

Google のマテリアルアイコンの利用

• LWC の JS ファイルからの読み込みで外部リソースCSSの読み込み

D3.js の利用

• LWC の JS ファイルからの読み込みで静的リソースJSの読み込み

Lodash の利用

• Experience Builder からの読み込み（全ページ）で静的リソースJSの読み込み

静的リソースの確認

静的リソースは２パターンの設定をしています。

• D3
  • d3.js を利用するための JS ファイルを単体でアップロードしたリソース
• sample
  • TuiCss を利用するために、下記のような構造を持つsampleフォルダをzipファイル化したものをアップロードしたリソース。（後ほど利用するフォントも同時に入れてあります）
    

Experience Builder からの読み込み（全ページ）の確認

tuicss の CSS と lodash の JS を読み込んでいます。

Experience Builder からの読み込み（特定ページ）の確認

materialize の CSS を読んでいます。

確認のための LWC

sampleStatic.html

<template>
  <div class="container">
    <div class="row">
      <div class="col m2">
        <div class="white-255" style="text-align: center">Materialize</div>
      </div>
      <div class="col m10">
        <div class="card">
          <div class="card-content">
            <form action="#">
              <label>Sample Date</label>
              <input type="text" class="datepicker" />
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col m2">
        <div class="white-255" style="text-align: center">Material Icon</div>
      </div>
      <div class="col m10">
        <a class="btn-floating pulse"><i class="material-icons">menu</i></a>
      </div>
    </div>
    <div class="row">
      <div class="col m2">
        <div class="white-255" style="text-align: center">D3</div>
      </div>
      <div class="col m10"><div class="d3"></div></div>
    </div>
    <div class="row">
      <div class="col m2">
        <div class="white-255" style="text-align: center">TuiCSS Button</div>
      </div>
      <div style="margin-bottom: 1rem" class="col m10">
        <button class="tui-button">Button</button>
      </div>
    </div>
  </div>
</template>

ここで LWC の JS ファイルからの読み込みを確認できます。

sampleStatic.js

/* eslint-disable no-undef */
import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import D3_RESOURCE from '@salesforce/resourceUrl/D3';

export default class SampleStatic extends LightningElement {
    async connectedCallback() {
        // Icon for Materialize
        await loadStyle(this, "https://fonts.googleapis.com/icon?family=Material+Icons");
        
        // Materialize
        await loadScript(this, "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js");
        let elems = this.template.querySelectorAll('.datepicker');
        M.Datepicker.init(elems);

        // D3
        await loadScript(this, D3_RESOURCE);
        let dataset = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        let doms = this.template.querySelector(".d3")
        let container = d3.select(doms)
        let svg = container.append("svg");
        svg.attr("width", 500)
            .attr("height", 100);
        let circles = svg.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle");
        circles.attr("cx", function (d, i) { return i * 50 + 20; })
            .attr("cy", 50)
            .attr("r", function (d) { return d * 2; })

        // Lodash
        console.log("Lodash Test. This should be true.")
        console.log(_.isString("abc"))
    }
}

sampleStatic.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>Sample Static</masterLabel>
    <description>Sample Static</description>
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
    </targets>
</LightningComponentBundle>

Content Security Policy (CSP) の設定

設定方法についてはヘルプを参照してください。

もし外部リソースを利用していてCSPの設定ができていない時はこのような画面が表示されます。

設定を Relaxed: CSP に変更し、 Allow URL をクリックします。

URLを確認して Allow ボタンで許可します。

動作確認

作成した Sample Static という LWC を任意の場所に配置すると下記の画像のようにCSSが当たっていることが確認できます。

また、Materializeの Date Picker も正しく動いていることが確認でき、正常にJSが読み込めていることも確認できます。

さらに、JS 内で利用している Loadash が正しく動いていることもブラウザの開発ツールのコンソールから確認できました。

フォントの追加

フォントを追加する際のヘルプはこちらです。また今回設定するカスタムフォントはテーマにも反映させることが可能なので、その際はこちらをご覧ください。

今回は静的リソースを利用してBranda Font というフォントを適用してみたいと思います。
先述のsampleフォルダに入っている Branda-yolq.ttf というフォントファイルを利用していきたいと思います。
Experience Builder からの読み込み（全ページ）をする際のエディタに下記の内容を追記し、myFirstFont という新しいフォントを利用してみます。

<style>
   @font-face {
      font-family: 'myFirstFont';
      src: url('{ basePath }/sfsites/c/resource/sample/sample/Branda-yolq.ttf') format('truetype');
   }
</style>

確認

LWCのHTMLに下記のように記述し、コンポーネントを設定します。

<p style="font-family: 'myFirstFont'; font-size: 3rem">Font Test</p>

すると、ちゃんとフォントが適用されていることが確認できます。