shopify模块新增内容或图片

news2024/11/14 11:56:18

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、后台效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2236840.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Ant Design Pro】不想用轻量的hook就喜欢用dva的数据状态管理

就像TS是JS的超集一样&#xff0c;antdpro框架也类似&#xff0c;底层也是用dva来构建的。关于数据管理&#xff0c;官方还是建议我们使用轻量的hooks方法来进行操作使用。 使用dva实现数据状态管理效果 框架中的数据管理模式 简单的数据共享 对于简单的应用&#xff0c;不需…

基于 CMSIS-PACK 移植Bootloader

基于 CMSIS-PACK 移植 1.准备工作 准备一份基础的裸机源码 (可通过 STM32CubeMx 可视化软件创建也可按照工程项目所需文档手动创建) 工程&#xff0c;如一份 stm32 包含一个支持 printf 的串口初始化代码。 2.安装Pack包 在 MDK 中部署 **MicroBoot **的第一步是获取对应的…

使用ChatGPT神速精读文献,12个高阶ChatGPT提示词指令,值得你复制使用

在学术研究的道路上,文献的阅读和分析往往是我们迈向深层次理解的第一步。如何有效提取文献中的核心要点,如何全面总结一个研究的背景与贡献,甚至如何深入剖析论文中的每个细节,都是每个研究者必须掌握的技能。通过系统化的文献分析,我们不仅能了解现有研究的框架与成果,…

PICO+Unity MR空间锚点

官方链接&#xff1a;空间锚点 | PICO 开发者平台 注意&#xff1a;该功能只能打包成APK在PICO 4 Ultra上真机运行&#xff0c;无法通过串流或PICO developer center在PC上运行。使用之前要开启视频透视。 在 Inspector 窗口中的 PXR_Manager (Script) 面板上&#xff0c;勾选…

Python Matplotlib 如何绘制股票或金融数据图

Python Matplotlib 如何绘制股票或金融数据图 在金融领域&#xff0c;数据可视化是分析市场趋势、股票表现和财务健康的重要工具。Python 的 Matplotlib 库为我们提供了强大的功能来绘制股票和金融数据图。本文将详细介绍如何使用 Matplotlib 绘制这些图表&#xff0c;并且结合…

Golang--反射

1、概念 反射可以做什么? 反射可以在运行时动态获取变量的各种信息&#xff0c;比如变量的类型&#xff0c;类别等信息如果是结构体变量&#xff0c;还可以获取到结构体本身的信息(包括结构体的字段、方法)通过反射&#xff0c;可以修改变量的值&#xff0c;可以调用关联的方法…

【Web前端】使用 JSON 处理数据

JSON 是一种基于 JavaScript 对象语法的数据格式&#xff0c;由道格拉斯克罗克福特推广。尽管其语法源于 JavaScript&#xff0c;JSON 仍然是独立于 JavaScript 的&#xff0c;这也是为什么许多编程环境能够解析和生成 JSON 的原因。JSON 可以以对象或字符串的形式存在&#xf…

VMware 虚拟机使用教程及 Kali Linux 安装指南

VMware 虚拟机使用教程及 Kali Linux 安装指南 在现代计算机科学与网络安全领域&#xff0c;虚拟化技术的应用越来越广泛。VMware 是一款功能强大的虚拟化软件&#xff0c;可以帮助用户在同一台物理机上运行多个操作系统。本文将详细介绍如何使用 VMware 虚拟机&#xff0c;并…

达梦8数据库适配ORACLE的8个参数

目录 1、概述 1.1 概述 1.2 实验环境 2、参数简介 3、实验部分 3.1 参数BLANK_PAD_MODE 3.2 参数COMPATIBLE_MODE 3.3 参数ORDER_BY_NULLS_FLAG 3.4 参数DATETIME_FMT_MODE 3.5 参数PL_SQLCODE_COMPATIBLE 3.6 参数CALC_AS_DECIMAL 3.7 参数ENABLE_PL_SYNONYM 3.8…

三十四、VB基本知识与提高篇

一、代码编写规则: (一)标识符的使用规则: 标识符有两种:一种是系统关键字,另一种是自己定义标识符。 1、不能与系统关键字相同。 2、同一作用域(块)中不同出现重名标识符。用户自定义的标识符是不区分大小写的。 3、自定义标识符必须以字母开头,长度不能超过255…

数据冒险-ld和add(又称load-use冒险)

第一张图没有使用前递&#xff0c;第二张图使用前递&#xff0c;chatgpt分析第二张图 这张图展示了一个流水线的执行过程&#xff0c;其中存在读后写&#xff08;RAW&#xff09;数据冒险。我们可以通过**前递&#xff08;Forwarding&#xff09;**技术来解决这个数据冒险&…

Coppelia Sim (v-REP)仿真 机器人3D相机手眼标定与实时视觉追踪 (三)

使用标定好的结果进行跟踪标定板的位置 坐标转换的步骤为&#xff1a; 1.图像坐标点转到相机坐标系下的点 2.相机坐标系下的点转为夹爪坐标系下的点 3.夹爪坐标系下的点转为机械手极坐标系下的点 跟踪的方式 1.采用标定板的第一个坐标点作为跟踪点 3.机器人每次移动到该点位&a…

石墨舟氮气柜:半导体制造中的关键保护设备

石墨舟是由高纯度石墨材料制成的&#xff0c;主要用于承载硅片或其他基板材料通过高温处理过程&#xff0c;是制造半导体器件和太阳能电池片的关键设备之一。 石墨舟在空气中容易与氧气发生反应&#xff0c;尤其是在高温处理后&#xff0c;表面可能更为敏感&#xff1b;石墨舟具…

跟着大厂学AI | 智谱AI文本数据提取实践(大模型实战篇)

书接上回理论篇&#xff0c;本文详细介绍LLM处理模块、Prompt 构建、数据抽取后处理、数据校验、数据修复具体实战教程。 想看方案理论教程详见&#xff1a; 跟着大厂学AI | 大模型文本数据提取实践&#xff08;理论篇&#xff09;-CSDN博客文章浏览阅读2次。glm4大模型数据处…

大数据-213 数据挖掘 机器学习理论 - KMeans Python 实现 距离计算函数 质心函数 聚类函数

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

【Pikachu】File Inclusion文件包含实战

永远也不要忘记能够笑的坚强&#xff0c;就算受伤&#xff0c;我也从不彷徨。 1.File Inclusion(文件包含漏洞)概述 File Inclusion(文件包含漏洞)概述 文件包含&#xff0c;是一个功能。在各种开发语言中都提供了内置的文件包含函数&#xff0c;其可以使开发人员在一个代码…

材质(二)——材质参数化,从源材质继承生成不同的材质实例

继承原材质&#xff0c;对外提供参数。 更改调制不同的参数&#xff0c;生成不同的材质实例。 类似于&#xff0c;类的继承。有一个基类Base.继承生成为子类 A_Base,B_Base,C_Base

java的面向对象(从入门到深入)

目录 一、基本概念&#xff1a; 1.类 2.对象 3.继承 4.多态 5.封装 6.方法 7.接口 8.抽象 二、深入概念&#xff1a; 三:总结 一、基本概念&#xff1a; 1.类 类就是一个一个东西的蓝图&#xff0c;里面有着它的属性和方法。 2.对象 对象是一个类的实例化。 3.继承…

FPGA实现串口升级及MultiBoot(六)ICAPE2原语实例讲解

本文目录索引 一个指令和三种方式通过ICAPE2原语添加ICAPE2 IP构建Golden位流工程MultiBoot位流工程验证example2总结代码缩略词索引: K7:Kintex 7V7:Vertex 7A7:Artix 7MB:MicroBlaze上一篇文章种总结了MultiBoot 关键技术,分为:一个指令、二种位流、三种方式、四样错误。针…

自动泊车端到端算法 ParkingE2E 介绍

01 算法介绍 自主泊车是智能驾驶领域中的一项关键任务。传统的泊车算法通常使用基于规则的方案来实现。因为算法设计复杂&#xff0c;这些方法在复杂泊车场景中的有效性较低。 相比之下&#xff0c;基于神经网络的方法往往比基于规则的方法更加直观和多功能。通过收集大量专家…