رفع مشکل گالری تصویر ووکامرس و تداخل با Visual Composer وردپرس

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

در هفته‌های اخیر، پروژه راستچین‌سازی قالب فروشگاه الکترونیکی الکترو (Electro) را استارت زدم. البته این قالب قبلاً توسط دوستانی! راست‌چین‌سازی شده بود ولی چون با اشکالاتی همراه بود، تصمیم گرفتم خودم دوباره دست به کار بشم.

قبل هر چیز باید بگم که متأسفانه شاهد ترجمه و راست‌چین‌سازی غیراصولی قالب‌های وردپرس در میان برنامه‌نویس‌ها و برخی شرکت‌ها و تیم‌ها هستیم؛ و جالب این که این محصولات غیراستاندارد در فروشگاه‌هایی مثل ژاکت و راستچین به وفور یافت میشه.

یکی از مشکلات موجود در قالب الکترو، عدم سازگاری اسکریپت گالری محصول (Flex Slider) ووکامرس با صفحه‌ساز ویژوال کامپوزر (Visual Composer) هست (البته در برخی نسخه‌ها). این مشکل برمی‌گرده به اینکه نسخۀ قدیمی‌تری از اسکریپت FlexSlider توسط VC دوباره توی وردپرس Register/Enqueue میشه و برخلاف ووکامرس که وضعیت rtl بودن صفحه رو به اسکریپت FlexSlider انتقال میده، ویژوال کامپوزر این کار رو انجام نمیده.

تصویر محصول در حالت گالری نمایش داده نمیشه :(
تصویر محصول در حالت گالری نمایش داده نمیشه :(


حالا چه کار باید کرد؟ آیا باید افزونه VC رو به صورت دستی ویرایش کنیم؟ خیر. کافیه ابتدا اسکرپت مربوط به FlexSlider رو de-register و سپس فایل اسکریپت موجود در پلاگین ووکامرس رو با همون handle-name قبلی register کنیم.

function skm_deregister_vc_flexslider() {
    if ( class_exists( 'WooCommerce' ) ) {
        $plugins_url = plugins_url();
        $woo_assets_path = $plugins_url . '/woocommerce/assets';
        $woo_flexslider_path = $woo_assets_path . '/js/flexslider/jquery.flexslider.min.js';
        wp_deregister_script('flexslider');
        wp_register_script('flexslider', $woo_flexslider_path, array('jquery'));
    }
}
add_action( 'wp_enqueue_scripts', 'skm_deregister_vc_flexslider', 999 );

اینم نتیجه مورد انتظار:

نمایش صحیح گالری تصاویر محصول در قالب Electro
نمایش صحیح گالری تصاویر محصول در قالب Electro


امیدوارم مفید واقع بشه :)