可变产品选择器:获取实时选定值

Question

在WooCommerce中,使用以下代码在简单和变量产品中的产品价格之后添加自定义标签:

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2    );
add_filter('woocommerce_price_html','prices_custom_labels', 10, 2 );
function prices_custom_labels( $price, $product ){

    // Set HERE your custom labels names
    $per_dozen = ' '. __('per dozen', 'woocommerce' );
    $per_case = ' '. __('per case (20 dozens)', 'woocommerce' );


    // 1) Variable products
    if ($product->product_type != 'simple' && $product->variation_id ) {

        // Getting the array of existing attributes values for a variation
        $variation_attribute_value = $product->variation_data;
        // Here we keep only the last value in this array
        $last_variation_attribute_slug_value = ' ' .    end($variation_attribute_value);

        // Finding the word 'case' in the attribute value slug
        $has_case = strstr($last_variation_attribute_slug_value, 'case');

        // Setting the right displayed label depending on attribute value slug
        if( $has_case )
            $attribute_quantity_name_value = $per_case;
        else
            $attribute_quantity_name_value = $per_dozen;

        // Here the output price + custom label
        $price = '<ins class="highlight">'.woocommerce_price( $product-   >regular_price ).$attribute_quantity_name_value.'</ins>';
    }
    // 2) Simple products
    else
    {
        // Here the output price + custom default label
        $price = '<ins class="highlight">'.woocommerce_price( $product-  >regular_price ).$per_dozen.'</ins>';
    }
    return $price;
}

但在可变产品中,我在实时显示的价格中附加了自定义标签的问题.我使用的代码仅在实时价格"每打"之后显示.

我需要在自定义"数量"选择器上获取所选值,以便在价格后添加正确的标签:

• 如果所选的值是"打",我需要在"每打"实时价格后显示,
• 如果所选值是"Case(20 dozens)",我需要在实际价格"每箱(20几十)"之后显示.

这个截图是我实际上对所有情况的截图:

在我的网站特定产品页面上检查此问题

因此,我需要获取属性"数量"选择值,以将正确的标签附加到实时价格.

有帮助吗？我怎样才能让它工作？

我尝试了很多代码,但我无法使用它.

Answer 1

使这个工作的唯一方法是使用Javascript/jQuery,但它很复杂,因为WooCommerce已经在其上运行一些Javascript/Ajax代码.

首先,无法在选择器上检测选定的客户选择,因为WooCommerce "selected"从<option>html标签中删除属性.

一旦客户做出了完整的选择(从这个变量产品中选择了一个变体),Woocommerce在隐藏的<imput>html字段中添加相应的变体ID值并显示相应的价格.

我们的PHP代码将j 变量产品的变体ID数组传递给javascript ,并为每个变量产生相应的"数量"属性值.

然后我们可以使用html标签上的"on blur" javascript事件来获取隐藏的值,然后使用正确的"标签"附加价格.<select>variation ID

这是功能代码,它将根据客户选择(因此选择的产品变体)为实时价格添加自定义标签:

add_action( 'woocommerce_after_add_to_cart_form', 'custom_get_variations_js' );
function custom_get_variations_js() {
    global $product;

    // Set HERE your "quantity" attribute slug
    $attribute_qty_slug = 'pa_quantity';
    $attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;

    foreach($product->get_available_variations() as $values){
        $attribute_qty_slug_value = $values['attributes'][$attribute_qty_slug_key];
        $attribute_qty_name_value = get_term_by( 'slug', $attribute_qty_slug_value, $attribute_qty_slug );
        $variations_id_arr[$values['variation_id']] = __(' per ', 'woocommerce' ) . strtolower($attribute_qty_name_value->name);
    }

    ## THE JQUERY SCRIPT ##
    ?>
    <script>
        (function($){
            var $attributes;
            <?php
                // Passing the product variations attributes array to javascript
                $js_array = json_encode($variations_id_arr);
                echo 'var $variationsIdsAttr = '. $js_array ;
            ?>
            $('td.value select').blur(function() {
                var $variationId = $('input[name="variation_id"]').val();
                if (typeof $variationId !== 'undefined' ){
                    for(key in $variationsIdsAttr){
                        if( key == $variationId ){
                            $attributes = $variationsIdsAttr[key];
                            break;
                        }
                    }
                }
                if ( typeof $attributes !== 'undefined' ){
                    $('.woocommerce-variation-price .woocommerce-Price-amount.amount').append( $attributes );
                }
            });
        })(jQuery);
    </script>
    <?php
}

然后我们需要更改现有代码,以避免在此特定变量产品上显示第二个自定义标签(在第一个钩子函数中):

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2 );
add_filter('woocommerce_price_html','prices_custom_labels', 10, 2 );
function prices_custom_labels( $price, $product ){

    // Custom label name
    $per_dozen = ' '. __('per dozen', 'woocommerce' );

    // Set HERE your "quantity" attribute slug
    $attribute_qty_slug = 'pa_quantity';

    $attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;
    $append_label = '';

    // 1) Variable products
    if ($product->product_type != 'simple' && $product->variation_id ) {

        // Getting the attribute "quantity" value
        $attribute_qty_is_set = $product->variation_data[$attribute_qty_slug_key];
        echo '<pre>'; print_r($product->variation_data[$attribute_qty_slug_key]); echo '</pre>';

        // if "quantity" not set we display " per dozen"
        if( ! $attribute_qty_is_set )
            $append_label = $per_dozen;


        // Outputed price + custom label
        $price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$append_label.'</ins>';
    }
    // 2) Simple products
    else
    {
        // Here the output price + custom default label
        $price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$per_dozen.'</ins>';
    }
    return $price;
}

add_filter('woocommerce_variable_price_html', 'prices_custom_labels_min_max', 20, 2);
function prices_custom_labels_min_max( $price, $product) {

    // Custom label name
    $per_dozen = ' '. __('per dozen', 'woocommerce' );
    $per_case = ' '. __('per case', 'woocommerce' );

    // Set HERE your quantity attribute slug
    $attribute_qty_slug = 'pa_quantity';


    // Getting the min and max variations prices
    $variation_min_reg_price = $product->get_variation_regular_price('min', true);
    $variation_max_reg_price = $product->get_variation_regular_price('max', true);
    $variation_reg_price = $product->get_variation_regular_price();


    if( $variation_min_reg_price == $variation_max_reg_price )
    {
        $price = '<ins class="highlight">'.woocommerce_price($variation_reg_price) . $per_dozen . '</ins>';
    }
    else
    {
        if( !in_array( $attribute_qty_slug, array_keys( $product->get_attributes() ) ) )
        {
            $price = '<ins class="highlight">' . woocommerce_price($variation_min_reg_price) . $per_dozen . ' - ' . woocommerce_price($variation_max_reg_price) . $per_dozen . '</ins>';
        }
        else
        {
            $price = '<ins class="highlight">' . woocommerce_price($variation_min_reg_price) . $per_dozen . ' - ' . woocommerce_price($variation_max_reg_price) . $per_case . '</ins>';
        }
    }
    // print_r($product->get_attributes());
    return $price;
}

代码放在活动子主题(或主题)的function.php文件中,或者放在任何插件文件中.

相关回答:

• 将所选产品变体数据传递到Contact Form 7查询表
• 根据类型将自定义文本标签添加到产品价格中