WooCommerce添加商品到购物车时,添加附加数据并显示在购物车、结算、订单等界面中

WooCommerce是一个开放的电商系统,我们可以添加自己的商品类型,来实现各种各样的在线购买系统,比如,在线预定、付费会员系统等等。要实现这些系统,首先要做到的就是添加商品到购物车的时候,把附加信息加入到购物车,然后在结算的时候,把这些信息和默认的地址信息一起附加到订单数据中。

今天我们来看一下添加附加字段到商品列表和详情页面的「添加到购物车」按钮前面,并在用户添加商品到购物车时,把这些附加信息一起加入到购入车中。

首先、添加表单字段

首先,我们添加一个隐藏字段到商品详情页面,这个隐藏字段的值,我们通过 JavaScript 添加,这里就不再多说了。根据需要,你也可以添加其他任何类型的字段,比如,图片上传,日期选择等等。

add_action('woocommerce_before_add_to_cart_button', function ()
{
    ?>
    <div class="product_image-field">
        <input type="hidden" name="product_image">
    </div>
    <?php
}, 10);

第二步、点击添加到购物车时,获取附加信息

这一步,我们接收前端提交过来的信息,并附加到购物车项目中数据中,这个时候,附加信息是保存在 中的。

add_filter('woocommerce_add_cart_item_data', function ($cart_item_data, $product_id)
{
    global $woocommerce;
    $new_value = [];

    if (isset($_POST[ 'product_image' ])) {
        $new_value[ 'selected_product' ] = $_POST[ 'product_image' ];

        if (empty($cart_item_data)) {
            return $new_value;
        } else {
            return array_merge($cart_item_data, $new_value);
        }
    }

    return $cart_item_data;

}, 1, 10);

第三步、获取上一步的附加信息,并添加到购物车项目中

这一步,从 Session 中获取购物车项目信息,用于下一步的信息显示。

add_filter('woocommerce_get_cart_item_from_session', function ($item, $values, $key)
{

    if (array_key_exists('selected_product', $values)) {
        $item[ 'selected_product' ] = $values[ 'selected_product' ];
    }

    return $item;
}, 1, 3);

第四步、在购物车和结账页面显示附加信息

添加的附加信息必须显示在购物车中,用户才能清楚的知道自己加入购物车中的商品或服务是什么,这一步,我们把信息显示在侧边栏购物车或者结账页面的购物车信息中。

add_filter('woocommerce_cart_item_name', function ($product_name, $values, $cart_item_key)
{

    if (array_key_exists('selected_product', $values)) {
        $return_string = $product_name . '<br /><img src="'%20.%20$values[%20'selected_product'%20]%20.%20'">';

        return $return_string;
    }

    return $product_name;

}, 1, 3);

第五步、添加附加信息到订单数据中

用户结账的时候,我们把附加信息添加到订单元数据中,以便于客服或仓管人员进一步处理订单。

add_action('woocommerce_add_order_item_meta', function ($item_id, $values)
{
    global $woocommerce, $wpdb;

    wc_add_order_item_meta($item_id, 'selected_product', $values[ 'selected_product' ]);

}, 1, 2);

最后一步、根据用户选择的商品计算价格

如果需要根据用户提交的附加信息更新价格,使用下面的代码重新计算价格即可。

add_action( 'woocommerce_before_calculate_totals', function ( $cart_object ) {
    foreach ( $cart_object->cart_contents as $cart_item_key => $value ) {
        $value['data']->set_price($value['_custom_options']['custom_price']);
    }
}, 1, 1 );

从上面的流程可以看出,添加附加信息到购物车和订单数据的流程其实很简单,都是通过WooCommerce的 Action 或者 Filter 完成的,关键是要找到需要把功能挂载到哪个钩子上面。

除了找对钩子、最重要的还是业务流程,比如,要开发一个在线订票系统,用户选择了座位之后,后端需要进行座位锁定处理,如果用户支付超时,就需要把这个座位解锁;要开发一个付费会员系统,我们就需要在用户支付时,自动升级用户会员级别,并设置对应的有效期。

资源分享 本站提供不断更新优质资源,敬请收藏关注
玄武新动力 » WooCommerce添加商品到购物车时,添加附加数据并显示在购物车、结算、订单等界面中

提供最优质的资源集合

立即查看 了解详情