نویسنده: مستر نارگیل تاریخ انتشار: ۱۴۰۵/۰۵/۲۸

در این آموزش با استفاده از کد سفارشی، یک شورتکد اسلایدر محصولات میسازیم. شما میتوانید این شورتکد را در صفحات خود استفاده کنید.

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

آموزش ساخت اسلایدر محصولات ووکامرس با کد سفارشی

روش کار بسیار ساده است، ابتدا کد ساخت شورتکد را در سایت قرار میدهیم، سپس با استفاده از بلوک شورتکد، اسلایدر محصولات را در صفحات خود قرار میدهیم.

کد شورتکد اسلایدر محصولات

کد سفارشی زیر را در وب‌سایت خود قرار دهید.

add_shortcode( 'nargil-woo-slider', function ( $atts ) {
    $atts = shortcode_atts(
        [
            "image" => "on",
            "check_stock" => "off", // on
            "description" => "on", // off
            "price" => "on", // off
            "num" => "10",
            "card" => "4",
            "add_to_card" => "on",
            "cats" => "", // 10,15,
            "auto_paly" => "off", 
            "on_sale" => "", 
            "type" => "", // featured or bestselling
            "sale_badge" => "on", 
            "rating" => "on", 
            "theme" => "", 
        ],
        $atts,
        "woo-slider"
    );	
	
	
static $woo_slider_first_call = 1;

    $num = $atts["num"];
    $card = $atts["card"];
    $image = $atts["image"];
    $cat = $atts["cats"];
    $check_stock = $atts["check_stock"];
    $description = $atts["description"];
    $price = $atts["price"];
    $add_to_card = $atts["add_to_card"];	
	$on_sale = $atts["on_sale"];
	$sale_badge = $atts["sale_badge"];
	$rating = $atts["rating"];
	$type = $atts["type"];
	$theme = $atts["theme"];
	$auto_paly = $atts["auto_paly"];
	$auto_paly = ( $atts["auto_paly"] == "on"  ) ? "slider-nav-autoplay" : "";
    $tax_query = $meta_key = $total_sales = $type_arr = "";
    $tax_query_arr = [];
    $orderby = 'date';
    $max_num_pages = 1;
    
    if ( $check_stock == "on" )  { $check_stock_term =  ['key'     => '_stock_status','value'   => 'outofstock','compare' => 'NOT LIKE']; } else { $check_stock_term = []; }
	
	if ( $on_sale == "on" )  { $on_sal_meta =WC()->query->get_meta_query(); $on_sale_q = array_merge(array(0), wc_get_product_ids_on_sale()); } else { $on_sal_meta = $on_sale_q = []; }
	
	if ( $cat != "" )  { $tax_query_arr[] = ['taxonomy'  => 'product_cat','field' => 'term_id', 'terms' => explode(",", $cat) ]; $tax_query= 'tax_query'; } 
	
	if ( $type == "featured" )  { $tax_query_arr[] = [    'taxonomy' => 'product_visibility','field'    => 'name','terms'    => 'featured','operator' => 'IN',  ]; $tax_query= 'tax_query'; } else if ( $type == "bestselling" ) { $orderby = "meta_value_num"; $meta_key = 'meta_key'; $total_sales = 'total_sales'; }

	$class= 'woo_slider'.$woo_slider_first_call; 

	
	$output ="<div class='Main_wrapper swiffy-slider slider-item-show".$card." ".$auto_paly." slider-item-show2-sm slider-nav-round slider-nav-sm slider-nav-visible slider-item-first-visible slider-nav-autopause slider-indicators-round slider-indicators-dark slider-indicators-outside slider-indicators-sm ".$auto_paly." ".$class."'>  <ul class='slider-container'>";

$arr = [
    'post_type'      => 'product',
    'post_status'	 => 'publish', 
    'posts_per_page' =>  $num,
    $meta_key		 =>  $total_sales,
    'orderby'        =>  $orderby, // order by title or date 
	'order'          => 'DESC',
	'meta_query'     => [$check_stock_term,$on_sal_meta],
	$tax_query     => $tax_query_arr,
	'post__in'		 => $on_sale_q,
];

$the_query = new WP_Query($arr);
$number_of_result = $the_query->found_posts;
$count = min( $number_of_result,$num );


if ($the_query->have_posts()){
	   
	while ($the_query->have_posts()):
		
		$the_query->the_post();
		$product = wc_get_product();

		$current_price = $product->get_price_html();
		$sale_badge_e = "";
		ob_start(); 
		the_permalink();  
		$link = ob_get_clean();

		ob_start(); 
		the_title();  
		$title = ob_get_clean();
		
		if ( has_post_thumbnail( get_the_ID() ) ) {
                        $img =  get_the_post_thumbnail( get_the_ID(), 'shop_single' );
                    } else {
                         $img = '<img src="' . woocommerce_placeholder_img_src() . '" alt="'.$title.'" />';
                    } 
		
		$output .="<li class='slider_card slide-visible'> <div class='post_card'>";
		
		

		if ( $product->is_on_sale() )  {  $sale_badge_e = ( $sale_badge != "off" ) ? "<span class='onsale'>تخفیف!</span>" : ""; }	
		if ( $image == "on" ) { $output .='<a href="'.$link .'" style="position: relative;">'.$sale_badge_e.$img.'</a>';	 }
		$output .= "<span class='wwo_card_details'>";
		$output .='<a class="p_title" href="'.$link .'">'.$title.'</a>';
		if ( $product->get_average_rating() && $rating !="off" ) { $output .='<span class="woocommerce">'.wc_get_rating_html($product->get_average_rating())."</span>"; }		
		if ( $description == "on" ) { $output .='<p >'.$product->get_short_description().'</p>';	 }
		if ( $price == "on" ) { $output .='<span class="price">'.$current_price.'</span>';	 }
		
		if ( $add_to_card == "on" ) {  
			ob_start(); 
			woocommerce_template_loop_add_to_cart();  
			$add_to_cart_button = ob_get_clean();
			$output .= '<span class="woo_add_to_card">'.$add_to_cart_button.'</span>'; 	 }
		
		
		$output .= "</span'>";
		
		$output .= "</div></li>"; 
		
        endwhile;

        wp_reset_postdata();
    } // end of loop		    
     
     $output .= "</ul>";
     $output .= '
         <button type="button" class="slider-nav" aria-label="Go left"></button>
    <button type="button" class="slider-nav slider-nav-next" aria-label="Go left"></button>

    <div class="slider-indicators">
        <button class="active" aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
        <button aria-label="Go to slide"></button>
    </div>
     ';
     
     
        
     $output .= "</div>";   
    
if ( $woo_slider_first_call == 1 ) {
add_action( 'wp_footer', function () use($class) { ?>
<script>const swiffyslider={version:"1.6.0",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let i=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,i),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let i=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))i.observe(t)},slide(e,t=!0){const i=e.querySelector(".slider-container"),s=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),r=e.classList.contains("slider-nav-nodelay"),o=i.children,n=parseInt(window.getComputedStyle(i).columnGap),a=o[0].offsetWidth+n;let d=t?i.scrollLeft+a:i.scrollLeft-a;s&&(d=t?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft<1&&!t&&!l&&(d=i.scrollWidth-i.offsetWidth),i.scrollLeft>=i.scrollWidth-i.offsetWidth&&t&&!l&&(d=0),i.scroll({left:d,behavior:r?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),i=e.parentElement.children.length,s=e.closest(".swiffy-slider"),l=s.querySelector(".slider-container").children.length/i*t;this.slideTo(s,l)},slideTo(e,t){const i=e.querySelector(".slider-container"),s=parseInt(window.getComputedStyle(i).columnGap),l=i.children[0].offsetWidth+s,r=e.classList.contains("slider-nav-nodelay");i.scroll({left:l*t,behavior:r?"auto":"smooth"})},onSlideEnd(e,t,i=125){let s;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(s),s=setTimeout(t,i)}),{capture:!1,passive:!0})},autoPlay(e,t,i){t=t<750?750:t;let s=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,i);return i&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(s)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),s},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),i=t.scrollWidth-t.offsetWidth,s=t.scrollLeft/i;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,i=Math.abs(Math.round((e.length-1)*s));for(let t of e)t.classList.remove("active");e[i].classList.add("active")}}};window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||(document.currentScript.hasAttribute("defer")?swiffyslider.init():document.onreadystatechange=()=>{"interactive"===document.readyState&&swiffyslider.init()});</script>

<style>
/* Slider styles omitted for brevity - see full code above */
</style>

<?php }); }
	
add_action( 'wp_footer', function () use($class, $theme ) { if ( $theme == "2"   ) {  ?>
<style>
div.<?= $class ?> li.slider_card.slide-visible {
    overflow: hidden;
}
div.<?= $class ?> span.wwo_card_details {
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    position: absolute;
    inset: 0;
    background-color: #ffffffe6;
    justify-content: center;
    transform: translateY(100%);
}
div.<?= $class ?> .slider-container .post_card:hover span.wwo_card_details {
    transform: translateY(0px);
}
</style>
<?php }
}); 

$woo_slider_first_call++;
return $output;

});

یک صفحه جدید بسازید، یک بلوک شورتکد به آن اضافه کنید و شورتکد زیر را در آن قرار دهید.

[nargil-woo-slider]

تنظیمات اسلایدر محصولات

برای این شورتکد بیش از ده اتریبیوت در نظر گرفته‌ام که با تغییر هر کدام از آنها میتوانید اسلایدر خود را سفارشی‌سازی کنید.

اتریبیوت توضیح مقدار پیش‌فرض
theme تغییر پوسته اسلایدر (1 و 2) 1
card تعداد محصولات قابل مشاهده 4
sale_badge نمایش برچسب تخفیف on
rating نمایش امتیاز محصول on
description نمایش توضیحات کوتاه محصول on
auto_paly حرکت خودکار کارت محصولات off
num تعداد محصولات لود شده 10
cats آی‌دی کتگوری محصولات -
check_stock حذف محصولات ناموجود off
on_sale نمایش محصولات تخفیف‌دار off
type نمایش محصولات ویژه یا پرفروش (featured/bestselling) -

نمونه شورتکدها:

تغییر پوسته به 2:

[nargil-woo-slider theme="2"]

ترکیب کامل:

[nargil-woo-slider card="4" num="10" sale_badge="on" rating="on" description="off" check_stock="off" on_sale="off" cats="" type="" auto_paly="on" theme="1"]
تغییر تم کاروسل محصولات ووکامرس
توضیحاتی درمورد نحوه کار این کد

در این کد با ترکیب کلاس WP_Query وردپرس و کتابخانه swiffy slider، اسلایدر (کاروسل) محصولات را میسازیم.

کتابخانه swiffy slider یکی از سبک‌ترین کتابخانه‌های ساخت اسلایدر است و خروجی نهایی زیبایی دارد که میتوانید آن را به دلخواه خود سفارشی سازی کنید. در این شورتکد ابتدا تنظیمات مورد نظر کاربر را با استفاده از اتریبیوت‌ها دریافت میکنیم، سپس با ترکیب این اتریبیوت‌ها کوئری مناسب را ساخته و با استفاده از کلاس WP_Query، آبجکت محصولات درخواستی را استخراج میکنیم و در فرمت استاندارد swiffy slider نمایش میدهیم.

آموزش ویدیویی ساخت اسلایدر محصولات ووکامرس