Question

我正在使用Woocommerce在WordPress上的网站/网上商店工作，并尝试在“添加到购物车”按钮旁边添加数量字段。

我找到了这篇文章/教程：如何在WooCommerce中添加数量到产品档案（并保持ajax） - Christian Varga http://christianvarga.com/how-to-add-quantity-to-product-archives-in-woocommerce-and-keep-ajax/

它有两个小片段 - 第一个在我的function.php文件中复制/粘贴后正常工作。第二个是一些javascript代码，它将使数量字段与“添加到购物车”按钮一起工作。

这是代码：

$('.input-text.qty', 'ul.products').on('change', function() {
    $(this).closest('div').next('a').attr('data-quantity', $(this).val());
});

当我插入javascript代码时没有任何反应。这是因为我使用的是自定义主题（Avada），我认为它具有不同的结构。

这也写在教程上：

*注意：这适用于WooCommerce的默认HTML结构，但如果您使用的是自定义主题，则HTML结构可能会有所不同，因此你需要修改这个脚本以适应。

以下是我页面的链接： http://frisk-matic.identitest.dk/kaffe/

我试图将我的“添加到购物车”按钮作为目标，但我无法让它工作，而且我在Javascript方面并不熟练。有人能帮我吗？如果我能理解这段代码是如何工作的，我会很高兴的。

我知道第一行是选择我们添加的数量字段和产品div，结果是更改按钮的数据量属性。

祝你好运 Samz3n

Answer 1

尝试这样

$('.input-text.qty').on('change', function() {
    $(this).parent().next('a.add_to_cart_button').attr('data-quantity', $(this).val());
});

Answer 2

问题是您的html标记与此模板不同。我已经检查了标记并编写了一些jQuery代码。我想它会为你做的事情！：）

$('.quantity').find('input[type="number"]').on('change',function(){
    $(this).parent().next('.product-buttons').find('.add_to_cart_button').data('quantity',$(this).val());
});

Answer 3

你的jQuery库可能会有一些名称冲突，你可以试试这个

var $ = jQuery;
$('.quantity').find('input[type="number"]').on('change', function () {
  var value = $(this).val();
  var button = $(this).parent().next('.product-buttons').find('.add_to_cart_button');
  button.attr('data-quantity', value);
});

或更好，使用它直到您使用jQuery修复命名冲突

jQuery('.quantity').find('input[type="number"]').on('change', function () {
  var value = jQuery(this).val();
  var button = jQuery(this).parent().next('.product-buttons').find('.add_to_cart_button');
  button.attr('data-quantity', value);
});

需要帮助来定位/修改自定义数据属性

3 个答案: