if/else聲明購物車cart.item_count

Question

我發現這個網站和其他人有一些類似的問題，但似乎沒有提供我正在尋找的解決方案（或者我只是沒有看清楚），我真的可以使用一些指導。

我有一個Shopify theme已被修改爲包括兩個巨型下拉菜單，每個菜單都需要一個特定的（負）左邊距以便正確對齊。我使用下面的代碼來設置這些邊距：

<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> 

我遇到的問題是，當有人添加項目到購物車一車圖標添加到其拋出了下拉的對齊NAVAR菜單。

我已經嘗試過各種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%"); 
    }; 
};