javascript - PHP 函数输出仅在点击页面后更新

Question

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

我偶然发现了这个脚本，它似乎非常适合我的用例。 Source - 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;
}

       }
   }
}

LINK to Image for Usecase explanation - See also Stackoverflow Link where I took the code from

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() 事件发生。在您的情况下，每当选择选项更改时