Shopifyブログ本文中に吹き出しコメント挿入を実装するカスタマイズ方法

Shopifyブログ本文中に吹き出しコメント挿入を実装するカスタマイズ方法

最新の更新日
Nov 17, 2023 4:30 PM
記事作成日
Oct 1, 2023 3:26 PM
Category
EC
Tag Library
🛒
Shopify
Target Keywords
vol.
Podcast

目次:

実現したいことと、どう実装するか

まず、実現したいことは「Shopifyブログ記事の本文内に吹き出しを挿入できるようにする」ということです。

image

吹き出しコメント実現のための要件

吹き出し実装の背景として、外部ライターが書いた記事、あるいはAIが生成した記事に対して、専門家スタッフによるコメントを途中に挿入したい、ということがあります。

そのため、以下の要件を満たす必要があります。

  • 非エンジニアのスタッフでも可能な一般的なエディタ内操作でコメント欄の挿入を可能とさせる
  • 記事の冒頭や末尾などの決まった箇所に挿入するのではなく、スタッフがコメントを挿入する箇所を決めてコメントとして挿入できるようにする

また、可能であれば下記のように実装できると便利と感じました。

  • 吹き出しコメントは、テキスト+吹き出し枠+顔写真の形にする
  • 「コメントをする担当スタッフが誰か」について、プルダウンリストのような用意されたリストの中から選択できるようにする
  • 吹き出しの顔写真は、選択したスタッフによって顔写真が変化するようにする
  • コメントをした担当スタッフの自己紹介を記事冒頭または記事末尾に自動的に追加されるようにする
  • 構造化マークアップに反映させる

参考:

Shopifyでどう実現させていくか？

使用頻度の低く、独自のHTMLタグをもつ斜体（emタグ: 強調タグ）を潰して、斜体テキストによって挿入されたテキストを吹き出しコメントへ変換されるようにして実現することとしました。力技です…！

具体的な実現手順:

  • 「斜体」（emタグ）によって挿入されたテキストを、自動的に吹き出しデザインに変化するようにする
  • 記事ごとのコメント担当スタッフの選択は、カスタムデータ（メタフィールド）によって実装する
  • 顔写真は、選択された担当スタッフの顔写真になるように切り替わるように
  • （選択された担当スタッフの自己紹介を追加: 本記事では未実装）
  • （選択された担当スタッフが監修していることを構造化マークアップへ追加: 本記事では未実装）

実現したエディタでの吹き出しコメント設置方法と吹き出しデザインプレビュー

実装した結果として、下記のように誰でもかんたんにエディタ内の任意のエリアに吹き出しコメントが設置可能となりました。

吹き出しコメントとして表示させたいテキストを、エディタの「I」（斜体）マークを選択することによって斜体として装飾します。（実際にはemタグ）

ブログ記事エディタにおいて斜体（I）を選択
ブログ記事エディタにおいて斜体（I）を選択

公開する前に、担当スタッフを選択します。

スタッフ選択には、ブログ記事最下部の「メタフィールド」> すべて表示 をクリックします。

image

担当スタッフの名前がプルダウンリストで表示されるので、スタッフ名を選択後に保存。担当スタッフが記事に割り当てられます。

image

すると公開画面において、斜体として装飾されたテキストがスタッフ顔写真画像付きの吹き出しコメントとして表示されるようになります。

image

顔写真は、選択した担当スタッフのものに自動で差し替わります。

また、この吹き出しコメントは1記事内に複数箇所設置することが可能。

ただし複数スタッフによるコメントは想定しておらず、1記事につき1スタッフによるコメントをするものとして実装いたしました。

斜体テキストを吹き出しコメントへ自動変換させる

emタグを書き換えるJavaScriptコードを追加

まず、emタグを書き換えるためのJavaScriptコードを追加します。

emタグ要素で記述したテキストを取得し、生成するpタグのテキストへと移動。 そのpタグと、imgタグを内包するdivタグを生成してemタグの代わりに置き換えます。またdivタグにはword-balloonというクラスを付与します。

通常のJavaScriptコードであればassetsフォルダ内に.jsファイルとして作成すれば良いのですが、後でスタッフ選択の関係でliquidフィルターを用いたいため、.liquidファイルとしてsnippetsフォルダ内に作成します。

参考:

snippetsフォルダ内に、下記のようなコードを記述したword-balloon.liquidファイルを作成。

<script>
//// Convert 'em' tag into wordballoon 
window.onload = function () {
// Select all 'em' elements in the document
let emElements = document.querySelectorAll("em");

// Loop through each 'em' element
emElements.forEach((em) => {
    // Get the text content of the 'em' element
    let textContent = em.textContent;

    // Create a new 'div' element with class "word-balloon"
    let div = document.createElement("div");
    div.className = "word-balloon";

    // Create a new 'p' element
    let p = document.createElement("p");
    p.textContent = textContent;

    // Create a new 'img' element
    let img = document.createElement("img");
		// （staffImgUrlは後から変数宣言を追加）
    img.src = staffImgUrl;
    img.alt = "スタッフ画像";
    img.loading = "lazy";
    img.decoding = "async";

    // Append the 'p' and 'img' elements to the 'div'
    div.appendChild(p);
    div.appendChild(img);

    // Replace the parent 'p' element that wraps the 'em' with the new 'div'
    em.parentNode.replaceWith(div);
});
};
</script>
snippets > word-balloon.liquid

ブログ記事のセクションでJavaScriptを呼び出す

上記JavaScriptが完成したら、ブログ記事ページでword-balloon.liquidを呼び出します。

ブログ記事ページは sections > main-article.liquid ファイルで規定されているので、本ファイルの最下部に下記のようにスニペット呼び出しを追加します。

Shopifyのファイル全体構造については

をご参照ください。


....
<% render 'word-balloon' %>
sections > main-article.liquid

スニペットを呼び出す際、.liquid拡張子を付ける必要はありません。

参考: Tips for Using Snippets in Your Shopify Theme

吹き出しコメントのCSSデザイン

emタグをp, imgを内包するdivタグへ書き換えることができたら、CSSによって吹き出しを描画します。

下記CSSを、word-balloon.liquidの最下部へ追加します。

HTML・CSSでつくるおしゃれな吹き出しデザインジェネレーター【レスポンシブ対応】 でCSSを生成しました。

吹き出し背景色や最大幅などはカスタマイズしています。

....
</script>

{% style %}
.word-balloon {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
}

.word-balloon img {
    max-width: 70px;
    height: 100%;
    border: 3px solid #e6edf3;
    border-radius: 50%;
}

.word-balloon p {
    position: relative;
    max-width: 580px;
    margin: 3px 0 0;
    padding: .8em 1em;
    border-radius: 5px;
    background-color: #B2727B;
    color: #FFFFFF;
}

.word-balloon p::before {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    background-color: #B2727B;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}
{% endstyle %}
snippets > word-balloon.liquid

メタフィールドによる担当スタッフの選択

Shopify管理よりメタフィールド定義を追加

設定 > カスタムデータ > ブログ記事へ

値のタイプは「単一行のテキスト」とし、「1つの値」を選択。

image

さらに値は「プリセットの選択肢に制限する」を選択。

image

選択肢に担当スタッフの名前を入力しておきます。

これで、ブログ記事を投稿する画面のメタフィールドから、担当スタッフを選択して記事に紐付けることができるようになりました。

参考: Shopify Help Center | Metafield lists

メタフィールドの値で条件分岐

メタフィールドで指定したスタッフ名で、コメント画像が変更されるように条件分岐を作成します。

先ほど設定したメタフィールドの値は、 {{ article.metafields.custom.blog_comment_staff }} で取得・出力が可能です。

参考: Liquid objects: metafield

ブログ記事に設定されているメタフィールドのスタッフ名（値）を取得し、合致する画像を変数staffImgUrlに格納するようにします。

このとき、LIquidからJavaScriptの変数へそのまま値を渡すことが可能です。

参考: 【Shopify】Liquidの変数をJavaScriptで使用する方法 - Next

下記のコードを、snippets > word-balloon.liquidのコード上部へ追記します。

<script>
// Change person info by seleted staff
let staffImgUrl;
let staffName = '{{ article.metafields.custom.blog_comment_staff }}';
if ( staffName == "スタッフ A") {
    staffImgUrl = "{{ 'a_profile_215_sq.JPG' | asset_img_url: '100x' }}"; 
} else if ( staffName == "スタッフ B" ) {
    staffImgUrl = "{{ 'b_profile_465-560.png' | asset_img_url: '100x' }}"; 
} else {
    staffImgUrl = "{{ 'store_logo_300.png' | asset_img_url: '100x' }}";
}

//// Convert 'em' tag into wordballoon 
window.onload = function () {
// Select all 'em' elements in the document
let emElements = document.querySelectorAll("em");
....
snippets > word-balloon.liquid

staffImgUrlへ格納する画像は、assetsフォルダに格納してある画像をフィルターによってCDN上でのURLとして取得しています。また、すべてファイルサイズを100pxとして返すように指定しています。

参考: 【Shopify】LiquidのURL filterを正しく理解しよう｜liquid note | 初学者向けShopify情報ブログ

メタフィールドにおいてスタッフ名が選択されていないにも関わらず斜体文字によるコメントがなされた場合には、画像はショップのロゴが出力されるように設定しました。

以上で、エディタ上のメタフィールドからスタッフ名を選択することで、斜体テキスト（em）で入力した箇所をスタッフごとの吹き出しコメントへと変化させる処理が完成しました！

（ただし、複数のスタッフを1つの記事で発言させることは想定していません。あくまで1記事1スタッフによるコメントを想定して実装しています。）

完成したコード全体: word-balloon.liquid

<script>
// Change person info by seleted staff
let staffImgUrl;
let staffName = '{{ article.metafields.custom.blog_comment_staff }}';
if ( staffName == "スタッフ A") {
    staffImgUrl = "{{ 'a_profile_215_sq.JPG' | asset_img_url: '100x' }}"; 
} else if ( staffName == "スタッフ B" ) {
    staffImgUrl = "{{ 'b_profile_465-560.png' | asset_img_url: '100x' }}"; 
} else {
    staffImgUrl = "{{ 'store_logo_300.png' | asset_img_url: '100x' }}";
}

//// Convert 'em' tag into wordballoon 
window.onload = function () {
// Select all 'em' elements in the document
let emElements = document.querySelectorAll("em");

// Loop through each 'em' element
emElements.forEach((em) => {
    // Get the text content of the 'em' element
    let textContent = em.textContent;

    // Create a new 'div' element with class "word-balloon"
    let div = document.createElement("div");
    div.className = "word-balloon";

    // Create a new 'p' element
    let p = document.createElement("p");
    p.textContent = textContent;

    // Create a new 'img' element
    let img = document.createElement("img");
		// （staffImgUrlは後から変数宣言を追加）
    img.src = staffImgUrl;
    img.alt = "スタッフ画像";
    img.loading = "lazy";
    img.decoding = "async";

    // Append the 'p' and 'img' elements to the 'div'
    div.appendChild(p);
    div.appendChild(img);

    // Replace the parent 'p' element that wraps the 'em' with the new 'div'
    em.parentNode.replaceWith(div);
});
};
</script>

{% style %}
.word-balloon {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 0 22px;
}

.word-balloon img {
    max-width: 70px;
    height: 100%;
    border: 3px solid #e6edf3;
    border-radius: 50%;
}

.word-balloon p {
    position: relative;
    max-width: 580px;
    margin: 3px 0 0;
    padding: .8em 1em;
    border-radius: 5px;
    background-color: #B2727B;
    color: #FFFFFF;
}

.word-balloon p::before {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    background-color: #B2727B;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}
{% endstyle %}
snippets > word-balloon.liquid
....
<% render 'word-balloon' %>
sections > main-article.liquid

本記事ではJavaScriptを利用した応用的なカスタマイズのご紹介となりましたが、Shopifyのフォームにおける姓名の並び順入れ替えなど、基本的な日本向けローカライズとしてのカスタマイズ方法について

の記事でご紹介しています。こちらもぜひお読みください。

成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています

成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。

🍀 Webサイト制作とSEOの専門家 - Marketing Wizard

上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。

この記事の気になる箇所を読み返す：

Category:

Tags:

XFacebookLinkedInGitHub

🍀自己紹介および Web制作・SEOコンサルティング事業サイト🍀

AIによる参照元つき高品質SEO記事作成ツールα版が完成🎉

■ TOPページ・カテゴリ一覧へ

■ タグライブラリ・タグ一覧

■ すべての記事一覧

■ 魔法使いのWebマーケティング: 旧ブログ（→外部サイト）

■ 魔法使いのWebマーケティングラジオ（→外部サイト）

©CopyRight 2021. 魔法使いのWebスクリプト・まほウェブ | 魔法使いのwebマーケティング All Rights Reserved.