Comment implémenter un bouton WooCommerce AJAX Direct \'Acheter maintenant\'

Lorsque vous exploitez une boutique en ligne à l'aide de WooCommerce, il est crucial de rendre le processus d'achat aussi transparent que possible. Un moyen efficace d'y parvenir consiste à ajouter un bouton « Acheter maintenant » qui permet aux clients d'acheter directement un produit sans parcourir plusieurs pages. Ce blog vous guidera dans la création d'un bouton WooCommerce AJAX « Acheter maintenant » à l'aide des extraits de code fournis.

Étape 1 : ajoutez le bouton « Acheter maintenant »

Tout d'abord, vous devez ajouter un bouton personnalisé « Acheter maintenant » sur vos pages de produits WooCommerce. Nous le ferons en nous connectant à l'action woocommerce_after_add_to_cart_button, qui place notre bouton juste après le bouton standard "Ajouter au panier".

Voici l'extrait de code PHP :

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );
function add_content_after_addtocart() {
    $current_product_id = get_the_ID();
    $product = wc_get_product( $current_product_id );

    if( $product->is_type( 'simple' ) ){
        echo '<button data-id="'.$current_product_id.'" class="buy-now button"><i class="matico-icon-toys"></i>'.__('Buy Now', 'woocommerce').'</button>';
    }
}

Explication :

• Nous utilisons le hook woocommerce_after_add_to_cart_button pour insérer notre bouton « Acheter maintenant » juste après le bouton « Ajouter au panier ».
• La fonction get_the_ID() récupère l'ID du produit actuel et wc_get_product() obtient les détails du produit.
• Nous vérifions si le produit est de type simple, puis rendons le bouton avec l'attribut data-id approprié et une icône personnalisée.

Étape 3 : mettre le script en file d'attente

Ensuite, vous devez mettre le script en file d'attente dans votre thème pour vous assurer qu'il est correctement chargé sur vos pages WooCommerce. Voici comment procéder :

wp_enqueue_script('matico-child-script', get_stylesheet_directory_uri() . '/assets/js/script.js', array( 'jquery', 'scrollfix-script' ),  $matico_version, true);

wp_localize_script( 'matico-child-script', 'matico_child_script_obj',
    array( 
        'checkout_page_url' => wc_get_checkout_url(),
    )
);

Explication :

• wp_enqueue_script() est utilisé pour charger notre fichier de script personnalisé (script.js), qui contient le code jQuery.
• wp_localize_script() transmet les données PHP au script, telles que l'URL de la page de paiement, nous permettant de les utiliser dans le script.

Étape 2 : Gérer la requête AJAX

Enfin, nous gérerons l'événement de clic sur le bouton à l'aide de jQuery. Le script jQuery envoie une requête AJAX à WooCommerce, qui ajoute le produit au panier puis redirige l'utilisateur directement vers la page de paiement.

Voici l'extrait de code jQuery :

(function ($) {
    var MaticoChildThemeConfig = {
        init: function () {
            this.bindEvents();
        },
        bindEvents: function () {
            $(document).on('click', '.buy-now', this.handleBuyNowClick);
        },
        handleBuyNowClick: function (event) {
            event.preventDefault();

            var $button = $(this),
                quantity = parseFloat($button.closest('.quantity').find('.qty').val()) || 1,
                productID = $button.data('id');

            var data = {
                product_id: productID,
                quantity: quantity,
            };

            $.ajax({
                type: 'POST',
                url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
                data: data,
                dataType: 'json',
                beforeSend: function () {
                    $button.addClass('loading');
                },
                success: function (res) {
                    if (res.error && res.product_url) {
                        window.location.href = res.product_url;
                    } else {
                        window.location.href = matico_child_script_obj.checkout_page_url;
                    }
                }
            });
        }
    };

    MaticoChildThemeConfig.init();
})(jQuery);

Explication :

• Lorsque le bouton "Acheter maintenant" est cliqué, nous empêchons l'action par défaut pour éviter le rechargement de la page.
• Nous collectons l'ID du produit et la quantité à partir de la page produit actuelle.
• Une requête AJAX est envoyée au point de terminaison add_to_cart de WooCommerce, qui ajoute le produit au panier.
• Si le produit est ajouté avec succès, nous redirigeons l'utilisateur vers la page de paiement. S'il y a une erreur (par exemple, le produit n'est plus disponible), l'utilisateur est redirigé vers la page produit.

Conclusion

En mettant en œuvre les étapes ci-dessus, vous pouvez créer un bouton « Acheter maintenant » qui rationalise le processus d'achat pour vos clients. Cette fonctionnalité est particulièrement utile pour augmenter les conversions en réduisant le nombre de clics et de pages qu'un client doit parcourir avant de finaliser un achat.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!