javascript - 我应该在哪个 Shopify .liquid 文件中插入主页模式？

我正在为我的网站使用 Shopify .liquid 主题“新标准”。我想编辑 html/css，以便在页面加载时在主页上显示基本模式。

我从 W3 获得了基本的模态代码和一个 javascript 函数，以便在页面加载时显示。所有这些都在我的 jsfiddle 中工作，我只是不知道要包含代码的 .liquid 文件。

.Liquid theme files

另外，javascript 会在一个单独的 .liquid 文件中而不是模态文件吗？

非常感谢。

这是我的代码:

{% if template == 'index' %}

<!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times; </button>
    <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
    <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
  </div>
  </div>
  </div>
  <script type="text/javascript">
     $(window).load(function(){
    $('#myModal').modal('show');
  });
  </script>

  {% endif %}

Block Element Modal

最佳答案

将模态代码放入名为 snippets/modal.liquid 的单独文件中，然后编辑 layout/theme.liquid 并在关闭 </body> 标记之前注入(inject)以下代码:

{% if template == 'index' %}
    {% include 'modal' %}
{% endif %}

我也会用 $(window).load 切换 $(document).ready。
不要忘记在模板中包含 Bootstrap JavaScript 和 CSS。

关于javascript - 我应该在哪个 Shopify .liquid 文件中插入主页模式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33513728/