تحويل وحدة متجر Divi إلى بطاقات تمرير المنتج الديناميكي على الهاتف المحمول

عند إنشاء صفحة مقصودة لمنتجات معينة ، سواء كان ذلك إطلاقًا جديدًا أو بيعًا تستعد له ، فمن المحتمل أن تستخدم Shop Module في مرحلة ما. تسمح لك Divi's Shop Module بسحب المنتجات ديناميكيًا من البرنامج المساعد WooCommerce وتصميم المنتجات باستخدام خيارات Divi المدمجة. الآن ، بشكل افتراضي ، تأتي وحدة المتجر مع عدد قليل من هياكل الأعمدة التي تترجم جميعها إلى عمودين بأحجام شاشة أصغر. هذا يعني أنه كلما زاد عدد المنتجات التي تختار عرضها ، زادت الحاجة إلى التمرير العمودي للوصول إلى الجزء التالي من صفحتك المقصودة.

في تصميم الويب الحديث ، هناك تقنية مستخدمة غالبًا لتقييد التمرير العمودي وإظهار العناصر بناءً على تفضيلات الزائرين وهي استخدام بطاقات التمرير. في هذا البرنامج التعليمي ، سنوضح لك كيفية تحويل Divi Shop Module إلى بطاقات تمرير منتج ديناميكية بأحجام شاشة أصغر دون استخدام مكون إضافي. سنبدأ بإعداد العناصر المختلفة في قسم منتجاتنا واستخدام كمية صغيرة من كود CSS لتمكين تأثير التمرير السريع. هذه طريقة رائعة لعرض مجموعة كبيرة من المنتجات داخل صفحتك المقصودة دون إرباك زوارك. ستتمكن من تنزيل ملف JSON مجانًا أيضًا!

دعنا نذهب اليها.

معاينة

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

متحرك

سطح المكتب

قم بتنزيل تخطيط بطاقات تمرير المنتج مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

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

1. قم بإعداد WooCommerce & صفحات المنتج

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

2. إنشاء صفحة جديدة وتحميل تخطيط الصفحة المقصودة للقرطاسية

إنشاء صفحة جديدة

بمجرد الانتهاء من وضع المنتجات ، أضف صفحة جديدة داخل الواجهة الخلفية لـ WordPress. امنح صفحتك عنوانًا ، وانشر الصفحة وقم بتمكين Divi's Visual Builder.

تحميل تخطيط الصفحة المقصودة القرطاسية

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

3. تعديل قسم المحل

حدد موقع القسم مع وحدة المتجر

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

إعدادات الصف

تحجيم سريع الاستجابة

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

• استخدام عرض مزراب مخصص: 1
• العرض: 80٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

الرؤية

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

متجر إعدادات الوحدة النمطية

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

بعد ذلك ، سنفتح إعدادات Shop Module. التغييرات التي نجريها في كود CSS الخاص بنا (والتي سنضيفها لاحقًا) تعتمد على عدد المنتجات التي نعرضها. سنبدأ بتوضيح كيفية تحويل وحدة التسوق المكونة من 8 منتجات إلى بطاقات تمرير للمنتج. يمكنك اختيار أي تخطيط عمود من اختيارك لسطح المكتب.

• عدد المنتجات: 8
• تخطيط العمود: 4 أعمدة

تحجيم سريع الاستجابة

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

• العرض: 100٪ (سطح المكتب) ، 250٪ (الجهاز اللوحي والهاتف)
• أقصى عرض: 100٪ (سطح المكتب) ، 250٪ (الجهاز اللوحي والهاتف)

فئة CSS

سنضيف أيضًا فئة CSS إلى وحدة المتجر الخاصة بنا. في وقت لاحق ، عندما نضيف كود CSS ، سنكون قادرين على تحويل Shop Module الذي يحمل فئة CSS هذه فقط. بمعنى آخر ، إذا كنت تريد أن تظهر وحدة متجر أخرى في حالة طبيعية ، فإن ترك فئة CSS هذه سيسمح لك بالقيام بذلك.

• فئة CSS: بطاقات تمرير المنتج

الفيضانات المستجيبة

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

• تدفق أفقي: مخفي (سطح المكتب) ، تمرير (كمبيوتر لوحي وهاتف)
• الفائض العمودي: مخفي

أضف وحدة التعليمات البرمجية أدناه وحدة المتجر

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

أضف كود CSS إلى الوحدة النمطية

سيحول رمز CSS التالي تلقائيًا وحدة المتجر المكونة من 8 منتجات إلى بطاقات تمرير المنتج سريعة الاستجابة:

<style>

@media all and (max-width: 980px) {
   
.product-swipe-cards ul.products {
display: grid !important;
grid-template-columns: repeat(8, 8.8%) !important;
grid-column-gap: 0.7%;
}

.product-swipe-cards .woocommerce ul.products::before {
content: none;
display: block;
}
  
.product-swipe-cards.et_pb_shop ul.products li.product {
width: 100% !important;
}

.product-swipe-cards .woocommerce {
width: 255% !important;
margin-left: 5%;
}
  
.product-swipe-cards::-webkit-scrollbar {
display: none;
}
  
.product-swipe-cards {
-ms-overflow-style: none;
}

}

</style>

مطابقة عدد المنتجات المختلفة

الآن ، إذا كنت تتطلع إلى إضافة منتجات أقل (أو أكثر) في وحدة متجرك ، يتغير الرمز قليلاً في مكانين. يجب تعديل هذين المكانين يدويًا لمطابقة النتيجة المرجوة. دعنا نغير عدد المنتجات في وحدة التسوق لدينا إلى "4" ، على سبيل المثال.

• عدد المنتجات: 4

عندما نعود إلى الكود الخاص بنا ، سنحتاج إلى تغييرين. أولاً ، سيتعين علينا تغيير أعمدة قالب الشبكة. بدلاً من 8 ، نستخدم 4 (نفس رقم عدد منتجاتنا). نعمل أيضًا على زيادة الحجم بالنسبة المئوية التي تشغلها هذه المنتجات في بطاقات تمرير منتجاتنا (كلما زادت المنتجات ، قلّت المساحة).

grid-template-columns: repeat(4, 14%) !important;

بعد ذلك ، سنقوم أيضًا بتعديل عرض الحاوية التي توضع فيها المنتجات. بالنسبة إلى 4 منتجات ، هذا يساوي 150٪. لم يتم تعيين هذه القيم في حجر ، بل يتم تحقيقها من خلال اللعب وإيجاد تناغم بين أعمدة قالب الشبكة وعرض الحاوية. للعثور على التوازن الصحيح ، قم بالتبديل إلى عرض الجوال داخل Visual Builder وقم بتعديل القيم بعناية أثناء عرض نتيجة هذه التغييرات.

width: 150% !important;

إضافة Scroll Snapping

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

scroll-snap-align: start

سنقوم أيضًا بتمكين التقاط التمرير في وحدة المتجر الخاصة بنا عن طريق إضافة السطر التالي من كود CSS:

scroll-snap-type: x mandatory

أعد استخدام وحدة المتجر لعرض الفئات الأخرى

استنساخ صف كامل مرة واحدة

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

حذف وحدة التعليمات البرمجية في صف مكرر

طالما أن وحدة Shop Module الخاصة بك تحتوي على نفس فئة CSS كما كانت في السابق ، فستعمل وحدة رمز واحدة. انطلق واحذف وحدة الشفرة في صفك المكرر.

استنساخ صف مكرر بقدر ما هو مطلوب

واستنساخ الصف المكرر الآن عدة مرات حسب الحاجة ، اعتمادًا على عدد مجموعات بطاقات تمرير المنتج التي تريد عرضها على صفحتك المقصودة!

4. حفظ تغييرات الصفحة وعرض النتيجة على الجهاز المحمول

تأكد من أنه بمجرد الانتهاء من إضافة بطاقات تمرير المنتج ، تقوم بحفظ صفحتك قبل الخروج من Visual Builder والانتهاء من ذلك!

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

متحرك

سطح المكتب

افكار اخيرة

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

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

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