web-dev-qa-db-fra.com

Lightbox popup sur l'action add_to_cart de WooCommerce

Je souhaite créer une fenêtre contextuelle modale dans WooCommerce, qui apparaîtra lorsque le bouton "Ajouter au panier" aura été cliqué. Cela doit se produire après les actions de WC qui ajoutent réellement le produit au panier mais avant/au lieu de toute redirection.

J'ai trouvé plusieurs hooks, actions et filtres probables/possibles qui pourraient m'être utiles, mais je ne sais pas exactement de quoi j'ai besoin et comment les utiliser correctement (désolé, je suis un total de WooCom n00b):

  • woocommerce_template_loop_add_to_cart
  • woocommerce_template_single_add_to_cart
  • woocommerce_after_add_to_cart_button
  • il y a aussi le filtre add_to_cart_redirect pour $ url

Je ne suis pas sûr non plus de savoir comment trigger la lightbox doit apparaître à partir de PHP! (OK en HTML, j'utilise un élément comme un hyperlien sur lequel il faut cliquer, mais comment déclencher la même chose à un moment donné dans l'exécution de PHP? - Ai-je besoin d'AJAX?)

Enfin, je comptais utiliser ThickBox car il est fourni avec WordPress. Existe-t-il une raison d'éviter cela et/ou une meilleure option disponible, ou existe-t-il une implémentation d'une lightbox fournie avec WooCommerce?

Merci pour toute aide!

jquerypluginsthickbox
5
Chris

Ce qui suit fonctionne pour moi pour les pages d'archives de produits (par exemple, la page principale du magasin ainsi que les pages d'archives des catégories de produits).

Il montrera le contenu actuel du panier dans une grosse boîte. J'ai choisi de montrer cela pour cet exemple simplement parce que ce sont les données que l'on récupère via Ajax après avoir cliqué sur le bouton Ajouter au panier, mais vous souhaiterez peut-être un autre type d'informations dans votre boîte. Vous pouvez obtenir le product_id du produit que vous venez d'ajouter, en regardant par exemple les éléments html environnants.

Dans le functions.php de votre thème (ou dans la définition de classe du thème, le cas échéant), il existe probablement une fonction 'enqueue_scripts'. Vous devez ajouter ceci à cette fonction pour vous assurer que le script thickbox est chargé.

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

Dans un fichier (dans votre répertoire de thème) js/frontend-custom.js (ou où que vous soyez avec le js de votre thème):

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

Quelques notes supplémentaires:

  • Je suppose que vous pouvez également générer du javascript directement dans la page à partir de php. Dans ce cas, je pense que vous souhaitez probablement vous associer à add_action('woocommerce_ajax_added_to_cart', 'myfunction');. Cette action est exécutée dans woocommerce_ajax_add_to_cart() juste après avoir ajouté un article au panier (validation réussie, etc.), mais avant la redirection.

  • Les pages de produit individuelles ne fonctionnent pas de la même manière ('add to cart' existe-t-il sous une forme php normale, aucun ajax n'est impliqué).

  • Je n'ai pas testé cela, mais WooCommerce est livré avec son propre "prettyphoto.js", qui fonctionne en ajoutant "rel =" prettyPhoto "" à un lien href, à peu près comme la classe thickbox fonctionne dans l'exemple précédent. Vous voudrez peut-être essayer de maintenir la cohérence de la conception avec WooCommerce.

6
adelval