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

时间：2017-02-20 16:31:43

标签： php jquery wordpress woocommerce variations

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

jekyll build

但是在可变产品中，我在实时显示价格中附加了自定义标签的问题。我使用的代码仅在实际价格“每打”之后显示。

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

  • 如果所选值为“打”，我需要在实时价格“每打”之后显示，
  • 如果选择的值是“Case（20 dozens）”，我需要在“每箱（20打）”的实时价格后显示。

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

enter image description here

在我的网站specific product page

上查看此问题
  

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

有任何帮助吗？我怎样才能让它发挥作用？

我尝试了很多代码，但我无法使用它。

2 个答案:

答案 0 :(得分：7)

实现这一目标的唯一方法是使用Javascript / jQuery，但它很复杂，因为WooCommerce已经在其上运行了一些Javascript / Ajax代码。

首先，无法检测选择器上的所选客户选择，因为WooCommerce会从"selected" html标记中删除<option>属性。

  

一旦客户完成了选择（从这个变量产品中选择了一个变体）， Woocommerce在隐藏<imput> html字段中添加相应的变体ID 值并显示相应的价格。

     

我们的PHP代码传递给此变量产品的javascript 变体ID数组，为每个变量产品提供相应的“数量”属性值。

     

然后我们可以在 <select> html标记上使用“on blur” javascript事件来隐藏variation ID < / strong>值，然后使用正确的“标签”附加价格。

以下是功能代码，它会根据客户选择（因此选择的产品变体）为实时价格添加自定义标签：

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文件中，或者放在任何插件文件中。

相关答案：

答案 1 :(得分：1)

它不应该是'case'它应该'Case'，strstr是区分大小写的函数，因为它是boolean，下面的语句将始终返回false。因为我的选择器中的值为Case (20 dozens)而不是case (20 dozens)请参阅下面的参考资料以了解详情。

因此改变以下行：

$has_case = strstr($last_variation_attribute_slug_value, 'case');

为：

$has_case = strstr($last_variation_attribute_slug_value, 'Case');

参考：https://www.w3schools.com/php/func_string_strstr.asp

相关问题
最新问题