【Shopify】九十九悪嵐のうぇぶでざいんびぼうろく。〜スライダー画像を入れられるようにしてみるVer2.0編〜
1個前のバージョンはこちら↓
1個前のバージョンの解説はこちら↓
タイトルがただでさえ長いのに、Ver2.0と付けたからもっと長くなってしまった…読みにくくて申し訳ないです。一部機能が変更になったのでVer2.0という言葉を付け足しました。そっちの方がシステムっぽい、という実に単純な理由です。
変更点はこちら！
変更前
・ブロックで『画像』を入れ替えても、スライダーの画像が入れ替わらない
変更後
・ブロックで『画像』を入れ替えたら、スライダーの画像も入れ替わる
そんな機能別にいらないんだけど…という人は1個前のバージョンのままで大丈夫です。
あと、使っているファイルがほとんど一緒なのですが、いちいち1個前の確認するのが面倒という人のために、こちらのVer2.0だけで済むようにしました。ご安心ください（？）
前置きが長くなってしまい、申し訳ありません。
Ver2.0の始まり始まり〜。
※使用テーマは『Dawn』
【用意するもの】
・theme.liquid
・ja.schema.json
・スライダー用のLiquidファイル（image-slider.liquidなり、好きな名前でおっけーです）
１．theme.liquidに以下のコードを<head>タグ内に入れる
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>このコードを入れることで、スライダーが使えるようになります。やったね。
２．ja.schema.jsonに以下のコードを追記する
"image-slider": {
"name": "スライダー画像",
"settings": {
"slider_settings": {
"autoplay": {
"label": "自動再生"
},
"speed": {
"label": "速度"
},
"fade": {
"label": "フェード"
},
"arrow": {
"label": "ページ送りボタン"
},
"arrow_color": {
"label": "ページ送りボタンの色"
},
"pagination": {
"label": "ページネーション"
},
"pagination_color": {
"label": "ページネーションの色"
},
"label": "スライダーの設定"
}
},
"blocks": {
"heading": {
"settings": {
"heading": {
"label": "見出し"
}
},
"name": "見出し"
},
"slide_img": {
"settings": {
"slide_img": {
"label": "画像"
}
},
"name": "画像"
},
"slide_link": {
"settings": {
"slide_link": {
"label": "リンク"
}
},
"name": "リンク"
}
},
"presets": {
"name": "スライダー画像",
"category": "画像"
}
}ここを設定すると、各言語に対応したsectionになりますが、僕は日本人なので、日本語を書きます。他の言語を（他の言語も）使うよという人は、ja以外の該当するschema.jsonに各言語に対応した言葉を入れてください。
…あ、そうそう。追記するところの前に「,」を必ず入れてください。
じゃないとエラーが出て保存できないので…。
３．Sectionsディレクトリに新しいsectionを作る
名前は適当に…僕の場合はimage-slider.liquidにしました
４．３で作ったsectionに以下のコードを入れる
<style>
.swiper-container {
height: 500px;
}
.swiper-slide img {
object-fit: cover;
width: 100%;
height: 100%;
}
@media screen and (max-width: 750px) {
.swiper-container {
height: 250px;
}
}
</style>
{%- if section.settings.arrow -%}
<style>
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
display: inline !important;
color: {{ section.settings.arrow_color }};
}
</style>
{%- endif -%}
{%- if section.settings.pagination -%}
<style>
.swiper-pagination-bullet {
background: {{ section.settings.pagination_color }};
}
</style>
{%- endif -%}
<div class="slider__content page-width">
<div class="slider__box">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<!-- 見出し -->
<h2 class="slider__heading">
<span>{{ block.settings.heading }}</span>
</h2>
{%- endcase -%}
{%- endfor -%}
</div>
<!-- スライダー -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- スライダー -->
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'slide_img' -%}
<div class="swiper-slide">
{% if block.settings.slide_link %}
<a href="{{ block.settings.slide_link }}">
{% endif %}
{% if block.settings.slide_img %}
<img src="{{ block.settings.slide_img | img_url: '2800x' }}">
{% else %}
<img src="//cdn.shopify.com/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_2800x.gif">
{% endif %}
{% if block.settings.slide_link %}
</a>
{% endif %}
</div>
{%- endcase -%}
{%- endfor -%}
<!-- .スライダー -->
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
<!-- ページ送りボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<script type="text/javascript">
const swiper = new Swiper('.swiper-container', {
// 自動再生（true:自動再生する、false:自動再生しない）
autoplay: {% if section.settings.autoplay %}true{% else %}false{% endif %},
// スライド方向（水平方向）
direction: 'horizontal',
// エフェクト（true:フェードアニメーション、false:スライドアニメーション）
effect: {% if section.settings.fade %}'fade'{% else %}'slide'{% endif %},
// ループ
loop: true,
// 表示枚数
slidesPerView: 1,
// 速度（初期値:200ミリ秒）
speed: {{ section.settings.speed }},
// ページネーション（true:表示、false:非表示）
{% if section.settings.pagination %}
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
{% endif %}
// ページ送りボタン（true:表示、false:非表示）
{% if section.settings.arrow %}
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
{% endif %}
});
</script>
{% schema %}
{
"name": "t:sections.image-slider.presets.name",
"settings": [
{
"type": "checkbox",
"id": "autoplay",
"label": "t:sections.image-slider.settings.slider_settings.autoplay.label",
"default": true
},
{
"type": "range",
"id": "speed",
"min": 100,
"max": 1000,
"step": 100,
"unit": "ミリ秒",
"label": "t:sections.image-slider.settings.slider_settings.speed.label",
"default": 200
},
{
"type": "checkbox",
"id": "fade",
"label": "t:sections.image-slider.settings.slider_settings.fade.label",
"default": true
},
{
"type": "checkbox",
"id": "arrow",
"label": "t:sections.image-slider.settings.slider_settings.arrow.label",
"default": true
},
{
"type": "color",
"id": "arrow_color",
"label": "t:sections.image-slider.settings.slider_settings.arrow_color.label",
"default": "#000"
},
{
"type": "checkbox",
"id": "pagination",
"label": "t:sections.image-slider.settings.slider_settings.pagination.label",
"default": true
},
{
"type": "color",
"id": "pagination_color",
"label": "t:sections.image-slider.settings.slider_settings.pagination_color.label",
"default": "#000"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-slider.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "richtext",
"id": "heading",
"default": "<p>Image slider</p>",
"label": "t:sections.image-slider.blocks.heading.settings.heading.label"
}
]
},
{
"type": "slide_img",
"name": "t:sections.image-slider.blocks.slide_img.name",
"limit": 3,
"settings": [
{
"type": "image_picker",
"id": "slide_img",
"label": "t:sections.image-slider.blocks.slide_img.settings.slide_img.label"
},
{
"type": "url",
"id": "slide_link",
"label": "t:sections.image-slider.blocks.slide_link.settings.slide_link.label"
}
]
}
],
"presets": [
{
"name": "t:sections.image-slider.presets.name",
"category": "t:sections.image-slider.presets.category"
}
]
}
{% endschema %}これで完成になります！
完成図は省略します…ほとんど一緒なので…。
ここまでお付き合いいただき、ありがとうございました！
お疲れ様でした～。
P.S.このスライダーはまだ変更したいところがあるので、ちゃんと実装できたらVer3.0以降も投稿します！いつになるかは分かりませんが、お楽しみに〜。
この記事が気に入ったらサポートをしてみませんか？