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

问题描述

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

我最初尝试将其设为 Shopify 应用，以便我可以访问他们的 API.我实现了 OAuth 并且可以检索所需的信息.但是，实际上在 store 中包含该组件并没有成功.

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

我尝试将脚本文件直接包含在模板文件、代码片段中，并将它们包含在全局脚本标记中.但是我尝试过的任何东西都无法渲染一个简单的组件.

里面product.liquid:

<代码><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><div id="应用程序">{{ 信息 }}

<脚本>var app = new Vue({el: '#app',数据: {消息:你好，Vue！"}})

在 Vue 开发人员工具中，组件出现在 DOM 内部，但Hello Vue！"消息未按预期显示.

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

任何有关将 Vue 包含到 Shopify 中的正确方法的见解都将不胜感激.

解决方案

Liquid 文件将默认解析 {{ }} 标签.所以你需要改变你的模板机制.以下是适用于 Shopify Liquid 文件的更新代码 -

${消息}
<脚本>var app = new Vue({el: '#app',数据: {消息:你好，Vue！"},分隔符:['${', '}']})

基本上，我添加了分隔符，vue 将检查这些分隔符以查找模板，它们与 Shopify Parsing 不同，后者将导致 shopify 不解析这些持有人.您可以在此处阅读有关 vue 分隔符的更多信息 - 链接

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.

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.

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.

Inside 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>

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.

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

解决方案

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>

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屋！