FROM CACHE - jp_header

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

mina37
観光客
6 0 1

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

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

 

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

 

hige
1件の返信1
株式会社おいかぜ
開拓者
77 31 27

@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