FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

Craftのスライドショー(スライダー)画像全体に直接リンクをつけたい。

Craftのスライドショー(スライダー)画像全体に直接リンクをつけたい。

mina37
観光客
6 0 1

Craftの標準装備のスライダーを、画像を直接クリックしてリンクに飛ばせるようにしたいです。

セクション>slideshow.liquid  を編集し、ブロックとして追加はできました。

 

スマホビューだとタップでリンクするが、PCはビューからクリックしてもリンクすることができません。

 

hige
1件の返信1

株式会社おいかぜ
Shopify Partner
84 34 32

@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ストア制作・運営をサポートいたします。お仕事の依頼はDMか弊社ホームページのお問い合わせより連絡頂けますと幸いです。
解決のご参考になりましたら、いいね・ベストアンサーボタンの方何卒よろしくお願いいたします。
https://oikaze.jp