WooCommerce:如何显示"产品附加组件"扩展中的字段？

Question

我正在使用WooCommerce的[Product Add-ons] [1]扩展,它允许产品的自定义字段.这会自动显示在单个产品模板上.

通过对单个产品模板的一些试验和错误,它似乎挂钩woocommerce_single_product_summary(single_meta？)中的某个地方.

我需要在archive-product模板(产品列表)上显示同一组表单字段.在我的情况下,这是一个卡请求的字段和一个交付日期的字段.在将产品从产品存档添加到购物车之前,需要两者.如果它涉及一些更高级的编码,我不确定是否有可以为此调用的函数.

---

根据Permemered的回答,我能够将这些附加字段添加到functions.php中:

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

第1次尝试

然后,问题是产品存档没有创建表单元素,只有添加到购物车按钮的锚链接.所以我尝试手动输入表格.代码来自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' ); ?>

这有效,但有点混淆了AJAX提交和flash消息.单击"添加到购物车"按钮后,页面将显示为刷新,然后看起来没有任何反应.但是当你转到另一个页面时,它会显示消息(并且多个可以堆叠).

2ND ATTEMPT

所以我看到原始的AJAX购物车按钮(不在表单中)使用查询字符串来发送产品ID.所以我现在试图通过修改添加到购物车JS来增加其他参数.这很有效.我做了什么作为公认的答案添加.

Answer 1

我找到了一个有效的解决方案,使用jQuery将表单字段值添加到AJAX请求中.这需要使用您自己的版本覆盖add-to-cart.js,因此可能需要合并该文件的未来更新.

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

复制/assets/add-to-cart.js从woocommerce插件文件夹,并添加到引用的文件夹中load_woo_scripts.然后在var date = {语句后添加以下内容(第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 );
// =========================================================================

这会添加.after-shop-loop-item-titlediv 中所有输入字段的名称和值.我已将此div/class添加到我的主题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' ); ?>

请注意,在我的情况下,我只使用textarea和文本输入.这两者都没有改变价格.更高级的扩展使用可能需要更多的工作.

我真的希望WooCommerce在未来让这更容易......