كيفية إنشاء قسم موضوع Shopify الأول الخاص بك

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

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

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

ما هي أقسام الموضوع؟

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

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

يتم تضمين /sections الخاص بالسمة ، ويمكن تضمينها بشكل ثابت في ملفات تخطيط السمة (مثل الرأس والتذييل) ، أو يمكن إضافتها ديناميكيًا إلى أي قالب من محرر القوالب. للتعرف على المكونات المختلفة التي يمكن تمثيلها كأقسام ، يمكنك استكشاف دليل /sections الخاص بسمة Dawn.

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

القوالب والأقسام

أحد المتطلبات الأساسية لتعلم كيفية عمل الأقسام على موضوعات Shopify هو فهم نظام قوالب السمات الخاص بـ Shopify. باستخدام Online Store 2.0 ، يمكن تمثيل كل نوع صفحة كملف .json داخل دليل /templates لموضوع ما. يمكن للمطورين هيكلة كل نوع صفحة عن طريق تحديد الأقسام التي ستظهر افتراضيًا في ملفات قالب JSON هذه.

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

من الأمثلة الأساسية على الشكل الذي يمكن أن يبدو عليه ملف نموذج product.json :

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

أساسيات الأقسام

عند تطوير قالبك باستخدام الأقسام وقوالب JSON ، يمكنك التفكير في إنشاء ملفات قسم في فئتين متميزتين: أقسام الصفحة "الرئيسية" والمكونات المعيارية الفردية.

أقسام الصفحة الرئيسية

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

يمكنك الوصول إلى المتغيرات السائلة ، أو الكائنات ، داخل قسم ، بناءً على قالب الصفحة الذي تم تضمين القسم فيه. وهذا يعني أن القسم الذي سيتم عرضه داخل نموذج product.json سيكون قادرًا على الوصول إلى أي سمات product Liquid كائن ، يمثل المنتج الذي يتم عرض صفحته.

وبالمثل ، سيتمكن القسم المضمن في ملف collection.json من الوصول إلى جميع سمات كائن collection Liquid. يمكن لجميع الأقسام ، بغض النظر عن مكان ظهورها ، الوصول إلى أي من الكائنات العامة السائلة.

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

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

لعرض مثال على قسم من الصفحة الرئيسية ، يمكنك استكشاف ملف main-product.liquid في دليل /sections في Dawn ، أو أي من الأقسام مسبوقة بـ main في العنوان. كقاعدة عامة ، يجب عليك أيضًا تسمية أقسام الصفحة الرئيسية الخاصة بك مع main في العنوان لمساعدتك على التمييز بين أنواع الأقسام المختلفة.

أقسام معيارية

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

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

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

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

 "templates": ["product", "collection"]

تقبل سمة templates قائمة السلاسل التي تمثل نوع الصفحة.

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

إعدادات القسم

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

كما رأينا ، يتم تضمين الإعدادات في ملفات القسم ، داخل علامات {% schema %} ، والتي تشير إلى أن هذه هي الإعدادات التي يجب عرضها على واجهة المستخدم لمحرر السمات. يمكن رؤية مثال بسيط جدًا على ذلك مع قسم نص مخصص يمكن أن يبدو مثل:

في هذا المثال لدينا عنصرا HTML: عنصر عنوان وعنصر فقرة. يحتوي كل عنصر من هذه العناصر على محتوى ديناميكي أنشأناه باستخدام الكائن السائل section.settings . يسمح لنا كائن القسم هذا باسترداد قيم الإعداد من خلال الرجوع إلى المعرف الفريد للإعداد.

أسفل HTML والترميز السائل لدينا إعدادات القسم الخاصة بنا ، والمضمنة في علامات {% schema %} الخاصة بنا. يتم تمثيل كل إعداد بواسطة كائن ، حيث يمكننا تحديد id الإعداد type وكيف سيظهر على المحرر. للوصول إلى إعداد القسم في Liquid ، قم بإلحاق id القسم بالكائن السائل section.settings . نحدد أيضًا نوع الإعداد وكيف سيظهر في محرر السمات.

ضمن إعدادات علامات المخطط لدينا:

• يشير id إلى المتغير السائل الذي يتم تحديده
• type يحدد نوع المخرجات التي نقوم بإنشائها
• توفر label السياق المعروض على محرر السمة
• default يعيّن قيمة افتراضية

في هذا المثال ، قمت بإنشاء مربع text richtext ومربع نص منسق لجسمنا ، ولكن يمكنك إضافة مجموعة واسعة من أنواع الإخراج ، وفقًا لمتطلبات العميل. تشمل أنواع الإدخال الصالحة الأخرى image_picker و radio و video_url و font_picker .

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

الإعدادات المسبقة هي تكوينات افتراضية للأقسام وتتم إضافتها داخل علامات {% schema %} للقسم. في مثالنا البسيط ، يمكن أن تبدو الإعدادات المسبقة كما يلي:

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

بمجرد إضافته إلى مثالنا ، سيبدو قسم مربع النص المخصص كما يلي:

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

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

بما في ذلك أقسام على الصفحات

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

1. تضمين أقسام في قوالب JSON

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

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

في هذه الحالة ، نقوم بتعيين اسم للقسم ، recommendations ، ويتم استخدام خاصية type لتحديد أي ملف في دليل /sections section الذي نريد تضمينه.

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

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

2. تضمين أقسام كخيارات في جميع الصفحات

كما رأينا مع نصنا المخصص ، من الممكن إتاحة قسم في جميع صفحات السمة عندما تكون presets موجودة ضمن إعدادات schema .

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

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

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

3. استخدام علامات {٪ section٪} لإضافة أقسام ثابتة

تتيح لك علامة section السائل عرض قسم من دليل /sections في تخطيط سائل أو ملف قالب. يمكن أن تظهر هذه العلامة على النحو التالي:

 {% section 'header' %}

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

يتم استخدام هذا الأسلوب بشكل شائع للمحتوى والمكونات التي يجب أن تكون مرئية دائمًا مثل الرؤوس والتذييلات وأشرطة الإعلانات. لمشاهدة مثال على ذلك في Dawn ، يمكنك التحقق من ملف theme.l Liquid حيث تتم إضافة شريط الإعلانات الثابت وقسم الرأس وأقسام التذييل مع علامة section .

تمكين الإبداع

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

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