Question

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

通过对单个产品模板的一些试验和错误，它似乎挂钩在woocommerce_single_product_summary（single_meta？）中的某个位置。

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

Per Pelmered的答案，我能够将这些附加字段显示出来，并将其添加到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 );
}

从woocommerce插件文件夹中复制/assets/add-to-cart.js，然后添加到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-title div中所有输入字段的名称和值。我已将此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在未来让这更容易......

Answer 2

如果不能访问代码，就无法为您提供精确的复制粘贴解决方案，但应该可以附加正在挂钩的相同功能。

将此添加到单个产品页面的钩子可能如下所示：

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

要将此操作附加到achive模板，您应该可以执行以下操作：

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

WC_Product_Add_On是plguin的类名，需要更改以匹配操作中具有函数/方法的类。将此代码放在主题中的functions.php文件中。

看看它是否有效。如果没有，请给我更多信息，我可以扩展我的答案。

WooCommerce：如何显示“产品附加组件”扩展中的字段？

2 个答案: