اینجایید :

جلســـه 71

مدت زمان:

19:53 دقیقه

مدرس:

محمد رحیمی

به همراه:

+ فایل‌های پروژه

کاربران گرامی:

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

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

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

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

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

ویژگی های دوره طراحی سایت فروشگاهی :

فهرست مطالب

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

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

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

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

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

چرا دکمه افزودن به سبد خرید پیش فرض ووکامرس، دیگر کافی نیست؟

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

افزونه دکمه افزودن به سبد خرید ایجکس ووکامرس
نمایش ویژگی های محصول متغیر و دکمه افزودن به سبد ایجکس 7
  1. تجربه کاربری (UX) منقطع: هر بار که صفحه رفرش می‌شود، تمرکز کاربر از بین می‌رود. او باید منتظر بماند تا صفحه دوباره بارگذاری شود و این حس کندی و قدیمی بودن را به سایت شما می‌دهد.
  2. کاهش نرخ تبدیل: کاربران امروزی بی حوصله‌اند. هر ثانیه تاخیر، شانس انصراف از خرید را افزایش می‌دهد. اگر مشتری بخواهد چند محصول یا چند متغیر از یک محصول (مثلاً چند رنگ مختلف از یک تیشرت) را به سبد خرید اضافه کند، این فرآیند رفرش شدن مکرر به شدت آزاردهنده خواهد بود.
  3. چالش محصولات متغیر: این مشکل در محصول متغیر (محصولاتی با ویژگی‌های مختلف مانند رنگ، سایز و…) دوچندان می‌شود. کاربر یک ویژگی را انتخاب می‌کند، روی دکمه کلیک می‌کند، صفحه رفرش می‌شود و برای انتخاب بعدی، این چرخه دوباره تکرار می‌شود.

راه حل چیست؟ ایجکس (AJAX)! تکنولوژی‌ای که به وب سایت شما اجازه می‌دهد اطلاعات را با سرور رد و بدل کند، بدون اینکه نیازی به بارگذاری مجدد کل صفحه باشد.

ایجکس (AJAX) چیست و چگونه فروشگاه شما را متحول می‌کند؟

پاسخ کوتاه: ایجکس (AJAX) یک تکنولوژی است که به مرورگر اجازه می‌دهد اطلاعات را با سرور رد و بدل کند بدون اینکه نیاز به بارگذاری مجدد کل صفحه باشد.

وقتی شما یک دکمه افزودن به سبد خرید ایجکس دارید، اتفاقات زیر می‌افتد:

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

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

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

معرفی راه حل نهایی: افزونه کارتیجَکس (CartAjax)

برای حل تمام مشکلات بالا، ما به ابزاری نیاز داریم که فرآیند خرید را ایجکسی، هوشمند و لذت بخش کند. افزونه کارتیجکس دقیقاً برای همین هدف طراحی شده است. این افزونه فقط یک دکمه ساده نیست؛ بلکه یک سیستم کامل برای بهبود فرآیند خرید است.

مهم‌ ترین ویژگی‌ های افزونه کارتیجکس:

  • عملکرد کاملاً ایجکس (AJAX): مهم‌ترین ویژگی! کاربر روی دکمه کلیک می‌کند و محصول بلافاصله و بدون رفرش شدن صفحه به سبد خرید اضافه می‌شود.
  • شمارنده هوشمند تعداد محصول: پس از اولین کلیک، دکمه “افزودن به سبد خرید” به یک شمارنده زیبا (- 1 +) تبدیل می‌شود. کاربران می‌توانند به راحتی تعداد محصول را کم، زیاد یا با رساندن به صفر، آن را از سبد خرید حذف کنند.
  • نمایش هوشمند ویژگی‌های محصول متغیر: این افزونه به زیبایی هر چه تمام‌تر با محصولات متغیر کار می‌کند. شما می‌توانید ویژگی‌هایی مانند رنگ را به صورت نمونه‌های رنگی (Swatches) قابل کلیک نمایش دهید. این قابلیت، فرآیند انتخاب و خرید محصولات متغیر را فوق العاده آسان و جذاب می‌کند.
  • سیستم اطلاع رسانی پیشرفته: پس از افزودن محصول، می‌توانید انتخاب کنید که یک پاپ آپ زیبا، یک پیام نوتیفیکیشن ساده یا یک سایدبار کامل از سبد خرید به کاربر نمایش داده شود.
  • سازگاری کامل با المنتور و انواع قالب‌ها: فرقی نمی‌کند صفحه محصول خود را با ویرایشگر پیش فرض ووکامرس ساخته‌اید یا با صفحه ساز قدرتمند المنتور؛ افزونه کارتیجکس به طور خودکار دکمه پیش فرض را شناسایی و جایگزین می‌کند.
  • شخصی سازی کامل: از رنگ بندی دکمه و شمارنده گرفته تا اندازه فونت قیمت و متن‌ها، همه چیز از طریق پنل تنظیمات فارسی افزونه قابل شخصی سازی است.
نمایش ویژگی های محصول در هر جایی از صفحه
نمایش ویژگی های محصول متغیر و دکمه افزودن به سبد ایجکس 9

راهنمای استفاده قدم به قدم: چگونه فروشگاه خود را با کارتیجکس هوشمند کنیم؟

زیبایی این افزونه در سادگی استفاده از آن است. در کمتر از ۵ دقیقه می‌توانید آن را راه اندازی کنید.

قدم اول: نصب و فعال سازی

مانند هر افزونه دیگری، افزونه کارتیجکس را از لینک زیر دانلود و نصب کنید.

قدم دوم: حالت خودکار (جادوی افزونه!)

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

قدم سوم: شخصی سازی (اختیاری)

از منوی ووکامرس > دکمه هوشمند خرید، وارد پنل تنظیمات افزونه شوید. در این بخش می‌توانید:

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

قدم چهارم: استفاده از شورت کد (برای کاربران حرفه‌ای و المنتور)

اگر می‌خواهید دکمه افزودن به سبد خرید را در مکان خاصی از صفحه که توسط المنتور طراحی کرده‌اید قرار دهید، کافیست از شورت کد زیر در ویجت “کد کوتاه” المنتور استفاده کنید:
[mt_smart_add_to_cart]

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

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

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

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

این یک سرمایه گذاری روی مهم‌ترین بخش کسب و کار آنلاین شما یعنی “فرآیند فروش” است.

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

سوالات متداول (FAQ)

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

بهترین راه استفاده از صفحه ساز المنتور پرو به همراه یک افزونه اختصاصی مانند کارتیجکس است. ویجت Add to Cart المنتور به تنهایی از ایجکس پشتیبانی می‌کند، اما برای قابلیت‌های پیشرفته‌تر مانند شمارنده تعداد و نمونه‌های رنگی، افزونه کارتیجکس یک راه حل کامل و یکپارچه ارائه می‌دهد.

۲. آیا افزونه کارتیجکس با قالب های المنتور و قالب وودمارت سازگار است؟

بله این پلاگین ، به طور کامل با تمامی قالب های المنتور که از ویجت افزودن به سبد خرید ووکامرس استفاده میکنند و همچنین قالب وودمارت ، به طور کامل سازگار است.

۳. آیا استفاده از دکمه افزودن به سبد خرید ایجکس، سرعت سایت من را کاهش نمی‌دهد؟

خیر، کاملاً برعکس! ایجکس با جلوگیری از بارگذاری مجدد کل صفحه، حجم داده‌ های رد و بدل شده را کاهش می‌ دهد و در نتیجه، سرعت درک شده توسط کاربر (Perceived Performance) را به شدت افزایش می‌دهد. این کار باعث می‌شود سایت شما سریع‌ تر و واکنش گراتر به نظر برسد.

۴. آیا می‌توانم دکمه افزودن به سبد خرید ایجکس را برای محصولات متغیر بدون المنتور پیاده سازی کنم؟

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

۵. بهترین روش برای نمایش ویژگی‌ های محصول متغیر به جای لیست کشویی چیست؟

بهترین و کاربرپسندترین روش، استفاده از نمونه‌های بصری (Variation Swatches) است. برای ویژگی‌هایی مانند رنگ، می‌توانید دایره‌های رنگی قابل کلیک (Color Swatches) و برای ویژگی‌هایی مانند سایز یا جنس، دکمه‌های متنی (Label Swatches) نمایش دهید. این کار انتخاب را برای کاربر سریع‌تر و جذاب‌تر می‌کند و افزونه کارتیجکس این قابلیت را به طور کامل در اختیار شما قرار می‌دهد.

کاربران گرامی:

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

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

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

Chat Icon
دستیار سایت
0
    0
    سبد خرید شما
    سبد خرید شما خالی استبازگشت به فروشگاه
    راهنمای نصب المان‌های آماده المنتور

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

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

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

    1. استفاده از المنتور و افزونه‌های مربوطه الزامی است.
      نصب تنها در صورتی امکان‌پذیر است که شما از افزونه المنتور پرو یا سایر افزونه‌های موردنیاز المان‌ها که در توضیحات محصول ذکر شده‌اند، استفاده کرده باشید.

    2. ارسال اطلاعات دسترسی.
      پس از خرید، لازم است اطلاعات ورود به وردپرس و هاست خود را از طریق بخش پشتیبانی ارسال نمایید تا تیم ما بتواند نصب را انجام دهد.

    3. هاست مناسب.
      هاست شما باید از نظر سرعت و پشتیبانی استانداردهای لازم را داشته باشد. در صورتی که کیفیت هاست مناسب نباشد، امکان نصب وجود نخواهد داشت و نیاز است هاست را بهینه کنید.

    4. نصب شامل تغییرات سفارشی نمی‌شود.
      این سرویس صرفاً برای نصب اولیه المان‌های آماده است و شامل تنظیمات سفارشی یا تغییرات در طراحی سایت نمی‌باشد.

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

    قالب های وردپرس