دیجی اسکریپت

با معرفی اسکریپت فروشگاه محصولات مجازی فایل سل FileSell با شما هستیم اگر دنبال ایجاد یک وب سایت حرفه ای برای فروش محصولات PDF ، مقالات ، فایل ها و هرچیزی که فکرش را میکنید هستید ما استفاده از اسکریپت فایل سل را به شما پیشنهاد میدهیم . توسط این اسکریپت حرفه ای براحتی میتوانید یک وب سایت همکاری در فروش فایل راه اندازی کنید تا فروشندگان مختلف با عضویت در سایتتان بتوانند محصولات خود را به فروش برسانند و به ازای فروش محصولات درصدی به سایت شما تعلق گیرد

اسکریپت فروشگاه محصولات مجازی فایل سل FileSell

اسکریپت فایل سل FileSell کاملا ریسپانسیو و
واکنشگراست و در تمامی مرورگر ها و صفحات نمایش به خوبی به نمایش در می آید
و قابلیت سازگاری با هر رزولوشنی را دارد

از جمله ویژگی بسیار مهم و کاربردی این اسکریپت میتوان
به سئو بسیار بالا و عالی این اسکریپت فروشگاهی نام برد که سبب کسب جایگاه
بهتر و عالی تر برای شما در نتایج جستجوی گوگل میشود

سرعت لود و بارگذاری در این اسکریپت بسیار بالا بوده و تمامی المان ها و مطالب در کمترین زمان ممکن لود و بارگزاری میشود

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

دو چیز خیلی مهم در سئو داخلی سایت استفاده از robots.txt و sitemap.xml میباشد که در این اسکریپت فروشگاه فایل به خوبی ایجاد شده و تمامی محصولات در نقشه سایت قرار میگیرند

صفحه محصولات قابل ارائه توسط این فروشنده قابل نمایش هستند و اطلاعات
فروشنده به راحتی میتواند در اختیار خریداران جهت ارتباط با او قرار گیرد

بهره مندی از سبد خرید ایجکسی و حرفه ای برای خرید های چند گانه

قابلیت ویرایش و ادیت قالب پیش فرض و سورس کد های استاندارد و بهینه شده

قابلیت دسته بندی مطالب و محصولات به صورت تو در تو و امکان سرچ و جستجوی پیشرفته بین محصولات با بالاترین دقت

اگر محصول اضافه شده دارای پیش نمایش است براحتی میتوانید برای محصولات
پیش نمایش ایجاد نمایید و کاربر با کلیک بر روی مشاهده پیش نمایش ، پیش
نمایش ایجاد شده را مشاهده نماید

کاربران به راحتی میتوانند برای هر محصول نظر ثبت کنند و فروشنده محصول میتواند پاسخ این نظرات را ارسال کند

دارا بودن درگاه بانکی حرفه ای زرین پال برای فروش محصولات

کاربران به راحتی میتوانند برای هر محصول نظر ثبت کنند و فروشنده محصول میتواند پاسخ این نظرات را ارسال کند

مدیر سایت میتوانید در پنل کاربران و فروشندگان پیغام اعم از اطلاعیه و اخبار ثبت کند

بدون نامحدود مدیر سایت و فروشندگان سایت میتوانند محصول ثبت کنند و محصولات خود را به فروش برسانند

تعداد فروش محصولات و آمار هر محصول به خوبی قابل روئت است و براحتی میتوانید آنها را مدیریت نمایید

اگر بعد از ارسال محصول متوجه شدید جایی باید ویرایش شود براحتی
میتوانید وارد بخش ویرایش محصول شوید و محصول مورد نظرتان را ویرایش نمایید

میتوانید فایل های خریداری شده را پیوست نمایید تا زمانی که کاربر مبلغ
را واریز کرد بتواند فایل را دانلود نماید یعنی بدون دردسر و بسیار راحت
این کار قابل انجام است

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

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

هنگام ثبت اطلاعات بانکی میتوانید فروشنده سایت خود را احراز هویت
نمایید و اطلاعاتی نظیر عکس کارت ملی ، عکس  شخصی ، نام و نام خانوادگی و
تاریخ تولد را دریافت نمایید

تمامی درخواست های واریز در ناحیه کاربری ثبت شده و فروشنده میتواند در هر زمان آنها را بررسی نماید

استفاده از سیستم تیکتی فوق حرفه ای و پیشرفته برای پاسخ گویی به مشکلات کاربران

قابلیت ارسال ایمیل جهت فعال سازی حساب فروشندگی

ویژگی پنل مدیریت اسکریپت فروشگاه محصولات مجازی فایل سل FileSell

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

بخش مهم و کاربردی کاربران که میتوانید کاربران ثبت نام شده و حذف شده و مدیریت کامل آنها را بر عهده گیرید

هنگام ثبت اطلاعات بانکی میتوانید فروشنده سایت خود را احراز هویت
نمایید و اطلاعاتی نظیر عکس کارت ملی ، عکس  شخصی ، نام و نام خانوادگی و
تاریخ تولد را دریافت نمایید

قابلیت دسته بندی محصولات با امکاناتی نظیر حذف و ویرایش آن و قابلیت ایجاد دسته بندی تو در تو

قابلیت نمایش کلیه محصولات سایت و مدیریت آنها در صورت نیاز

براحتی میاتوانید محصولاتی که قوانین سایت را رعایت کردند را رد نمایید و یا تایید نمایید تا در سایت به نمایش در آیند

براحتی میاتوانید محصولاتی که قوانین سایت را رعایت کردند را رد نمایید و یا تایید نمایید تا در سایت به نمایش در آیند

بخش بسیار مهم و حرفه ای تنظیمات اسکریپت که براحتی میتوانید کلیه قسمت ها را ویرایش نمایید

اگر کاربری از طریق فرم تماس برای ما پیغامی ارسال کند از طریق ناحیه
کاربری و پیشخوان قابل مشاهده میباشد و میتوانید به آنها پاسخ دهید

نمایش ایمیل کلیه کاربران در سایت و ارسال ایمیل تبلیغاتی به منظور تبلیغات های ایمیلی به آنها

قابلیت ارسال ایمیل به افرادی که جزء خریداران یک محصول بودند

قابلیت ارسال ایمیل به کاربرانی که برای یک محصول نظر دادند

قابلیت تعریف کاربر ، فروشنده و مدیر جدید به سیستم

قابلیت ویژه کردن محصول خاص برای فروش بیشتر

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

سایت شما باید به‌صورتی نمایش داده بشه که کاربر رو به سمت خودش جذب کنه و بتونه یک ظاهر خیلی جذاب داشته باشه؛ به همین دلیل ما تصمیم گرفتیم توی این مقاله به شما آموزش بدیم آرشیو محصولات خودتون رو توی ووکامرس سازمان‌دهی کنید و سایت خودتون رو منظم‌تر و زیباتر کنید.

قراره توی این مقاله چیکار کنیم؟

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

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

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

ساخت افزونه اختصاصی

خب شما باید وارد وردپرس خودتون بشید و از بخش wp-content، گزینه Plugins رو انتخاب کنید؛ حالا یک فایل جدید به اسم “Woocommerce-products” بسازید؛ وارد این پوشه جدید بشید و یک فایل PHP دقیقاً به همین اسم توی اون ایجاد کنید و قطعه کدی که در اینجا براتون قرار دادیم رو توی این فایل PHP جایگذاری کنید:

/*
    Plugin Name: WooCommerce products
    Plugin URI: https://mihanwp.com
    Description: Better product grouping presentation for your WooCommerce shop
    Author: MihanWP
    Version: 1.0
    Author URI: http://mihanwp.com
*/
 
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
} 

توجه داشته باشید که باید جزئیات مورد نظر خودتون رو توی کد بالا جایگزین کنید.

استایل‌ها و اسکریپت‌ها رو اضافه کنید

حالا توی قدم بعدی شما باید استایل‌ها و اسکریپت‌های موردنظر خودتون رو اضافه کنید، برای این کار می‌تونید از کد زیر استفاده کنید:

// Enqueue/register styles and scripts
function plugin_scripts_styles(){
 
    wp_enqueue_style( 'style', plugins_url('/css/style.css', __FILE__ ), array(), '1.0.0' );
 
    // Required Plugins
    wp_enqueue_script( 'imagesloaded');
    wp_enqueue_script( 'owl-carousel', plugins_url('/js/owl.carousel.js', __FILE__ ), array('jquery'), '', true);
    // Main js file
    wp_enqueue_script( 'main', plugins_url('/js/main.js', __FILE__ ), array('jquery'), '', true);
}
add_action( 'wp_enqueue_scripts', 'plugin_scripts_styles' );

خب اول برای اینکه بتونیم سبک‌های موردنظر خودمون رو ذخیره کنیم، یک فایل CSS اضافه کردیم؛ بعد از اون هم افزونه داخلی ImageLoaded که همراه با هسته وردپرس هست رو بارگذاری کردیم. حالا باید یک carousel ایجاد کنیم که برای این کار هم نیاز به یک افزونه jQuery و فایل اصلی js داریم؛ که پیشنهاد ما برای افرونه OwlCarousel هست.

شورت کد تب بندی بسازید

توی مرحله بعدی شما باید یک تب شورت کد ایجاد کنید، این تب از دوتا بخش شورت کد تشکیل شده، یکی از این بخش‌ها Parent یا همون والدین و موارد دیگه Child یعنی کودک هست. این قطعه کدی که در اینجا قرار دادیم مربوط به اولین بخش والدین هست که شما باید اون رو به فایل PHP که توی مرحله اول ایجاد کردید، اضافه کنید.

// Create tab shortcode
function et_tab($atts, $content = null) {
 
    extract(shortcode_atts(array(), $atts));
 
    $output = '';
 
    static $id_counter = 1;
 
    $class   = array();
    $class[] = 'et-tab';
    $class[] = 'et-clearfix';
 
    $output .='<div id="et-tab-'.$id_counter.'" class="'.implode(" ", $class).'">';
        $output .= do_shortcode($content);
    $output .= '</div>';
 
    $id_counter++;
 
    return $output;
 
}
add_shortcode('et_tab', 'et_tab');

از کد زیر برای ایجاد برگه کودک یا Child استفاده کنید:

function et_tab_item($atts, $content = null) {
 
    extract(shortcode_atts(array(
        'title'  => '',
        'active' => 'false',
    ), $atts));
 
    $output = '';
 
    static $id_counter = 1;
 
    $class   = array();
    $class[] = 'tab-item';
    $class[] = 'et-clearfix';
    $class[] = 'active-'.esc_attr($active);
 
    $output .= '<div data-target="tab-'. sanitize_title( $title ) .'" class="'.implode(' ',$class).'">';
        if (isset($title) && !empty($title)) {
            $output .= esc_attr($title);
        }
    $output .= '</div> ';
    $output .= '<div id="tab-'.sanitize_title($title).'-'.$id_counter.'" class="tab-content et-clearfix">';
        $output .= do_shortcode($content);
    $output .= '</div>';
 
    $id_counter++;
 
    return $output;
}
add_shortcode('et_tab_item', 'et_tab_item');

وقتی شما این دو تا کد رو توی ویرایشگر وردپرس استفاده کردید، کدها به‌صورت زیر نمایش داده می‌شوند:

[et_tab] [et_tab_item title="Your title"] …content here[/et_tab_item][/et_tab]

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

اضافه کردن jQuery برای بهبود محتوای جدول‌بندی شده

برای اینکه بتونید این محتوا رو قدرتمندتر کنید باید به فایل main.js برید و کد زیر رو توی اون جایگذاری کنید:

(function($){
 
        "use strict";
 
        $('.et-tab').each(function(){
 
            var $this    = $(this),
                tabs     = $this.find('.tab-item'),
                tabsQ    = tabs.length,
                tabsContent = $this.find('.tab-content');
 
            tabs.wrapAll('<div class="tabset et-clearfix"></div>');
            tabsContent.wrapAll('<div class="tabs-container et-clearfix"></div>');
 
            var tabSet = $this.find('.tabset');
 
                if(!tabs.hasClass('active')){
                    tabs.first().addClass('active');
                }
 
                tabs.each(function(){
 
                    var $thiz = $(this);
 
                    if ($thiz.hasClass('active')) {
                        $thiz.siblings()
                        .removeClass("active");
                        tabsContent.hide(0).removeClass('active');
                        tabsContent.eq($thiz.index()).show(0).addClass('active');
                    }
                });
 
                if(tabsQ >= 2){
 
                    tabs.on('click', function(){
                        var $self = $(this);
 
                        if(!$self.hasClass("active")){
 
                            $self.addClass("active");
 
                            $self.siblings()
                            .removeClass("active");
 
                            tabsContent.hide(0).removeClass('active');
                            tabsContent.eq($self.index()).show(0).addClass('active');
                             
                        }
 
                    });
                }
 
        });
 
    })(jQuery);

استایل‌دهی به تب‌‌ها

تا اینجای کار شما موفق شدید یک تب ایجاد کنید، اما خب موضوع اینجاست که ظاهر این تب جذاب نیست و شما باید برای زیباتر دیدن این تب به اون استایل بدید؛ برای این کار میتونید از یک سری کدهای CSS استفاده کنید که ما در اینجا براتون قرار دادیم:

.tabset {
    margin-bottom: 24px;
}
 
.tabset > * {
    display: inline-block;
    vertical-align: middle;
    padding: 8px 16px;
    line-height: 1em;
    background: #f5f5f5;
    margin-right: 8px;
    cursor: pointer;
}
 
.tabset > .active {
    background: #000000;
    color: #ffffff;
}
 
.tabset > :last-child {
    margin-right: 0;
} 

دقت داشته باشید که این قطعه کد شامل یک سری ویژگی برای تب شما هست، این ویژگی‌ها مثل میزان حاشیه، رنگ بک‌گراند و موارد این‌چنینی هست که اگر مایل باشید می‌تونید اون‌ها رو به‌صورت دلخواه تغییر بدید.

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

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

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

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

افزودن کد به فایل PHP

توی قدم بعدی باید این کد رو به فایل PHP اضافه کنید:

function et_products($atts, $content = null) {
    extract(shortcode_atts(
        array(
            'layout'                => 'grid',  // grid OR carousel
            'autoplay'              => 'false', // true OR false
            'columns'               => '1', // 1 | 2 | 3 | 4
            'rows'                  => '1',     // 1 | 2 | 3 | 4 - carousel only
            'quantity'              => '12',
            'type'                  => 'recent', // recent | featured | sale | best_selling
        ), $atts)
    );
 
    static $id_counter = 1;
 
    if (class_exists('Woocommerce')) {
 
        $output = '';
 
        global $post;
 
        $query_options = array(
            'post_type'           => 'product',
            'post_status'         => 'publish',
            'meta_query'          => WC()->query->get_meta_query(),
            'tax_query'           => WC()->query->get_tax_query(),
            'ignore_sticky_posts' => 1,
            'posts_per_page'      => absint($quantity),
        );
 
        if ($type == "featured"){
            $query_options = array(
                'post_type'           => 'product',
                'post_status'         => 'publish',
                'meta_query'          => WC()->query->get_meta_query(),
                'ignore_sticky_posts' => 1,
                'posts_per_page'      => absint($quantity),
                'tax_query'           => array(
                    array(
                        'taxonomy' => 'product_visibility',
                        'field'    => 'name',
                        'terms'    => 'featured',
                        'operator' => 'IN',
                    )
                ),
            );
        }
 
        if ($type == "sale"){
            $query_options = array(
                'post_type'           => 'product',
                'post_status'         => 'publish',
                'meta_query'          => WC()->query->get_meta_query(),
                'ignore_sticky_posts' => 1,
                'posts_per_page'      => absint($quantity),
                'post__in'            => array_merge( array( 0 ), wc_get_product_ids_on_sale() ),
            );
        }
 
        if ($type == "best_selling"){
 
            $query_options = array(
                'post_type'           => 'product',
                'post_status'         => 'publish',
                'meta_query'          => WC()->query->get_meta_query(),
                'tax_query'           => WC()->query->get_tax_query(),
                'ignore_sticky_posts' => 1,
                'posts_per_page'      => absint($quantity),
                'orderby'             => 'meta_value_num',
                'meta_key'            => 'total_sales',
            );
        }
 
        $products = new WP_Query($query_options);
 
        if($products->have_posts()){
 
            $counter    = 1;
 
            $class      = array();
            $attributes = array();
 
            $class[] = 'products';
            $class[] = esc_attr($layout);
 
            if ($layout == 'carousel') {
                $class[] = 'owl-carousel';
            }
 
            $attributes[] = 'data-columns="'.esc_attr($columns).'"';
            $attributes[] = 'data-autoplay="'.esc_attr($autoplay).'"';
 
            $output .= '<ul class="'.esc_attr(implode(' ', $class)).'" '.implode(' ', $attributes).'>';
 
                while ($products->have_posts() ) {
 
                    $products->the_post();
 
                    global $product;
 
                    if ($layout == "carousel" && $rows != 1) {
 
                        $product_wrapper_start = '';
                        $product_wrapper_end   = '';
 
                        if (($counter % 2 == 1 && $rows == 2) || ($counter % 3 == 1 && $rows == 3) || ($counter % 4 == 1 && $rows == 4)){
                            $product_wrapper_start = '<li class="product-wrapper">';
                        }
 
                        if (($counter % 2 == 0 && $rows == 2) || ($counter % 3 == 0 && $rows == 3) || ($counter % 4 == 0 && $rows == 4)){
                            $product_wrapper_end   = '</li>';
                        }
 
                        $output .= $product_wrapper_start;
                            $output .= '<div class="product" id="product-'.esc_attr($product->get_id()).'">';
                                ob_start();
                                    do_action( 'woocommerce_before_shop_loop_item' );
                                    do_action( 'woocommerce_before_shop_loop_item_title' );
                                    do_action( 'woocommerce_shop_loop_item_title' );
                                    do_action( 'woocommerce_after_shop_loop_item_title' );
                                    do_action( 'woocommerce_after_shop_loop_item' );
                                $output .= ob_get_clean();
                            $output .= '</div>';
                        $output .= $product_wrapper_end;
 
                        $counter++;
 
                    } else {
                        $output .= '<li class="product" id="product-'.esc_attr($product->get_id()).'">';
                            ob_start();
                                do_action( 'woocommerce_before_shop_loop_item' );
                                do_action( 'woocommerce_before_shop_loop_item_title' );
                                do_action( 'woocommerce_shop_loop_item_title' );
                                do_action( 'woocommerce_after_shop_loop_item_title' );
                                do_action( 'woocommerce_after_shop_loop_item' );
                            $output .= ob_get_clean();
                        $output .= '</li>';
                    }
 
                }
 
                wp_reset_postdata();
 
            $output .= '</ul>';
 
            $id_counter++;
 
            return $output;
 
        }
 
    } else {
        echo "Please install/activate Woocommerce plugin";
    }
}
add_shortcode('et_products', 'et_products');

این شورت کد دارای یک سری ویژگی هست که شما می‌تونید به‌دلخواه خودتون اون‌ها رو تغییر بدید و آرشیو خودتون رو سفارشی کنید؛ حالا ما برای اینکه بهتر بتونید این شورت کد رو درک کنید و بفهمید کدوم یکی از ویژگی‌ها مربوط به چی هست، توی این بخش تک‌تک این موارد رو بررسی می‌کنیم.

• Layout: یکی از قابلیت‌هایی که توی کد بالا وجود داره نحوه چیدمان محصولات هست، چیدمان محصولات می‌تونه به صورت شبکه‌ای یا کاروسل باشه.
• Autoplay: این مورد در واقع یک گزینه اضافی برای محصولاتی هست که چیدمان اون‌ها به صورت کاروسل هست.
• Columns: خب همان‌طور که پیداست این بخش مربوط به تعداد ستون‌ها هست و شما می‌تونید از این بخش تعداد ستون‌ها رو به‌دلخواه خودتون تغییر بدید.
• Rows: این ویژگی فقط برای چیدمان کاروسل هست و تعداد ردیف‌ها رو مشخص میک‌نه.
• Quantity: تعیین کنید که چه تعداد آیتم برای نمایش دارید.
• Type: توی این قسمت هم شما این امکان رو دارید که محصولات رو بر اساس نوع اون‌ها مثل محصولاتی که بهترین فروش رو داشتند، محصولات اخیر و بهترین محصولات رو مشخص کنید.

یک نکته برای ردیف‌های کاروسل

وقتی شما از چیدمان کاروسل استفاده می‌کنید، هر یک از محصولات سایت فروشگاهی خودتون به یک آیتم کاروسل تبدیل می‌شوند اما این برای وقتی هست که شما فقط یک ردیف داشته باشید، اما خب اگه شما بیشتر از یک ردیف داشته باشید تکلیف چیه و چه اتفاقی پیش می‌یاد؟

$product_wrapper_start = '';
$product_wrapper_end   = '';
 
if (($counter % 2 == 1 && $rows == 2) || ($counter % 3 == 1 && $rows == 3) || ($counter % 4 == 1 && $rows == 4)){
    $product_wrapper_start = '<li class="product-wrapper">';
}
 
if (($counter % 2 == 0 && $rows == 2) || ($counter % 3 == 0 && $rows == 3) || ($counter % 4 == 0 && $rows == 4)){
    $product_wrapper_end   = '</li>';
}

عبارت زیر رو:

$counter    = 1;

بعد از این قسمت قرار بدید:

if($products->have_posts()){

طبیعتا با این‌کار هر پست را در حلقه Loop قرار داده‌اید تا پست‌ها به ترتیب در کاروسل نمایش داده شوند.

قطعه کد زیر بعد از کد اجرا می‌شود:

$output .= $product_wrapper_start;
    $output .= '<div class="product" id="product-'.esc_attr($product->get_id()).'">';
        ob_start();
            do_action( 'woocommerce_before_shop_loop_item' );
            do_action( 'woocommerce_before_shop_loop_item_title' );
            do_action( 'woocommerce_shop_loop_item_title' );
            do_action( 'woocommerce_after_shop_loop_item_title' );
            do_action( 'woocommerce_after_shop_loop_item' );
        $output .= ob_get_clean();
    $output .= '</div>';
$output .= $product_wrapper_end;

افزودن استایل Owl Carousel

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

از توی فایل افزونه کاروسلی که دانلود کردید، استایل‌های Owl Carousel رو پیدا کنید و اون‌ها رو توی فایل style.css کپی پیست کنید. از کدهای زیر هم می‌تونید به‌عنوان ناوبری کاروسل و محصولات استفاده کنید:

ul.products {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
ul.products.grid {
    display: grid;
    grid-row-gap: 24px;
    grid-column-gap: 24px;
}
 
ul.products.grid[data-columns="2"]{grid-template-columns: repeat(2, 2fr);}
ul.products.grid[data-columns="3"]{grid-template-columns: repeat(3, 3fr);}
ul.products.grid[data-columns="4"]{grid-template-columns: repeat(4, 4fr);}
 
ul li {
    display: block;
    padding: 0;
    margin: 0
}
 
.product {
    position: relative;
    text-align: center;
}
 
.woocommerce-loop-product__title  {
    margin-top: 16px !important;
    font-size: 1em !important;
}
 
.product a {
    display: block;
    text-decoration: none;
    border-bottom: none !important;
}
 
.product .onsale {
    position: absolute;
    left: 0;
    padding: 4px;
    background: red;
    color: #ffffff;
}
.et-tab .owl-nav {
    position: absolute;
    top: -60px;
    right: 0;
}
 
.et-tab .owl-nav > * {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #f5f5f5 !important;
}
 
.et-tab .owl-nav > :last-child {
    margin-left: 8px;
}
 
.et-tab .owl-nav > *:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

برای اینکه از پلاگین کاروسل استفاده کنید باید قطعه کد زیر رو توی فایل main.js و بعد از کد مربوط به دسته‌بندی یا همون تب، اضافه کنید.

// Initialize carousel for the first load
 
$('.products.carousel').each(function(){
 
    var $this = $(this);
    $this.imagesLoaded(function(){
        $this.owlCarousel({
                margin:24,
                nav:true,
                autoplay:$this.data('autoplay'),
                items:$this.data('columns'),
                responsive:{
                    ۳۲۰ : {items:1},
                    ۷۶۸ : {items:2},
                    ۱۰۲۴ : {items:3},
                    ۱۲۸۰ : {items:$this.data('columns')}
                },
            });
    });
 
});

توی این بخش ما داریم از دوتا افزونه به‌صورت همزمان استفاده می‌کنیم؛ پس باید مطمئن بشیم که هم‌پوشانی محتوا صورت نگرفته باشه و بعدازاینکه اطمینان پیدا کردیم از این پلاگین برای چیدمان محصولات کاروسل استفاده کنید.

تگ کاروسل رو درست کنید

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

حالا اگه شما این طرح کاروسل رو از یک برگه به برگه دیگه تغییر بدید، با مشکل مواجه خواهید شد و برای اینکه بتونید این مشکل رو از بین ببرید، نیاز به به‌روزرسانی دارید. پس بهترِ که همون ابتدای کار عملکرد زیر رو اضافه کنید:

function refreshCarousel(tab){
    tab.find('.products.carousel').each(function(){
        jQuery(this).trigger('refresh.owl.carousel');
    });
}

درواقع کار این قطعه کد این هستش که شما هر بار که برگه رو تغییر می‌دید، طرح یا همون چیدمان کاروسل رو تازه می‌کنه، حالا باید تابع داخل برگه رو درست بعد از کد:

tabsContent.eq($self.index()).show(0).addClass('active');

این کد رو اضافه کنید:

refreshCarousel(tabsContent.eq($self.index()));

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

<!-- wp:shortcode -->
[et_tab][et_tab_item title="recent"][et_products layout="grid" autoplay="false" columns="3" rows="1" quantity="6" type="recent" /][/et_tab_item][et_tab_item title="featured"][et_products layout="grid" autoplay="false" columns="3" rows="1" quantity="6" type="featured" /][/et_tab_item][et_tab_item title="sale"][et_products layout="grid" autoplay="false" columns="3" rows="1" quantity="6" type="sale" /][/et_tab_item][et_tab_item title="best selling"][et_products layout="grid" autoplay="false" columns="3" rows="1" quantity="6" type="best_selling" /][/et_tab_item][/et_tab]
<!-- /wp:shortcode -->
 
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
 
<!-- wp:shortcode -->
[et_tab][et_tab_item title="recent"][et_products layout="grid" autoplay="false" columns="4" rows="1" quantity="8" type="recent" /][/et_tab_item][et_tab_item title="featured"][et_products layout="grid" autoplay="false" columns="4" rows="1" quantity="8" type="featured" /][/et_tab_item][et_tab_item title="sale"][et_products layout="grid" autoplay="false" columns="4" rows="1" quantity="8" type="sale" /][/et_tab_item][et_tab_item title="best selling"][et_products layout="grid" autoplay="false" columns="4" rows="1" quantity="8" type="best_selling" /][/et_tab_item][/et_tab]
<!-- /wp:shortcode -->
 
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
 
<!-- wp:shortcode -->
[et_tab][et_tab_item title="recent"][et_products layout="carousel" autoplay="false" columns="3" rows="1" quantity="12" type="recent" /][/et_tab_item][et_tab_item title="featured"][et_products layout="carousel" autoplay="false" columns="3" rows="1" quantity="12" type="featured" /][/et_tab_item][et_tab_item title="sale"][et_products layout="carousel" autoplay="false" columns="3" rows="1" quantity="12" type="sale" /][/et_tab_item][et_tab_item title="best selling"][et_products layout="carousel" autoplay="false" columns="3" rows="1" quantity="12" type="best_selling" /][/et_tab_item][/et_tab]
<!-- /wp:shortcode -->
 
<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->
 
<!-- wp:shortcode -->
[et_tab][et_tab_item title="recent"][et_products layout="carousel" autoplay="false" columns="4" rows="2" quantity="12" type="recent" /][/et_tab_item][et_tab_item title="featured"][et_products layout="carousel" autoplay="false" columns="2" rows="2" quantity="12" type="featured" /][/et_tab_item][et_tab_item title="sale"][et_products layout="carousel" autoplay="false" columns="3" rows="2" quantity="12" type="sale" /][/et_tab_item][et_tab_item title="best selling"][et_products layout="carousel" autoplay="false" columns="3" rows="1" quantity="12" type="best_selling" /][/et_tab_item][/et_tab]
<!-- /wp:shortcode -->

اگه از ویرایشگر کلاسیک وردپرس استفاده می‌کنید که فقط باید این شورت کد رو اضافه کنید، اما درصورتی‌که از گوتنبرگ استفاده می‌کنید ممکنه این ویرایشگر برای شما کامنت ” <!– wp:separator –> ” رو نشون بده.

خب حالا شما اگه همه این موارد رو به‌درستی انجام داده باشید می‌تونید طرح موردنظر خودتون رو مشاهده کنید.

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

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.