本人 兼职 shopify、店匠二次开发、仿站、定制等开发服务,有需要的可以加我微信 abc939039210,备注 shopify
摘要
上篇讲了关于图片展示区域,这次讲信息区域的开发,主要讲如何获取到标题价格等信息。因为信息区域涉及的东西较多,所以这次分为多篇文章。
附:最近制定一个计划,打算每周写三篇以上原创文章,主要写shopify的开发和前端的一些文章。希望大家能够给关注或者赞
一、创建片段
创建片段、引入片段、布局比较简单,代码截图如下:
二 、获取产品数据
1、获取标题
{{ product.title }}
2、获取最低价和最高价
{{ product.price_min | money }} - {{ product.price_max | money }}
3、获取 variant (后面我将叫它为变体),并获取关联数据
这里我先讲一下 我的选购逻辑,因为这里的代码数据应该如何获取与我的选购逻辑有关系。我的选购逻辑与速卖通的有点像,速卖通是有个选项可以绑定图片,这样用户可以更直观的知道他的选择。而为我的逻辑是通过选择图片进行选购,不一样的是我的图片可以通过选择属性进行筛选,而不是不同属性的图片是一样的,下面是速卖通的截图
获取 variant 和关联数据,图片,标题,ID
这里我规定 多重属性 的 第一个option 是 image 第二个是 size,因为我的项目选项是固定的,可以这样做,当然你也可以写成灵活的,只是这样你需要做的工作量比较多而已
{% for variant in product.variants %}
{% assign id = variant.id %}
{% assign title = variant.title %}
{% assign image = variant.image %}
{% assign size = variant.option2 %}
{% endfor%}
4、获取选项数据
这里可以根据我根据我的项目需求进行获取,我的项目需求可以简单的认为只有 图片 和 尺寸
图片上面已经有了,所以这里我只需要得到 size。这里是有条件,要求你在上传产品的时候设置多重属性的时候就要对应名称,我这里是 image 和 color。
// 获取 size
{% for value in product.options_by_name['size'].values %}
<li>{{ value }}</li>
{% endfor %}
代码截图
效果截图
下面是我显示出来的数据
三、样式优化和数据绑定
1、样式优化
经过一番努力,我得到以下样式,大部分都是按照速卖通的样式来做,感觉速卖通做的挺好的
2、数据绑定
数据绑定还是比较简单的,讲获取到的数据通过 data- 绑定在dom上就好了,后面我们通过js来读取即可,可根据自己需要进行绑定
补充
随着项目的进行,后面会追加一些数据。
对于大部分人来说可能更加喜欢通过 js 渲染数据。这里给大家提供以下如何在js中获取产品数据的代码,如果你需要考虑SEO,那你就的主意一下,因为爬虫是无法读取js渲染的数据
// 记得必须是在产品页面下才有效 需要访问得到 {{ product }}
<script>
// 获取 product 的json数据
let product = {};
product.data = {{ product | json }};
</script>