WooCommerce: comment afficher les champs de l'extension "Add-ons produit"?
j'utilise l'extension[Product Add-ons] [1] pour WooCommerce, qui permet des champs personnalisés pour les produits. Cela s'affiche automatiquement sur le modèle de produit unique.
par quelques essais et erreurs avec le modèle de produit unique, il semble s'accrocher quelque part dans woocommerce_single_product_summary(single_meta?).
je dois obtenir ce même ensemble de champs de formulaire à afficher sur le archive-product template (la liste des produits). Dans mon cas, il s'agit d'un champ pour une demande de carte et un pour la livraison date. Les deux sont nécessaires avant que le produit soit ajouté au panier à partir de l'archive. Je ne suis pas sûr qu'il y ait une fonction que je puisse appeler pour cela, si cela implique un codage plus avancé.
selon la réponse de Pelmered, j'ai pu obtenir les champs additionnels pour apparaître avec l'ajout de ceci aux fonctions.php:
add_action( 'woocommerce_after_shop_loop_item_title', array($GLOBALS['Product_Addon_Display'], 'display'), 10);
1ER ESSAI
alors, le problème était que l'archive de produit ne créait pas un élément de forme, seulement une ancre lien pour le bouton ajouter au panier. Donc j'ai essayé de mettre manuellement une forme. Code de 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' ); ?>
cela a fonctionné, mais cela a en quelque sorte gâché la soumission AJAX et les messages flash. Après avoir cliqué sur le bouton Ajouter au panier, la page semble se rafraîchir, puis il semble que rien ne s'est passé. Mais quand vous allez à une autre page, il affiche les messages (et plusieurs peuvent empiler).
2E TENTATIVE
donc j'ai vu que le bouton original de panier AJAX (pas dans un form) utilisait une chaîne de requête pour envoyer L'ID du produit. J'essaie donc maintenant d'ajouter des paramètres supplémentaires en modifiant l'add au cart js. Cela a fonctionné. Ce que j'ai fait a ajouté comme réponse acceptée.
2 réponses
j'ai trouvé une solution qui fonctionne, en utilisant jQuery pour ajouter les valeurs du champ form à la requête AJAX. Cela nécessite impérieuse d'ajout au panier.js avec votre propre version, donc les futures mises à jour de ce fichier pourraient devoir être fusionnées.
Dans les fonctions.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 );
}
Double /assets/add-to-cart.js dans le thème du dossier plugin, et ajouter dans le dossier référencé dans load_woo_scripts. Puis ajouter ce qui suit après le var date = { déclaration (ligne 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 );
// =========================================================================
C'ajoute les noms et valeurs de tous les champs d'entrée dans le .after-shop-loop-item-title div. J'ai ajouté cette div / class à mon thème woocommerce/content-product.php modèle:
<?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' ); ?>
notez que dans mon cas, je n'utilise qu'un textarea et une entrée de texte. Ni de ce qui change le prix. Une utilisation plus poussée de l'extension peut exiger plus de travail.
J'espère vraiment que WooCommerce facilitera les choses à l'avenir...
il est impossible de vous donner une solution exacte de copier-coller sans accéder au code, mais il devrait être possible d'attacher la même fonction qui est accrochée.
Le crochet qui ajoute cela à la seule page du produit ressemble probablement à ceci:
add_action( 'woocommerce_single_product_summary', array($this, 'woocommerce_product_add_ons_something'));
Pour joindre cette action pour le réaliser modèle ainsi vous devriez probablement être en mesure de faire quelque chose comme ceci:
add_action( 'woocommerce_after_shop_loop_item_title', array('WC_Product_Add_On', 'woocommerce_product_add_ons_something'));
WC_Product_Add_On est le nom de classe du plguin et doit être changé en match de la classe qui a la fonction/méthode dans l'action. Mettez ce code dans les fonctions.fichier php dans votre thème.
voir si ça marche. Si non, donnez-moi plus d'informations et je peux développer ma réponse.