Интеграция lottie-web с Slate Shopify для разработки тем - PullRequest
Новая
       27

Интеграция lottie-web с Slate Shopify для разработки тем

0 голосов
/ 20 сентября 2019

Я разрабатываю свою первую тему Shopify, начиная с Slate.Мне нужно интегрировать некоторые анимации, экспортированные с bodymovin / lottie, но у меня есть некоторые проблемы.

Одна из этих анимаций должна быть вставлена ​​на домашнюю страницу, поэтому я отредактировал scripts / templates / index.js файл выглядит следующим образом: 

import {load} from '@shopify/theme-sections';
import '../sections/product';
import lottie from 'lottie-web';

import animation from '../../assets/homeanimation.json';

load('*');

(function() {
  lottie.loadAnimation({
    container: document.getElementById('lottie'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: animation,
  });
})();

Но я получаю следующую ошибку в терминале: 

Failed to compile.

./assets/homeanimation.json

Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = __w...'
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = __w...'

Итак, я попытался переместить игрока в лотерею в templates /index.liquid но я получаю еще одну ошибку: 

{% if template.name == 'index' %}
  <script type="text/javascript">
    import lottie from 'lottie-web';

  </script>
{% endif %}

Uncaught SyntaxError: Unexpected identifier

Другая проблема, связанная с этим типом потока, заключается в том, что мне нужно переименовать путь к изображениям в файле json, экспортированном из After Effects, потому что мне нужночтобы различать изображения между анимацией, но Slate выравнивает папки, найденные в каталоге assets при сборке.

Я попытался использовать путь cdn из Shopify 

//cdn.shopify.com/s/files/x/xxxx/xxxxx/xxxx/x/x/assets/homeanimation.json?xxx'

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

Кто-нибудь должен справиться с такой ситуацией?

Спасибо

...