使用Vue.js将相关产品添加到产品页面

来源转自http://www.codeshopify.com/blog_posts/adding-related-products-to-the-product-page-with-vue-js

Shopify提供了基本在线商店几乎所有您想要的东西。但是，客户喜欢做以提高销量的一件事是在产品页面上显示相关或推荐的产品。

尽管Shopify并不是开箱即用的功能，但是Metafields和Vue.js的组合使您可以创建此功能，并允许店主自行更新这些功能🎉。

[图片上传失败...(image-a8688a-1613705844737)]

设置

使Vue.js成为此类Shopify集成的理想之选的是，您可以通过CDN将其引入。因此，第一步是将CDN添加到产品模板（或您将要编写JS的任何地方）

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

我们还要在js中添加这一行，以表明我们处于开发模式，并允许我们使用Vue开发人员工具。

Vue.config.productionTip = false

🔥提示-在此处添加Vue.js devtools chrome exention使调试变得轻而易举。

现在，您要创建一个具有ID的div。这是将Vue.js代码放到其中的地方。我们创建了一个ID为的divapp以及一个vue-form样式类

    <div id="app" class="vue-form">
    </div>

基本的设置是创建一个变量和新的Vue（{}）并将所需的信息添加到该对象。以下3个键是Vue的基础。el用于Vue将渲染到的元素。在我们的案例中，我们创建了

所以我们把代码“ #app”。接下来是数据对象-这是我们将存储数据的位置，可以通过Vue指令使用它。方法对象将存储所有功能，这些功能也可以通过指令使用并作用于数据。

    var demo = new Vue({
      el: '#app',
      data: {},
      methods: {}
    })

但是这里有一个小问题。我们使用{{}}进行液体渲染，但是Vue也使用{{}}进行渲染。幸运的是，Vue为我们提供了使用定界符更改此选项的选项。在下面的代码中，您可以看到我添加了定界符，这是一个数组。第一个值是开头定界符，第二个值是结束符。因此，在我们的情况下，wel现在将使用$ {}在Vue中进行渲染。

    var demo = new Vue({
      delimiters: ['${', '}'],
      el: '#app',
      data: {},
      methods: {}
    })

数据

我们希望允许店主（可能是非编码者）自行更新相关产品。我们使用Metafields做到这一点。

🔥提示-最简单的方法是使用应用程序。我喜欢Metafields Guru。

ShopfiyFD chrome扩展程序会将Metafields编辑器添加到产品页面。您将能够添加一个名称空间，一个键和一个值

    namespace: add_product
    key: handle1  ← this has to be unique, so I just append a different number onto the end of the word
    value: latte-cup  ← this is the handle of the product and will be how we access the product info

图片

一旦在产品上设置了元字段，我们就可以在JavaScript中循环使用它们来创建将添加到Vue数据对象中的数据。

    var custom_products = []
     {% for item in product.metafields.add_product %}
       {% assign add_handle = item | last %}
       var object = {}
       object.name = "{{ item | last }}"
       object.price = {{ all_products[add_handle].price | money_without_currency }}
       object.title = "{{ all_products[add_handle].title }}"
       object.image = "{{ all_products[add_handle].featured_image | img_url }}"
       object.id = "{{ all_products[add_handle].id }}"
       object.active = false
       object.product_class =  "line_item"
       custom_products.push(object)
     {% endfor %}

首先，我们创建一个custom_products数组，然后进行一个液体循环（这在script标记之间有效，因为我们在.liquid文件中。

元字段返回那些令人困惑的液体伪数组之一。它返回键和值。在这种情况下，我们只需要该值，因此我们将add_handle设置为该项中的最后一个元素。

我们创建一个空对象，然后添加所需的所有信息。我们再次使用液体标签，也使用Shopify对象捕获数据all_products。我们使用句柄（已将其设置为变量add_handle来抓取特定产品，以免与可能在模板中更早分配的句柄混淆）。然后，我们通过名称访问每个属性。为了我们的目的，我们需要价格，标题，图像url和id。然后，我们还将活动标志添加为false，并将类添加为“ line_item”。

创建每个对象后，我们将其推入custom_products数组。结果将如下所示：

    [
     {
       name: "stovetop-espresso-maker",
       price: 10,
       title: "coffee beans",
       image: "//cdn.shopify.com/s/files/1/1518/2706/products/nathan-dumlao-507143-unsplash_small.jpg?v=1531329097",
       id: "1337387286563",
       active: false,
       product_class: 'line_item'
     },
     {
       name: "coffee-beans",
       price: 16 ,
       title: "Latte Cup" ,
       image: "//cdn.shopify.com/s/files/1/1518/2706/products/nathan-dumlao-471723-unsplash_small.jpg?v=1531329345",
       id: "1337388433443",
       active: false,
       product_class: 'line_item'
     },
     {
       name: "latte-cup",
       price: 35 ,
       title: "Stovetop Espresso Maker",
       image: "//cdn.shopify.com/s/files/1/1518/2706/products/alexandra-gorn-325610-unsplash_small.jpg?v=1531328653",
       id: "1337387384867",
       active: false,
       product_class: 'line_item'
     }

  ]

然后我们将数组添加到Vue中的数据对象

    var demo = new Vue({
      delimiters: ['${', '}'],
      el: '#app',
      data: {
        custom_products: custom_products
      },
      methods: {}
    })

显示数据

现在我们已经设置了数据对象，我们可以使用Vue指令将其绑定到页面。以下代码放在div中，其中包含app我们制作的耳环的ID

    <div id="app" class="vue-form">

       <h1>Additional Products</h1>

       <ul class="addition_products">

         <li v-for="custom_product in custom_products">

           <img v-bind:src="custom_product.image" alt="">
           <span>${custom_product.title }...</span>
           <span class="align-right">${custom_product.price | currency}</span>
         </li>

       </ul>

       <div class="total">
         Total:
         <span>${total() | currency}</span>
       </div>

     </div>

首先，我们添加一个标题并创建一个ul。然后，我们创建1 li元素，并使用v-for指令遍历custom_products（在Vue指令中，省略了数据对象，因为它假定它来自哪里）。每次循环时，都会li使用我们通过$ {}标签提供的数据创建一个元素。如您所见，我们将显示标题和价格。

我们也在显示图像，但是在Vue中，我们将v-bind自定义指令与src一起使用，而不是使用模板标签。

我们还创建了一种过滤货币，使我们的生活更加轻松。幸运的是，Vue提供了一个可以在其中添加功能的filter键。我们将通过与现有的Vue对象集成进行演示。

    var demo = new Vue({
      delimiters: ['${', '}'],
      el: '#app',
      data: {
        custom_products: custom_products
      },
      methods: {},
      filters:{
        currency: function(value) {
          return ' + value.toFixed(2);
        }
      }

    })

增加一些互动

展示产品已经是一个胜利。但是，让我们进一步采取进一步措施，让用户选择产品并查看累积的总和。

为此，我们将向Vue方法对象添加2个方法

第一种是如果选择了产品，则将一个类切换为活动类，以直观表示所选内容。

    var demo = new Vue({
      delimiters: ['${', '}'],
      el: '#app',
      data: {
        custom_products: custom_products
      },
      methods: {
      toggleActive: function (s) {
        s.active = !s.active;
      }

    },
      filters:{
        currency: function(value) {
          return ' + value.toFixed(2);
        }
      }

    })

看一下li我们先前创建的，现在将v-bind要对此进行分类。我们这样做的方法是传递一个数组。第一个元素是说custom_product.active是否为true会放置一个active类。第二个元素是放置custom_product.product_class，它将始终存在。

然后，我们添加了一个，v-on:click并使用了刚创建的方法，并传入了custom_product对象。在函数中，我们切换有效值。

    <li v-for="custom_product in custom_products" v-on:click="toggleActive(custom_product)" v-bind:class="[{ 'active': custom_product.active}, custom_product.product_class]">

     <img v-bind:src="custom_product.image" alt="">
     <span>${custom_product.title }...</span>
     <span class="align-right">${custom_product.price | currency}</span>
   </li>

最后，还有一个函数可以累计活动的custom_products的总数。

    var demo = new Vue({
      delimiters: ['${', '}'],
      el: '#app',
      data: {
        custom_products: custom_products
      },
      methods: {
      toggleActive: function (s) {
        s.active = !s.active;
      },
      total: function () {

        var total = 0;

        this.custom_products.forEach(function (s) {
          if (s.active) {
            total += s.price;
          }
        });

        return total;
      },

    },
      filters:{
        currency: function(value) {
          return ' + value.toFixed(2);
        }
      }

    })

在这里，我们遍历custom_products并累积每个有效产品的价格。然后我们返回总数。如果再次查看标记，您会发现在显示总计时，实际上是在调用函数total()。这样，总数会随着数据的每次更改而不断更新。

    <div class="total">
       Total:
       <span>${total() | currency}</span>
     </div>

这是我正在使用的样式，但是显然您可以对它进行样式设置以适合您的主题。

    <style>
     .line_item.active{
        font-weight: bold;
        color: white;
        background-color: #7796a8;
        border-bottom: 2px solid white;
      }
      .line_item{
        display: flex;
        align-items: center;
        padding: 15px 10px;
        border-bottom: 2px solid #7796a8;
      }
      .line_item img{
        margin-right: 20px;
      }
      .align_right {
        text-align: right;
      }
      .total {
        text-align: right;
        margin-top: 20px;
      }

      .vue-form {
        border: 1px solid #7796a8;
        width: fit-content;
        padding: 40px;
        margin-top: 40px;
        box-shadow: 2px 4px 12px rgba(0,0,0,0.1);
      }
    </style>

现在，不在本教程的范围之内，无法展示如何仅需单击一下即可将所有产品添加到购物车中。但是，我们制作了一个有关如何使用AJAX购物车添加多个产品的教程，您可以将其与此处的知识相结合，以创建完整的体验。您可能希望首先添加一种方法来收集Vue中的变体ID，然后可以按照该教程将其传递到购物车。

另外，我还要感谢5个实用示例，它们是从tutorialzine.com学习Vue.js的灵感，它为订购单提供了灵感。