Woocommerce - Pagina prodotto - Come creare AJAX sul pulsante "Aggiungi al carrello"?

Question

Voglio rendere il pulsante "Aggiungi al carrello" nella pagina del prodotto di AJAX. Come posso farlo? ora quando aggiungo al carrello su una pagina prodotto - aggiorna la pagina, come posso farla funzionare con AJAX?

Il pulsante "Aggiungi al carrello" su "Quick View" su opere di archivio di ajax - ed è grandioso, ma come posso fare lo stesso sulla pagina del prodotto?

qualcuno può aiutarmi? Voglio solo che quando clicco su "Take me Home" sulla pagina prodotto: Aggiungerà il prodotto con gli attributi selezionati al mio carrello da ajax e apriremo quel carrello (come il mouse sopra l'immagine della borsa sul menu) e scuote l'immagine della borsa.

Grazie

Answer 1

Iniziare leggendo questa pagina:

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

prima cosa è necessario aggiungere del codice al vostro functions.php ad esempio:

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

Poi si deve aggiungere un codice javascript che attiva l'aggiunta al carrello e chiama la funzione:

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; 

    }); 

}); 

Questo è solo un esempio di come può essere fatto. Anche se è molto semplice. Questo javascript controlla i collegamenti con il nome della classe .add-to-cart e controlla l'attributo rel per il prodotto corrispondente. Invia quindi l'id del prodotto alla classe php. Qui è necessario aggiungere il codice per aggiungere il prodotto corrispondente al carrello.

Ti suggerisco di cercare qualcosa in più sull'argomento per adattarlo alle tue esigenze. In bocca al lupo.

Answer 2

Possiamo usare ajax dalla pagina di archivio. è facile -

Rimuovere vecchio pulsante che submiting forma:

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

Aggiungere ajax-link dalla pagina di archivio a singola pagina del prodotto:

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

P.S. JS Callback. Per esempio è possibile mostrare pop-up con i link "Torna al negozio" e "carrello" o "cassa"

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

Answer 3

informazioni: Testato con WooCommerce 2.4.10.

Hmm, beh l'ho fatto in un altro modo, ha utilizzato il ciclo woocommerce da aggiungere al carrello (woocommerce/templates/loop/add-a-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); 

MA il problema era che stava aggiungendo solo 1 quantità, infatti, si può vedere nel codice che è elencato quantità: 1, così ho avuto problemi, fino a quando mi sono imbattuto in this guys who saved me

ps. lasciando la prima parte dove si aggiunge solo 1 prodotto per le persone che non hanno bisogno di più di 1 prodotto nel carrello, ma ho aggiunto una soluzione per coloro che hanno bisogno di più di un solo prodotto aggiunto al carrello.

Answer 4

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

Answer 5

Copiare questo codice nel file. Ad esempio: my-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(); 
}); 

Potrebbe essere necessario sostituire la funzione, il prefisso variabile myThemeWc_ a ciò che si desidera.

Questo codice utilizza la pagina del singolo prodotto WooCommerce originale aggiungi al carrello pulsante ma interrompe il suo funzionamento e quindi utilizza ajax invece di rimanere tutti i valori nel modulo.

Quindi accodare questo file js.

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

Potrebbe essere necessario codificare il pulsante css per farlo visualizzare il caricamento, icona aggiunta.
Ecco il 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; 
}