【Shopify】自主開發(fā)評(píng)論功能

本次教程內(nèi)容為如何使用公司技術(shù)部自主開發(fā)的評(píng)論功能替換掉原有付費(fèi)插件Loox：

Loox

事前準(zhǔn)備：

1.自主開發(fā)的評(píng)論功能耕腾，在網(wǎng)頁中的使用方法與原有Loox插件完全相同倡怎，但隱藏評(píng)論功能需在ERP中進(jìn)行潜叛，請(qǐng)各網(wǎng)站負(fù)責(zé)人自行聯(lián)系 技術(shù)部李向陽同事 開通ERP相關(guān)權(quán)限侥钳。

2.請(qǐng)?jiān)陂_始修改代碼前將當(dāng)前網(wǎng)站使用Loox發(fā)布的全部評(píng)論導(dǎo)出為表格扔亥，并命名為其對(duì)應(yīng)的網(wǎng)站名稱后發(fā)給 技術(shù)部肖金棟 同事兑凿，該同事會(huì)將原有評(píng)論數(shù)據(jù)全部導(dǎo)入到后臺(tái)數(shù)據(jù)庫，以避免造成卸載插件后原有評(píng)論消失盼产，導(dǎo)出步驟如下：

導(dǎo)出表格步驟

代碼修改：

代碼修改大體分為兩部分饵婆，第一部分的功能是實(shí)現(xiàn)詳情頁提交新評(píng)論及顯示評(píng)論的功能，第二部分是實(shí)現(xiàn)在列表頁中的產(chǎn)品下方顯示評(píng)論的數(shù)量和評(píng)分星級(jí)戏售，以下為詳細(xì)步驟：

第一部分：實(shí)現(xiàn)詳情頁提交評(píng)論及顯示評(píng)論功能：

功能展示

打開shopify后臺(tái) -- 依次點(diǎn)擊 Online Store -- Actions -- Edit Code -- 搜索并打開product-template.liquid -- 請(qǐng)Ctrl + F搜索關(guān)鍵詞loox侨核，如果搜索到如下相關(guān)代碼草穆，請(qǐng)選中刪掉，如果沒有搜索到搓译，可跳出此步直接進(jìn)行下一步：

需刪除的代碼段

請(qǐng)?jiān)谧髠?cè)文件夾列表找到 Snippets 文件夾悲柱，并點(diǎn)擊 Add a new snippet ，新建名稱為 review 的空文件些己，并將 代碼段1 （見下）全選復(fù)制粘貼于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 相關(guān)代碼豌鸡，請(qǐng)將整行代碼刪除:

image.png

該文件中每行代碼的順序代表了在詳情中每個(gè)功能板塊的順序：

image.png

所以，想將產(chǎn)品評(píng)論功能放在頁面中的哪個(gè)位置段标，就將以下代碼（代碼段2）放置在對(duì)應(yīng)的位置上即可涯冠。

代碼段2：

{% include 'review' %}

開始舉例：
如果想將評(píng)論版塊放在you may also like上方，請(qǐng)將代碼段2放在第二行逼庞，如下：

舉個(gè)栗子

舉例完畢蛇更，以上。

到此赛糟，第一部分功能完成派任。

第二部分：列表頁中產(chǎn)品下方顯示評(píng)論的數(shù)量和評(píng)分星級(jí)

功能展示

打開shopify后臺(tái) -- 依次點(diǎn)擊 Online Store -- Actions -- Edit Code -- 搜索并打開product-item.liquid -- 請(qǐng)Ctrl + F搜索關(guān)鍵詞loox，如果搜索到如下相關(guān)代碼虑灰，請(qǐng)選中刪掉并將代碼段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相關(guān)代碼替換掉，位置不變：

不要只看行數(shù)穆咐，要看上下文內(nèi)容鎖定位置

最后一步颤诀，將以下樣式代碼（代碼段4）全選復(fù)制粘貼于 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 **/

注意事項(xiàng)：

1.在導(dǎo)出表格后对湃，成功替換代碼前這段時(shí)間崖叫，建議不要再添加評(píng)論。（因?yàn)樽蚤_發(fā)的功能讀取的數(shù)據(jù)只有表格中的數(shù)據(jù)以及替換代碼后新增的數(shù)據(jù)）

2.在技術(shù)部肖同事成功導(dǎo)入數(shù)據(jù)之前替換完上述代碼拍柒，會(huì)導(dǎo)致一段時(shí)間內(nèi)沒有評(píng)論顯示心傀，不必著急，耐心等待數(shù)據(jù)更新成功即可拆讯。

3.因自開發(fā)的評(píng)論功能樣式功能完全模仿Loox脂男，所以如果同事們在使用中有更好的優(yōu)化建議，請(qǐng)討論后向總負(fù)責(zé)人提出种呐，合理需求一定會(huì)予以采納宰翅。??

4.在替換過程中，發(fā)生網(wǎng)站報(bào)錯(cuò)爽室，請(qǐng)先還原代碼后聯(lián)系技術(shù)部同事誊册。

5.在使用過程中拒秘，若出現(xiàn)：評(píng)論無法提交瓤帚，無法上傳圖片等bug，請(qǐng)聯(lián)系技術(shù)部同事瓶珊。

6.在網(wǎng)頁上提交評(píng)論后，列表上的總評(píng)論數(shù)需要一分鐘左右時(shí)間更新耸彪，屬正常情況伞芹。

7.大家在自己刷評(píng)論時(shí)填寫的郵箱請(qǐng)使用統(tǒng)一的“test@test.com”，這樣方便以后拉取客戶真實(shí)數(shù)據(jù)時(shí)有明顯的區(qū)分搜囱。

新增功能：

在詳情頁中SKU下方顯示評(píng)分?jǐn)?shù)量與評(píng)級(jí)丑瞧，點(diǎn)擊能夠定位至當(dāng)前頁面評(píng)論區(qū)，效果可參考https://gracebabe.com/中的產(chǎn)品詳情頁：

新增功能

打開shopify后臺(tái) -- 依次點(diǎn)擊 Online Store -- Actions -- Edit Code -- 搜索并打開product-meta.liquid -- 請(qǐng)Ctrl + F搜索關(guān)鍵詞ProductMeta__Sku蜀肘，并將代碼5放置在該行代碼下方：

目標(biāo)位置

代碼段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-->

操作中遇到困難請(qǐng)聯(lián)系技術(shù)部同事。（我相信你自己可以的）
有任何意見建議請(qǐng)聯(lián)系技術(shù)部同事或評(píng)論區(qū)留言稽屏。
??