那些遇到过的问题

Woocommerce 如何使用自定义 html 单选按钮而不是下拉菜单来 ajaxify 添加到可变产品的购物车按钮 - 无插件

Ruv*_*vee 5 ajax woocommerce woocommerce-theming product-variations variable-product

我正在尝试将这个难题的所有部分拼凑在一起。在过去的三天里，我一直在阅读有关此主题的所有问题和答案。所以我遵循的总体蓝图如下：

  1. 在单个商品页面，首先检查商品类型是“简单”还是“可变”。
  2. 如果产品是“变量”，那么我将使用woocommerce_variable_add_to_cart();函数来输出正确的 html。
  3. 然后尝试使用默认 html（即“下拉菜单”）和 woocommerce 挂钩生成新的自定义 html（即“单选按钮”）。
  4. 然后尝试使用 javascript 为新的自定义 html（即“单选按钮”）提供功能。
  5. 然后使用 css 隐藏默认下拉菜单。
  6. 然后尝试向 wordpress 发送 ajax 请求。
  7. 然后尝试在后端处理该 ajax 请求并将产品添加到购物车。

这是我每个部分的代码：

  1. 检查单品页面的商品类型是否为“可变”：
global $post;

$product = wc_get_product($post->ID);

$product_type = $product->get_type();
Run Code Online (Sandbox Code Playgroud)
  1. 如果产品类型是“variable”，则输出正确的 html：
if($product_type == 'variable'):
  woocommerce_variable_add_to_cart();
endif;
Run Code Online (Sandbox Code Playgroud)
  1. 使用 php 和 woocommerce 挂钩生成新的自定义 html（单选按钮）：
add_filter('woocommerce_dropdown_variation_attribute_options_html', 'my_theme_variation_radio_buttons', 20, 2);

function my_theme_variation_radio_buttons($html, $args)
{
  $args = wp_parse_args(apply_filters('woocommerce_dropdown_variation_attribute_options_args', $args), array(
    'options'          => false,
    'attribute'        => false,
    'product'          => false,
    'selected'         => false,
    'name'             => '',
    'id'               => '',
    'class'            => '',
    'show_option_none' => __('Choose an option', 'woocommerce'),
  ));

  if (false === $args['selected'] && $args['attribute'] && $args['product'] instanceof WC_Product) {
    $selected_key     = 'attribute_' . sanitize_title($args['attribute']);
    $args['selected'] = isset($_REQUEST[$selected_key]) ? wc_clean(wp_unslash($_REQUEST[$selected_key])) : $args['product']->get_variation_default_attribute($args['attribute']);
  }

  $options               = $args['options'];
  $product               = $args['product'];
  $attribute             = $args['attribute'];
  $name                  = $args['name'] ? $args['name'] : 'attribute_' . sanitize_title($attribute);
  $id                    = $args['id'] ? $args['id'] : sanitize_title($attribute);
  $class                 = $args['class'];
  $show_option_none      = (bool)$args['show_option_none'];
  $show_option_none_text = $args['show_option_none'] ? $args['show_option_none'] : __('Choose an option', 'woocommerce');

  if (empty($options) && !empty($product) && !empty($attribute)) {
    $attributes = $product->get_variation_attributes();
    $options    = $attributes[$attribute];
  }

  $radios = '<div class="variation-radios">';

  if (!empty($options)) {
    if ($product && taxonomy_exists($attribute)) {
      $terms = wc_get_product_terms($product->get_id(), $attribute, array(
        'fields' => 'all',
      ));

      foreach ($terms as $term) {
        if (in_array($term->slug, $options, true)) {
          $id = $name . '-' . $term->slug;
          $radios .= '<input type="radio" data-checked="no" id="' . esc_attr($id) . '" name="' . esc_attr($name) . '" value="' . esc_attr($term->slug) . '" ' . checked(sanitize_title($args['selected']), $term->slug, false) . '><label for="' . esc_attr($id) . '">' . esc_html(apply_filters('woocommerce_variation_option_name', $term->name)) . '</label>';
        }
      }
    } else {
      foreach ($options as $option) {
        $id = $name . '-' . $option;
        $checked    = sanitize_title($args['selected']) === $args['selected'] ? checked($args['selected'], sanitize_title($option), false) : checked($args['selected'], $option, false);
        $radios    .= '<input type="radio" id="' . esc_attr($id) . '" name="' . esc_attr($name) . '" value="' . esc_attr($option) . '" id="' . sanitize_title($option) . '" ' . $checked . '><label for="' . esc_attr($id) . '">' . esc_html(apply_filters('woocommerce_variation_option_name', $option)) . '</label>';
      }
    }
  }

  $radios .= '</div>';

  return $html . $radios;
}


add_filter('woocommerce_variation_is_active', 'my_theme_variation_check', 10, 2);

function my_theme_variation_check($active, $variation)
{
  if (!$variation->is_in_stock() && !$variation->backorders_allowed()) {
    return false;
  }
  return $active;
}
Run Code Online (Sandbox Code Playgroud)
  1. 使用 javascript 为“单选按钮”提供功能：
jQuery(document).ready($ => {
  $(document).on('change', '.variation-radio input', function () {
    $('.variation-radio input:checked').each(function (index, element) {

      var radioElement = $(element);
      var radioName = radioElement.attr('name');
      var radioValue = radioElement.attr('value');

      $('select[name="' + radioName + '"]').val(radioValue).trigger('change');
    });
  });
  $(document).on('woocommerce_update_variation_values', function () {
    $('.variation-radio input').each(function (index, element) {
      var radioElement = $(element);
      var radioName = radioElement.attr('name');
      var radioValue = radioElement.attr('value');
      radioElement.removeAttr('disabled');
      if ($('select[name="' + radioName + '"] option[value="' + radioValue + '"]').is(':disabled')) {
        radioElement.prop('disabled', true);
      }
    });
  });
  $("a.reset_variations").click(function () {
    $('input:radio[name="attribute_size"]').prop('checked', false); $(this).css('display', 'none');
  });
})
Run Code Online (Sandbox Code Playgroud)
  1. 使用 css 隐藏默认下拉菜单：
table.variations select{
  display: none;
}
Run Code Online (Sandbox Code Playgroud)
  1. 向 wordpress 发送 ajax 请求：
jQuery(document).ready($ => {
  $("button.single_add_to_cart_button").on('click', function (e) {
    e.preventDefault();
    var myBtn = $(this),
      $form = myBtn.closest('form.variations_form'),
      product_qty = $form.find('input[name=quantity]').val() || 1,
      product_id = $form.find('input[name=product_id]').val(),
      variation_id = $form.find('input[name=variation_id]').val() || 0,
      variation = {},
      keys = [],
      values = [];
    // Looping through the attributes names and save them as the keys array
    $('table tr td.label label').each(function (index, element) {
      let radioElement = $(element);
      keys[index] = radioElement.text();
    });
    // Looping through the attributes values and save them as the values array
    $('.variation-radios input:checked').each(function (index, element) {
      let radioElement = $(element);
      values[index] = radioElement.val();
    });
    // Looping through the variation object and save keys and values in that object
    $.each(keys, function (index, element) {
      variation[element] = values[index]
    })
    console.log(variation);

    var data = {
      action: 'woocommerce_add_variation_to_cart',
      product_id: product_id,
      quantity: product_qty,
      variation_id: variation_id,
      var: variation
    };

    $(document.body).trigger('adding_to_cart', [myBtn, data]);

    $.ajax({
      type: 'post',
      url: wc_add_to_cart_params.ajax_url,
      data: data,
      beforeSend: function (response) {
        myBtn.removeClass('added').addClass('loading');
      },
      complete: function (response) {
        myBtn.addClass('added').removeClass('loading');
      },
      success: function (response) {
        console.log(response);
        if (response.error && response.product_url) {
          window.location = response.product_url;
          return;
        } else {
          $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, myBtn]);
        }
      },
    });

    return false;
  });
})
Run Code Online (Sandbox Code Playgroud)
  1. 在后端处理ajax请求并将产品添加到购物车：
add_action('wp_ajax_nopriv_woocommerce_add_variation_to_cart', 'my_theme_testing_add_to_cart_variable');

add_action('wp_ajax_woocommerce_add_variation_to_cart', 'my_theme_testing_add_to_cart_variable');

function my_theme_testing_add_to_cart_variable()
{
  if (isset($_POST['product_id']) && $_POST['product_id'] > 0) {
    $product_id = apply_filters('woocommerce_add_to_cart_product_id', absint($_POST['product_id']));

    $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);

    $variation_id = isset($_POST['variation_id']) ? absint($_POST['variation_id']) : '';

    $attributes   = explode(',', $_POST['var']);

    $variation    = array();

    foreach ($attributes as $values) {

      $values = explode(':', $values);

      $variation['attributes_' . $values[0]] = $values[1];

    }

    $passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity);

    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id, $variation)) {

      do_action('woocommerce_ajax_added_to_cart', $product_id);

      if (get_option('woocommerce_cart_redirect_after_add') == 'yes') {
        wc_add_to_cart_message($product_id);
      }

      WC_AJAX::get_refreshed_fragments();

    } else {

      $data = array(
        'error' => true,
        'product_url' => apply_filters('woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id)
      );

      wp_send_json($data);
    }

    die();
  }
}
Run Code Online (Sandbox Code Playgroud)

问题

一切正常，直到第 7 步，没有错误，但当我运行整个过程时，单个产品页面会刷新，并且可变产品不会添加到购物车。WordPress 错误显示“{your attribute field} 是必填字段”！

我认为当我尝试将变化对象发送到后端时，错误可能出现在 ajax 调用中的某个地方。

虽然，我在后端得到的数据绝对正确，但它没有将其添加到购物车。

我尝试调试的事情

我尝试将 ajax 调用中的数据作为数组发送，但也不起作用。我还尝试使用两者来分解变异数据，=但:没有成功！

蹄！到目前为止，这是漫长的一周：\ 充满了调试、头痛和沮丧。现在，当我尝试运行整个 shebang 时，我无法让它工作，而且我一直在阅读所有的 Q 和 As，但找不到错误！我想这几天我已经想太多了，而且还有很多东西。

所以我想我需要一些额外的眼睛来希望检测到这个错误。

谢谢您，我很感激任何见解！

此外，我要向这些让我学到很多东西的人大声喊叫：

编辑

代码工作正常，错误不在代码中，而是在我提供的数据中。我将把代码留在这里，以防将来有人需要它。

Ruv*_*vee 1

简答题

该代码工作正常，我将其留在这里，以防将来有人需要它。错误不在代码中，而是在我提供的数据中。

详细说明

该代码运行良好。由于某些原因，我提供的数据被我的客户操纵，因此每个可变产品不是真正的可变产品，但同时标签被输入为可变产品（是的，我知道这很令人困惑，而且不是标准）练习），这就是为什么每当我尝试将它们添加到购物车时，它都会给出错误，指出 {your-attribute} 是必填字段。

因此，我们删除了每个产品数据并将其作为真实的可变产品添加回来，然后代码就可以运行，而无需我们更改其中的任何内容。

要点
所以请记住，每当开发应用程序时，硬币总是有两个方面！一侧是您的代码，另一侧是您正在处理的数据。

因此，始终始终始终确保您正在使用的数据符合其应有的方式/格式。另外，如果您在代码中找不到任何错误，请记住检查/调试另一侧（即数据）。
如果您不首先检查数据或在任何调试阶段不检查数据，那么以后将很难找到问题！

这个错误导致了项目的长期延迟（大约两周后我们才找到数据中的错误）。因此，请务必检查硬币的两面：

  • 首先，您正在使用的数据
  • 其次，你写的代码。

归档时间：

查看次数：

1509 次

最近记录：

5 年，1 月 前
使用AJAX - WooCommerce API将变体添加到购物车？ 11
WooCommerce 3 中产品变化的 Ajax 添加到购物车按钮 6
WooCommerce变化作为单选按钮 6
变量产品属性:自定义每个显示的单选按钮文本值 5
Ajax 添加到购物车，用于 WooCommerce 单品上的简单和可变产品 2
更多相关链接
相关归档
使用Rails 3的Ajax表单 - 最佳实践？ 22
IE11抛出"SCRIPT1014:无效字符",其他所有浏览器都可以使用 14
$ jsonObj数据仅通过IE(11)上的ajax和POST传递 9
为什么这个跨域请求在其他浏览器中有效但在IE9中无效？ 6
使用Yii 2提交两次Ajax表单 6
jQuery $ .ajax静默失败，没有错误消息，服务器响应为200 OK 5
多种形式的CSRF令牌 5
Ajax成功响应和选择选项追加 5
tumblr和google +堆栈图像如何拼图？ 4
使用 AJAX 加载更多产品 WooCommerce 1
难疑归档
避免!= null语句 3904
让现有的Git分支跟踪一个远程分支？ 3437
我应该在MySQL中使用日期时间或时间戳数据类型吗？ 2598
"最小的惊讶"和可变的默认论证 2458
如何用Vim中的换行符替换字符？ 1870
LINQ中的多个"order by" 1537
在调用instanceof之前需要进行空检查吗？ 1287
Android中的gravity和layout_gravity有什么区别？ 1286
如何按多列对数据帧进行排序？ 1266
如何测量函数执行所花费的时间 1057