shopify产品页面数据获取
Mark Lv4

获取产品数据

获取标题

1
{{ product.title }}

获取最低价和最高价

1
{{ product.price_min | money }} - {{ product.price_max | money }}

获取 variant (后面我将叫它为变体),并获取关联数据

这里我先讲一下 我的选购逻辑,因为这里的代码数据应该如何获取与我的选购逻辑有关系。我的选购逻辑与速卖通的有点像,速卖通是有个选项可以绑定图片,这样用户可以更直观的知道他的选择。而为我的逻辑是通过选择图片进行选购,不一样的是我的图片可以通过选择属性进行筛选,而不是不同属性的图片是一样的,下面是速卖通的截图

20200330124554589

获取 variant 和关联数据,图片,标题,ID

这里我规定 多重属性 的 第一个option 是 image 第二个是 size,因为我的项目选项是固定的,可以这样做,当然你也可以写成灵活的,只是这样你需要做的工作量比较多而已

1
2
3
4
5
6
{% for variant in product.variants %}
{% assign id = variant.id %}
{% assign title = variant.title %}
{% assign image = variant.image %}
{% assign size = variant.option2 %}
{% endfor%}

获取选项数据

这里可以根据我根据我的项目需求进行获取,我的项目需求可以简单的认为只有 图片 和 尺寸
图片上面已经有了,所以这里我只需要得到 size。这里是有条件,要求你在上传产品的时候设置多重属性的时候就要对应名称,我这里是 image 和 color。

1
2
3
4
5
// 获取 size
{% for value in product.options_by_name['size'].values %}
<li>{{ value }}</li>
{% endfor %}

数据绑定

数据绑定还是比较简单的,讲获取到的数据通过 data- 绑定在dom上就好了,后面我们通过js来读取即可,可根据自己需要进行绑定

对于大部分人来说可能更加喜欢通过 js 渲染数据。这里给大家提供以下如何在js中获取产品数据的代码,如果你需要考虑SEO,那你就的主意一下,因为爬虫是无法读取js渲染的数据

1
2
3
4
5
6
// 记得必须是在产品页面下才有效 需要访问得到 {{ product }}
<script>
// 获取 product 的json数据
let product = {};
product.data = {{ product | json }};
</script>
  • 本文标题:shopify产品页面数据获取
  • 本文作者:Mark
  • 创建时间:2020-12-19 20:03:49
  • 本文链接:https://m.iqimeng.com/2020/12/19/shopify/shopify产品页面数据获取/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!