if/else-Anweisung für shopify cart.item_count

Question

Ich habe einige ähnliche Fragen auf dieser Seite und anderen gefunden, aber keine scheint die Lösung zu bieten, die ich suche (oder ich sehe es einfach nicht klar) und ich könnte wirklich verwenden etwas Anleitung.

Ich habe eine Shopify theme, die geändert wurde, um zwei große Dropdown-Menüs zu enthalten, von denen jedes einen bestimmten (negativen) linken Rand für die richtige Ausrichtung erfordert. Ich verwende den folgenden Code, diese Margen zu setzen:

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

Das Problem, das ich habe, ist, dass, wenn jemand einen Artikel in den Warenkorb gelegt ein Warenkorb-Symbol fügt dem navar hinzugefügt wird, die die Ausrichtung der Dropdown abwirft Menüs.

Ich habe verschiedene CSS-Bearbeitungen vergeblich ausprobiert und suche nach einer if/else-Anweisung, die den linken Rand ändert, wenn ein Artikel zum Warenkorb hinzugefügt wird.

Hier ist der veränderte Code, den ich zu implementieren, um bin versucht, dieses Ziel zu erreichen:

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

Dies funktioniert nicht, und da ich weniger bin als tüchtig mit Javascript, ich bin nicht klar, was ich bin falsch machen. Jede Hilfe, die Sie zur Verfügung stellen können, wäre sehr willkommen.

Danke,

Answer 1

Dies ist etwas spekulativ, da ich nicht Shopify verwenden, aber Sie in das falsche Ereignis Einhaken. document.ready wird nur onLoad ausgelöst, also müssen Sie an das Element anfügen, das dem Cart-Ereignis hinzugefügt wurde. Ich kann mir vorstellen, dass so etwas funktionieren würde.

$(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%"); 
    }; 
};