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

Question

我正在为我的网站使用 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

Answer 1

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

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

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