WooCommerce: come visualizzare i campi dall'estensione "Product Add-ons"?

Question

Sto utilizzando l'estensione [Product Add-ons] [1] per WooCommerce, che consente campi personalizzati per i prodotti. Questo viene automaticamente visualizzato sul modello di singolo prodotto.

Con alcune prove ed errori con il modello di prodotto singolo, sembra che si agganci da qualche parte in woocommerce_single_product_summary (single_meta?).

Ho bisogno di ottenere lo stesso set di campi modulo da visualizzare sul modello archive-product (l'elenco di prodotti). Nel mio caso, questo è un campo per una richiesta di carta e uno per la data di consegna. Entrambi sono necessari prima che il prodotto possa essere aggiunto al carrello dall'archivio del prodotto. Non sono sicuro che ci sia una funzione che posso chiamare per questo, se implica una codifica più avanzata.

---

risposta di Per Pelmered, sono stato in grado di ottenere l'add-on campi di presentarsi con l'aggiunta di questo al functions.php:

add_action('woocommerce_after_shop_loop_item_title', array($GLOBALS['Product_Addon_Display'], 'display'), 10);

1 ° tentativo

Poi, il il problema era che l'archivio del prodotto non stava creando un elemento del modulo, solo un collegamento di ancoraggio per il pulsante Aggiungi al carrello. Quindi ho provato a inserire manualmente un modulo. Codice da content-product.php:

<?php do_action('woocommerce_before_shop_loop_item'); ?> 
<h2><?php the_title(); ?></h2> 

<?php // MANUALLY PUT IN FORM, BECAUSE HOOKS ONLY PUT IN A BUTTON AND NO FORM. NEEDED FOR ADD-ON FIELDS ?> 
<form class="cart" method="post" enctype='multipart/form-data'> 
    <?php 
     /** 
     * woocommerce_after_shop_loop_item_title hook 
     * 
     * @hooked woocommerce_template_loop_rating - 5 
     * @hooked woocommerce_template_loop_price - 10 
     */ 
     do_action('woocommerce_after_shop_loop_item_title'); 
    ?>   
    <div itemprop="description"> 
     <?php the_content(); ?> 
    </div> 
    <input type="hidden" name="add-to-cart" value="<?php echo esc_attr($product->id); ?>" /> 
    <button type="submit" class="single_add_to_cart_button button alt"><?php echo $product->single_add_to_cart_text(); ?></button> 
</form> 

<?php //do_action('woocommerce_after_shop_loop_item'); ?> 

Questo ha funzionato, ma tipo di scombina i messaggi istantanei di presentazione e AJAX. Dopo aver fatto clic sul pulsante Aggiungi al carrello, la pagina viene visualizzata per l'aggiornamento, quindi sembra che non sia successo nulla. Ma quando vai su un'altra pagina, visualizza i messaggi (e possono essere impilati più volte).

2 ° tentativo

Così ho visto che il pulsante originale della spesa AJAX (non all'interno di un form) stava usando una stringa di query per inviare l'ID del prodotto. Quindi ora sto tentando di virare su parametri aggiuntivi modificando l'add to cart JS. Questo ha funzionato. Quello che ho aggiunto è la risposta accettata.

Answer 1

Ho trovato una soluzione che funziona, utilizzando jQuery per aggiungere i valori del campo modulo alla richiesta AJAX. Ciò richiede la sovrascrittura di add-to-cart.js con la propria versione, pertanto potrebbe essere necessario unire gli aggiornamenti futuri a quel file.

Nelle funzioni.php

// display add-on fields in woocommerce_after_shop_loop_item_title 
add_action('woocommerce_after_shop_loop_item_title', array($GLOBALS['Product_Addon_Display'], 'display'), 10); 

// Our custom cart JS to allow for product add-on fields on product archive 
add_action('wp_enqueue_scripts', 'load_woo_scripts', 9); 
function load_woo_scripts() { 
    wp_enqueue_script('wc-add-to-cart', get_template_directory_uri() . '/js/add-to-cart.js', array('jquery'), WC_VERSION, true); 
} 

Duplica /assets/add-to-cart.js dalla cartella woocommerce plug-in, e aggiungere alla cartella si fa riferimento in load_woo_scripts. Quindi aggiungere quanto segue dopo l'istruzione var date = { (riga 21).

// ========================================================================= 
// ADD PRODUCT ADD-ON FIELDS TO SUBMISSION (to allow from product archive) 
// Store name and value of fields in object. 
var addonfields = {}; 
$(this).parent().find(".after-shop-loop-item-title :input").each(function() { 
    addonfields[this.name] = $(this).val(); 
}); 

// Merge new fields and existing data 
data = $.extend(data, addonfields); 

// Testing: final value of data 
console.log(data); 
// ========================================================================= 

Questo aggiunge i nomi ei valori di tutti i campi di input all'interno del .after-shop-loop-item-title div. Ho aggiunto questa div/classe al modello del mio tema woocommerce/content-product.php:

<?php do_action('woocommerce_before_shop_loop_item'); ?> 
<h2><?php the_title(); ?></h2> 
<div itemprop="description"> 
    <?php the_content(); ?> 
</div> 

<div class="after-shop-loop-item-title"> 
    <?php 
     /** 
     * woocommerce_after_shop_loop_item_title hook 
     * 
     * @hooked woocommerce_template_loop_rating - 5 
     * @hooked woocommerce_template_loop_price - 10 
     */ 
     do_action('woocommerce_after_shop_loop_item_title'); 
    ?> 
</div> 

<?php do_action('woocommerce_after_shop_loop_item'); ?> 

Si noti che nel mio caso, Io uso solo una textarea e un input di testo. Nessuno dei due cambia il prezzo. L'utilizzo più avanzato dell'estensione potrebbe richiedere più lavoro.

Spero davvero che WooCommerce rende questo più facile in futuro ...

Answer 2

È impossibile fornire una soluzione di copia-incolla esatta senza accesso al codice, ma dovrebbe essere possibile allegare la stessa funzione che viene agganciata.

Il gancio che aggiunge questo alla pagina di singolo prodotto, probabilmente simile a questa:

add_action('woocommerce_single_product_summary', array($this, 'woocommerce_product_add_ons_something')); 

Per allegare questa azione per il modello achive così probabilmente si dovrebbe essere in grado di fare qualcosa del genere:

add_action('woocommerce_after_shop_loop_item_title', array('WC_Product_Add_On', 'woocommerce_product_add_ons_something')); 

WC_Product_Add_On è il nome della classe del plguin e deve essere modificato per corrispondere alla classe che ha la funzione/metodo nell'azione. Inserisci questo codice nel file functions.php nel tuo tema.

Vedere se funziona. In caso contrario, dammi più informazioni e posso espandere la mia risposta.