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

【问题标题】：Which Shopify .liquid file should I insert a homepage modal into?我应该在哪个 Shopify .liquid 文件中插入主页模式？
【发布时间】：2015-11-04 04:29:58
【问题描述】：

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

【问题讨论】：

查看我提出的解决方案，让我们知道它是否有效，如果有效，别忘了给个赞。

标签： javascript html shopify bootstrap-modal

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果模态框仅会显示在您的主页上，那么您可以将代码放在 index.liquid 文件中。这是您主页的模板文件。您也可以将 Javascript 代码放在该文件中，但是最好将 Javascript 代码放在 <body> 的末尾。

另一种方法是将模态的 html 和 Javascript 都放在您的 theme.liquid 文件中，并将它们放在一个仅在您位于主页上时才会加载它们的条件中。它看起来像这样：

{% if template == 'index' %}
    <-- CODE FOR MODAL GOES HERE -->
    <-- CODE FOR JAVASCRIPT GOES HERE --> 
{% endif %}

【讨论】：

谢谢。我尝试了这两种方法，但我仍然遇到问题。模态像块元素而不是模态一样加载。我在上面包含了我的代码和一张名为“Block Element Modal”的图片。
你能告诉我你设置的jsfiddle在哪里工作吗？