Shopify Ajax Warenkorb/Basic Jquery. Hilfe oder Anleitung Geschätzt

Question

Ich versuche, den Warenkorb hier vorgestellten zu tun: https://www.chubbiesshorts.com/

Insbesondere Ich versuche, die AJAX Wagen herauszufinden. Mein Ziel ist es, dass die Kunden die Menge hinzufügen/subtrahieren/manuell eingeben können und sie den Einkaufswagen live aktualisieren kann (ohne das Neuladen der Seite).

Ich konnte alles außer dieser Funktion konstruieren. Was genau muss ich lernen, um dies zu ermöglichen? Ich bin bereit zu testen, zu lernen, die Arbeit selbst zu machen. Ich habe buchstäblich keine Ahnung, wo ich anfangen soll.

Anscheinend Shopify hat eine AJAX cart API, und das Thema, ich baute mein Geschäft aus, hat bereits den AJAX-Wagen aktiviert.

Ich denke, das bedeutet nur, ich muss lernen, wie diese Funktionen aufgerufen und ausgeführt werden.

Irgendwelche Hinweise würden geschätzt. Wenn jemand nur auf die relevanten Materialien hinweisen könnte, die ich lesen und lernen muss, wäre das großartig. Ich bin nur so verwirrt und nach vier Stunden Versuch und Scheitern bin ich verzweifelt um Hilfe.

Answer 1

Die AJAX Cart API-Seite verweist auf eine Laborseite, die auf die aktuelle api.jquery.js verweist, auf der einige Themen ihre Cart-Updates basieren.

Wenn Sie diese Datei in einen Editor einlegen und formatieren, werden Sie feststellen, dass sie sich gut liest. Sie können auch die Entwicklungstools von Chrome verwenden, um die Datei anzuzeigen und zu drucken.

Leider ist dies kein ereignisbasiertes API. Wenn Sie beispielsweise Shopify.onCartUpdate außer Kraft setzen, entfernen Sie das, was das Theme erwartet hat.

Allerdings, wenn Ihr Thema tut, was Sie auf einem Wagen ändern wollen, aber Sie wollen eine alternative Art und Weise ändern liefern, was in der Warenkorb gelegt ist (man beachte, nur als Beispiel, ohne Linie arbeitet Attribute:

$.ajax({ 
    url:'/cart/update.js', 
    method:'POST', 
    dataType:'json', 
    contentType: "application/json", 
    data:JSON.stringify({updates:{ 
     variant_id_to_add:1, 
     variant_id_to_remove:0, 
     variant_id_to_update:3 
    }})}). 
    then(function(cart){ 
Shopify.onCartUpdate(cart); 

});