PHP 函数输出仅在单击页面后更新

Question

因此，我正在寻找一种方法来更新可变产品（Woocommerce + WP）的定价，而不显示价格范围 + 最终价格（包括变量）。

我偶然发现了这个脚本，它似乎非常适合我的用例。 来源 - Stackoverflow

它在移动设备上运行良好。 但是，在桌面浏览器中，它要求我单击页面的随机位置来更新定价。这是非常不方便的。 知道如何解决这个问题吗？

我的编码技能仅限于 HTML/CSS 和非常基本的 js。 如有任何帮助，我们将不胜感激。

这是代码：

   add_action( 'woocommerce_before_single_product', 'check_if_variable_first' );
function check_if_variable_first(){
   if ( is_product() ) {
       global $post;
       $product = wc_get_product( $post->ID );
       if ( $product->is_type( 'variable' ) ) {
           // removing the price of variable products
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

// Change location of
add_action( 'woocommerce_single_product_summary', 'custom_wc_template_single_price', 10 );
function custom_wc_template_single_price(){
   global $product;

// Variable product only
if($product->is_type('variable')):

   // Main Price
   $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
   $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

   // Sale Price
   $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
   sort( $prices );
   $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

   if ( $price !== $saleprice && $product->is_on_sale() ) {
       $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
   }

   ?>
   <style>
       div.woocommerce-variation-price,
       div.woocommerce-variation-availability,
       div.hidden-variable-price {
           height: 0px !important;
           overflow:hidden;
           position:relative;
           line-height: 0px !important;
           font-size: 0% !important;
       }
   </style>
   <script>
   jQuery(document).ready(function($) {
       $('select').blur( function(){
           if( '' != $('input.variation_id').val() ){
               $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
               console.log($('input.variation_id').val());
           } else {
               $('p.price').html($('div.hidden-variable-price').html());
               if($('p.availability'))
                   $('p.availability').remove();
               console.log('NULL');
           }
       });
   });
   </script>
   <?php

   echo '<p class="price">'.$price.'</p>
   <div class="hidden-variable-price" >'.$price.'</div>';

endif;
}

       }
   }
}

Answer 1

您面临的问题似乎是

$('select').blur()

。 由于您希望它自动更改，我建议将其更改为change()..

   <script>
   jQuery(document).ready(function($) {
       $('select').change( function(){
           if( '' != $('input.variation_id').val() ){
               $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
               console.log($('input.variation_id').val());
           } else {
               $('p.price').html($('div.hidden-variable-price').html());
               if($('p.availability'))
                   $('p.availability').remove();
               console.log('NULL');
           }
       });
   });
   </script>

当对象失去焦点时，会发生

blur()

事件。在您的情况下，当您单击屏幕外时。

当对象更改时，会发生

change()

事件。在您的情况下，每当选择选项更改时

Answer 2

上面的代码有缺陷。 我在这篇文章中找到了适合我的用例的更好解决方案：Update Woo Variable Price