if/else statement for shopify 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> 

Проблема у меня в том, что, когда кто-то добавляет элемент в корзину значок Корзина добавляется в Навар, который сбрасывает выравнивание выпадающего списка меню.

Я пробовал различные изменения 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%"); 
    }; 
};