时间戳

首页 > 解决方案 > 在 WooCommerce 商店页面上添加数量字段并添加到购物车按钮

javascript - 在 WooCommerce 商店页面上添加数量字段并添加到购物车按钮

问题描述

我正在尝试使用 WooCommerce 集成开发 WordPress 主题，但是，我对如何执行此特定自定义功能感到困惑：

  1. 单击商店/存档页面上的任一分组产品，而不是重定向到该分组产品的页面（我相信这是默认的 WooCommerce 行为），启用下面的 div，其中包含每个子单品和数量字段。应该可以通过 JavaScript 或 JQuery 实现。

  2. 再次通过 AJAX 或 JQuery 脚本，一旦达到分组产品的最大数量，这应该“禁用”或阻止用户添加更多。

  3. 使用底部的添加到购物车按钮将选择添加到购物车。

在此处输入图像描述

现在，我很熟悉我的问题可以使用带有一些 CSS 技巧的 JavaScript 来解决，但我并不特别知道我应该使用哪些 WooCommerce 函数/钩子来实现这一点。

我已经尝试过这段代码，但它并没有完全产生我想要做的效果：

/**
 * Override loop template and show quantities next to add to cart buttons
 */
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
        $html .= woocommerce_quantity_input( array(), $product, false );
        $html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
        $html .= '</form>';
    }
    return $html;
}

标签： javascriptphpjquerywordpresswoocommerce

解决方案

经过一番搜索和试验，我找到了一个解决方案（或者更确切地说是一个 hack）。

事实证明，我只需获取相关的添加到购物车 URL 即可将产品添加到购物车。通过一点 JavaScript 和 CSS 技巧，理论上我可以创建像图像中的自定义功能。我不太确定这是一种正确或最有效的方法，但绝对被认为是一种解决方法。

这是关于自定义添加到购物车 URL 的指南： https ://www.businessbloomer.com/woocommerce-custom-add-cart-urls-ultimate-guide/

在这里发布它以防万一有类似问题的人遇到这个问题。

提示：使用 JavaScript 构建自定义添加到购物车 URL。例如，更改href商店页面上自定义添加到购物车按钮属性的功能。有很多方法可以做到这一点。但这是我的想法。

function whenProductClicked(){
     let e = document.getElementById("YourAddToCart_Button_ID");
     e.setAttribute("href", "https://yourdomain.com/?add-to-cart=3111");
}

最重要的部分是 URL：?add-to-cart=3111，当您安装了 WooCommerce 时，此 URL 将触发 WooCommerce 的添加到购物车功能。?add-to-cart是函数，3111是数据库中现有产品的 ID。因此，如果您需要偏离 WooCommerce 功能的标准方式，您将不得不尝试并创造性地构建您的 URL。就个人而言，我不会这样做，但是，嘿。

当然，它可能会变得更复杂，并且需要进行大量检查（至少根据我的要求），但这是我所想的最基本的形式。

推荐阅读