wake-up-neo.com

Woocommerce - Produktseite - So erstellen Sie AJAX auf "Add To Cart" -Button?

Ich möchte auf einer Produktseite eine Schaltfläche "In den Warenkorb legen" erstellen, die mit AJAX funktioniert. Wie kann ich es tun? Wenn ich zu einer Produktseite in den Warenkorb lege, wird die Seite aktualisiert. Wie kann ich AJAX damit arbeiten lassen?

Die Schaltfläche "Hinzufügen zum Warenkorb" in der "Schnellansicht" im Archiv funktioniert mit ajax - und es ist großartig, aber wie kann ich dasselbe auf der Produktseite tun?

Ich möchte auf der Produktseite auf "Take me Home" klicken, was dann Fügen Sie das Produkt mit den ausgewählten Attributen von ajax zu meinem Einkaufswagen hinzu, und öffnen Sie den Einkaufswagen (wenn Sie mit der Maus auf das Taschenbild im Menü fahren), und schütteln Sie das Taschenbild.

13
Tom Luz

Wir können Ajax von der Archivseite verwenden. es ist einfach - 

Entfernen Sie den alten Button, der das Formular einreicht:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Hinzufügen eines Ajax-Links von der Archivseite zu einer einzelnen Produktseite:

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_loop_add_to_cart', 30 );

P.S. JS Rückruf. Zum Beispiel können Sie Popup mit den Links "Zurück zum Shop" und "Warenkorb" oder "Kasse" anzeigen.

$('body').on('added_to_cart',function(){
    // Callback -> product added
    //$('.popup').show();
});
15
anatoliy_kot

Bitte beginnen Sie mit dem Lesen dieser Seite:

http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)

Als Erstes müssen Sie beispielsweise etwas zu Ihrer functions.php hinzufügen:

add_action( 'wp_ajax_add_foobar', 'prefix_ajax_add_foobar' );
add_action( 'wp_ajax_nopriv_add_foobar', 'prefix_ajax_add_foobar' );

function prefix_ajax_add_foobar() {
   $product_id  = intval( $_POST['product_id'] );
// add code the add the product to your cart
die();
}

Dann müssen Sie Javascript-Code hinzufügen, der das Hinzufügen zum Einkaufswagen auslöst und die Funktion aufruft:

  jQuery( ".add-to-cart" ).each(function() 
{


    var product_id = jQuery(this).attr('rel');
    var el = jQuery(this);

    el.click(function() {

            var data = {
                action: 'add_foobar',
                product_id: product_id
            };

            jQuery.post('/wp-admin/admin-ajax.php' , data, function(response) {
                if(response != 0) {
                    // do something
                } else {
                    // do something else
                }

            });


        return false;

    });

});

Dies ist nur ein Beispiel, wie dies möglich ist. Obwohl es sehr einfach ist. Dieses Javascript sucht nach Links mit dem Klassennamen .add-to-cart und überprüft das rel-Attribut für das entsprechende Produkt. Es sendet dann die Produkt-ID an die PHP-Klasse. Dort müssen Sie Code hinzufügen, um das entsprechende Produkt in den Warenkorb zu legen. 

Ich schlage vor, Sie suchen mehr über das Thema, um es an Ihre Bedürfnisse anzupassen. Viel Glück.

7
Menno Evertzen

info: Getestet mit WooCommerce 2.4.10.

Hmm, ich habe es auf eine andere Weise getan, die Woocommerce-Schleife von add to cart (woocommerce/templates/loop/add-to-cart.php)

  global $product;

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-quantity="%s" class="button %s product_type_%s">%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( $product->id ),
        esc_attr( $product->get_sku() ),
        esc_attr( isset( $quantity ) ? $quantity : 1 ),
        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
        esc_attr( $product->product_type ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

ABER Das Problem war, dass es nur 1 Menge hinzufügte. Tatsächlich können Sie in dem Code die Menge sehen: 1, also hatte ich Probleme, bis ich diese Jungs, die rettete mich 

ps. Ich verlasse den 1. Teil, in dem nur ein Produkt für Menschen hinzugefügt wird, die nicht mehr als ein Produkt im Korb benötigen. Ich habe jedoch eine Lösung für diejenigen hinzugefügt, die mehr als nur ein Produkt in den Warenkorb legen.

1
RwkY

Woocommerce ist auf dem richtigen Weg. Ich denke, die Lösung ist jetzt ganz einfach. Falls ich etwas vermisse, ist alles, was erforderlich ist, es zu überprüfen, die "Enable AJAX Add to Cart Buttons in Archiven" und mit der Funktion woocommerce_template_loop_add_to_cart().

Die Checkbox-Option befindet sich unter Woocommerce> Einstellungen> Produkte> Allgemein. The checkbox option is under Woocommerce > Settings > Products > General.

Verwenden Sie dann einfach woocommerce_template_loop_add_to_cart () , wo immer Sie den Button ausgeben möchten.

Wenn Sie wie ich eine benutzerdefinierte Schleife verwenden, müssen Sie sicherstellen, dass das Produkt global ist, damit woocommerce_template_loop_add_to_cart() funktioniert.

Nachfolgend finden Sie ein kleines Beispiel für die Verwendung der Funktion:

add_shortcode( 'buy_again' , 'msp_buy_again_shortcode' );
function msp_buy_again_shortcode(){
    $order_items = msp_get_customer_unique_order_items( get_current_user_id() );
    echo '<div class="owl-carousel owl-theme">';
    foreach( $order_items as $id ){
        $product = wc_get_product( $id );
        global $product;

        if( ! empty( $product ) ){
            ?>
            <div class="card buy-again-product">
                <a class="link-normal" href="<?php echo $product->get_permalink(); ?>">
                    <?php echo $product->get_image( 'woocommerce_thumbnail', array( 'class' => 'card-img-top' ) ) ?>
                    <div class="card-body">
                        <?php echo wc_get_rating_html( $product->get_average_rating(), $product->get_review_count() ) ?>
                        <h5><?php echo $product->get_name(); ?></h5>
                        <p><?php echo $product->get_price_html() ?></p>
                        <?php woocommerce_template_loop_add_to_cart(); ?>
                    </div>
                </a>
            </div>
            <?php
        }
    }
    // loop and display buy again.
    // try to use the official woocommerce loop.

    echo '</div>';

}
1
gregbast1994

add-to-cart.js

jQuery( document ).on( 'click', '.product_type_simple', function() { 

var post_id = jQuery(this).data('product_id');//store product id in post id variable
var qty = jQuery(this).data('quantity');//store quantity in qty variable

jQuery.ajax({
    url : addtocart.ajax_url, //ajax object of localization
    type : 'post', //post method to access data
    data : 
    {
        action : 'prefix_ajax_add_foobar', //action on prefix_ajax_add_foobar function
        post_id : post_id,
        quantity: qty
    },

    success : function(response){

            jQuery('.site-header .quantity').html(response.qty);//get quantity
            jQuery('.site-header .total').html(response.total);//get total

            //loaderContainer.remove();
            alert("Product Added successfully..");        
    }

});

return false;
});
0
Bhagyavant

Kopieren Sie diesen Code in Ihre Datei. Zum Beispiel: mein-theme-wc-single-ajax-add-cart.js .

function myThemeWc_SingleProductAddToCart(thisObj) {
    if (typeof($) === 'undefined') {
        var $ = jQuery.noConflict();
    }

    var thisForm = thisObj.closest('form');
    var button = thisForm.find('.button');
    var formUrl = thisForm.attr('action');
    var formMethod = thisForm.attr('method');
    if (typeof(formMethod) === 'undefined' || formMethod == '') {
        formMethod = 'POST';
    }
    var formData = new FormData(thisForm[0]);
    formData.append(button.attr('name'), button.val());

    button.removeClass('added');
    button.addClass('loading');

    myThemeWc_SingleProductCartAjaxTask = $.ajax({
        url: formUrl,
        method: formMethod,
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    })
    .done(function(data, textStatus, jqXHR) {
        $(document.body).trigger('wc_fragment_refresh');

        $.when(myThemeWc_SingleProductCartAjaxTask)
        .then(myThemeWc_SingleProductUpdateCartWidget)
        .done(function() {
            button.removeClass('loading');
            button.addClass('added');
            setTimeout(function() {
                button.removeClass('added');
            }, 2000);
        });
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        button.removeClass('loading');
    })
    .always(function(jqXHR, textStatus, errorThrown) {
        $('.cart').off('submit');
        myThemeWc_SingleProductListenAddToCart();
    });
}// myThemeWc_SingleProductAddToCart


function myThemeWc_SingleProductListenAddToCart() {
    if (typeof($) === 'undefined') {
        var $ = jQuery.noConflict();
    }

    $('.cart').on('submit', function(e) {
        e.preventDefault();
        myThemeWc_SingleProductAddToCart($(this));
    });
}// myThemeWc_SingleProductListenAddToCart


/**
 * Update WooCommerce cart widget by called the trigger and listen to the event.
 * 
 * @returns {undefined}
 */
function myThemeWc_SingleProductUpdateCartWidget() {
    if (typeof($) === 'undefined') {
        var $ = jQuery.noConflict();
    }

    var deferred = $.Deferred();

    $(document.body).on('wc_fragments_refreshed', function() {
        deferred.resolve();
    });

    return deferred.promise();
}// myThemeWc_SingleProductUpdateCartWidget


var myThemeWc_SingleProductCartAjaxTask;


// on page load --------------------------------------------
jQuery(function($) {
    $(document.body).on('wc_fragments_refreshed', function() {
        console.log('woocommerce event fired: wc_fragments_refreshed');
    });

    myThemeWc_SingleProductListenAddToCart();
});

Möglicherweise müssen Sie die Funktion, das Variablenpräfix myThemeWc_ durch das ersetzen, was Sie möchten.

In diesem Code wird die ursprüngliche WooCommerce-Produktseite für einzelne Produkte in den Warenkorb gelegt, die Funktion wird jedoch angehalten und anschließend wird ajax verwendet, indem alle Werte im Formular beibehalten werden.

Dann packen Sie diese js-Datei ein.

add_action('wp_enqueue_scripts', 'mythemewc_enqueue_scripts');
function mythemewc_enqueue_scripts() {
    if (class_exists('\\WooCommerce') && is_product()) {
        wp_enqueue_script('mythemewc-single-product', trailingslashit(get_stylesheet_directory_uri()) . 'assets/js/my-theme-wc-single-ajax-add-cart.js', ['jquery'], false, true);
    }
}

Möglicherweise müssen Sie Ihre CSS-Schaltfläche so programmieren, dass das hinzugefügte Symbol angezeigt wird.
Hier ist css.

.woocommerce #respond input#submit.added::after, 
.woocommerce a.btn.added::after, 
.woocommerce button.btn.added::after, 
.woocommerce input.btn.added::after,
.woocommerce .single_add_to_cart_button.added::after {
    font-family: WooCommerce;
    content: '\e017';
    margin-left: .53em;
    vertical-align: bottom;
}
.woocommerce #respond input#submit.loading, 
.woocommerce a.btn.loading, 
.woocommerce button.btn.loading, 
.woocommerce input.btn.loading,
.woocommerce .single_add_to_cart_button.loading {
    opacity: .25;
    padding-right: 2.618em;
    position: relative;
}
.woocommerce #respond input#submit.loading::after, 
.woocommerce a.btn.loading::after, 
.woocommerce button.btn.loading::after, 
.woocommerce input.btn.loading::after,
.woocommerce .single_add_to_cart_button.loading::after {
    font-family: WooCommerce;
    content: '\e01c';
    vertical-align: top;
    font-weight: 400;
    position: absolute;
    right: 1em;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
0
vee

Sie können das Verhalten der Schaltfläche "Archive" in Ihren einzelnen Produkten replizieren

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

sie können das vollständige Tutorial hier sehen

https://quadmenu.com/add-to-cart-with-woocommerce-and-ajax-step-by-step/

0
Juan Francisco