shopify开发总结

柯升

2023-12-01

shopify开发

准备工作


// 1. mac安装程序

brew tap shopify
brew install themekit    // 类似于 node.js 

// 2. 注册shopify

// 3. shopify设置成中文
==> 后台页面左下角设置 ==> store language ==> 当前语言设置成简体中文

// 4. 设置专用应用
应用-创建专有应用 ==> 权限 ==> 选择模版（允许读取和写入）
// 4. 下载主题

// 5。 添加主题， 
将准备好的主题压缩成zip文件 ==> 目录：在线商店-模版-添加模版 ==> 添加成功后在操作中发布

// 6. vscode准备
打开解压好的主题 ==> 

在页面中创建 config.yml文件，内容如下 ：

development:
  password: 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
  theme_id: "124534685867"
  store: shy-boys.myshopify.com


//说明 ： 密码位置 ： shopify后台==> 应用 ==》 管理专有应用 ==> 点开专有应用名称 ==> 找到密码
//        theme_id 位置 ： shopify后台 ==> 在线商店 ==> 模版 ==> 自定义 ==> url上的数字就是主题id

 //        store ：当前url的链接， 不要http， 内容如上


 // 7. 命令启动本地和远程连接


// theme get  拉取shopify店铺主题最新代码
// theme watch --allow-live  动态监听代码变更及上传

// 说明 ：当在后台手动修改了配置后， 本地需要更新代码使用 theme get来获取最新的代码
// 当本地修改了代码， 代码会自动提交到远程， 不需要像git一样进行远程push

主题目录说明

assets

和vue结构一样，存放一些静态文件的地方，比如img，字体图标，公共js， js插件等

config

当前保存的主题配置

settings_data.json

当前已经选好的所有数据，最好不要动这里

“current”: 当前已选择了的所有 sections

“presets”: 能在 Add section 目录中看到的预设的 section

settings_schema.json

列出全局主题设置, 注意是全局的，使用 settings.xxxx来获取设置的值

layout

默认下是theme.liquid, 类似于vue中的html文件

sections

可复用模块, 说简单点就是组件存放的地方（普通组件）
注意事项：

一般只在这里使用 schema，来配置哪些需要自定义输入(shopify的精髓即在此)
section不能调用section
section调用全局的直接settings.xxxx即可，本地的用前面加session.section调用全局的直接settings.xxxx才可以
4.导入section ==> {%- section 'prime-banner' -%}

snippets

小模块，比section更小的模块，通常是静态的
导入使用 include或者reder，用法如sections

templates

路由模块
通过 page.xxxx.liquid的文件命名格式就可以作为shopify的后面页面开使用

config.yml

本地开发与远程数据修改的桥梁

liquid语言学习

学习地址： https://liquid.bootcss.com/filters/escape/

总结：是一门不太好用的语言

基础语法

申明变量


// 单行
      {%- assign natural_height = false -%}

// 内容内为变量
      {% capture my_variable %}I am being captured.{% endcapture %}

// 多行

{% liquid 
        assign product_img = block.settings.top_products_img
        assign product_sale_percent = product_price_sale | divided_by: product_price_virtual | times: 100 | minus: 100 | abs | round | append: '%' 
      %}

操作符

== 相等
!= 不相等

大于
< 小于
= 大于或等于
<= 小于或等于
or 逻辑或
and 逻辑与


{% if product.type == "Shirt" or product.type == "Shoes" %}
  This is a shirt or a pair of shoes.
{% endif %}

// contains 包含
{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}

// if/else

{% assign username = "John G. Chalmers-Smith" %}
{% if username and username.size > 10 %}
  Wow, {{ username }}, you have a long name!
{% else %}
  Hello there!
{% endif %}

for循环

first


input :
{% for product in collections.frontpage.products %}
    {% if forloop.first == true %}
        First time through!
    {% else %}
        Not the first time.
    {% endif %}
{% endfor %}

output :
First time through!
Not the first time.
Not the first time.
Not the first time.
Not the first time.

index


input :
{% for product in collections.frontpage.products %}
    {{ forloop.index }}
{% else %}
    // no products in your frontpage collection
{% endfor %}

output :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16


 - index0

```javascript

input :
{% for product in collections.frontpage.products %}
  {{ forloop.index0 }}
{% endfor %}

output :
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15


 - last

```javascript

input :
{% for product in collections.frontpage.products %}
    {% if forloop.last == true %}
        This is the last iteration!
    {% else %}
        Keep going...
    {% endif %}
{% endfor %}

output :
Keep going...
Keep going...
Keep going...
Keep going...
Keep going...
This is the last iteration!


 - length

```javascript

input :
<!-- if collections.frontpage.products contains 4 products -->
{% for product in collections.frontpage.products %}
  {% if forloop.first %}
  <p>This collection has {{ forloop.length }} products:</p>
  {% endif %}
  <p>{{ product.title }}</p>
{% endfor %}

output :
This collection has 4 products:
Apple
Orange
Peach
Plum


 - rindex0

```javascript

input :
{% for product in collections.frontpage.products %}
    {{ forloop.rindex0 }}
{% endfor %}

output :
15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0

项目

page

<div class="prime_day">
  {%- section 'prime-banner' -%}
  {%- section 'prime-top-products' -%}
  {%- section 'prime-featured-products' -%}
</div>

<style>
.prime_day [data-animate_images=true] .lazyload {
  opacity:0
}
.prime_day [data-animate_images=true] .lazyloaded {
  opacity:1;
  animation:0.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
  animation-name:zoom-fade-small;
  transition:none;
}
.prime_day [data-animate_text=true] {
  opacity: 0;
}
.prime_day .lazyloaded [data-animate_text=true]{
  opacity: 1;
  animation: 0.8s cubic-bezier(0.26, 0.54, 0.32, 1) 0.3s forwards;
  animation-name: rise-up;
}
</style>

blocks

{% for block in section.blocks %}
      {% liquid 
        assign product_img = block.settings.top_products_img
        assign product_img_mobile = block.settings.top_products_img_mobile
        assign product_image = block.settings.top_products_image
        assign product_image_mobile = block.settings.top_products_image_mobile
        assign voice_control = block.settings.assistantable
        assign product_title = block.settings.top_products_title
        assign product_sub_title = block.settings.top_products_sub_title
        assign product_price_sale = block.settings.top_products_price_sale 
        assign product_price_virtual = block.settings.top_products_price_virtual 
        assign product_url = block.settings.top_products_url
        assign product_sale_percent = product_price_sale | divided_by: product_price_virtual | times: 100 | minus: 100 | abs | round | append: '%' 
      %}
  <a href="{{ product_url }}" target="_blank" rel="nofollow" class="top_product_wrap">
  </a> 
{% endfor %}

sections使用

{% liquid
  assign discount_bg = 'https://cdn.shopifycdn.net/s/files/1/0556/4203/0246/files/265_2x_1e877f82-e25a-45de-863d-fce15adeda91.png?v=1623512350'  

  assign voice_bg = 'https://cdn.shopifycdn.net/s/files/1/0556/4203/0246/files/195_2x_831e54fd-1076-47c0-a70d-2e9768ba9b44.png?v=1623512350'  

  assign star_bg = 'https://cdn.shopifycdn.net/s/files/1/0556/4203/0246/files/27_2x_f8989dcf-e752-4200-af30-532a69d4aa9a.jpg?v=1623514323'

  assign header = section.settings.top_header

%}

type类型

image

<img data-src="{{ product_image | img_url: 'master' }}" alt="{{ product_image.alt }}" class="lazyload mobile-hide">

checkbox

<div class="top_voice_wrap {% unless voice_control %} hide {% endunless %}">
      <img src="{{ voice_bg }}" alt="" class="lazyload">
    </div>

range

select


    {%- if section.settings.section_height == 'natural' or section.settings.mobile_height == 'auto' -%}
    {%- endif -%}

textarea

url

<a href="{{ product_url }}" target="_blank" rel="nofollow" class="top_product_wrap">
</a>


{
    "name": "Slideshow",
    "class": "index-section--hero",
    "max_blocks": 5,
    "settings": [
      {
        "type": "select",
        "id": "section_height",
        "label": "Desktop height",
        "default": "650px",
        "options": [
          {
            "label": "Natural",
            "value": "natural"
          },
          {
            "label": "450px",
            "value": "450px"
          },
          {
            "label": "550px",
            "value": "550px"
          },
          {
            "label": "650px",
            "value": "650px"
          },
          {
            "label": "750px",
            "value": "750px"
          },
          {
            "label": "Full screen",
            "value": "100vh"
          }
        ]
      },
      {
        "type": "select",
        "id": "mobile_height",
        "label": "Mobile height",
        "default": "auto",
        "options": [
          {
            "label": "Auto",
            "value": "auto"
          },
          {
            "label": "250px",
            "value": "250px"
          },
          {
            "label": "300px",
            "value": "300px"
          },
          {
            "label": "400px",
            "value": "400px"
          },
          {
            "label": "500px",
            "value": "500px"
          },
          {
            "label": "Full screen",
            "value": "100vh"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "parallax",
        "label": "Enable parallax",
        "default": true
      },
      {
        "type": "select",
        "id": "style",
        "label": "Slide navigation style",
        "default": "minimal",
        "options": [
          {
            "value": "minimal",
            "label": "Minimal"
          },
          {
            "value": "arrows",
            "label": "Arrows"
          },
          {
            "value": "dots",
            "label": "Dots"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": "Auto-change slides",
        "default": true
      },
      {
        "type": "range",
        "id": "autoplay_speed",
        "label": "Change images every",
        "default": 7,
        "min": 5,
        "max": 10,
        "step": 1,
        "unit": "s"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Slide",
        "settings": [
          {
            "type": "checkbox",
            "id": "sign_form_valiable",
            "label": "Append Sign Up Form",
            "default": false
          },
          {
            "type": "textarea",
            "id": "title",
            "label": "Heading",
            "default": "Two line\nslide title."
          },
          {
            "type": "range",
            "id": "title_size",
            "label": "Heading text size",
            "default": 80,
            "min": 40,
            "max": 100,
            "unit": "px"
          },
          {
            "type": "text",
            "id": "subheading",
            "label": "Subheading",
            "default": "And an optional subheading"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Slide link"
          },
          {
            "type": "text",
            "id": "link_text",
            "label": "Slide link text",
            "default": "Optional button"
          },
          {
            "type": "select",
            "id": "text_align",
            "label": "Text alignment",
            "default": "vertical-bottom horizontal-left",
            "options": [
              {
                "value": "vertical-center horizontal-left",
                "label": "Center left"
              },
              {
                "value": "vertical-center horizontal-center",
                "label": "Center"
              },
              {
                "value": "vertical-center horizontal-right",
                "label": "Center right"
              },
              {
                "value": "vertical-bottom horizontal-left",
                "label": "Bottom left"
              },
              {
                "value": "vertical-bottom horizontal-center",
                "label": "Bottom center"
              },
              {
                "value": "vertical-bottom horizontal-right",
                "label": "Bottom right"
              }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Mobile image"
          },
          {
            "type": "range",
            "id": "overlay_opacity",
            "label": "Text protection",
            "info": "Darkens your image to ensure your text is readable",
            "default": 0,
            "min": 0,
            "max": 100,
            "step": 2,
            "unit": "%"
          },
          {
            "type": "select",
            "id": "focal_point",
            "label": "Image focal point",
            "info": "Used to keep the subject of your photo in view.",
            "default": "center center",
            "options": [
              {
                "value": "20% 0",
                "label": "Top left"
              },
              {
                "value": "top center",
                "label": "Top center"
              },
              {
                "value": "80% 0",
                "label": "Top right"
              },
              {
                "value": "20% 50%",
                "label": "Left"
              },
              {
                "value": "center center",
                "label": "Center"
              },
              {
                "value": "80% 50%",
                "label": "Right"
              },
              {
                "value": "20% 100%",
                "label": "Bottom left"
              },
              {
                "value": "bottom center",
                "label": "Bottom center"
              },
              {
                "value": "80% 100%",
                "label": "Bottom right"
              }
            ]
          }
        ]
      }
    ],
    "presets": [{
      "name": "Slideshow",
      "category": "Image",
      "settings": {
        "autoplay": true,
        "autoplay_speed": 5
      },
      "blocks": [
        {
          "type": "image",
          "settings": {
            "title": "Endless\npossibilities.",
            "subheading": "Bring your brand to life"
          }
        },
        {
          "type": "image",
          "settings": {
            "title": "Two line\nslide titles.",
            "subheading": "And big, beautiful imagery"
          }
        }
      ]
    }]
  }