Lightbox popup sull'azione add_to_cart di WooCommerce

Question

Lightbox popup sull'azione add_to_cart di WooCommerce

8 mag 2013, 15:28:52

Visualizzazioni: 38.7K

Voti: 5

Vorrei creare una finestra modale 'pop-up' in WooCommerce che appaia quando viene cliccato il pulsante "Aggiungi al carrello". Questo deve avvenire dopo le azioni WC che effettivamente aggiungono il prodotto al carrello ma prima/invece di qualsiasi reindirizzamento.

Ho trovato diversi hook, azioni e filtri potenzialmente utili ma non sono sicuro di quali mi servano e come usarli correttamente (scusate sono un principiante di WooCommerce):

woocommerce_template_loop_add_to_cart
woocommerce_template_single_add_to_cart
woocommerce_after_add_to_cart_button
c'è anche il filtro add_to_cart_redirect per $url

Inoltre non sono sicuro di come effettivamente attivare il lightbox da PHP! (Ok in HTML uso un elemento come un link ipertestuale che deve essere cliccato, ma come attivare la stessa cosa in un determinato punto dell'esecuzione PHP? -- Ho bisogno di AJAX?)

Infine stavo pensando di utilizzare ThickBox poiché è incluso in WordPress, c'è qualche motivo per evitarlo e/o un'opzione migliore disponibile, oppure c'è un'implementazione lightbox già inclusa in WooCommerce?

Grazie mille per qualsiasi aiuto!

Bucky

235

jquery plugin thickbox

Commenti

Grazie per il voto negativo! Apprezzo che questa forse non sia la domanda più chiara o diretta, ma stavo cercando di coprire molta ignoranza in poco spazio. La prossima volta potresti per favore lasciarmi alcuni suggerimenti su come migliorare la mia domanda?

Bucky

9 mag 2013 11:39:08

Tutte le risposte alla domanda

Commenti

Wow grazie per una risposta così brillante, è perfetta!! -- Avevo provato prettyPhoto ma ho trovato difficile modificare le dimensioni in CSS senza cambiare anche quelle per i popup della galleria (anche se col senno di poi un po' di jQuery avrebbe potuto risolvere!) -- comunque grazie ancora!! :)

Bucky

14 mag 2013 07:49:10

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

Il seguente codice funziona per me nelle pagine archivio prodotti (queste includono sia la pagina principale del negozio che le pagine archivio per le categorie di prodotti, ad esempio).

Mostrerà il contenuto attuale del carrello in una thickbox. Ho scelto di mostrare questo per l'esempio solo perché sono i dati che si ottengono via Ajax dopo aver cliccato il pulsante aggiungi al carrello, ma potresti volere un tipo diverso di informazioni nella tua box. Puoi ottenere l'ID del prodotto appena aggiunto, ad esempio, guardando gli elementi HTML circostanti.

Nel file functions.php del tuo tema (o nella definizione della classe per il tema, se ne hai una) probabilmente c'è qualche funzione 'enqueue_scripts'. Dovresti aggiungere questo codice a questa funzione per assicurarti che lo script thickbox venga caricato.

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

In un file (nella directory del tuo tema) js/frontend-custom.js (o ovunque tu abbia il JS del tuo tema):

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>Carrello</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();
    });
});

Alcune note aggiuntive:

Suppongo che tu possa anche inserire direttamente del javascript nella pagina dal PHP. In questo caso, penso che probabilmente vorrai usare l'hook add_action('woocommerce_ajax_added_to_cart', 'myfunction'); Questa azione viene eseguita all'interno di woocommerce_ajax_add_to_cart() subito dopo aver aggiunto un articolo al carrello (superata la validazione, ecc.), ma prima del reindirizzamento.
Le pagine dei singoli prodotti non funzionano allo stesso modo ('aggiungi al carrello' è lì un normale form PHP, non è coinvolto alcun Ajax).
Non l'ho testato, ma WooCommerce include il suo 'prettyphoto.js', che funziona aggiungendo 'rel="prettyPhoto"' a un link href, più o meno come funziona la classe thickbox nell'esempio sopra. Potresti volerlo provare per mantenere la coerenza del design con WooCommerce.