كيفية إنشاء درج العربة في شوبيفاي.

فهرس المحتويات

1. مقدمة
2. فهم درج العربة
3. إنشاء درج عربة في Shopify
4. أفضل الممارسات لدرجات العربات
5. الخاتمة
6. الأسئلة الشائعة

مقدمة

تخيل عميلًا يتصفح متجرك الإلكتروني، يضيف العناصر إلى عربته بحماس، ليتم تحويله فجأة إلى صفحة عربة منفصلة. هذه التجربة يمكن أن تكون مفاجئة، مما يؤدي غالبًا إلى العربات المتروكة والمبيعات المفقودة. ماذا لو كان هناك طريقة أكثر سلاسة للعملاء لرؤية عربتهم دون مقاطعة تجربة التسوق لديهم؟ ادخل درج العربة—عربة منزلقة خارج الشاشة تعزز تجربة المستخدم وتزيد معدلات التحويل.

يسمح درج العربة للعملاء بمشاهدة العناصر المختارة والتكاليف الإجمالية دون مغادرة الصفحة الحالية، مما يعزز رحلة التسوق غير المنقطعة. في مشهد التجارة الإلكترونية التنافسي اليوم، يُعد تحسين هذا الجانب من متجرك أمرًا بالغ الأهمية للاحتفاظ بالعملاء وزيادة المبيعات.

في هذه المقالة، سنتناول كل ما تحتاج لمعرفته حول إنشاء درج عربة في Shopify. سنحدد فوائد تنفيذ هذه الميزة، ونقدم دليلًا خطوة بخطوة لإنشائها، ونتحدث عن كيفية جعلها جزءًا من استراتيجية تجربة المستخدم الخاصة بك. بحلول نهاية هذه المقالة، سيكون لديك فهم شامل لكيفية إنشاء درج عربة في Shopify، مما يضمن أن يظل متجرك سهل الاستخدام وفعالاً.

ما الذي ستتعلمه

• أهمية درج العربة في التجارة الإلكترونية.
• كيفية تنفيذ درج عربة مخصص على متجرك في Shopify دون استخدام تطبيقات طرف ثالث.
• أفضل الممارسات لتعزيز تجربة المستخدم مع درج العربة الخاص بك.

لنبدأ!

فهم درج العربة

ما هو درج العربة؟

درج العربة، وغالبًا ما يُشار إليه باسم عربة مزلق أو عربة صغيرة، هو عنصر واجهة يسمح للعملاء بمعرفة محتويات عربة تسوقهم دون التنقل بعيدًا عن الصفحة الحالية. بدلاً من تحويل المستخدمين إلى صفحة عربة مخصصة، ينزلق الدرج من جانب الشاشة، مقدمًا نظرة عامة مريحة على العناصر المحددة. لا يعمل هذا النهج على تبسيط تجربة التسوق فحسب، بل يشجع أيضًا المستخدمين على مواصلة استكشاف متجرك، مما يؤدي في النهاية إلى معدلات تحويل أعلى.

أهمية درج العربة

إن وجود درج عربة في متجرك في Shopify يأتي مع العديد من الفوائد:

1. تحسين تجربة المستخدم: يمكن للمتسوقين بسرعة رؤية محتويات عربتهم دون تعطيل تدفق تصفحهم.

2. تقليل تخلي العملاء عن العربات: من خلال تسهيل ظهور العناصر والتكاليف الإجمالية للعملاء، يمكن أن يساعد درج العربة في تقليل احتمالية تخلي العملاء عن عرباتهم.

3. زيادة المبيعات: يمكن أن تؤدي عملية الدفع السلسة إلى معاملات مكتملة أكثر، مما يؤثر إيجابياً على أرباحك.

4. تحسين المظهر من حيث استخدام الهواتف المحمولة: مع المزيد من المستهلكين الذين يتسوقون على الأجهزة المحمولة، يوفر درج العربة تجربة أكثر صداقة للمستخدم على الشاشات الأصغر.

5. خيارات التخصيص: يمكن تخصيص درج العربة المصمم بشكل جيد ليتماشى مع هوية متجرك، مما يعزز جمالية المتجر العامة.

إنشاء درج عربة في Shopify

المتطلبات المسبقة

قبل الغوص في عملية الإنشاء، تأكد من أن لديك ما يلي:

• الوصول إلى لوحة إدارة متجرك في Shopify.
• معرفة أساسية بـ HTML و CSS و JavaScript.
• ثيم يسمح بالخيار المخصص (معظم ثيمات Shopify تفعل ذلك).

دليل خطوة بخطوة

الخطوة 1: الوصول إلى محرر كود Shopify الخاص بك

1. قم بتسجيل الدخول إلى لوحة إدارة Shopify الخاصة بك.
2. في الشريط الجانبي الأيسر، انتقل إلى المتجر الإلكتروني وانقر على الثيمات.
3. ابحث عن الثيم النشط الخاص بك وانقر على الإجراءات > تعديل الكود.

الخطوة 2: إنشاء الملفات اللازمة

1. في مجلد الأصول، أنشئ ملفين جديدين: drawer.css و drawer.js.

2. افتح drawer.css وأضف الأنماط التالية لإدارة مظهر درج العربة الخاص بك:

   .drawer {
       display: none;
   }
   .drawer__header {
       padding: 1.5rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid #ddd;
   }
   .drawer__close {
       margin: 0;
       padding: 0;
       border: none;
       background-color: transparent;
       cursor: pointer;
   }
   .drawer__wrapper {
       position: fixed;
       top: 0;
       right: 0;
       bottom: 0;
       height: 100%;
       width: 100%;
       max-width: 500px;
       z-index: 9999;
       overflow: auto;
       transition: transform 0.3s;
       background-color: #fff;
       display: flex;
       flex-direction: column;
       box-shadow: 0 2px 6px #777;
   }
   .drawer.is-active {
       display: block;
   }
   .drawer.is-visible .drawer__wrapper {
       transform: translateX(0);
   }
   

3. بعد ذلك، افتح drawer.js وأدخل JavaScript التالية لإدارة وظيفة الدرج:

   var drawer = function () {
       var settings = {
           activeClass: 'is-active',
           visibleClass: 'is-visible',
           selectorTarget: '[data-drawer-target]',
           selectorTrigger: '[data-drawer-trigger]',
           selectorClose: '[data-drawer-close]',
       };
   
       var openDrawer = function (trigger) {
           var target = document.getElementById(trigger.getAttribute('aria-controls'));
           target.classList.add(settings.activeClass);
           document.documentElement.style.overflow = 'hidden';
           setTimeout(function () {
               target.classList.add(settings.visibleClass);
           }, 50);
       };
   
       var closeDrawer = function (event) {
           var closestParent = event.closest(settings.selectorTarget);
           closestParent.classList.remove(settings.visibleClass);
           document.documentElement.style.overflow = '';
           setTimeout(function () {
               closestParent.classList.remove(settings.activeClass);
           }, 350);
       };
   
       var clickHandler = function (event) {
           var toggle = event.target,
               open = toggle.closest(settings.selectorTrigger),
               close = toggle.closest(settings.selectorClose);
   
           if (open) {
               openDrawer(open);
           }
           if (close) {
               closeDrawer(close);
           }
           if (open || close) {
               event.preventDefault();
           }
       };
   
       document.addEventListener('click', clickHandler, false);
   };
   
   drawer();
   

الخطوة 3: إنشاء الهيكل HTML

1. في مجلد الأقسام، أنشئ ملفًا جديدًا باسم drawer.liquid.

2. أدخل الهيكل HTML التالي لتعريف تخطيط الدرج:

   <section class="drawer" id="drawer-name" data-drawer-target>
       <div class="drawer__overlay" data-drawer-close tabindex="-1"></div>
       <div class="drawer__wrapper">
           <div class="drawer__header">
               <div class="drawer__title">تابع التسوق</div>
               <button class="drawer__close" data-drawer-close aria-label="إغلاق الدرج"></button>
           </div>
           <div class="drawer__content" id="cart__drawer">
               <div id="cart__drawer_items"></div>
               <div style="margin-top: 50px">
                   <h4>الإجمالي: <span id="cart__total_price"></span></h4>
                   <a id="cart__checkout_btn" href="/ar/checkout" class="btn btn--has-icon-after cart__continue-btn" style="width:100%;">الانتقال إلى الدفع</a>
               </div>
           </div>
       </div>
   </section>
   

3. أضف JavaScript اللازمة لجلب وتحديث بيانات العربة:

   <script>
       fetch('/cart.js')
           .then((resp) => resp.json())
           .then((data) => {
               if (data.items.length > 0) {
                   data.items.forEach(function(product) {
                       document.getElementById('cart__drawer_items').innerHTML += '<img src="' + product.featured_image.url + '" alt="' + product.featured_image.alt + '"><h5>' + product.title + '</h5><p>' + product.quantity + ' x ' + Shopify.formatMoney(product.line_price) + '</p>';
                   });
                   document.getElementById('cart__total_price').innerHTML = Shopify.formatMoney(data.total_price);
               } else {
                   document.getElementById('cart__drawer_items').innerHTML = '<p>العربة فارغة</p>';
               }
           });
   </script>
   

الخطوة 4: مرجع الدرج في ثيم الخاص بك

1. افتح theme.liquid وقم بإضافة ملفات CSS و JavaScript التي أنشأتها في قسم <head>:

   {{ 'drawer.css' | asset_url | stylesheet_tag }}
   {{ 'drawer.js' | asset_url | script_tag }}
   

2. أشر إلى قسم drawer.liquid ضمن علامة <body>:

   {% section 'drawer' %}
   

الخطوة 5: تفعيل الدرج من الرأس

1. افتح ملف header.liquid في مجلد الأقسام.

2. ابحث عن علامة الربط المرتبطة بأيقونة عربة التسوق الخاصة بك وقم بتعديلها لتفعيل الدرج كما يلي:

   <a href="#" class="site-header__icon site-header__cart" data-drawer-trigger aria-controls="drawer-name" aria-expanded="false">
       {% include 'icon-cart' %}
       <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
       <div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}">
           <span data-cart-count>{{ cart.item_count }}</span>
       </div>
   </a>
   

3. احفظ جميع التغييرات.

اختبار درج العربة الخاص بك

بعد إكمال الخطوات، من الضروري اختبار درج العربة في متجرك في Shopify:

1. افتح متجرك في علامة تبويب جديدة.
2. أضف منتجًا إلى عربتك.
3. انقر على أيقونة العربة في الرأس وراقب وظيفة الدرج.
4. تأكد من أن العربة تحدث ديناميكيًا وأن السعر الإجمالي يعكس ذلك بدقة.

أفضل الممارسات لدرجات العربات

لتحسين فعالية درج العربة الخاص بك، اعتبر أفضل الممارسات التالية:

• تصميم سهل الاستخدام: تأكد من أن درج العربة جذاب بصريًا وسهل التصفح. استخدم خطط توضيحية واضحة، وفراغات مناسبة، وأماكن أزرار بديهية.

• تصميم متجاوب: اختبر درج العربة على أجهزة وأحجام شاشات مختلفة لضمان تجربة سلسة لجميع المستخدمين، خصوصًا المتسوقين عبر الهواتف المحمولة.

• التحديثات الفورية: نفذ الوظائف التي تسمح للعملاء بتحديث الكميات أو إزالة العناصر مباشرة داخل الدرج بدون تحديث الصفحة.

• تشجيع المبيعات الإضافية: استخدم درج العربة لعرض اقتراحات لتعزيز مبيعات المنتجات الأخرى، مما يدفع العملاء لإضافة المزيد من العناصر إلى عربتهم.

• دعوات واضحة للعمل: تأكد من أن زر الدفع بارز وسهل الوصول داخل الدرج، مما يشجع المستخدمين على إكمال عمليات الشراء الخاصة بهم.

الخاتمة

إنشاء درج عربة في Shopify هو خطوة استراتيجية يمكن أن تعزز بشكل كبير تجربة التسوق لعملائك. من خلال اتباع الخطوات الموضحة في هذا الدليل، يمكنك تنفيذ درج عربة مخصص، فعال، وسهل الاستخدام يحافظ على انخراط العملاء ويشجعهم على إكمال عمليات الشراء.

مع استمرار تطور التجارة الإلكترونية، يصبح من الضروري التأكد من أن متجرك يفي بتوقعات المتسوقين العصريين. يمكن أن يؤدي درج العربة المصمم بشكل جيد إلى تحسين تجربة المستخدم ويعمل كأداة قوية لزيادة معدلات التحويل وتعزيز المبيعات.

إذا كنت تبحث عن مزيد من المساعدة في تحسين متجرك في Shopify، فكر في استكشاف خدمات Praella. يمكن أن تساعد خبرتهم في تجربة المستخدم والتصميم، تطوير الويب والتطبيقات، والاستراتيجية والاستمرارية والنمو في خلق تجارب تسوق لا تُنسى تتفاعل مع العملاء.

هل أنت مستعد لتعزيز متجرك في Shopify؟ ابدأ بتنفيذ درج العربة الخاص بك اليوم وراقب الفارق الذي يحدثه!

الأسئلة الشائعة

ما هو درج العربة؟

درج العربة هو ميزة في الواجهة في المتاجر الإلكترونية تتيح للعملاء عرض محتويات عربتهم دون التنقل بعيدًا عن الصفحة الحالية. عادة ما ينزلق من الجانب ويوفر نظرة سريعة على العناصر المضافة إلى العربة.

كيف يحسن درج العربة تجربة المستخدم؟

يحسن درج العربة تجربة المستخدم من خلال السماح للعملاء بمشاهدة عناصر عرباتهم دون مغادرة جلسة التصفح الحالية، مما يعزز تجربة التسوق السلسة ويقلل من معدلات تخلي العملاء عن العربة.

هل يمكنني تخصيص تصميم درج العربة الخاص بي؟

نعم، يمكنك تخصيص تصميم درج العربة الخاص بك باستخدام CSS لضمان توافقه مع جمالية علامتك التجارية ويوفر واجهة مستخدم جذابة.

ما هي المهارات التقنية التي أحتاجها لإنشاء درج العربة؟

تعتبر المعرفة الأساسية بـ HTML و CSS و JavaScript مفيدة لإنشاء درج عربة. توفر Shopify وثائق شاملة وموارد لمساعدة مالكي المتاجر في تنفيذ الميزات المخصصة.

كيف يمكنني اختبار درج العربة الخاص بي بعد التنفيذ؟

بعد تنفيذ درج العربة، أضف عناصر إلى عربتك، انقر على أيقونة العربة لتفعيل الدرج، وتأكد من أن العناصر والسعر الإجمالي يتم تحديثهما بشكل صحيح دون تحديث الصفحة. اختبر على أجهزة مختلفة لضمان الاستجابة والوظائف.

هل من الضروري استخدام تطبيقات طرف ثالث لإنشاء درج العربة؟

لا، يمكنك إنشاء درج عربة باستخدام كود مخصص دون الاعتماد على تطبيقات طرف ثالث. هذا يسمح بمرونة أكبر وتخصيص يعتمد على احتياجات متجرك.