shopify主题开发之template模板解析

咬尾巴的猫在coding

于 2024-09-16 22:28:43 发布

阅读量179

点赞数 6

分类专栏： Shopify主题模板开发文章标签：前端 html javascript json

本文链接：https://blog.csdn.net/FineHuan/article/details/142307782

版权

Shopify主题模板开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在 Shopify 主题开发中，template 文件是核心部分，它们定义了店铺中不同页面的布局和结构。下面将详细介绍 Shopify 主题中的 template 模板。

一、template 文件结构

在 Shopify 主题中，templates 文件夹包含了所有用于生成店铺页面的模板文件，使用两种不同的文件类型：JSON 和 Liquid。这些文件通常按照页面类型进行组织，例如：

layout：定义全局布局，如头部、底部和侧边栏等。
index：首页模板。
collection：集合页面模板，用于展示产品集合。
product：产品页面模板，用于展示单个产品。
blog：博客页面模板，包括博客列表和博客文章页面。
page：自定义页面模板，用于创建如关于我们、联系我们等页面。
customer：客户账户相关页面模板，如登录、注册、订单历史等。

二、liquid模板文件解析

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <!-- 引入 CSS 文件 -->  
    {{ 'product.css' | asset_url | stylesheet_tag }}  
</head>  
<body>  
    <!-- 引入头部布局 -->  
    {% include 'header' %}  
  
    <!-- 产品页面内容 -->  
    <div class="product-page">  
        <h1>{{ product.title }}</h1>  
        <p>{{ product.description }}</p>  
        <!-- 显示产品价格 -->  
        <p>Price: {{ product.price | money }}</p>  
  
        <!-- 添加购物车按钮 -->  
        <form action="/cart/add" method="post" enctype="multipart/form-data">  
            <input type="hidden" name="id" value="{{ product.id }}" />  
            <input type="hidden" name="return_to" value="{{ request.url }}" />  
            <button type="submit">Add to Cart</button>  
        </form>  
    </div>  
  
    <!-- 引入底部布局 -->  
    {% include 'footer' %}  
</body>  
</html>

三、json模板文件解析

/*
* ------------------------------------------------------------
* "layout":指定页面使用的布局模板文件名为theme.index.custom
*
* "sections":这个部分定义了页面上要显示的不同区块（sections）及其配置。每个区块都有其独特的类型（type）和一系列的配置项（settings和blocks）
*  
* "order":指定了页面上区块的显示顺序,首先显示image_banner区块，然后是featured_collection区块
* ------------------------------------------------------------
*/
{
  "layout": "theme.index.custom", 
  "sections": {
    "image_banner": {
      "type": "image-banner",
      "blocks": {
        "heading": {
          "type": "heading",
          "settings": {
            "heading": "Browse our latest products",
            "heading_size": "h1"
          }
        },
        "button": {
          "type": "buttons",
          "settings": {
            "button_label_1": "Shop all",
            "button_link_1": "shopify:\/\/collections\/all",
            "button_style_secondary_1": true,
            "button_label_2": "",
            "button_link_2": "",
            "button_style_secondary_2": false
          }
        }
      },
      "block_order": [
        "heading",
        "button"
      ],
      "settings": {
        "image_overlay_opacity": 40,
        "image_height": "large",
        "desktop_content_position": "bottom-center",
        "show_text_box": false,
        "desktop_content_alignment": "center",
        "color_scheme": "scheme-3",
        "image_behavior": "none",
        "mobile_content_alignment": "center",
        "stack_images_on_mobile": false,
        "show_text_below": false
      }
    },
    "featured_collection": {
      "type": "featured-collection",
      "settings": {
        "title": "Featured products",
        "heading_size": "h2",
        "description": "",
        "show_description": false,
        "description_style": "body",
        "collection": "all",
        "products_to_show": 8,
        "columns_desktop": 4,
        "full_width": false,
        "show_view_all": true,
        "view_all_style": "solid",
        "enable_desktop_slider": false,
        "color_scheme": "scheme-1",
        "image_ratio": "adapt",
        "image_shape": "default",
        "show_secondary_image": true,
        "show_vendor": false,
        "show_rating": false,
        "quick_add": "none",
        "columns_mobile": "2",
        "swipe_on_mobile": false,
        "padding_top": 44,
        "padding_bottom": 36
      }
    }
  },
  "order": [
    "image_banner",
    "featured_collection"
  ]
}