Встроить компонент Vue в магазин Shopify - PullRequest
Новая
       13

Встроить компонент Vue в магазин Shopify

1 голос
/ 16 июня 2019

На странице продукта я пытаюсь отобразить пользовательский компонент Vue.Для краткости, компонент отображает некоторую информацию из базы данных Firebase на основе заданного идентификатора продукта.

Первоначально я пытался сделать это приложение Shopify, чтобы я мог получить доступ к их API.Я реализовал OAuth и могу получить необходимую информацию.Однако на самом деле включение компонента в хранилище оказалось безуспешным.

Каков наилучший способ включения Vue в Shopify?

Я попытался включить файлы сценариев непосредственно в файлы шаблонов, внутрифрагменты и включили их в глобальный тег сценариев.Но ничто из того, что я пробовал, не смогло отрисовать даже простой компонент.

Внутри 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 компонент появляется внутриДОМ, но "Привет Vue!"сообщение не отображается должным образом.

Других ошибок в консоли нет.Что является самым загадочным.

Любое понимание правильного способа включения Vue в Shopify будет с благодарностью.

1 Ответ

1 голос
/ 17 июня 2019

Жидкие файлы будут по умолчанию анализировать {{ }} теги. Так что вам нужно изменить ваш шаблонный механизм. Ниже обновленный код, который работает в файлах Shopify Liquid - 

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

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

По сути, я добавил разделители, которые vue будет проверять, чтобы найти шаблоны, и они отличаются от Shopify Parsing, что приводит к тому, что shopify не анализирует эти держатели. Вы можете прочитать больше о vue delimeters здесь - Ссылка

...