php - Retrive the value of the Active variation of the product and then link it to the "read more" to dynamica

admin管理员组

文章数量:1122846

Here is the code snippet where Only the tab-description is attached to the "Read-more". How to make it dynamically change based on the current active value of the Variation - material selected by the customer:

    add_action( 'woocommerce_single_product_summary', 'scroll_to_product_tab', 21 );
  
function scroll_to_product_tab() {
     
    global $post, $product; 
         
    if ( $post->post_content ) {
        
     echo '<p><a class="jump-to-tab" href="#tab-description">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>'; 
    }
    ?>
        <script>
        jQuery(document).ready(function($){
            $('a.jump-to-tab').click(function(e){
                e.preventDefault();
                var tabhash = $(this).attr("href");
                var tabli = 'li.' + tabhash.substring(1);
                var tabpanel = '.panel' + tabhash;
                $(".wc-tabs li").each(function() {
                    if ( $(this).hasClass("active") ) {
                        $(this).removeClass("active");
                    }
                });
                $(tabli).addClass("active");
                $(".woocommerce-tabs .panel").css("display","none");
                $(tabpanel).css("display","block");
                $('html,body').animate({scrollTop:$(tabpanel).offset().top -150},'slow'); // Set your offset by changing -150 value
            });
        });
        </script>
    <?php
}

What I aim to do is to fetch the selected "Material" variation from the product chose by the customer and dynamically attach it's recpective tab to the href and when the customer clicks on the "Read more" it will go to that tab's information. Please see the url for the expanded description:

I tried to get the value from the "Material" variation.

    add_action( 'woocommerce_single_product_summary', 'scroll_to_product_tab', 21 );

function scroll_to_product_tab() {

global $post, $product; 
     
if ( $post->post_content ) {       
    
    $attr = $product->get_attribute( 'material' );  
    if($attr == 'acrylic-glare-free-photo-print-matt')
    {
        echo '<p><a class="jump-to-tab" href="#tab-acrylic-fine-art">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
    }
    else if($attr == 'acrylic-glass-stand')
    {
        echo '<p><a class="jump-to-tab" href="#tab-acrylic-stand">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
    }
    else if($attr == 'direct-print-on-brushed-aluminium-dibond-in-silver')
    {
        echo '<p><a class="jump-to-tab" href="#tab-brushed-alu">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
    }
    else if($attr == 'direct-print-on-forex')
    {
        echo '<p><a class="jump-to-tab" href="#tab-forex">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
    }
    else if($attr == 'fine-art-print-on-aluminum-dibond')
    {
        echo '<p><a class="jump-to-tab" href="#tab-alu-fine-art">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
    }
    else if($attr == 'textile-print-on-stretcher-frame')
    {
        echo '<p><a class="jump-to-tab" href="#tab-textile">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
    }else
    {
        echo '<p><a class="jump-to-tab" href="#tab-description">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
    }
    ```}
    
    ?>

    <script>
    jQuery(document).ready(function($){
        $('a.jump-to-tab').click(function(e){
            e.preventDefault();
            var tabhash = $(this).attr("href");
            var tabli = 'li.' + tabhash.substring(1);
            var tabpanel = '.panel' + tabhash;
            $(".wc-tabs li").each(function() {
                if ( $(this).hasClass("active") ) {
                    $(this).removeClass("active");
                }
            });
            $(tabli).addClass("active");
            $(".woocommerce-tabs .panel").css("display","none");
            $(tabpanel).css("display","block");
            $('html,body').animate({scrollTop:$(tabpanel).offset().top -150},'slow'); // Set your offset by changing -150 value
        });
    });
    </script>

<?php
}

It seems not to work. There could be a syntax missing that I can not understand

本文标签：