Fereastră popup lightbox la acțiunea add_to_cart în WooCommerce

Question

Fereastră popup lightbox la acțiunea add_to_cart în WooCommerce

8 mai 2013, 15:28:52

Vizualizări: 38.7K

Voturi: 5

Aș dori să creez o fereastră modală 'pop-up' în WooCommerce care să apară când butonul "Adaugă în coș" a fost apăsat. Aceasta trebuie să apară după acțiunile WC care adaugă efectiv produsul în coș, dar înainte/în locul oricăror redirecționări.

Am găsit mai multe hook-uri, acțiuni și filtre posibile care ar putea fi utile, dar nu sunt sigur care dintre ele îmi trebuie și cum să le folosesc corect (îmi cer scuze, sunt complet novice în WooCommerce):

woocommerce_template_loop_add_to_cart
woocommerce_template_single_add_to_cart
woocommerce_after_add_to_cart_button
există de asemenea filtrul add_to_cart_redirect pentru $url

De asemenea, nu sunt sigur cum să declanșez efectiv lightbox-ul să apară din PHP! (În HTML folosesc un element precum un hyperlink care trebuie să fie apăsat, dar cum declanșez același lucru într-un anumit punct din execuția PHP? -- Am nevoie de AJAX?)

În ultimul rând, plănuiam să folosesc ThickBox deoarece vine împreună cu WordPress, există vreun motiv pentru a evita acest lucru sau o opțiune mai bună disponibilă, sau există vreo implementare de lightbox inclusă în WooCommerce?

Mulțumesc pentru orice ajutor!

Bucky

235

jquery pluginuri thickbox

Comentarii

Mulțumesc pentru votul negativ! Înțeleg că poate aceasta nu este cea mai clară sau directă întrebare, dar încercam să acoper multă necunoaștere într-un spațiu mic. Data viitoare ai putea, te rog, să-mi lași câteva sugestii despre cum să-mi îmbunătățesc întrebarea?

Bucky

9 mai 2013 11:39:08

Toate răspunsurile la întrebare

Comentarii

Wow, mulțumesc pentru un răspuns atât de genial, e perfect!! - Am încercat prettyPhoto, dar am observat că era dificil să modific dimensiunile în CSS fără a schimba și cele pentru ferestrele popup ale galeriei (deși, gândindu-mă acum, puțin jQuery ar fi putut rezolva asta!) - oricum, mulțumesc din nou!! :)

Bucky

14 mai 2013 07:49:10

adelval 832 · Accepted Answer · 2013-05-12T17:42:41Z

Următoarea soluție funcționează pentru mine în cazul paginilor de arhivă de produse (acestea includ atât pagina principală de magazin, cât și paginile de arhivă pentru categoriile de produse, de exemplu).

Va afișa conținutul actual al coșului într-un thickbox. Am ales să afișez acest lucru în acest exemplu doar pentru că acestea sunt datele returnate prin Ajax după apăsarea butonului de adăugare în coș, dar poți dori un alt tip de informație în caseta ta. Poți obține product_id-ul produsului adăugat, de exemplu, uitându-te la elementele HTML înconjurătoare.

În functions.php al temei tale (sau în definiția clasei pentru temă, dacă ai una), probabil există o funcție 'enqueue_scripts'. Ar trebui să adaugi acest cod în această funcție pentru a te asigura că scriptul thickbox este încărcat.

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

Într-un fișier (în directorul temei tale) js/frontend-custom.js (sau oriunde ai JavaScript-ul temei):

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) { //adaugă conținutul coșului doar o singură dată
            //$('.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>Coș</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();
    });
});

Câteva note suplimentare:

Presupun că poți de asemenea să afișezi JavaScript direct în pagină din PHP. În acest caz, cred că probabil vrei să folosești hook-ul add_action('woocommerce_ajax_added_to_cart', 'myfunction'); Această acțiune este rulată în interiorul funcției woocommerce_ajax_add_to_cart() imediat după adăugarea unui articol în coș (după validare, etc.), dar înainte de redirecționare.
Paginile de produs individual nu funcționează în același mod ('adaugă în coș' este acolo un formular PHP normal, nu este implicat Ajax).
Nu am testat acest lucru, dar WooCommerce vine cu propriul său 'prettyphoto.js', care funcționează prin adăugarea 'rel="prettyPhoto"' la un link href, similar cu modul în care funcționează clasa thickbox în exemplul de mai sus. Poți să încerci să-l folosești pentru a menține consistența designului cu WooCommerce.