Question

我正在从Slate开始开发我的第一个Shopify主题。我需要集成一些通过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

与这种类型的流有关的另一个问题是，我需要重命名从After Effects导出的json文件中图像的路径，因为我需要区分动画之间的图像，但是Slate会使构建时在Assets目录中找到的文件夹变平

我尝试使用Shopify中的CDN路径

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

仅出于测试目的，我注意到动画已正确加载，很明显，所有已上传图像的引用都丢失了。

有人来处理这种情况吗？

谢谢

将lottie-web与Slate Shopify主题开发流程集成

0 个答案: