shopify二次开发 产品详情页面的开发二 （信息展示区一[数据获取]）

本人 兼职 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>