Я пытаюсь добавить 3 пользовательских мода в Shopify. Но когда я это делаю, я получаю эту ошибку в своей консоли (ее нет в моих vue файлах, это что-то из шаблона shopify):
[Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
20 | </div>
21 | </div>
22 | </div><style data-shopify="">
| ^^^^^^^^^^^^^^^^^^^^^^^
23 |
Основной индекс shopify выглядит так:
<body class="template-{{ template | split: '.' | first }}">
<div id="app-vue">
<a class="in-page-link skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>
<div id="SearchDrawer" class="search-bar drawer--top" role="dialog" aria-modal="true" aria-label="{{ 'general.search.placeholder' | t }}">
<div class="search-bar__table">
<div class="search-bar__form-wrapper">
<form class="search" action="{{ routes.search_url }}" method="get" role="search">
<input class="search__input" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
<button class="search-bar__submit btn--link" type="submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>
</div>
<div class="search-bar__table-cell">
<button type="button" class="btn--link js-drawer-close">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'general.search.close' | t }}</span>
</button>
</div>
</div>
</div>
{%- if settings.enable_ajax -%}
{% include 'cart-popup' %}
{%- endif -%}
{% section 'header' %}
<div class="page-container" id="PageContainer">
<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
{% section 'footer' %}
<div id="slideshow-info" class="visually-hidden" aria-hidden="true">
{{- 'sections.slideshow.navigation_instructions' | t -}}
</div>
</div>
<ul hidden>
<li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
<li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
</ul>
<edit-subscription-modal></edit-subscription-modal>
<before-cancel-subscription-modal></before-cancel-subscription-modal>
<cancel-subscription-modal></cancel-subscription-modal>
</div>
Приведенный выше код использует идентификатор app-vue, а внизу я добавил модалы:
<edit-subscription-modal></edit-subscription-modal>
<before-cancel-subscription-modal></before-cancel-subscription-modal>
<cancel-subscription-modal></cancel-subscription-modal>
Затем В другом файле я вызываю модалы через этот компонент:
<account shopify-id="{{ customer.id }}"></account>
Модальные необходимо определить в индексном файле. Как я могу исправить ошибку и убедиться, что она не читает все теги shopify?
Спасибо!