javascript Woo的自定义CTA，可打开并滚动到特定的产品页面选项卡

Posted 2021-05-03

<script>
  (function($){
    $(document).ready(function(){
        /**
         * Show price table tab
         * @param {object} specifiedTab jQuery DOM element
         */
        function showSpecifiedTab(specifiedTab) {
            console.log('clicked');
            var $tab          = specifiedTab,
                $tabs_wrapper = $( '.wc-tabs-wrapper, .woocommerce-tabs' ),
                $tabs         = $tabs_wrapper.find( '.wc-tabs, ul.tabs' ),
                target        = $( $(this).attr('scrollto') );

            // hide all tabs
            $tabs.find( 'li' ).removeClass( 'active' );
            $tabs_wrapper.find( '.wc-tab, .panel:not(.panel .panel)' ).hide();

            // show the correct tab
            $tab.closest( 'li' ).addClass( 'active' );
            $tabs_wrapper.find( $tab.find('a').attr( 'href' ) ).show();

            // scroll to the tab content
            if( target.length ) {
                event.preventDefault();
                $('html, body').animate({
                    scrollTop: target.offset().top-20
                }, 500);
            }
        }

        /**
         * Sample usage
         *
         * Clicking on <a class="button price-table">Price Table</a> will show the tab #tab-title-price_table
         */
        $('.plc-order-now').on('click', function() {
          showSpecifiedTab($('#tab-title-description'));
          $('html, body').animate({
            scrollTop: ($('#tab-title-description').offset().top)
          },500);
        });
      $('.prod-tab-order-now').on('click', function() {
          showSpecifiedTab($('#tab-title-description'));
        });
      
    });
})(jQuery);
</script>