آموزش کدهای ووکامرس

اسکرول به تب‌های صفحه تک محصول

در این مقاله اسکرول به تب‌های صفحه تک محصول می‌پردازیم که این یک مثال آسان برای ایجاد چنین لینک‌های است. در قالب‌های پیشرفته، خصوصاً پوسته‌های پریمیوم (پولی) وردپرس دیده‌اید که در صفحات با کلیک روی یک عنوان لینک‌دار، به صورت زیبایی بدون رفرش صفحه به المان یا مقصد لینک ارجاع داده می‌شوید.

دقیقاً در این آموزش می‌خواهیم این روش را در صفحه محصول ووکامرس پیاده کنیم. با BlueWP.ir همراه باشید.

در این مقاله با یک قطعه کد، راهی ساده برای ایجاد لینک‌های هدفدار را به شما نشان می‌دهیم. بلکه بتوانید در طراحی قالب‌ها و وب‌سایت‌هایتان از چنین قابلیتی استفاده کنید. این روش بدون نیاز به ایجکس و رفرش صفحه بوده و تنها با استفاده از اسکرول به ناحیه است.

اسکرول به تب‌های صفحه تک محصول

در صورتی که هنوز در کدنویسی و ویراش کدهای آماتور هستید، بهتر است یک کپی از فایل فانکشن functions.php قالب‌تان تهیه کنید. این قطعه کد در این فایل جاسازی خواهید شد.

قطعه کد زیر را به فایل فانکشن پوسته‌تان اضافه کنید و ذخیره نمایید.

/**
 * @snippet       Scroll to tab - WooCommerce Single Product
 * @how-to        Watch tutorial @ https://themefour.com/scroll-to-the-tabs-of-the-single-product-page/
 * @author        THEMEFOUR.COM
 * @compatible    WooCommerce 3.9.1
 */
 
add_action( 'woocommerce_single_product_summary', 'tfc_scroll_to_and_open_product_tab', 21 );
  
function tfc_scroll_to_and_open_product_tab() {
    
   global $post, $product; 
    
   // LINK TO SCROLL TO DESC TAB
   if ( $post->post_content ) {
      echo '<p><a class="jump-to-tab" href="#tab-description"> &larr; ' . __( 'Read more', 'woocommerce' ) . '</a></p>';
   }
    
   // LINK TO SCROLL TO ADDITIONAL INFO TAB
   if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
      echo '<p><a class="jump-to-tab" href="#tab-additional_information"> &larr; ' . __( 'Additional information', 'woocommerce' ) . '</a></p>';
   }
    
   // LINK TO SCROLL TO REVIEWS TAB
   if ( comments_open() ) {
      echo '<p><a class="jump-to-tab" href="#tab-reviews"> &larr; ' . __( 'Reviews', 'woocommerce' ) . '</a></p>';
   }
    
   ?>
   <style>
   .jump-to-tab {
    font-size: 17px;}
   </style>
      <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}, 750);
         });
      });
      </script>

این روش کاملاً با استفاده از توابع ووکامرس و جی کوئری به این سادگی قابل اجرا می‌باشد. در خط ۳۰ می‌توانید از کدهای درون خطی (inline) استایل CSS استفاده کنید. همچنین در خط بعدی می‌توان کدهای جاوا اسکریپت را اضافه کرد.

نتیجه نهایی این کد را می‌توانید در تصویر زیر مشاهده کنید. اسکرول به تب‌های صفحه تک محصول

این کار باعث بهبود رابط کاربری و دسترسی سریع و آسان کاربران و مشتریان به تب‌های محصولات می‌شود.

توجه داشته باشید این قطعه کد، تنها سه تب (اطلاعات بیشتر، نقد و بررسی «نظرات»، اطلاعات اضافی) مربوط به صفحه محصول را نمایش خواهد داد. برای سایر موارد خودتان با ویرایش همین قطعه می‌توانید اقدام کنید.

نوشته‌های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا