Блог

Я пытаюсь интегрировать Vue3.x с редактором тем Shopify. Теперь я могу заставить приложение Vue работать в редакторе тем. Однако, когда я пытаюсь изменить цвет кнопки «Добавить в пакет» в разделе, цвет кнопки не может быть обновлен немедленно.

Поэтому я пытаюсь прослушать событие Shopify: раздел: выбор. Но функция remountVueApp() всегда показывает старое значение {{ section.settings.button_color }}. Поэтому я не знаю, как передать обновленное значение из section.settings в приложение Vue. Как это можно сделать?

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

На скриншоте отображается сообщение об отладке после изменения цвета кнопки в редакторе тем

 <!-- This will only render in the theme editor -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
<script>
  function remountVueApp() {
    console.log('listen to shopify theme editor re-render. Render app to respond to DOM update');
    vueApp = createMyApp();
    console.log('button_color 2 = {{ section.settings.button_color }}');
    buttonColor = '{{ section.settings.button_color }}';
             
    vueApp.component('product-card', productCard) 
    vm = vueApp.mount('#byobApp') 
  }

  const emitter = window.mitt();
  emitter.on('shopify:section:select', remountVueApp);

  const themeEventHandler = (event) => {
    console.log(event.detail.load)
    if (event.detail.load) {
      // emit a generic version
      console.log('button_color 1 = {{ section.settings.button_color }}');
      emitter.emit(`${event.type}`, event);
    }
  };

  // these are custom events emitted by the Shopify section editor
  // we are hooking them up to our Vue event dispatcher
  document.addEventListener('shopify:section:select', themeEventHandler);  
</script>