Liquid、JavaScriptなどに関する質問
Dawnを利用しています。
こちら→Featured collection slider for Dawn Theme Shopify 2.0からお借りしたコードでスライダー機能を持つセクションを追加しました。
デスクトップ表示では特に問題ないのですが、タブレット・スマホ表示になった際にページ送りの部分が、8や13になったときに数字のカウントが増えずに、もう一度押した際に数が増えるという挙動になり、最後の商品までページを送ったときに表示の数字がずれてしまいます。
タブレット・スマホ表示になった際に、<li></li>の幅がうまく収まっていないのが原因かと思い、コンテンツ幅の調整を試みましたがページ送りの挙動の不具合は改善しませんでした。
対処方法をご教示頂けると助かります。
SectionsフォルダとAsssetsフォルダへ追加したコードを以下に記載します。
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}
{{ 'collection-slider.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'template-collection.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'template-collection.css' | asset_url | stylesheet_tag }}</noscript>
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
assign total_products = section.settings.collection.products.size
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
endif
-%}
<div class="slider-container collection page-width page-width-desktop">
<div class="title-wrapper-with-link{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
<h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
</div>
<slider-component style="display: block;" >
<ul class="product-slider-box grid grid--2-col product- {% if total_products == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop
{% else %} grid--3-col-tablet{% endif %}{% if total_products > 4 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}
{% if total_products > 2 %}
slider slider--tablet grid--peek{% endif %}
negative-margin--small"
role="list"
id="product-slider-box">
{%- for product in section.settings.collection.products -%}
<li class="product-slider grid__item slider__slide" id="product-slider"
data-slide-index="{{forloop.index}}">
{% render 'product-card',
product_card_product: product,
media_size: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
add_image_padding: section.settings.add_image_padding,
show_vendor: section.settings.show_vendor,
show_image_outline: section.settings.show_image_outline,
show_rating: section.settings.show_rating
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li class="grid__item">
{% render 'product-card-placeholder' %}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
{%- if section.settings.collection.all_products_count > 4 -%}
<div class="slider-buttons no-js-hidden {% if total_products < 4 %} small-hide{% endif %}" style="display: flex;">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">
{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
<span class="slider-counter--total"
data-total-products ="{{total_products}}">{{total_products}}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">
{% render 'icon-caret' %}</button>
</div>
{%- endif -%}
</slider-component>
</div>
{% schema %}
{
"name": "Collection Slider",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Featured Collection",
"label": "t:sections.featured-collection.settings.title.label"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "add_image_padding",
"default": false,
"label": "t:sections.featured-collection.settings.add_image_padding.label"
},
{
"type": "checkbox",
"id": "show_image_outline",
"default": true,
"label": "t:sections.featured-collection.settings.show_image_outline.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection.settings.show_rating.label",
"info": "t:sections.featured-collection.settings.show_rating.info"
}
],
"presets": [
{
"name": "Collection Slider"
}
]
}
{% endschema %}
.slider-container {
/*padding: 0 3rem;*/
width: 100%;
overflow: auto;
display: flex;
flex-flow: column wrap;
/*align-items: center;*/
position: relative;
}
ul {
padding-inline-start: 0px !important;
}
slider-component {
position: relative;
display: block;
width:100%;
}
.slider__slide {
scroll-snap-align: start;
flex-shrink: 0;
}
.product-slider-box {
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
width: 100%;
height: 100%;
display: flex;
}
.product-slider {
height: 100%;
width: calc(50% - .5rem / 2) !important;
display: inline-block;
}
.slide-image {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 989px) {
.grid__item {
padding-left: 1rem;
}
}
/* navigation slider */
.slider-buttons {
display: flex;
}
.slider {
scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
-ms-overflow-style: none;
scrollbar-width: none;
}
.slider::-webkit-scrollbar {
height: 0.4rem;
width: 0.4rem;
display: none;
}
.no-js .slider {
-ms-overflow-style: auto;
scrollbar-width: auto;
}
.no-js .slider::-webkit-scrollbar {
display: initial;
}
.slider::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-foreground));
border-radius: 0.4rem;
border: 0;
}
.slider::-webkit-scrollbar-track {
background: rgba(var(--color-foreground), 0.04);
border-radius: 0.4rem;
}
.slider-counter {
margin: 0 1.2rem;
}
.slider-buttons {
display: flex;
align-items: center;
justify-content: center;
}
.slider-button {
color: rgba(var(--color-foreground), 0.75);
background: transparent;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
}
.slider-button:not([disabled]):hover {
color: rgb(var(--color-foreground));
}
.slider-button .icon {
height: 0.6rem;
}
.slider-button[disabled] .icon {
color: rgba(var(--color-foreground), 0.3);
}
.slider-button--next .icon {
margin-right: -0.2rem;
transform: rotate(-90deg) translateX(0.15rem);
}
.slider-button--prev .icon {
margin-left: -0.2rem;
transform: rotate(90deg) translateX(-0.15rem);
}
.slider-button--next:not([disabled]):hover .icon {
transform: rotate(-90deg) translateX(0.15rem) scale(1.07);
}
.slider-button--prev:not([disabled]):hover .icon {
transform: rotate(90deg) translateX(-0.15rem) scale(1.07);
}
以上、よろしくお願いいたします。
EコマースのEメールマーケティングは適切なタイミングで、適切にパーソナライズされたメッセージを顧客に届ける方法であり、厳しさを増すインターネットの規制を受ける必要もありません。こ...
By Nanami May 21, 2023自分が一から立ち上げた独自店舗型のネットショップでは、個人が運営するショップや聞いたこともないブランドに不安を感じる顧客はたくさんいます。そのため、信頼がおけるネットショップを作り...
By rinaflora Apr 19, 20232023年のマーケティング予算計画について取り上げた2H MediaとのAMAにご参加いただいた皆様ありがとうございました。たくさんのすばらしいご質問が寄せられました。それらの質問...
By Jacqui Apr 18, 2023