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

<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>

....
{% render 'word-balloon' %}

....
</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 %}

<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");
....

<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 %}

....
{% render 'word-balloon' %}