在 WooCommerce 中获取并显示选定的变体 SKU

Posted 2023-05-09

【中文标题】在 WooCommerce 中获取并显示选定的变体 SKU

【英文标题】：Get and display the selected variation SKU in WooCommerce

【发布时间】：2020-06-02 01:47:36

【问题描述】：

我的代码适用于简单的产品类型，但不适用于 WooCommerce 中的可变产品：

add_shortcode( 'product_sku_div', 'wc_product_sku_div'); 
function wc_product_sku_div()  
    global $product;

    return sprintf( '<div class="widget" sp-sku="%s"></div>', $product->get_sku() );

如何使它适用于简单和可变的产品？

【参考方案1】：

为了使其也适用于可变产品及其变体，它需要 javascript (jQuery) 来获取可变产品的选定变体 SKU。

尝试以下适用于简单可变产品类型的方法，显示可变产品的选定变体 SKU：

add_shortcode( 'product_sku_div', 'wc_product_sku_div');
function wc_product_sku_div() 
    global $product;

    if( ! is_a('WC_Product', $product) ) 
        $product = wc_get_product( get_the_id() );
    

    ## 1 - For variable products (and their variations)
    if( $product->is_type('variable') ) 
        ob_start(); // Starting buffering

        ?>
        <div class="widget" sp-sku=""></div>
        <script type="text/javascript">
        jQuery( function($)
            $('form.variations_form').on('show_variation', function( event, data )
                $( 'div.widget' ).attr( 'sp-sku', data.sku );
                // For testing
                console.log( 'Variation Id: ' + data.variation_id + ' | Sku: ' + data.sku );
            );
            $('form.variations_form').on('hide_variation', function()
                $( 'div.widget' ).attr( 'sp-sku', '' );
            );
        );
        </script><?php

        return ob_get_clean(); // return the buffered content
    
    ## 2 - For other products types
    else 
        return sprintf( '<div class="widget" sp-sku="%s"></div>', $product->get_sku() );
    

代码在您的活动子主题（或活动主题）的functions.php 文件中。经过测试和工作。

【讨论】：

感谢它正在工作，但由于我正在使用添加其他类的脚本而失败。 “sp-enabled”和“sp-disabled”一旦锁定这些类，SKU 就会更改，但由于类没有，因此按钮不会更改。有没有办法刷新脚本可能添加的所有类？

@neptunee 我的答案是回答您最初的问题（使用您提供的代码和解释）。使用 javascript 是使其工作的唯一方法，因为它涉及客户端的实时事件。现在，当您使用其他有问题的东西时，您应该提出一个新问题，提供所有必要的代码，以重现该问题。没有它，没有人可以提供帮助。

像魅力一样工作。

【参考方案2】：

您需要 Variation ID 来获取可变产品的 SKU。

如果你在下面的 Function 中传递 Variation ID，那么你可以得到它的 SKU。

$product = new WC_Product_Variation($variation_id);
$product->get_sku();

以下代码可用于获取产品的变体。然后将结果 lopp 得到变体 ID，然后在上面的代码中使用该变体 ID 来得到结果。

$variations = $product->get_available_variations();

【讨论】：

有没有办法在选择新变量时刷新div？

是的，您可以使用 Ajax 刷新 Div，也可以根据所选选项使用 jQuery 更改 div 的值。 ***.com/questions/42786309/… codepen.io/atelierbram/pen/gusxF 如果我上面的代码解决了你的问题，那么请接受它作为答案。

【参考方案3】：

您需要使用get_available_variations();。

add_shortcode( 'product_sku_div', 'wc_product_sku_div'); 
function wc_product_sku_div()  
    global $product;

    $variants_array = $product->get_available_variations();

    for ($i = 0; $i <  count($variants_array); $i++ ) 
        return sprintf( '<div class="widget" sp-sku="%s"></div>', $variants_array[$i]['sku'] );
    

参考：

get_available_variations() ~ https://docs.woocommerce.com/wc-apidocs/class-WC_Product_Variable.html

【讨论】：

嗨，我认为这会起作用，但在选择新变量时，它会出现div不刷新。在选择不同的变化时是否有一种方法来刷新div？ span>