shopify 二次开发

Joanna_Na
3,786 阅读3分钟

目录结构解析

  • Layout ------------------ 整体布局
  • Templates --------------- 模版，cart、collection、customers、page、product、search、article、blog等可供外面选择对应功能的不同展示模版
  • Sections ---------------- 代码块
  • Snippets ---------------- 代码小块，有点类似于组件
  • Assets ------------------ 静态资源，js,img,css,font等
  • Config ------------------ 自定义配置数据及配置，可供customize用户自定义定制使用
  • Locales ----------------- 语言包

本地开发环境搭建

  1. 安装shopify-theme本地开发套件
brew tap shopify/shopify 
brew install themekit
  1. 获取shopify API权限，目的是为了获取密码用于连接本地开发和shopify商店

  1. 拉取远程模版代码到本地
theme get --password=在操作2中得到的password --store=应用网址 -t=模版主题id
  1. 启动
theme watch --allow-live

查看liquid模版语言文档

image.png

{{}} ------------ 变量

{%%} ------------ 控制流

assign、 capture --------------------- 声明变量

{{-、-}}、{{%-、-%}} ------------------ 输出内容的左侧或右侧的空格符被去除

{% raw %} {% endraw %} --------------- 不转义，保留原始内容

{% comment %} {% endcomment %} ------- 注释

其他细节内容查看文档： liquid.bootcss.com/

Shopify Liquid Objects

  • forloop

    父循环for循环的属性,有 first、index、index0、last、length、rindex、rindex0

  • all_products

    商店里的所有产品集合，子集为product

        {{ all_products['wayfarer-shades'].title }}

  • collections

    商店里的所有分类集合，子集为collection，有

    all_products_count、all_tags、all_type、all_vendors、currrent_type、default_sort_by、description、featured_image、filters、handle、id、image、next_product、previous_product、products、products_count、published_at、sort_by、sort_options、template_suffix、title、tags、url

    等属性

  • cart

    商店购物车，有

    attributes、cart_level_discount_applications、currency、discount_applications、item_count、items、items_subtotal_price、note、original_total_price、taxes_included、total_discount、total_price、total_weight

    等属性

  • product

    商品对象，有

    availbale、collections、compare_at_price、compare_at_price_max、compare_at_price_min、compare_at_price_varies、content、created_at、description、featured_image、featured_media、first_available_variant、gift_card、handle、has_only_default_variant、id、images、media、options、options_by_name、 options_with_values、price、price_max、price_min、price_varies、published_at、requires_selling_plan、selected_variant、selected_or_first_available_variant、selected_or_first_available_selling_plan_allocation、selected_selling_plan、selected_selling_plan_allocation、selling_plan_groups、tags、template_suffix、 title、type、url、variants、vendor

    等属性

  • pages

    商店的自定义页集合，子集为page，有 author、content、handle、id、published_at、template_suffix、title、url 等属性

    image.png

  • shop

    商店的信息，有

    address、checkout.guest_login、collections_count、currency、customer_accounts_enabled、customer_accounts_optional、description、domain、email、enabled_currencies、enabled_payment_type、id、metafields、money_format、money_with_currency_format、name、password_message、permanent_domain、phone、policies、privacy_policy、published_locales、refund_policy、shipping_policy、subscription_policy、terms_of_service、products_count、secure_url、types、url、vendors

    等属性

  • section

    section对象允许您访问section的属性和设置值，有 blocks、id、settings 等属性

  • block

    目录sections下section文件中页面设置的 schema 的 blocks 的对象的 单个设置项

    有 id、settings、shopify_attributes、type 等属性

  • settings

    schema定义

        { "type": "text", "id": "message", "label": "Message", "default": "Hello!" }

    使用

    // Settings
Message: {{ settings.message }}
// Section 
Message: {{ section.settings.message }} 
// Block 
Message: {{ block.settings.message }}

    type的值为 color、image_picker、page、product、richtext、text、url

  • template

    当前模版.liquid 的 模版名称，有 directory（上级名称）、name（名称）、suffix（后缀） 属性

  • content_for_header

    在theme.liquid中需要content_for_header对象。 它必须放在HTML 标签中。它动态地将Shopify所需的所有脚本加载到文档头部。 这些脚本包括Shopify analytics、谷歌analytics和Shopify应用程序所需的脚本。

  • content_for_index

    content_for_index对象包含要在主页上呈现的动态部分的内容。 该对象必须包含在templates/index.liquid中。

  • content_for_layout

    在theme.liquid中需要content_for_layout对象。 它必须放在HTML 标签中。 它动态加载其他模板(如index)生成的内容，如index.liquid或product.liquid。

其他细节内容查看文档：shopify.dev/api/liquid/…

Shopify Liquid Filters

  • Array

    对数组的处理，有 join、first、last、concat、index、map、reverse、size（数组长度）、sort、where、uniq（唯一、去除重复）等。

        // where, 输入type为kitchen的所有商品
    {% assign kitchen_products = collection.products | where: "type", "kitchen" %}
   
    // map，取数组中title字段的所有值的集合
    {% assign collection_titles = collections | map: 'title' %}

  • Math

    数学对象，可对数字做相应处理，有 abs、at_most（最大值）、at_least（最小值）、ceil（整数）、divided_by（除）、floor、minus（减）、plus（加）、round（取小数点后几位）、times（乘）、modulo（处以一个数字并返回余数）等

  • Media

    图片、视频等媒体的处理，有 external_video_tag（生成iframe包含vimeo或youtube视频播放器）、external_video_url（与external_video_tag一起使用，用于给视频路径传参）、img_tag、img_url（裁剪图片的不同尺寸大小）、media_tag（model-viewer的生成，可以和image_size一起使用，更改图像的大小）、model_viewer_tag（给model-viewer的传递属性值）、video_tag等

        // asset_url: asset文件里的图片路径，输出带src 路径的 img 的html标签
    {% if product.featured_media.media_type == "image" %}

        {{ product.featured_media | asset_url | img_tag }}

    {% endif %}
    
    
    // 输出 图片字符串
    {% if product.featured_media.media_type == "image" %}

        {{ product.featured_media | img_url: 500x500 }}
        {{ product.featured_media | img_url }}

    {% endif %}

  • String

    字符串对象处理，有 remove、remove_first、replace、replace_first、slice、split、strip（去除两边空格）、strip_html、url_encode、url_escape（转义特殊字符，如<，>等）等等

        // 输出删除了 html 的纯文本
    {{ "<h1>Hello</h1> World" | strip_html }}

  • Url 链接处理，有 asset_url（assets文件夹下的）、asset_img_url（assets文件夹下的图片）、file_url、file_img_url、customer_login_link（登录页地址）、global_asset_url、img_url（有crop[裁剪位置]、scale[放大倍数]、format[图片格式]等参数）、link_to（带a标签的链接）、link_to_vendor、link_to_type、link_to_tag、link_to_add_tag、link_to_remove_tag、payment_type_img_url、shopify_asset_url、sort_by、url_for_type、url_for_vendor、within 等等

其他细节内容查看文档：shopify.dev/api/liquid/…

avatar
文章
阅读
粉丝