WooCommerce:如何显示“产品附加组件"中的字段延期? [英] WooCommerce: How to display fields from the "Product Add-ons" extension?
问题描述
我正在使用 WooCommerce 的 [Product Add-ons][1] 扩展，它允许产品的自定义字段.这会自动显示在单个产品模板上.
通过对单一产品模板的一些试验和错误，它似乎在woocommerce_single_product_summary(single_meta?)中的某个地方挂钩.
我需要在 archive-product 模板(产品列表)上显示相同的表单字段集.就我而言，这是一个用于卡请求的字段和一个用于交货日期的字段.在将产品从产品档案添加到购物车之前，两者都需要.如果涉及一些更高级的编码，我不确定是否有我可以调用的函数.
根据 Pelmered 的回答，我能够通过将其添加到 functions.php 来显示附加字段:
add_action('woocommerce_after_shop_loop_item_title', array($GLOBALS['Product_Addon_Display'], 'display'), 10);
第一次尝试
然后，问题是产品档案没有创建表单元素，只有添加到购物车按钮的锚链接.所以我尝试手动放入表格.来自 content-product.php 的代码:
<?php do_action( 'woocommerce_before_shop_loop_item' );?><h2><?php the_title();?></h2><?php//手动放入表单，因为 Hooks 只放入按钮，没有表单.需要附加字段?><form class="cart" method="post" enctype='multipart/form-data'><?php/*** woocommerce_after_shop_loop_item_title 钩子** @hooked woocommerce_template_loop_rating - 5* @hooked woocommerce_template_loop_price - 10*/do_action('woocommerce_after_shop_loop_item_title');?><div itemprop="描述"><?php the_content();?><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();?></按钮></表单><?php//do_action('woocommerce_after_shop_loop_item');?>
这行得通，但有点弄乱了 AJAX 提交和 Flash 消息.点击添加到购物车按钮后，页面似乎刷新了，然后看起来什么也没发生.但是当您转到另一个页面时，它会显示消息(并且可以堆叠多个).
第二次尝试
所以我看到原始 AJAX 购物车按钮(不在表单内)使用查询字符串发送产品 ID.所以我现在试图通过修改添加到购物车 JS 来增加额外的参数.这奏效了.我所做的添加为已接受的答案.
我找到了一个有效的解决方案，使用 jQuery 将表单字段值添加到 AJAX 请求.这需要使用您自己的版本覆盖 add-to-cart.js，因此可能需要合并对该文件的未来更新.
在functions.php中
//在 woocommerce_after_shop_loop_item_title 中显示附加字段add_action('woocommerce_after_shop_loop_item_title', array($GLOBALS['Product_Addon_Display'], 'display'), 10);//我们的自定义购物车 JS 允许产品存档中的产品附加字段add_action('wp_enqueue_scripts', 'load_woo_scripts', 9);函数 load_woo_scripts() {wp_enqueue_script( 'wc-add-to-cart', get_template_directory_uri() . '/js/add-to-cart.js', array( 'jquery' ), WC_VERSION, true );}从woocommerce插件文件夹中复制/assets/add-to-cart.js，并添加到load_woo_scripts中引用的文件夹中.然后在 var date = { 语句之后添加以下内容(第 21 行).
//==========================================================================//将产品附加字段添加到提交中(允许从产品档案中获取)//在对象中存储字段的名称和值.var addonfields = {};$(this).parent().find(".after-shop-loop-item-title :input").each(function() {addonfields[this.name] = $(this).val();});//合并新字段和现有数据数据 = $.extend(data, addonfields);//测试:数据的最终值控制台日志(数据)；//==========================================================================这会添加 .after-shop-loop-item-title div 中所有输入字段的名称和值.我已将此 div/class 添加到我主题的 woocommerce/content-product.php 模板中:
<?php do_action( 'woocommerce_before_shop_loop_item' );?><h2><?php the_title();?></h2><div itemprop="描述"><?php the_content();?><div class="after-shop-loop-item-title"><?php/*** woocommerce_after_shop_loop_item_title 钩子** @hooked woocommerce_template_loop_rating - 5* @hooked woocommerce_template_loop_price - 10*/do_action('woocommerce_after_shop_loop_item_title');?>
<?php do_action('woocommerce_after_shop_loop_item');?>
请注意，就我而言，我仅使用文本区域和文本输入.两者都不会改变价格.扩展程序的更高级用法可能需要更多工作.
我真的希望 WooCommerce 在未来让这一切变得更容易......
I'm using the [Product Add-ons][1] extension for WooCommerce, which allows custom fields for products. This automatically displays on the single product template.
By some trial and error with the single product template, it appears to hook in somewhere in woocommerce_single_product_summary (single_meta?).
I need to get this same set of form fields to display on the archive-product template (the list of products). In my case, this is a field for a card request and one for delivery date. Both are needed before the product can be added to the cart from the product archive. I'm not sure if there is a function I can call for this, if it involves some more advanced coding.
Per Pelmered's answer, I was able to get the add-on fields to show up with adding this to functions.php:
add_action( 'woocommerce_after_shop_loop_item_title', array($GLOBALS['Product_Addon_Display'], 'display'), 10);
1ST ATTEMPT
Then, the problem was that the product archive was not creating a form element, only an anchor link for the add to cart button. So I've tried manually putting in a form. Code from 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' ); ?>
This worked, but kind of messes up the AJAX submission and flash messages. After clicking the add to cart button, the page appears to refresh, and then it looks like nothing happened. But when you go to another page, it displays the messages (and multiple can stack).
2ND ATTEMPT
So I saw that the original AJAX cart button (not within a form) was using a query string to send the product ID. So I am now attempting to tack on additional parameters by modifying the add to cart JS. This worked. What I did added as the accepted answer.
I've found a solution that works, using jQuery to add the form field values to the AJAX request. This requires overriding add-to-cart.js with your own version, so future updates to that file may need to be merged.
In functions.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 );
}
Duplicate /assets/add-to-cart.js from the woocommerce plugin folder, and add to the folder referenced in load_woo_scripts. Then add the following after the var date = { statement (line 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 );
// =========================================================================
This adds the names and values of all input fields within the .after-shop-loop-item-title div. I've added this div/class to my theme's woocommerce/content-product.php template:
<?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' ); ?>
Note that in my case, I am only using a textarea and a text input. Neither of which changes the price. More advanced usage of the extension may require more work.
I really hope that WooCommerce makes this easier in the future...
这篇关于WooCommerce:如何显示“产品附加组件"中的字段延期?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
