在Shopify商店中嵌入Vue组件 [英] Embed Vue component within Shopify store

问题描述

在产品页面中，我试图显示自定义Vue组件.为简便起见，该组件根据给定的产品ID显示Firebase数据库中的一些信息.

Within a product page, I am trying to display a custom Vue component. For brevity, the component displays some information from a Firebase database based on the given product id.

最初，我试图使它成为Shopify应用程序，以便可以访问其API.我实现了OAuth，可以检索所需的信息.但是，实际上将组件包括在商店中是不成功的.

I originally tried to make this a Shopify app so I could access their APIs. I implemented OAuth and can retrieve the required information. However, actually including the component within the store has been unsuccessful.

在Shopify中包含Vue的最佳方法是什么?

What is the best way of including Vue inside Shopify?

我尝试将脚本文件直接包含在模板文件内，摘要内，并将它们包含在全局脚本标签内.但是我尝试过的任何方法都无法渲染甚至一个简单的组件.

I have tried including the script files directly inside the template files, inside snippets, and included them within the global scripts tag. But nothing I have tried has been able to render even a simple component.

product.liquid 内部:

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

<div id="app">
  {{ message }}
</div>

<script>
  var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

在Vue开发人员工具内部，该组件显示在DOM内，但显示"Hello Vue！".消息未按应有的方式显示.

Inside Vue developer tools the component appears inside the DOM but the "Hello Vue!" message does not appear as it should.

控制台中没有其他错误.哪个最令人困惑.

There are no other errors in the console. Which is most puzzling.

对于将Vue纳入Shopify的正确方法的任何见解，将不胜感激.

Any insight into the proper way of including Vue into Shopify would be greatly appreciated.

推荐答案

默认情况下，液体文件将解析 {{}} 标签.因此，您需要更改模板机制.以下是适用于Shopify Liquid文件的更新代码-

Liquid files will by default parse {{ }} tags. So you need to change your templating mechanism. Below is updated code which works in Shopify Liquid files -

<div id="app">
  ${ message }
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    delimiters: ['${', '}']
  })
</script>

基本上，我已经添加了一些定界符，它们会检查以查找模板，并且它们不同于Shopify解析，这将导致shopify不解析那些持有者.您可以在此处详细了解vue量表-链接

Basically, i have added delimeters which vue will check to find templates and they are different from Shopify Parsing which will result in shopify not parsing those holders. You can read up more about vue delimeters here - Link

这篇关于在Shopify商店中嵌入Vue组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！