1、后台找到指定的liquid页面,在该页面下方{% schema %} 新增需求
2、添加轮播图功能
{% comment %} 轮播代码 {% endcomment %}
{% if block.settings.enable_slider %}
<div
class="size-guide-slider swiper"
data-slides-per-view="{{ block.settings.slides_per_view | default: 2 }}"
>
<div class="swiper-wrapper">
{% for slide in section.blocks %}
{% if slide.type == 'slide' %}
<div class="swiper-slide">
{% if slide.settings.slide_image %}
<img
src="{{ slide.settings.slide_image | image_url: width: 2000 }}"
alt="{{ slide.settings.slide_title }}"
loading="lazy"
width="{{ slide.settings.slide_image.width }}"
height="{{ slide.settings.slide_image.height }}"
>
{% endif %}
{% if slide.settings.slide_title != blank %}
<div class="slide-title">{{ slide.settings.slide_title }}</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
{% endif %}
3、补充JQ
<script type="text/javascript" defer="">
document.addEventListener('DOMContentLoaded', function () {
(() => {
const node = document.querySelector('#shopify-section-{{section.id}}');
const carousels = node.querySelectorAll('[carousel]');
let swipers = [];
carousels.forEach((carousel, i) => {
const swiper = new Swiper(carousel, {
allowTouchMove: false,
loop: true,
});
swipers.push(swiper);
});
const contentCarousel = node.querySelector('[content]');
const prevEl = node.querySelector('[prev]');
const nextEl = node.querySelector('[next]');
const swiper = new Swiper(contentCarousel, {
effect: 'fade',
loop: true,
fadeEffect: {
crossFade: true,
},
navigation: {
nextEl: nextEl,
prevEl: prevEl,
},
});
swiper.controller.control = swipers;
swiper.controller.control = swipers;
swiper.controller.control = swipers;
})();
});
document.addEventListener('DOMContentLoaded', function () {
// Function to initialize tabs
function initializeTabs() {
// Get all tab headers
const tabHeaders = document.querySelectorAll('.tab-header');
// Get all tab content elements
const tabContents = document.querySelectorAll('.tab-content');
// Add click event listener to each tab header
tabHeaders.forEach(function (header) {
header.addEventListener('click', function () {
// Remove 'active' class from all headers and contents
tabHeaders.forEach(function (item) {
item.classList.remove('active');
});
tabContents.forEach(function (content) {
content.classList.remove('active');
});
// Add 'active' class to the clicked header and corresponding content
this.classList.add('active');
document.getElementById(this.getAttribute('data-tab')).classList.add('active');
});
});
}
// Initialize tabs when the document is ready
initializeTabs();
// Initialize size guide slider
const sizeGuideSlider = new Swiper('.size-guide-slider', {
slidesPerView: parseInt(document.querySelector('.size-guide-slider').dataset.slidesPerView),
slidesPerGroup: parseInt(document.querySelector('.size-guide-slider').dataset.slidesPerView),
spaceBetween: 30,
slidesPerGroup: 2,
loop: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
</script>
后台的tab 模块区域 ,
{% schema %}
{
"name": "Tab Content",
"settings": [
{
"type": "url",
"id": "video_url",
"label": "Video URL",
"info": "Enter the URL of the video you want to display."
},
{
"type": "image_picker",
"id": "cover_image",
"label": "Cover Image",
"info": "Select the cover image that appears before the video plays."
}
],
"blocks": [
{
"type": "FAQ",
"name": "FAQ",
"limit": 1,
"settings": [
{
"type": "text",
"id": "tab_title",
"label": "Tab Title"
},
{
"type": "image_picker",
"id": "icon_image",
"label": "Tab Icon"
},
{
"type": "number",
"id": "icon_width",
"label": "Icon Width",
"info": "Enter the width of the icon in pixels.",
"default": 50
},
{
"type": "number",
"id": "icon_height",
"label": "Icon Height",
"info": "Enter the height of the icon in pixels.",
"default": 50
}
]
},
{
"type": "faq_item",
"name": "FAQ Item",
"limit": 20, // 可以限制 FAQ 项的数量
"settings": [
{
"type": "text",
"id": "question",
"label": "Question",
"default": "Do you ship overseas?"
},
{
"type": "richtext",
"id": "answer",
"label": "Answer",
"default": "<p>Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals.</p>"
}
]
},
{
"type": "size_guide",
"name": "Size Help",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "enable_slider",
"label": "Enable Image Slider",
"default": false
},
{
"type": "range",
"id": "slides_per_view", // 一屏幕显示几个
"min": 1,
"max": 4,
"step": 1,
"label": "Slides Per View",
"default": 2
},
{
"type": "text",
"id": "tab_title",
"label": "Tab Title"
},
{
"type": "image_picker",
"id": "icon_image",
"label": "Tab Icon"
},
{
"type": "number",
"id": "icon_width",
"label": "Icon Width",
"info": "Enter the width of the icon in pixels.",
"default": 50
},
{
"type": "number",
"id": "icon_height",
"label": "Icon Height",
"info": "Enter the height of the icon in pixels.",
"default": 50
},
{
"type": "richtext",
"id": "size_help_text",
"label": "Size help text"
},
{
"type": "image_picker",
"id": "size_guide_image",
"label": "Size help image"
},
{
"type": "video",
"id": "video",
"label": "Size help video"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping"
}
]
},
{
"type": "slide",
"name": "Slider Image", // 轮播图
"settings": [
{
"type": "image_picker",
"id": "slide_image",
"label": "Slide Image"
},
{
"type": "text",
"id": "slide_title",
"label": "Slide Title",
"default": "Slide Title"
}
]
},
{
"type": "help_text_item",
"name": "Help Text Item",
"limit": 20, // 可以限制 FAQ 项的数量
"settings": [
{
"type": "text",
"id": "helpText",
"label": "title",
"default": "title"
},
{
"type": "richtext",
"id": "helpContent",
"label": "content",
"default": "<p>conent</p>"
}
]
},
{
"type": "materials_care",
"name": "Materials and Care",
"limit": 1,
"settings": [
{
"type": "text",
"id": "tab_title",
"label": "Tab Title"
},
{
"type": "image_picker",
"id": "icon_image",
"label": "Tab Icon"
},
{
"type": "number",
"id": "icon_width",
"label": "Icon Width",
"info": "Enter the width of the icon in pixels.",
"default": 50
},
{
"type": "number",
"id": "icon_height",
"label": "Icon Height",
"info": "Enter the height of the icon in pixels.",
"default": 50
},
{
"type": "header",
"content": "Material content"
},
{
"type": "text",
"id": "material_title",
"label": "Title"
},
{
"type": "richtext",
"id": "material_content",
"label": "Content"
},
{
"type": "header",
"content": "Care"
},
{
"type": "text",
"id": "care_title",
"label": "Title"
},
{
"type": "richtext",
"id": "care_content",
"label": "Content"
}
]
}
]
}
{% endschema %}
4、后台效果: