【Shopify】自主开发评论功能

本次教程内容为如何使用公司技术部自主开发的评论功能替换掉原有付费插件Loox：

Loox

事前准备：

1.自主开发的评论功能，在网页中的使用方法与原有Loox插件完全相同，但隐藏评论功能需在ERP中进行，请各网站负责人自行联系 技术部李向阳同事 开通ERP相关权限。

2.请在开始修改代码前将当前网站使用Loox发布的全部评论导出为表格，并命名为其对应的网站名称后发给 技术部肖金栋 同事，该同事会将原有评论数据全部导入到后台数据库，以避免造成卸载插件后原有评论消失，导出步骤如下：

导出表格步骤

代码修改：

代码修改大体分为两部分，第一部分的功能是实现详情页提交新评论及显示评论的功能，第二部分是实现在列表页中的产品下方显示评论的数量和评分星级，以下为详细步骤：

第一部分：实现详情页提交评论及显示评论功能：

功能展示

打开shopify后台 -- 依次点击 Online Store -- Actions -- Edit Code -- 搜索并打开product-template.liquid -- 请Ctrl + F搜索关键词loox，如果搜索到如下相关代码，请选中删掉，如果没有搜索到，可跳出此步直接进行下一步：

需删除的代码段

请在左侧文件夹列表找到 Snippets 文件夹，并点击 Add a new snippet ，新建名称为 review 的空文件，并将 代码段1 （见下）全选复制粘贴于review文件中：

Add a new snippet

新建的review文件

代码段1：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Me</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">  
  window.webServer = '{{ shop.name }}';
  window.currProductId = '{{ product.id }}';
</script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/image.chic-fusion.com/promotion/shopify_file/vendors~build.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/image.chic-fusion.com/promotion/shopify_file/build.js"></script>
</body>
</html>

搜索并打开product.liquid -- 检查是否有 loox 相关代码，请将整行代码删除:

image.png

该文件中每行代码的顺序代表了在详情中每个功能板块的顺序：

image.png

所以，想将产品评论功能放在页面中的哪个位置，就将以下代码（代码段2）放置在对应的位置上即可。

代码段2：

{% include 'review' %}

开始举例：
如果想将评论版块放在you may also like上方，请将代码段2放在第二行，如下：

举个栗子

举例完毕，以上。

到此，第一部分功能完成。

第二部分：列表页中产品下方显示评论的数量和评分星级

功能展示

打开shopify后台 -- 依次点击 Online Store -- Actions -- Edit Code -- 搜索并打开product-item.liquid -- 请Ctrl + F搜索关键词loox，如果搜索到如下相关代码，请选中删掉并将代码段3添加至该位置:

需删除代码

代码段3：

<!--Review code-->
        {% if product.description contains 'reviewCount' and product.description contains 'reviewScore'%}
          <span style="display:none;">{{product.description}}</span>
          <a href="{{ product.url | within: collection }}" title="{{ product.title }}" class="review-score">
          {% assign str1 = product.description | strip_html | split: " " %}<!--Original string-->
          {% assign str2 = str1.last %}<!--Useful string-->
          {% if str2 != '00'%}
            <!--Score is not an integer-->
            {% if str2 contains '.' %}
                {%assign str3 = str2 | split: "."%}
                {%assign strScore= str3[0].last %}
                {%assign strCount= str3[0] | split: "" | reverse |join : ""  | remove_first:strScore | split: "" | reverse |join : ""   %}
                    {% for i in (1..strScore) %}
                        <i class="iconfont">&#xe768;</i>
                    {% endfor %}
                    <i class="iconfont">&#xe769;</i>
                    {% for i in (strScore..3) %}
                    <i class="iconfont">&#xe76b;</i>
                    {% endfor %}
            {% else %}
            <!--Score is an integer-->
                {%assign strScore= str2.last %}
                {%assign strCount= str2 | split: "" | reverse |join : ""  | remove_first:strScore | split: "" | reverse |join : ""   %}
                    {% for i in (1..strScore) %}
                        <i class="iconfont">&#xe768;</i>
                    {% endfor %}
                    {% for i in (strScore..4) %}
                    <i class="iconfont">&#xe76b;</i>
                    {% endfor %}
            {% endif %}
            <span style="margin-left:10px;">({{strCount}})</span>
          {% endif %}
        </a>
        {% endif %}
        <!--Review code-->

添加后效果，代码段3将原有的loox相关代码替换掉，位置不变：

不要只看行数，要看上下文内容锁定位置

最后一步，将以下样式代码（代码段4）全选复制粘贴于 theme.scss.liquid 最底部即可。
代码段4：

/** Review code **/
@font-face {
  font-family: 'iconfont';  /* project id 384296 */
  src: url('//at.alicdn.com/t/font_384296_9yny40yhm1n.eot');
  src: url('//at.alicdn.com/t/font_384296_9yny40yhm1n.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_384296_9yny40yhm1n.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_384296_9yny40yhm1n.woff') format('woff'),
  url('//at.alicdn.com/t/font_384296_9yny40yhm1n.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_384296_9yny40yhm1n.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.review-score i{
  font-size:inherit;
  letter-spacing:-3px;
  color:#e64545;/* Custom color */
}
/** Review code **/

注意事项：

1.在导出表格后，成功替换代码前这段时间，建议不要再添加评论。（因为自开发的功能读取的数据只有表格中的数据以及替换代码后新增的数据）

2.在技术部肖同事成功导入数据之前替换完上述代码，会导致一段时间内没有评论显示，不必着急，耐心等待数据更新成功即可。

3.因自开发的评论功能样式功能完全模仿Loox，所以如果同事们在使用中有更好的优化建议，请讨论后向总负责人提出，合理需求一定会予以采纳。😊

4.在替换过程中，发生网站报错，请先还原代码后联系技术部同事。

5.在使用过程中，若出现：评论无法提交，无法上传图片等bug，请联系技术部同事。

6.在网页上提交评论后，列表上的总评论数需要一分钟左右时间更新，属正常情况。

7.大家在自己刷评论时填写的邮箱请使用统一的“test@test.com”，这样方便以后拉取客户真实数据时有明显的区分。

新增功能：

在详情页中SKU下方显示评分数量与评级，点击能够定位至当前页面评论区，效果可参考https://gracebabe.com/中的产品详情页：

新增功能

打开shopify后台 -- 依次点击 Online Store -- Actions -- Edit Code -- 搜索并打开product-meta.liquid -- 请Ctrl + F搜索关键词ProductMeta__Sku，并将代码5放置在该行代码下方：

目标位置

代码段5：

<!--Review code-->
        {% if product.description contains 'reviewCount' and product.description contains 'reviewScore'%}
          <span style="display:none;">{{product.description}}</span>
          <a href="#reviewArea" title="{{ product.title }}" class="review-score">
          {% assign str1 = product.description | strip_html | split: " " %}<!--Original string-->
          {% assign str2 = str1.last %}<!--Useful string-->
          {% if str2 != '00'%}
            <!--Score is not an integer-->
            {% if str2 contains '.' %}
                {%assign str3 = str2 | split: "."%}
                {%assign strScore= str3[0].last %}
                {%assign strCount= str3[0] | split: "" | reverse |join : ""  | remove_first:strScore | split: "" | reverse |join : ""   %}
                    {% for i in (1..strScore) %}
                        <i class="iconfont">&#xe768;</i>
                    {% endfor %}
                    <i class="iconfont">&#xe769;</i>
                    {% for i in (strScore..3) %}
                    <i class="iconfont">&#xe76b;</i>
                    {% endfor %}
            {% else %}
            <!--Score is an integer-->
                {%assign strScore= str2.last %}
                {%assign strCount= str2 | split: "" | reverse |join : ""  | remove_first:strScore | split: "" | reverse |join : ""   %}
                    {% for i in (1..strScore) %}
                        <i class="iconfont">&#xe768;</i>
                    {% endfor %}
                    {% for i in (strScore..4) %}
                    <i class="iconfont">&#xe76b;</i>
                    {% endfor %}
            {% endif %}
            <span style="margin-left:10px;">({{strCount}})</span>
          {% endif %}
        </a>
        {% endif %}
        <!--Review code-->

操作中遇到困难请联系技术部同事。（我相信你自己可以的）
有任何意见建议请联系技术部同事或评论区留言。
😊