shopify的if / else语句cart.item_count

Question

我在本网站和其他网站上发现了一些类似的问题，但是似乎没有一个问题可以提供我正在寻找的解决方案（或者我只是看不清楚），因此我可以使用一些指导。

我有一个Shopify主题 ，该主题已修改为包括两个大型下拉菜单，每个菜单都需要一个特定的（负数）左边界以正确对齐。 我正在使用以下代码设置这些边距：

    <script>
    $(document).ready(function(){
      $(".site-nav li ul:eq(0)").css("left","-411%");
      $(".site-nav li ul:eq(1)").css("left","-670%");
      if ($(window).width()<768) {
        $(".site-nav li ul").css("left","auto");
      }

      $(window).on('resize', function() {
        if ($(window).width()<768) {
        $(".site-nav li ul").css("left","auto");
        }
      });
    });
    </script>

我遇到的问题是，当有人向购物车中添加商品时，购物车图标会添加到导航栏中，这会导致下拉菜单的对齐方式失效。

我尝试了各种CSS编辑，但无济于事，我正在寻找一个if / else语句，该语句会在将商品添加到购物车时更改左侧的边距。

这是我为了实现此目标而尝试实现的更改代码：

    <script>
    $(document).ready(function(){
      if (cart.item_count > 0) {
      $(".site-nav li ul:eq(0)").css("left","-351%");
      $(".site-nav li ul:eq(1)").css("left","-610%");
      }
      else {
      $(".site-nav li ul:eq(0)").css("left","-411%");
      $(".site-nav li ul:eq(1)").css("left","-670%");
      }
      if ($(window).width()<768) {
        $(".site-nav li ul").css("left","auto");
      }

      $(window).on('resize', function() {
        if ($(window).width()<768) {
        $(".site-nav li ul").css("left","auto");
        }
      });
    });
    </script>

这是行不通的，并且由于我不精通Javascript，因此我不清楚自己在做什么错。 您可以提供的任何帮助将不胜感激。

谢谢，

Answer 1

因为我不使用shopify，所以这有点投机，但是您陷入了错误的事件。 document.ready仅会触发onLoad，因此您需要附加到添加到购物车事件的项目。 我想象这样的事情会起作用。

$(document).ready(function(){

    // Other stuff.
    // Reference to Shopify

    Shopify.onItemAdded = function(line_item) {
      $(".site-nav li ul:eq(0)").css("left","-351%");
      $(".site-nav li ul:eq(1)").css("left","-610%");
    };
};