Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Je suis fan de l’amélioration des taux de vente et je suis toujours à la recherche de conseils et de plugins tiers pour améliorer les ventes comme ça Produits et catégories dans le menu.

Mais l’une des choses que je ne comprends jamais à propos de WooCommerce est la façon dont Ajouter au chariot Les œuvres sont les produits individuels. La fonction standard recharge l’intégralité du site Web chaque fois que vous cliquez sur le bouton Ajouter au panier.

J’ai toujours pensé à celui-là Ajouter Ajax au panier est une meilleure implémentation car elle améliore l’expérience utilisateur en permettant d’apporter des modifications aux pages sans avoir à les recharger.

Imaginez que chaque étape que vous faites sur le Web doit se rapporter à une autre page et une autre et une autre. Plus votre commerce électronique se charge d’étapes et de temps, plus les opportunités de vente sont faibles. Pour cette raison, nous vous recommandons d’utiliser la technologie AJAX, avec laquelle les actions sont effectuées immédiatement, comme si nous interagissions avec un programme PC.

Pourquoi utiliser AJAX?

  • Utilisez moins de bande passante
  • Réduisez la charge du serveur
  • Accélérez l’expérience utilisateur
  • Augmentez vos ventes!

Si vous ne souhaitez pas parcourir l’intégralité du didacticiel, vous pouvez télécharger l’un de ces plugins:

Ajouter Ajax au panier pour WooCommerce

Le « Ajax Ajouter au panier pour WooCommerce » est l’un d’entre eux Plugins pour WooCommerce dont vous avez besoin dans votre liste. Avec ce plugin, les utilisateurs peuvent ajouter des produits individuels ou des produits variables au panier sans avoir à recharger l’intégralité du site Web à chaque fois.

Ajouter Ajax au panier pour WooCommerce

Paiement direct WooCommerce

Si vous cherchez une solution complète, nous vous recommandons d’installer le plugin « WooCommerce Direct Checkout ». Vous pouvez simplifier le processus d’achat en ignorant la page du panier.

Paiement direct pour WooCommerce

Ajouter Ajax au panier pour les produits

1. Ajoutez un fichier Javascript

Nous ajouterons d’abord ce Javascript à votre site Web. Mettez donc ce code dans votre fichier functions.php.

function woocommerce_ajax_add_to_cart_js() {
    if (function_exists('is_product') && is_product()) {
        wp_enqueue_script('woocommerce-ajax-add-to-cart', plugin_dir_url(__FILE__) . 'assets/ajax-add-to-cart.js', array('jquery'), '', true);
    }
}
add_action('wp_enqueue_scripts', 'woocommerce_ajax_add_to_cart_js', 99);

2. Créez un fichier Javascript

Après avoir ajouté le javascript, créez un nouveau dossier dans votre rubrique enfant nommé « JS » et ajoutez un nouveau javascript nommé « ajax-add-to-cart.js ».

En cas de doute Comment créer un sujet enfantvous pouvez consulter le tutoriel lié à partir de wp.rocks.

Ajouter jQuery pour éviter de charger

Appliquez ce code pour empêcher le bouton d’envoyer les informations à la base de données et de recharger la page.

(function ($) {
$( document ).on( 'click', '.single_add_to_cart_button', function(e) {
e.preventDefault();
});
})(jQuery);

Mettre le produit dans le panier

Le jQuery est utilisé pour collecter les informations du site Web et pour ajouter un produit du site Web au panier. Collez ce code dans le code précédent encapsulé dans l’événement « Ajouter un bouton de produit unique au panier » pour collecter les données du produit.

$thisbutton = $(this),
                $form = $thisbutton.closest('form.cart'),
                id = $thisbutton.val(),
                product_qty = $form.find('input[name=quantity]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || id,
                variation_id = $form.find('input[name=variation_id]').val() || 0;

Préparons maintenant les données pour interagir avec la fonctionnalité Ajax WordPress. Avec cette fonction, un site Web peut communiquer avec votre serveur sans avoir à recharger la page.

Avec Ajax, les applications sur le Web peuvent échanger des données avec le serveur sans affecter le site Web existant.

        var data = {
            action: 'woocommerce_ajax_add_to_cart',
            product_id: product_id,
            product_sku: '',
            quantity: product_qty,
            variation_id: variation_id,
        };

Ajax Ajouter au panier

Après ce code, dans lequel nous définissons un tableau avec toutes les variables requises, nous déclenchons l’événement d’ajout au panier au cas où une rubrique utilise cette fonction pour apporter des modifications.

 $(document.body).trigger('adding_to_cart', [$thisbutton, data]);

Ajax Ajouter au panier

C’est là que la magie commence. Nous allons déclencher cela Ajouter WooCommerce au panier via Javascript avec l’aide de l’interface WordPress Ajax.

        $.ajax({
            type: 'post',
            url: wc_add_to_cart_params.ajax_url,
            data: data,
            beforeSend: function (response) {
                $thisbutton.removeClass('added').addClass('loading');
            },
            complete: function (response) {
                $thisbutton.addClass('added').removeClass('loading');
            },
            success: function (response) {

                if (response.error & response.product_url) {
                    window.location = response.product_url;
                    return;
                } else {
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                }
            },
        });

Ajax Ajouter au panier pour un seul script de produit

(function ($) {

    $(document).on('click', '.single_add_to_cart_button', function (e) {
        e.preventDefault();

        var $thisbutton = $(this),
                $form = $thisbutton.closest('form.cart'),
                id = $thisbutton.val(),
                product_qty = $form.find('input[name=quantity]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || id,
                variation_id = $form.find('input[name=variation_id]').val() || 0;

        var data = {
            action: 'woocommerce_ajax_add_to_cart',
            product_id: product_id,
            product_sku: '',
            quantity: product_qty,
            variation_id: variation_id,
        };

        $(document.body).trigger('adding_to_cart', [$thisbutton, data]);

        $.ajax({
            type: 'post',
            url: wc_add_to_cart_params.ajax_url,
            data: data,
            beforeSend: function (response) {
                $thisbutton.removeClass('added').addClass('loading');
            },
            complete: function (response) {
                $thisbutton.addClass('added').removeClass('loading');
            },
            success: function (response) {

                if (response.error && response.product_url) {
                    window.location = response.product_url;
                    return;
                } else {
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                }
            },
        });

        return false;
    });
})(jQuery);

3. Mettez la fonction PHP dans le panier

Passons maintenant au fichier functions.php de votre enfant pour ajouter le code suivant. Il s’agit de mettre à jour le panier avec les informations reçues du fichier jQuery.

add_action('wp_ajax_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart');
add_action('wp_ajax_nopriv_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart');
        
function woocommerce_ajax_add_to_cart() {

            $product_id = apply_filters('woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
            $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
            $variation_id = absint($_POST['variation_id']);
            $passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity);
            $product_status = get_post_status($product_id);

            if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) {

                do_action('woocommerce_ajax_added_to_cart', $product_id);

                if ('yes' === get_option('woocommerce_cart_redirect_after_add')) {
                    wc_add_to_cart_message(array($product_id => $quantity), true);
                }

                WC_AJAX :: get_refreshed_fragments();
            } else {

                $data = array(
                    'error' => true,
                    'product_url' => apply_filters('woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));

                echo wp_send_json($data);
            }

            wp_die();
        }

Prêt!

Si tout cela était compliqué, gardez à l’esprit que vous pouvez télécharger notre plugin appelé Ajouter WooCommerce Ajax au panier cela vous permet de le faire.





Source link

Recent Posts