wake-up-neo.net

Lightbox Popup auf WooCommerce add_to_cart Aktion

Ich möchte ein modales Popup-Fenster in WooCommerce erstellen, das angezeigt wird, wenn auf die Schaltfläche "In den Warenkorb" geklickt wurde. Dies muss after nach den WC-Aktionen geschehen, die das Produkt tatsächlich in den Warenkorb legen, jedoch vor/anstelle von Weiterleitungen.

Ich habe einige wahrscheinliche/mögliche Hooks, Aktionen und Filter gefunden, die für mich nützlich sein könnten, aber ich bin mir nicht sicher, welche ich brauche und wie ich sie richtig verwende (sorry, ich bin ein totaler WooCom n00b):

  • woocommerce_template_loop_add_to_cart
  • woocommerce_template_single_add_to_cart
  • woocommerce_after_add_to_cart_button
  • es gibt auch den add_to_cart_redirect filter für $ url

Ich bin mir auch nicht sicher, wie ich trigger den Leuchtkasten aus PHP heraus anzeigen soll! (Okay, in HTML verwende ich ein Element wie einen Hyperlink, auf den geklickt werden muss, aber wie kann ich dasselbe an einer bestimmten Stelle in der Ausführung von PHP auslösen? - Brauche ich AJAX?)

Zuletzt hatte ich vor, ThickBox zu verwenden, da es mit WordPress gebündelt ist. Gibt es einen Grund, dies zu vermeiden und/oder eine bessere Option, oder gibt es eine Lightbox-Implementierung, die mit WooCommerce gebündelt ist?

Vielen Dank für jede Hilfe!

5
Chris

Folgendes funktioniert für mich für Produktarchivseiten (dazu gehören beispielsweise sowohl die Hauptseite des Shops als auch Archivseiten für Produktkategorien).

Der aktuelle Inhalt des Einkaufswagens wird in einer Thickbox angezeigt. Ich habe mich dazu entschlossen, dies für dieses Beispiel zu zeigen, nur weil dies die Daten sind, die Ajax nach dem Klicken auf die Schaltfläche zum Hinzufügen zum Warenkorb zurückgibt. Möglicherweise möchten Sie jedoch eine andere Art von Informationen in Ihrer Box. Sie können die product_id des soeben hinzugefügten Produkts abrufen, indem Sie sich beispielsweise die umliegenden HTML-Elemente ansehen.

In der functions.php Ihres Themes (oder in der Klassendefinition für das Theme, falls Sie eine haben) gibt es wahrscheinlich eine 'enqueue_scripts'-Funktion. Sie sollten dies zu dieser Funktion hinzufügen, um sicherzustellen, dass das Thickbox-Skript geladen ist.

if (is_woocommerce() && is_archive()) {
    wp_enqueue_script( 'frontend-custom', get_template_directory_uri() . '/js/frontend-custom.js', array("jquery"));
    add_thickbox();
}

In einer Datei (in Ihrem Designverzeichnis) js/frontend-custom.js (oder wo immer Sie die js Ihres Designs haben):

jQuery(document).ready(function($) {
    $('body').on('added_to_cart',function(e,data) {
        //alert('Added ' + data['div.widget_shopping_cart_content']);
        if ($('#hidden_cart').length == 0) { //add cart contents only once
            //$('.added_to_cart').after('<a href="#TB_inline?width=600&height=550&inlineId=hidden_cart" class="thickbox">View my inline content!</a>');
            $(this).append('<a href="#TB_inline?width=300&height=550&inlineId=hidden_cart" id="show_hidden_cart" title="<h2>Cart</h2>" class="thickbox" style="display:none"></a>');
            $(this).append('<div id="hidden_cart" style="display:none">'+data['div.widget_shopping_cart_content']+'</div>');
        }
        $('#show_hidden_cart').click();
    });
});

Einige zusätzliche Hinweise:

  • Ich nehme an, Sie können Javascript auch direkt in die Seite von PHP ausgeben. In diesem Fall möchten Sie wahrscheinlich add_action('woocommerce_ajax_added_to_cart', 'myfunction'); einbinden. Diese Aktion wird innerhalb von woocommerce_ajax_add_to_cart() ausgeführt, direkt nachdem Sie einen Artikel in den Warenkorb gelegt haben (Bestätigungsprüfung usw.), aber bevor Sie ihn umleiten.

  • Die einzelnen Produktseiten funktionieren nicht auf die gleiche Weise ('In den Warenkorb' gibt es eine normale PHP-Form, es handelt sich nicht um Ajax).

  • Ich habe das noch nicht getestet, aber WooCommerce wird mit einem eigenen "prettyphoto.js" ausgeliefert, das durch Hinzufügen von "rel =" prettyPhoto "" zu einem href-Link funktioniert, so wie die Thickbox-Klasse im obigen Beispiel. Möglicherweise möchten Sie versuchen, die Designkonsistenz mit WooCommerce zu wahren.

6
adelval