shopify开发总结

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

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

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_imgassign 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```javascriptinput :
{% 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```javascriptinput :
{% 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```javascriptinput :

{% for product in collections.frontpage.products %}{% if forloop.first %}
This collection has {{ forloop.length }} products:
{% endif %}
{{ product.title }}
{% endfor %}output :
This collection has 4 products:
Apple
Orange
Peach
Plum

- rindex0```javascriptinput :
{% 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_imgassign product_img_mobile = block.settings.top_products_img_mobileassign product_image = block.settings.top_products_imageassign product_image_mobile = block.settings.top_products_image_mobileassign voice_control = block.settings.assistantableassign product_title = block.settings.top_products_titleassign product_sub_title = block.settings.top_products_sub_titleassign 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_urlassign 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使用

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！