shopify主题开发笔记(持续更新...)

1,486 阅读2分钟

记录Shopify主题开发过程中遇到的问题,记录一下防止之后忘记

一、shopify评论插件

shopify可以通过安装Loox、Product Review等评论插件来展示用户的评论

讲一下免费插件Product Review的用法:

1、如果要在商品详情展示评论,则可以在商品详情sectionproduct-template.liquid插入代码:

<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

2、如果要在商品列表展示评分,则可以在sectionproduct-grid-item.liquid标题下方插入代码:

<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>

如果插入的展示样式不满足需求,可根据class调整样式

二、Shopify 价格单位

商品价格带单位: {{ 1.45 | money_with_currency }} 渲染成**$1.45 CAD**

商品价格不带后面的单位: {{ 1.45 | money }} 渲染成**$1.45**

三、Shopify 视频背景

参考主题模版,改造video-section,在theme.js里面加上

sections.register('background-video-section', (function() {})(
    return function() {
        // ...
        // 这里写一些视频播放逻辑,具体参考主题的video-section代码
    }
))

上面的代码作用是在dom里插入iframe视频,使其可以自动播放,然后设置section的样式,在视频上加一个蒙层,达到隐藏视频control的目的。

如果使用的不是Youtube或者vimeo的视频,可以直接使用Shopify的cdn视频链接(可以在settings->files 上传资源得到),只不过需要用text来接收video url

四、Shopify register a section

每个注册的部分都有以下可访问的属性:

PropertyDescription
this.id该部分的唯一 ID
this.container节容器的 DOM 元素
this.typesection类型

section类型应与使用 data-section-type 属性在section容器上指定的section类型相匹配

liquid代码如下:

<div class="featured-product" data-section-type="featured-product" data-section-id="{{ section.id }}">
  <!-- section liquid -->
</div>

Theme.js中注册:

theme.FeaturedProduct = (function () {
    function Featured(container) {
    // ...
    }
    return Featured;
})();
sections.register('featured-product', theme.FeaturedProduct;

五、Theme Kit常用命令

说明命令
创建新的主题theme new –password=your-password –store=your-store.myshopify.com –name=theme name
获取shopify平台所有的分支theme get –list -p=your-password -s=you-store.myshopify.com
获取某一分支的代码theme get -p=your-password -s=you-store.myshopify.com -t=your-theme-id
更新远程分支的代码,替换shopify上的内容theme deploy
获取主题代码theme download
获取某个文件theme download templates/.liquid templates/.liquid
删除某个文件theme remove templates/.liquid templates/.liquid
预览代码theme open –env=development
实时监听代码自动上传theme watch
更多命令theme help

theme kit更多用法参考 shopify.dev/themes/tool…

参考 github.com/Shopify/the…