记录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
每个注册的部分都有以下可访问的属性:
Property | Description |
---|---|
this.id | 该部分的唯一 ID |
this.container | 节容器的 DOM 元素 |
this.type | section类型 |
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…