6 篇博文 含有标签「shopify」

问题​

 request to https://xxxxxx.myshopify.com/admin/api/unstable/themes/xxxxxxxxxx.json?fields=id%2Cname%2Crole%2Cprocessing failed
 reason: Client network socket disconnected before secure TLS connection was established

解决方法​

安装一个 clash，用 TUN Mode 模式来解决这个问题

download clash for windows

安装完毕之后，如果启动了但是还是没办法上网，关闭 clash 之后用管理员身份重新打开

使用 TUN Mode 之前需要先安装 services​

接着启动 TUN 模式​

开启或关闭代理​

关闭进程小 tips​

Question​

1. 原生的 shopify 主题开发中引入了 tailwind、webpack 等编译工具，本地开发的时候控制台一直告警
2. 在根目录中引入除了主题文件以外的其他文件时，无法使用 shopify theme push 等 shopify/cli 工具来预览在线开发主题
3. 有时候在网页编辑器中修改主题之后,直接用 shopify theme pull 来拉取主题,会直接覆盖/移除本地其他重要文件
4. 开发和用户环境有冲突，开发期间，shopify 店铺有数据增减，与 shopify 店铺直连的分支会接收来自店铺的一些更新，这部分更新 需要可以更新到开发分支

解决方案​

1. 维护一个单独的目录来存放主题文件，支持上传、下拉主题文件
2. 创建 action 自动化部署来清理出一个干净的分支同步 shopify 店铺当前在线主题
3. 同时在 dev 项目的 shopify 文件夹中维护另一个 github 地址来更新最新的 main 分支

具体操作​

创建 Github Actions 工作流​

github 仓库中，根目录中创建 .github/workflows/sync-shopify-to-main.yml 目录

name: Sync Shopify Folder to Main

on:
  push:
    branches:
      - dev

jobs:
  sync-shopify:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout dev branch
        uses: actions/checkout@v2
        with:
          ref: dev

      - name: Copy Shopify folder
        run: |
          mkdir shopify_copy
          cp -R ./shopify/* shopify_copy/

      - name: Checkout main branch
        uses: actions/checkout@v2
        with:
          ref: main
          persist-credentials: false

      - name: Copy files to main
        run: |
          cp -R shopify_copy/* .

      - name: Configure git
        run: |
          git config --global user.name 'github-actions[bot]'
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'

      - name: Commit changes
        run: |
          git add .
          git commit -m "Sync Shopify folder from dev branch"
          git push origin main
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

1. 触发条件：工作流在 dev 分支有推送事件时触发
2. Checkout dev 分支：使用 actions/checkout@v2 操作从 dev 分支检出代码
3. 复制 Shopify 文件夹：将./shopify 文件夹中的所有内容复制到一个临时目录 shopify_copy 中
4. Checkout main 分支：再次使用 actions/checkout@v2 操作，这次检出 main 分支，并取消 persist-credentials 以防止凭证问题
5. 复制文件到 main：将 shopify_copy 中的内容复制到当前工作目录（即 main 分支的根目录）
6. 配置 Git：设置 Git 用户信息，以便 GitHub Actions 机器人能够提交更改
7. 提交更改：添加、提交并推送更改到 main 分支。这里使用了 GitHub 提供的 GITHUB_TOKEN，该令牌由 GitHub Actions 自动提供， 并在运行工作流时注入到环境中

组成​

object 对象​

{{ page.title }}

output: Introduction

tag 标记​

所有的逻辑都是用 {% 和 %} 包裹的可以用来 变量赋值、条件判断、循环

{% if user %}
    Hello {{ user.name }}
{% endif %}

filter 过滤器​

使用 | 过滤输出内容

{{ '/my/fancy/url' | append: '.html' }}

output: /my/fancy/url.html

多个过滤器的时候，按从左到右的顺序执行
{{ 'adam!' | capitalize | prepend: 'Hello ' }}

output: Hello Adam!

操作符​

八个基本操作符和一个 contains

• == 相等
• != 不相等
• > 大于
• < 小于
• >= 大于或等于
• <= 小于或等于
• or 逻辑或
• and 逻辑与
• contains 只能用来搜索字符串

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

真值与假值​

nil 和 false 之外都是 true

数据类型​

String、Number、Boolean、Nil、Array

数组的初始化只能要通过 split 过滤器将一个字符串分割成一个子字符串数组

控制输出的空白字符​

使用变量定义语句，如果使用 {% %} 包裹语句，这行定义语法也会渲染出来，表现是多了一个空行

要解决这个问题就是 在 {% %} 之间加上 - 变成 {%- -%} 这样就不会出现空白行了

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

output:


  Wow, John G. Chalmers-Smith, you have a long name!






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

output: Wow, John G. Chalmers-Smith, you have a long name!

tags​

注释​

{% comment %}
/*这是注释内容*/
{% endcomment %}

控制流​

if - 条件成立时候执行​

{% if product.title == 'Awesome Shoes' %}
  These shoes are awesome!
{% endif %}

unless - 条件不成立的时候执行​

{% unless product.title == 'Awesome Shoes' %}
  These shoes are not awesome.
{% endunless %}


{%comment 等同于 endcomment%}
{% if product.title != 'Awesome Shoes' %}
  These shoes are not awesome.
{% endif %}

elsif/else​

{% assign handle = 'cake' %}
{% case handle %}
    {% when 'cake' %}
        This is a cake
    {% when 'cookie' %}
        This is a cookie
    {% else %}
        This is not a cake or a cookie
{% endcase %}

case/when​

迭代/循环​

for​

for-in-endfor

break 停止循环​

continue 跳出当前循环​

for(parameters)​

limit 限制循环次数 offset 指定循环开始索引号 range 指定循环范围 reversed 反转循环

filters​

• abs 绝对值

• append 拼接

• at_least 限制最小值

• at_most 限制最大值

• capitalize 首字母大写

• compact 删除数组中所有 nil

• concat 拼接数组

• date 时间戳格式转化（注意 now 是生成页面的时间，而不是用户浏览时的时间）

• default 默认值（为空时候使用）

• divided_by 除法（结果的数据类型与除数保持一致）

• minus: a 减去 a

• modulo: a 取模

• plus: a 加上 a

• times: a 乘以 a

• downcase 转小写

• upcase 大写

• first 数组第一项

• last 数组最后一项

• floor 去小数点后位数

• ceil 向上取整 3.1+ --> 4

• join:'key' 用 key 连接所有子项并输出字符串

• lstrip 删除左侧空白符

• rstrip 删除右侧空白符

• strip 删除两侧空白符

• strip_html 删除所有 html 标签

• strip_newlines 删除所有换行符号

• map:'key' 获取对象中属性名为 key 的值

• newline_to_br 把空行转成
  标签

• prepend:'a' 字符串之前加上 a

• remove:'a' 删除 a 字符

• remove_first: 'a' 删除首次出现的 a 字符

• replace:'a','b' 将所有 a 换成 b

• replace_first:'a','b' 将首次出现的 a 换成 b

• reverse 反转数组

• round 四舍五入

• size 字符长度或者数组长度

• slice:start,len 一个数值的时候直接截取该索引位置，负数则从末尾开始向前计数

  正向初始索引是 0，反向初始索引是 -1

• sort 排序，区分大小写(先大写)

• split:',' 用, 分割字符串为数组

• truncate:maxlen,affix 限制长度，并添加尾缀,如果长度小于 len，尾部自动补上省略号

• truncatewords 同上，但是截断是字符个数（英文单词有区别）

• uniq 删除重复项

• sort_natural 排序，不分大小写

• url_decode 解码 URL

• url_encode 编码 URL

• escape 字符转义（才能用于 URL）

• escape_once 对于已转义的字符不做处理

初始化项目​

1. 安装脚手架 @shopify/cli

npm install -g @shopify/cli

2. 初始化项目，以 dawn 初始开始开发

shopify theme init

3. 本地开发预览

shopify theme dev --store <your-store-name>

4. 以未发布状态上传主题

shopify theme push --unpublished

5. 直接更新主题代码

shopify theme push

6. 发布主题

shopify theme publish

git 仓库关联​

# 初始化仓库
git init

# 在github 手动创建仓库之后，复制仓库地址
# 关联仓库
git remote add origin <your-repo-address>

# 提交所有更新
git add .
git commit -m 'init: init my shopify theme'

# 推送到远端
git push --allow-unrelated-hostoric origin master

环境准备​

1. node

2. npm/yarn

3. ruby with devkit

4. 至少一次登录到 https://xxxxx.myshopify.com/admin 后台(注意不要切换别的账户,否则可能因为缓存问题，会在启动项目的 时候一直报错: no authorized)

5. 从 github 仓库将项目代码拷贝下来，查看 package.json 文件，关注 scripts 这个属性值，就是定义的项目运行脚本

   {
       "scripts": {
           "aaaa": "shopify theme dev --store bbbb.myshopify.com"
       }
   }
   

   bbbb.myshopify.com 可替换成你的店铺域名

6. 安装依赖

   yarn
   或者
   npm install
   

7. 执行启动脚本

   yarn aaaa
   或者
   npm run aaaa
   

8. 启动完毕之后看到一个 "logged in" 提示，这时候随便按下任意的键，即可看到本地预览的 URL 地址

9. 至此已经完成了一个已有 shopify 项目的启动了

首次登录​

shopify theme dev --store <your-store-name>

eg: shopify theme dev --store xxx.myshopify.com

随后就会打开一个网页链接，要求你登陆账号，才能继续后续操作登录成功之后，会在控制台显示当前状态 logged in 可以 ctrl+c 推出当前进程

切换店铺账号操作​

如果需要在账户之间切换，可先注销当前用户之后，再重新登录

shopify auth logout

查看当前登陆账号信息​

shopify theme info
## 执行该命令会列出你当前登录的店铺信息

$ shopify theme info
THEME CONFIGURATION
Store                  na2demo.myshopify.com
Development Theme ID   Not set

TOOLING AND SYSTEM
Shopify CLI    3.58.2
OS             windows-amd64
Shell          E:\develop\Git\usr\bin\bash.exe
Node version   v18.20.1
Ruby version   3.2.3

theme 常用命令​

shopify theme dev 本地预览（热更新）
shopify theme check 分析 code 是否有误
shopify theme list 列出所有主题
shopify theme open 返回线上可预览的链接
shopify theme pull 拉取主题
shopify theme push 上传主题覆盖原主题
shopify theme share 上传主题（以新主题的形式上传）
shopify theme publish 发布主题
shopify theme package 将本地主题打包成可上传的 zip 格式
shopify theme delete  从商店中删除主题
shopify theme info 查看本地主题的运行环境

一个小案例​

# 退出登录 如果已经登录了账户，需要切换（可选）
shopify auth logout

# 登录账户
shopify dev --store <your-store-name>

# 主题拉取：执行之后会出出先一个theme列表让你选择，你可以选择想要拉取的主题
## 会在当前的执行目录中，直接存放拉取来的代码
shopify theme pull

# 本地运行预览
shopify theme dev

# 开发完毕之后，可以执行查看线上的预览链接
shopify theme open

# 如果不想覆盖当前的主题，想要重新创建一个主题副本（新主题）
shopify theme share

# 更新覆盖主题
shopify theme push

至此 theme 项目已经可以在本地运行了

git 存储​

# 初始化 git
git init

# 在 github 上创建新的仓库
# 获取仓库地址之后连接远程仓库
git remote add origin <your-github-repo-address>

# 本地提交代码、合并分支
git add .
git commit -m 'init: init project'

# your-branch-name 换成你在编辑的分支名称
git pull origin <your-branch-name>

# 拉取远程分支
git pull --allow-unrelated-histories origin <your-branch-name>

# 合并之后重新 commit 一下，提交代码
git commit -m 'update: merge'
git push origin <your-branch-name>