Секция Shopify не работает javascript после редактирования - PullRequest
Новая
       82

Секция Shopify не работает javascript после редактирования

0 голосов
/ 14 апреля 2020

Я написал собственный раздел Shopify. Он содержит javascript код, который необходимо выполнить при загрузке страницы, поскольку он выполняет некоторые манипуляции с DOM.

Я заметил, что если я изменю настройки разделов в редакторе Shopify, javascript больше не будет выполняться ( Редактор Shopify заменяет узел DOM раздела узлом с обновленными значениями). Это означает, что сгенерированные JS узлы DOM потеряны.

Следующий код должен продемонстрировать это поведение. Вы видите во время начальной загрузки привет в консоли. Однако, если вы измените значение title_text в редакторе, вы увидите обновленный текст на странице, но в консоли вы не увидите новых hi, зарегистрированных с JS. По моему должен быть второй привет.

Кто-нибудь знает, что я делаю неправильно? 

{{ section.settings.title_text }}
<script>
  console.log("hi");
</script>

{% schema %}
{
  "name": {
    "de": "Test",
    "en": "Test"
  },
  "settings": [
    {
      "type": "text",
      "id": "title_text"
      "label": "Text",
      "default": "Text"
    }
  ],
  "presets": [
  {
    "name": {
      "de": "Test",
      "en": "Test"
    },
    "category": {
      "de": "Test",
      "en": "Test"
    }
  }
]
}
{% endschema %}

1 Ответ

0 голосов
/ 14 апреля 2020

Вы не делаете ничего плохого, Shopify обновляет DOM, но не Javascript, когда вы редактируете его с панели настройки.

Для повторного ввода javascript logi c вам нужно подключить к событию shopify:section:load. Это событие срабатывает при каждой модификации.

Так, например, вам нужно сделать следующее: 

document.addEventListener("shopify:section:load", function(event) {
  console.log(1)
});

И добавить любые JS, которые вы хотите повторно инициализировать, в функции обратного вызова.

Подробнее о предоставляемых мероприятиях можно посмотреть здесь: https://shopify.dev/tutorials/develop-theme-sections-integration-with-theme-editor

...