WooCommerce结账页动态提示管理：商品变体添加后自动移除提示块

本文详细阐述了在woocommerce结账页中，如何利用php实现一个智能的条件提示系统。当购物车中存在特定商品变体时，系统会显示一个添加额外商品的提示块。核心解决方案在于，通过检查购物车中是否已包含该额外商品变体，动态调整提示块的显示状态，从而避免在页面刷新后提示块的重复出现，解决了传统javascript方案无法持久化状态的问题。

引言：动态提示在电子商务中的应用

在电子商务网站中，为了提升用户体验和促进销售，常常需要在特定条件下向用户展示动态提示或推荐。例如，当用户购物车中包含某种主商品时，系统可能会推荐其相关的配件或升级选项。然而，一个常见的挑战是，当用户采纳了推荐并将其添加到购物车后，如何确保该提示块不再重复出现，尤其是在页面刷新或导航后。本文将探讨在WooCommerce结账页中实现这一功能的PHP解决方案，以确保提示的智能化和持久性。

面临的挑战：页面刷新与状态持久化

考虑这样一个场景：您的WooCommerce商店需要在结账页面，当购物车中包含ID为100的商品及其变体111时，提示用户添加ID为100的另一变体112。最初的实现可能如下所示，通过woocommerce_review_order_before_submit钩子在提交订单按钮前显示一个带有“Add new item”链接的提示块：

add_action('woocommerce_review_order_before_submit', 'displays_cart_products_feature_image');
function displays_cart_products_feature_image() {
    $product_ids = array(100);
    $bool = false;
    foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
        $item = $cart_item['data'];
        if ( in_array( $item->id, $product_ids ) && ($cart_item['variation_id'] == 111) ) {
            $bool = true;
            break; // 找到即退出，提高效率
        }
    }

    if ($bool) {
        echo '
        <div id="u-1">
            <a href="/?add-to-cart=100&variation_id=112">Add new item</a>
        </div>';
    }
}

这段代码能够成功检测到变体111的存在并显示提示。然而，当用户点击“Add new item”链接将变体112添加到购物车后，页面会重新加载。由于PHP代码在每次页面加载时都会重新执行，并且其逻辑仅检查变体111的存在，因此提示块会再次出现。

尝试使用JavaScript来隐藏此块虽然在点击时有效，但由于页面刷新会重置DOM，JavaScript的修改将失效，导致提示块再次可见。因此，我们需要一个服务器端（PHP）的解决方案来持久化这种显示状态。

PHP解决方案：基于购物车内容的动态条件逻辑

解决上述问题的关键在于，在PHP逻辑中，不仅要检查触发提示的条件（变体111是否存在），还要检查提示所建议的商品（变体112）是否已经存在于购物车中。如果变体112已经存在，则无论变体111是否存在，提示块都不应显示。

乾坤圈新媒体矩阵管家

新媒体账号、门店矩阵智能管理系统

17

查看详情

以下是优化后的PHP代码，它通过增加对变体112的检查来实现这一逻辑：

add_action('woocommerce_review_order_before_submit', 'displays_cart_products_feature_image');
function displays_cart_products_feature_image() {
    // 定义要检查的商品ID
    $product_id_to_check = 100;
    // 定义触发提示的变体ID
    $trigger_variation_id = 111;
    // 定义提示建议添加的变体ID
    $suggested_variation_id = 112;

    $display_block = false; // 初始设置为不显示

    // 第一次遍历：检查购物车中是否存在触发提示的变体
    foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
        $item_data = $cart_item['data'];
        if ( $item_data->get_id() == $product_id_to_check && $cart_item['variation_id'] == $trigger_variation_id ) {
            $display_block = true; // 如果找到触发变体，则设置为显示
            break; // 找到即退出，提高效率
        }
    }

    // 第二次遍历：检查购物车中是否已存在建议添加的变体
    // 如果存在，则无论第一次遍历结果如何，都应取消显示提示块
    if ($display_block) { // 只有在第一次遍历确定要显示时，才需要进行第二次检查
        foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
            $item_data = $cart_item['data'];
            if ( $item_data->get_id() == $product_id_to_check && $cart_item['variation_id'] == $suggested_variation_id ) {
                $display_block = false; // 如果找到建议添加的变体，则取消显示
                break; // 找到即退出，提高效率
            }
        }
    }

    // 根据最终的 $display_block 状态决定是否输出提示块
    if ($display_block) {
        echo '
        <div id="u-1">
            <a href="/?add-to-cart=' . esc_attr($product_id_to_check) . '&variation_id=' . esc_attr($suggested_variation_id) . '">Add new item</a>
        </div>';
    }
}

代码解析与工作原理

1. 初始化 $display_block 变量： 我们首先将 $display_block 设置为 false，表示默认不显示提示块。
2. 检查触发条件：
   • 第一个 foreach 循环遍历购物车中的所有商品。
   • 它检查每个商品是否是目标商品（ID 100）并且是触发提示的变体（ID 111）。
   • 如果找到，就将 $display_block 设置为 true，表示应该显示提示块，并立即跳出循环以提高效率。
3. 检查取消条件：
   • 在第一个循环结束后，如果 $display_block 仍然为 true（意味着触发条件满足），则进入第二个 foreach 循环。
   • 这个循环再次遍历购物车，检查是否已经存在建议添加的变体（ID 112）。
   • 如果找到变体 112，则说明用户已经添加了该商品，此时应取消显示提示。因此，将 $display_block 重新设置为 false，并跳出循环。
4. 最终显示判断：
   • 最后，根据 $display_block 的最终值来决定是否输出HTML提示块。

通过这种双重检查的逻辑，无论页面如何刷新，只要变体112存在于购物车中，$display_block变量最终都会被设置为false，从而确保提示块不再显示。这种服务器端的判断方式，完美解决了JavaScript方案中状态无法持久化的问题。

优化与最佳实践

• 变量命名： 在示例代码中，我们使用了更具描述性的变量名（如$product_id_to_check, $trigger_variation_id, $suggested_variation_id），这有助于提高代码的可读性和可维护性。
• 效率： 在每个 foreach 循环中，一旦找到目标商品，立即使用 break 语句退出循环，可以避免不必要的迭代，提升代码执行效率。
• 安全性： 在输出URL时，使用 esc_attr() 函数对变量进行转义，可以防止跨站脚本攻击（XSS）。
• 可扩展性： 对于更复杂的场景，可以将商品ID和变体ID存储在WordPress的设置选项中，而不是硬编码在函数里，这样更便于管理和修改。
• 单一循环优化： 实际上，上述两个循环可以合并为一个循环，通过更精妙的逻辑来判断，但为了清晰地展示“触发”和“取消”的逻辑，此处采用了两个循环。在性能要求极高的场景下，可以考虑将逻辑整合到单个循环中。

总结

在WooCommerce中，实现基于购物车内容的动态UI提示是一个常见的需求。通过巧妙地运用PHP的服务器端逻辑，我们可以精确地控制这些提示块的显示与隐藏。本文提供的解决方案利用了WooCommerce购物车数据的持久性，通过在每次页面加载时检查购物车中的特定商品变体，确保了提示块在用户完成操作后能够自动且持久地消失，从而提供了更加智能和无缝的用户体验。这种方法不仅解决了JavaScript在页面刷新后状态丢失的问题，也为构建更复杂的条件逻辑奠定了基础。

以上就是WooCommerce结账页动态提示管理：商品变体添加后自动移除提示块的详细内容，更多请关注php中文网其它相关文章！