Mengenänderung des Mini-Warenkorbs in Woocommerce

Lesezeit: 5 Minuten

Benutzer-Avatar
Marcel

Ich habe wie jedes einzelne Thema über Woocommerce gelesen, kann aber nicht herausfinden, wie man einen Minus-Button hinzufügt, der die Menge eines Warenkorbartikels (vorzugsweise mit Ajax) im Woocommerce MiniCart verringert.

Ich habe es geschafft, eine Schaltfläche hinzuzufügen, die die Menge mit dem Woocommerce-Shortcode und über mehrere andere Codebeispiele erhöht. Allerdings finde ich nirgendwo eine Möglichkeit, die Menge zu verringern.

Es gibt mehrere Fragen dazu, keine beantwortet. Oder ich suche im falschen Verzeichnis.

Kann mir jedoch jemand ein Codebeispiel geben, wie ich die Menge des Einkaufswagens für ein sofort einsatzbereites Produkt verringern kann? Ich habe bereits eine benutzerdefinierte PHP-Datei mit diesen Codezeilen ausprobiert:

$cartKey = $_POST['cart_item_key']; //The cart key required by set_quantity method
$cartQty = $_POST['cart_item_qty']; //the quantity I provide in my post

global $woocommerce;
echo $woocommerce->cart->set_quantity($cartKey,$cartQty);

Aber wenn ich dies über AJAX-Post aufrufe, bekomme ich einen Fehler (interner Serverfehler). Ich habe auch versucht, mit negativer Menge in den Warenkorb zu legen, hat auch nicht funktioniert.

AKTUALISIEREN: Das Hinzufügen dieses Codes zu einer WP-Seitenvorlage und das Aufrufen dieser Seite gibt mir den Fehler nicht mehr. Nach dem Aufruf des Codes wird der Warenkorb jedoch nicht aktualisiert.

Was kann ich machen? Vielen Dank, ich hoffe, hier kann jemand helfen!

Benutzer-Avatar
Marcel

Ok, das habe ich mir also ausgedacht. Was ich getan habe:

1: Erstellen Sie eine WP-Seite, die für die Handhabung des AJAX-Update-Warenkorbs verantwortlich ist. Ich denke, Sie können dies auch mit einer einfachen PHP-Datei tun, aber ich habe vorerst nur eine benutzerdefinierte WP-Vorlage erstellt. Also habe ich eine Seitenvorlage namens ‚template-setquantity.php‘ mit folgendem Inhalt hinzugefügt:

    <?php   
    /**
    * Template Name: Request template for Set Quantity
    * This page updates mini cart quantity for a product based on the post value
    */
    //I dont think this line is needed
    global $woo_options;
    ?>
    <html>
    <head>
     <?php wp_head(); ?>
    </head>
    <body>
     //the cart key stores information about cart
     $cartKeySanitized = filter_var($_POST['cart_item_key'], FILTER_SANITIZE_STRING);
     //the new qty you want for the product in cart
     $cartQtySanitized = filter_var($_POST['cart_item_qty'], FILTER_SANITIZE_STRING);  
     //update the quantity
     global $woocommerce;
     ob_start();
     $woocommerce->cart->set_quantity($cartKeySanitized,$cartQtySanitized); 
     ob_get_clean();
     wp_footer(); ?>
     <?php woo_foot(); ?>
    </body>
    </html>
  1. Erstellen Sie mit dieser Vorlage eine WordPress-Backend-Seite. Für dieses Tutorial sollte die URL lauten: updatecart

  2. Kopieren Sie nun die mini-cart.php von woocommerce in Ihr benutzerdefiniertes Design. Also habe ich in meinem eigenen Theme das Verzeichnis woocommerce/cart erstellt und die Datei mini-cart.php in diesen Ordner kopiert

  3. Aktualisieren Sie die Vorlage mini-cart.php, um Ihre Plus- und Minus-Schaltflächen hinzuzufügen, um die Menge im Mini-Warenkorb zu aktualisieren. Für mich bedeutete das, den folgenden Code irgendwo in der Schleife jedes Produkts hinzuzufügen:

    <?php
    //btn add
    echo do_shortcode('[add_to_cart id="'.$cart_item['product_id'].'" show_price="false" btn_text="+" class="btnAdd" ]');
    //btn minus, the cart_item_key and $cart_item['.. is available already in scope.
    echo '<a class="btnMinus" onClick="updateQty(\''.$cart_item_key.'\','.($cart_item['quantity']-1).')"> - </a>';
    ?>
    
  4. Jetzt haben wir also die Seite eingerichtet, die Anfragen zur Aktualisierung der Menge abfängt, und wir haben jedem Produkt im Mini-Warenkorb eine Plus- und Minus-Schaltfläche hinzugefügt. Als letzten Schritt müssen wir eine JS-Funktion erstellen, die zwei Dinge tut: AJAX-Aufruf an unsere Updatecart-Vorlagenseite und AJAX-Aufruf, um den Warenkorbinhalt visuell zu aktualisieren 1.

  5. In meinem Fall habe ich diese Funktionen zur Fußzeile hinzugefügt. Wie Sie in Schritt 4 gelesen haben, ist die Funktion der Minus-Schaltflächen für onClick updateQty, also muss das unser JS-Funktionsname sein. Fügen Sie den folgenden JS-Code beispielsweise in Ihre Fußzeile ein (bitte beachten Sie, dass ich Jquery verwende):

    <script type="text/javascript">
    function updateQty(key,qty){
     url="http://yourdomain.com/updatecart/";
     data = "cart_item_key="+key+"&cart_item_qty="+qty;
    
     jQuery.post( url, data ) .done(function( data ) {
      //function updateCartFragment 
      updateCartFragment();
     });
    }
    
    function updateCartFragment() {
     $fragment_refresh = {
      url: woocommerce_params.ajax_url,
      type: 'POST',
      data: { action: 'woocommerce_get_refreshed_fragments' },
      success: function( data ) {
        if ( data && data.fragments ) {          
            jQuery.each( data.fragments, function( key, value ) {
                jQuery(key).replaceWith(value);
            });
    
            if ( $supports_html5_storage ) {
                sessionStorage.setItem( "wc_fragments", JSON.stringify( data.fragments ) );
                sessionStorage.setItem( "wc_cart_hash", data.cart_hash );
            }                
            jQuery('body').trigger( 'wc_fragments_refreshed' );
        }
      }
     };
    
     //Always perform fragment refresh
     jQuery.ajax( $fragment_refresh );  
    }
    </script>
    

Ich hoffe das hilft!

BEACHTEN SIE, dass ich in späteren Versionen von Woocommerce das globale $woocommerce besser durch die Funktion WC() (http://docs.woothemes.com/wc-apidocs/function-WC.html)

  • Vielen Dank für das Teilen dieser Lösung! Ich kann es jedoch nicht zum Laufen bringen. Würden Sie etwas mehr Codebeispiele teilen, wie zum Beispiel, wie man den AJAX-Aufruf durchführt? Ich wünschte, ich könnte dir eine PN schicken, aber deinem Profil sind keine Kontaktinformationen zugeordnet. Danke im Voraus! Tschüss Jeroen.

    – Jeroen W

    3. Oktober 2014 um 21:39 Uhr

  • Ich danke dir sehr! Es funktioniert wie ein Zauber. Eine Sache, die ich von Ihrem Beispiel ändern musste, damit es funktioniert, ist das Ändern von $woocommerce->cart->set_quantity() Funktion, um die zugewiesenen Variablen abzugleichen. (Sani -> Sanitisiert). Nochmals vielen Dank für Ihre klare Antwort und Beispiele! Prost

    – Jeroen W

    6. Oktober 2014 um 9:26 Uhr

  • Cool, gerne geschehen! Sie haben Recht mit den Variablen, ich habe meine Antwort bearbeitet.

    – Marcel

    6. Oktober 2014 um 14:00 Uhr

  • Hallo, gibt es eine einfachere Lösung mit den neuesten Versionen von Woocommerce?

    – Ludwig

    18. Juni 2020 um 11:30 Uhr

  • @Marcel, das Start-Tag “

    – Ganesh Kumar G

    30. Juni 2020 um 15:42 Uhr


1354670cookie-checkMengenänderung des Mini-Warenkorbs in Woocommerce

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy