devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

shopify开发总结_mac 开发shoify

作者：花生_TL007 | 2024-05-01 12:00:46

赞

踩

mac 开发shoify

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43

主题目录说明

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

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

  1. 一般只在这里使用 schema， 来配置哪些需要自定义输入(shopify的精髓即在此)
  2. section不能调用section
  3. 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: '%' 
      %}



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
操作符

== 相等
!= 不相等

大于
< 小于
= 大于或等于
<= 小于或等于
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 %}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
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.


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 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


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

 - 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


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

 - 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!


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

 - 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


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

 - 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


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

项目

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

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 %}

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

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

%}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  1. type类型

  • image

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

    • 1

  • checkbox

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

    • 1
    • 2
    • 3

  • range

  • select

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


    • 1
    • 2
    • 3
    • 4

  • textarea

  • url

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

    • 1
    • 2

{
    "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"
          }
        }
      ]
    }]
  }


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/518748
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号