DAWN 特集商品の画像クリックで商品詳細ページへリンクする方法

[しょっぱいマン]

テーマはDAWN15.2.0です。

トップページに設置した特集商品の画像をクリックすると商品詳細ページに遷移させるにはコードをどのように変えたら良いでしょうか？

DAWNは「商品の詳細を表示する→」のリンクが目立たないのでこの方法を考えましたが、他にもっと良い方法があればご教授いただけますと助かります。

[Qcoltd · Accepted solution]

@しょっぱいマン 様

あまり検証していませんが、

下記のようにコードカスタマイズするのが簡単そうでした。

まず、

sections/featured-product.liquidの458行目あたりの

  {%- if section.settings.image_zoom == 'hover' -%}
    <script id="EnableZoomOnHover-featured" src="{{ 'magnify.js' | asset_url }}" defer="defer"></script>
  {%- endif %}

を、

  {%- if section.settings.image_zoom == 'hover' -%}
    <script id="EnableZoomOnHover-featured" src="{{ 'magnify.js' | asset_url }}" defer="defer"></script>
  {%- elsif section.settings.image_zoom == 'none' -%}
    <script defer="defer">
      document.querySelectorAll('.section-{{ section.id }}-padding modal-opener').forEach(ele => {
        ele.style.cursor = 'pointer';
        ele.addEventListener('click', e => {
          e.preventDefault();
          window.location.href = '{{ product.url }}';
        })
      })
    </script>
  {%- endif %}

に変更します。

そうしましたら、下図のようにテーマカスタマイズ画面で、「特集商品」の「画像ズーム」を「ズームなし」にします。

このようにすると、

ご要望通りの挙動になるはずです。

ご参考まで。

(キュー田辺)

[しょっぱいマン]

キュー田辺さま

ご連絡がおそくなりました。

ご教授通りにコードを編集しましたら、意図した通りの動きになりました。

ありがとうございます！