Liquid、JavaScriptなどに関する質問
Craftの標準装備のスライダーを、画像を直接クリックしてリンクに飛ばせるようにしたいです。
セクション>slideshow.liquid を編集し、ブロックとして追加はできました。
スマホビューだとタップでリンクするが、PCはビューからクリックしてもリンクすることができません。
@mina37 さん
はじめまして
もうすでに解決されてましたら蛇足になりますが、
PC/スマホ問わず、スライダー全体にリンクをつけたいうという事で、
手取り早い方法として、slideshow.liquid内のスライド画像とテキストボタンのエリアのHTMLの外側にaタグを追加で記述することで実現可能です。
スライド画像エリアのコードはこちらです。
<a {% if block.settings.link %} href="{{ block.settings.link }}"{% endif %}>
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}">
{%- if block.settings.image -%}
<img
srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
{%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
{%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
{%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
{%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
{{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
sizes="100vw"
src="{{ block.settings.image | image_url: width: 1500 }}"
loading="lazy"
alt="{{ block.settings.image.alt | escape }}"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
>
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
</div>
</a>
スライド画像のHTMLを囲むaタグ「<a {% if block.settings.link %} href="{{ block.settings.link }}"{% endif %}>」と、「</a>」を追加しています。。
また、テキスト&ボタンエリアのコードがこちらです。
<a {% if block.settings.link %} href="{{ block.settings.link }}"{% endif %} style="display: block; width: 100%;height: 100%;text-decoration: none;">
<div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
{%- if block.settings.heading != blank -%}
<h2 class="banner__heading {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
{%- endif -%}
{%- if block.settings.subheading != blank -%}
<div class="banner__text" {{ block.shopify_attributes }}>
<span>{{ block.settings.subheading | escape }}</span>
</div>
{%- endif -%}
{%- if block.settings.button_label != blank -%}
<div class="banner__buttons">
{{ block.settings.button_label | escape }}
</div>
{%- endif -%}
</div>
</div>
</a>
画像上のテキスト&ボタンのエリアのHTMLを囲むaタグ「<a {% if block.settings.link %} href="{{ block.settings.link }}"{% endif %} style="display: block; width: 100%;height: 100%;text-decoration: none;">」と「</a>」を追加しました。
こちらでPC/スマホどちらでも、エディタ上で設定したリンクに飛べるスライドショーにカスタマイズ出来ます。
また、さらにカスタマイズしたいとのことでしたらSwiperなどに載せ替えてみるのも一つの手かなと思います。
<参考>
https://torublog.com/shopify-slideshow-swiper-js/
少しでも参考になりましたら幸いです。
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024