WooCommerce：变化变化后触发事件

Question

我们使用 Woocommerce 销售彩盒。 大多数情况下选择可变产品选项。

我们添加了一个带有调色板的模式对话框，客户可以从中选择颜色。 这是 woocommerce 的常见下拉菜单旁边。

问题是，当我将正确的 SlugValue 传递到下拉列表时（从调色板中选择它之后），下拉列表中的值是正确的，但需要触发以发布价格的事件不起作用。

我已经尝试触发下拉列表的

onchange

事件，但什么也没发生。

谁能告诉我，需要触发哪个事件以及如何触发？

Answer 1

如果将来有人偶然发现这一点： WooCommerce 在整个 add-to-cart-variation.js 中提供了触发器，允许您挂钩网站的更改事件。您可以在该文件中找到所有可用的内容，但在这种情况下可能最有帮助的一个可以直接使用

$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
    // Fires whenever variation selects are changed
} );

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
    // Fired when the user selects all the required dropdowns / attributes
    // and a final variation is selected / shown
} );

您想要挂钩的触发器是

.on()

中的第一个参数。以下是一些可以帮助您入门的内容：

woocommerce_variation_select_change

当选择更改时触发。

show_variation

在发现变体时被触发，并且实际上会向您传递找到的变体对象，以便您可以直接访问价格，而无需手动过滤选择。

您可以在这里筛选并找到其余内容。

Answer 2

此代码执行最初问题中请求的确切功能：

$('#WC_variation_drop_down_ID').trigger('change');

将“#WC_variation_drop_down_ID”更改为您使用 jQuery 更改的字段的实际 ID。

这是一个更完整的解决方案，包括设置字段以及触发 WooCommerce 变体选择（基于单选按钮字段类数组）：

var fields = ['.gchoice_4_11_0', '.gchoice_4_11_1', '.gchoice_4_4_0', '.gchoice_4_4_1'];
for ( var i = fields.length; i--; ) {
    $('#gravity_form_wrapper_ID').on('click', fields[i], function() {
        $('#WC_variation_drop_down_ID').val( $(this).children('input').val() ).trigger('change');
    });
}

解决方案的灵感来自这篇关于 setting WooCommerce Variation Fields 的文章。

Answer 3

如果您想知道选择了哪个变体。

您可以查看文件：

add-to-cart-variation.js

，发现该函数还为您提供变化数据：

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) { }

如果您知道您的变体 ID（您可以通过在后端悬停您的变体或在选择变体时检查此对象来找到它），那么您可以执行以下操作：

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) { 
  if( variation.variation_id === your_variation_id ) {
    // Do stuff when this variation has been selected 
  }
});

选择一种变体时，我需要显示一些附加信息，这对我很有帮助。这可能有点偏离主题，但这是我在搜索时发现的讨论。

大部分来自此页面

Answer 4

如果有人像我一样来这里寻找答案，我会对此进行澄清。

我们在实现更改功能时遇到问题，因为我们需要知道所选变体的价格，但“woocommerce_variation_select_change”我们从之前的变体中获得了价格。

因此，如果您想在更改完成后获取变化的价格，则必须使用 'woocommerce_variation_has_changed' jQuery 函数。

示例：

jQuery('#select_attribute_of_variation').on('woocommerce_variation_has_changed', function(){
    // do your magic here...
 })

Answer 5

我还想要一个解决方案，即我的 javascript 仅适用于第一个变体。 代码如下

add_action('admin_footer', 'script');
function script()
{
    ?>
    <script>
        jQuery(function ($) {
            jQuery('#woocommerce-product-data').on('woocommerce_variations_loaded', function () {
                jQuery(this).find('.woocommerce_variation').each(function () {
                    jQuery("#dp").keydown(function () {
                        var cost = document.getElementById("cost").value;
                        var dp = document.getElementById("dp").value;
                        console.log(dp);
                    });
                });
            });
        });

    </script>


    <?php

}

Answer 6

我在加载自定义产品类型时遇到了类似的问题，即变量扩展。 在 PHP 方面，我认为我以相同的方式工作，但在选择术语后，前端的变化不会加载。

经过一番挖掘，我编写了这个 jQuery 代码来解决这个问题：

$('body').on('check_variations', function () {
    const $form = $('.variations_form');
    const $price = $form.find('.single_variation_wrap .single_variation');
    const variationsData = $form.data('product_variations');
    const selectedTerms = $form.find('.variations select').map((idx, attr) => {
        const attrObj = {};
        attrObj[attr.name] = $(attr).val();
        return attrObj;
    }).toArray();
    const matchedVariation = variationsData.find(variation => {
        return selectedTerms.every(term => {
            const key = Object.keys(term)[0];
            return variation.attributes[key] == term[key];
        });
    });

    if(!matchedVariation) return;
    const priceHtml = matchedVariation.price_html;
    $price.html(priceHtml);
});