ShopifyのDawn v4.0.0のスライダー枚数表示に対する応急対応:メモ

根本的には解決していませんが応急対応はできたようのでメモとして。実行はお勧めしません。

発生した問題

• Dawn v4.0.0とStudio v1.0.0で商品画像が1枚でも、スライダー枚数表示が1/2と表示される
• Dawn v3.0.0では1のまま問題はない

推測になりますがStudioも同様だったので、おそらくShopify製テーマで同種の動作をするテーマはすべて同じ問題が発生している可能性があります。

推測される原因

複数の理由から詳細な調査はしていませんが、Dawnのv3.0.0とv4.0.0の差分を確認しますとおそらくglobal.jsの以下の部分が原因のように見えました。

initPages() {
 this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
 if (this.sliderItemsToShow.length < 2) return;
 this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft;
 this.slidesPerPage = Math.floor(this.slider.clientWidth / this.sliderItemOffset);
 this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1;
 this.update();
}

上記はDawnのv4.0.0ですが、v3.0.0とはスライドの枚数の部分の記述が変わっています。
この分岐の変化が原因で、おそらく画像枚数が1枚の時にupdate()が実行されず、ストアフロン側の最大枚数が更新されなかったのではと。

initPages() {
    this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
    this.sliderLastItem = this.sliderItemsToShow[this.sliderItemsToShow.length - 1];
    if (this.sliderItemsToShow.length === 0) return;
    this.slidesPerPage = Math.floor(this.slider.clientWidth / this.sliderItemsToShow[0].clientWidth);
    this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1;
    this.update();
  }

応急の対応策

本来はJSを直すべきですが、時間や今後のアップデート時のことを考えて、以下のようなLiquidによる応急対応を検討しました。

// main-product.liquidの82行目付近の以下を探す。
<span class="slider-counter--total">{{ media_count }}</span>

↓

// 以下のように書き換える
{%- liquid
 assign tmp_media_count = media_count
 if media_count == 2
  assign media_count = 1
 endif
-%}
<span class="slider-counter--total">{{ media_count }}</span>
{%- liquid
 if tmp_media_count == 2
  assign media_count = tmp_media_count
 endif
-%}

かなり無理やりですが、不具合がでる値の時のみ一時的に.slider-counter–totalの値を書き換えて出力させ、その後元に戻して続く処理を正常に行わせる、という形です。

なお確認がまだ甘いので、参考にされる方は自己責任でお願いします。

結び

筆者の勘違いで全く問題がなかったという可能性もありますが、そうではないなら今後テーマがアップデートした時に修正されるのではと思います。

そのためカスタマイズにて「サムネイルを表示する」などの設定に変更して枚数を表示させないようにしたほうが安全かもしれません。

既に触れていますが、この記事の対象は特定のテーマの特定のバージョンに対する内容です。

そのためすぐに陳腐化すると思われるため読まれた方はその点留意ください。