Php 将变体描述移动到产品变量描述

我尝试的是：在产品选项卡描述区域的单个产品页面上显示可变产品的子产品的变体描述

在WooCommerce和variable products中，父项具有存储在wp_posts->post_content中的描述，并且每个子项都具有附加的_variation_description字段。在前面，父对象的描述始终可见，并且子对象的_变体_描述在选择变体时显示。它会用js更新，并显示在“添加到购物车”按钮之前，以及变体的价格

描述在description.php中与代码一起调用

the_content();

<script type="text/template" id="tmpl-variation-template">
    <div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div>
</script>

输出父产品post_内容数据库字段。 变体描述在variance.php中与代码一起调用

the_content();

<script type="text/template" id="tmpl-variation-template">
    <div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div>
</script>

然后数据可以更新，我不太了解细节。据我所知，所有的js调用都是

form.$singleVariation.html( $template_html );

因此，我意识到为什么我不能从variance.php复制代码并将其粘贴到description.php，因为它将位于表单标记之外

另一方面，SKU的数据不是从表单中调用的，而是通过.product\u meta调用的。因此，如果我用class=“product\u meta”放置一个div，我可以从任何地方调用SKU并用js更新它。例如，我可以将此代码放入description.php中

 <div class="product_meta">
       <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
          <?php if ( $sku = $product->get_sku() ) : ?>
             <span class="sku_wrapper"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> 
             <span class="sku" itemprop="sku"><?php echo $sku; ?></span></span>
          <?php endif; ?>
       <?php endif; ?>
 </div>

而且效果很好

所以我被困在这里了。我只想在description.php中动态显示变体描述，我想如果我了解add-to-cart-variation.js中wp.template的工作原理，我就可以解决这个问题。但我不能。我不完全理解变更表中的内容是如何更新的，以及SKU中的数据有什么不同

---

也许有一个完全简单的解决方案来满足我的需求，也许我的方法太复杂了。如果有任何想法或提示，或者只是指出正确的方向，我将非常高兴

这可以通过一些jQuery代码来完成，我们将把变量描述复制到变量产品描述选项卡。但首先，您需要对一些模板进行一些非常小的更改

以下是与以下相关的官方文件：

模板将发生更改，并显示必要的代码：

在

single product/tabs/description.php

template文件中，您将替换以下行：

<?php the_content(); ?>

<div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div>

通过以下行（我们仅隐藏变体描述）：

{{{data.variation.variation_description}}

现在，jQuery（注释）代码（仅针对可变产品的单个产品页面）：

add_action（'wp_footer'，'move_variation_description'）；
函数移动\变量\描述（）{
全球$产品；
//仅在可变产品的单个产品页面上
if（！（is_product（）&&$product->is_type（'variable'））返回；
//jQuery代码
?>
jQuery（函数（$）{
a='.com变量描述'，b=a+'p'，c='input.variation_id'，
d='#tab description.product post content'，de=$（d.html（）；
//加载时，添加强制的非常小的延迟
setTimeout（函数（）{
//默认情况下选择的变体ID
如果（“”！=$（c）.val（）和&$（a）.text（）！=“”）
$（d）.html（$（a）.html（））；
}, 300);
//实时事件（属性选择字段更改）
$（'table.variations select'）。在（'blur'，function（）上{
//已选择变体ID
如果（“”！=$（c）.val（）和&$（a）.text（）！=“”）{
$（d）.html（$（a）.html（））；//我们复制变体描述
}
//未选择变体ID
否则{
$（d）.html（$（a）.html（））；//我们设置了变量product description
}
console.log（$（'input.variation_id'）.val（））；//测试：要删除的选定变体id
});
});
嗨，我尝试过这个解决方案，但我得到：


未捕获类型错误：e.indexOf不是函数
在S.fn.init.S.fn.load处（jquery-3.5.1.min.js？ver=3.5.1:2）
在script.js？ver=1.0:1
中，我更新了我的问题，省略了所有自定义字段，因此现在它更清晰了。我还试图澄清我的目标和我迄今为止一直在尝试的内容。非常感谢这个平滑的解决方案，非常好，非常感谢！如果变体描述为空或没有，我添加了一些内容以备不时之需任何选择。因此，在全局$product之后，我添加了$default_description=str_replace（“\n”，”），应用_过滤器（'the_content'，get_the_content（））；然后在jQuery中，我用传递变量，如果我用$（d.html（default_description）；@Karim更改为else，则最后使用else。所有这些都已经包含在我的实际代码中（我想）…作为
de=$（d）.html（）“/CODE”是默认的描述，我在JS变量上复制它。如果有人将任何选择字段再次更改为空值，则出现默认变量产品描述。我唯一忘记的是重置选择器时使用重置链接的情况。稍后我将对此进行更新。请考虑ASKIN。g新问题，不将您的问题发布为anwser
<div class="woocommerce-variation-description" style="display:none;">{{{ data.variation.variation_description }}}</div>

add_action( 'wp_footer', 'move_variation_description' );
function move_variation_description(){
    global $product;
    // Only on single product pages for variable products
    if ( ! ( is_product() && $product->is_type('variable') ) ) return;
    // jQuery code
    ?>
    <script type="text/javascript">
        jQuery(function($){
            a = '.woocommerce-variation-description', b = a+' p', c = 'input.variation_id',
            d = '#tab-description .product-post-content', de = $(d).html();

            // On load, adding a mandatory very small delay
            setTimeout(function(){
                // variation ID selected by default
                if( '' != $(c).val() && $(a).text() != '' )
                    $(d).html($(a).html());
            }, 300);

            // On live event (attribute select fields change)
            $('table.variations select').on( 'blur', function(){
                // variation ID is selected
                if( '' != $(c).val() && $(a).text() != '' ){
                    $(d).html($(a).html()); // We copy the variation description
                }
                // No variation ID selected
                else {
                    $(d).html($(a).html()); // We set back the variable product description
                }
                console.log($('input.variation_id').val()); // TEST: Selected variation ID … To be removed
            });
        });
    </script>
    <?php
}