商品詳細ページにて、値段表示をもう一つ設置したのですが、SKUごとに違う値段がうまく動きません。

[FF31]

商品詳細ページにて、値段表示をもう一つ設置したのですが、SKUごとに違う値段がうまく動きません。

デフォルトの値段表示以外の場所にもう一つ設置したのですが、件名の通りうまく動きません。

更新せずに自動で値段が変わるようにしたいのですが…

なにかいい方法はありませんか？

コピペで張り付けてバリエーションピッカーなど他は機能しています。

バリエーション変えた後に更新すればその商品の値段に変わるのですがどうしたらよいですか？

以下該当箇所のコード

<div class="grid__item product__media-wrapper small-hide">
<div class="ABC">
<product-info
id="ProductInfo-{{ section.id }}"
data-section="{{ section.id }}"
data-url="{{ product.url }}"
class="product__info-container {% if section.settings.enable_sticky_info %} product__column-sticky{% endif %}"
>
{% render 'product-media-gallery', variant_images: variant_images, is_duplicate: true %}
{%- assign product_form_id = 'product-form-' | append: section.id -%}
<p class="product__title" {{ block.shopify_attributes }} style="line-height: 1;">{{ product.title | escape }}</p>
<div style="padding-bottom: 1rem;">

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<span class="product__tax caption rte">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}

{%- endif -%}
</span>
{%- for block in section.blocks -%}
{%- case block.type -%}

{%- when 'price' -%}
<div class="no-js-hidden product-price" id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price',
product: product,
use_variant: true,
show_badges: true,
price_class: 'price--large',
-%}
</div>
{%- if product.quantity_price_breaks_configured? -%}
<div class="volume-pricing-note">
<span>{{ 'products.product.volume_pricing.note' | t }}</span>
</div>
{% endif %}

{%- when 'variant_picker' -%}
{%- render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id -%}


{% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true %}
{%- endcase -%}

{%- endfor -%}
{%- endif -%}
</div>
</product-info></div>
</div>

[Qcoltd · Accepted solution]

@FF31 様

おそらくDawnをお使いだと思いますので、Dawn 11.0.0を前提に回答いたします。

商品詳細ページでのバリエーション変更による、商品情報の更新は、JavaScriptにより行われます。

具体的に言いますと、

スニペット > global.js の

VariantSelectsの定義の中の、

renderProductInfoという関数で実行しています。

具体的に言いますと、

下記の処理で、destionationに現在の価格情報のHTML、sourceに変更後の価格情報のHTMLが格納され、

        const destination = document.getElementById(`price-${this.dataset.section}`);
        const source = html.getElementById(
          `price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`
        );

下記の処理で、「現在の価格情報のHTML」が、「変更後の価格情報のHTML」に書き換わります。

        if (source && destination) destination.innerHTML = source.innerHTML;

上記、処理をご覧いただくとわかる通り、価格情報のHTMLは、idで取得されます。

prive-template-xxxxxxxxxxxxx-main のようなidです。

同じidが1つのHTML上に存在する場合、getElementByIdでは最初の1つしか取得されません。

そのため、価格情報をliquid上で増やしても、JavaScriptの書き換え対象にならないのです。

これを修正するには、

JSとHTMLの改修が必要になります。

例えば、idではなくclassで情報を取得するように、JSとHTMLを改修しつつ、

さらに、classに変更することで取得できた複数の要素を、

繰り返し処理で更新するようにすれば良いかと思います。

ご参考まで。

(キュー田辺)

[FF31]

詳しくありがとうございます。
自力でできたのですが、後から読んでも参考になりました。
また何かあったら相談させてください。