ما هي تفاصيل Shopify سائل؟ ملخص سريع للأساسيات

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

لكن أحد الجوانب الحاسمة ل Shopify هي أداة إنشاء المواقع سهلة الاستخدام مع الآلاف من السمات و Shopify تطبيقات تكامل للاختيار من بينها. 

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

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

مهتم؟ انضم إليّ وأنا أحاول الإجابة على السؤال: ما هو Shopify سائل؟ دعنا نتعمق!

ما هي تفاصيل Shopify سائل؟

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

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

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

فكيف يعمل هذا؟

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

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

Shopify يعمل السائل كوسيط بين متجرك و Shopifyخادم ، مما يتيح Liquid لسحب البيانات من Shopifyالخادم الخاص بك وتسليمه إلى متجرك. يمكن للسائل أن يطلب ثلاثة أنواع رئيسية من البيانات:

1. الأجسام
2. مصطلحات البحث
3. فلاتر

أدناه ، سوف نستكشف كل نوع بيانات بدوره:

الأجسام السائلة

الكائنات تشبه مكتبة الوظائف أو المحتوى ؛ داخل كل كائن ، هناك خصائص مختلفة. 

إذا لم تكن معتادًا على مفهوم الأشياء ، فإليك نظرة عامة موجزة:

الكائن هو مفهوم أساسي في البرمجة. يتكون الكائن من عنصرين: 

1. الخصائص التي تحدد حالة الكائن
2. الوظائف التي تحدد سلوك الكائن

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

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

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

{{Blog.title}} 

دعنا نقسم هذا:

• هنا، ' مدونة'هو المفعول به. 
• الخاصية التي نريدها داخل هذا مكتبة تم تمييزه بـ "الاسم". 
• تشير '.' يخبر Liquid كيف ترتبط هاتان الجزيرتان من البيانات. 
• الأقواس المزدوجة عبارة عن بنية سائلة تحدد {{المحتوى / الإخراج الذي تريده}} الذي تريده من ملف Shopify الخادم. 

العلامات السائلة

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

إليك ما قد يبدو عليه هذا:

{٪ if blog.title == 'احتفال'٪}

** صورة HTML **

{٪ إنهاء إذا ٪}

قد يبدو هذا معقدًا ، ولكن إذا قمنا بتقسيمه ، فمن السهل جدًا فهم:

• تستخدم العلامات بناء جملة مختلفًا قليلاً عن الكائنات التي تبدو هكذا  {٪…٪}.
• العلامة الأولى {٪ if blog.title == 'احتفال'٪} يخبر Liquid ما هو الشرط الذي يجب الوفاء به قبل طلب المحتوى من الخادم.
• يتم تحديد الشرط الذي طلبناه بواسطة عبارة "if". إذا كنت معتادًا على الترميز ، فستعرف أن عبارات "if" تعمل من خلال مقارنة جزأين أو أكثر من البيانات مع بعضها البعض. إذا تطابقوا ، فسوف ينتقل إلى السطر التالي في الكود الخاص بنا. هنا،  إذا blog.title == "احتفال" نطلب من Liquid التحقق مما إذا كان عنوان مدونتنا يحتوي على كلمة "احتفال". إذا حدث ذلك ، فسوف ينزل إلى السطر التالي من الكود الخاص بنا. إذا لم يحدث ذلك ، فلن يقوم Liquid بإرجاع أي محتوى.
• في هذا المثال ، إذا كان لدينا عنوان مدونة يحتوي على كلمة "احتفال" ، فسيقوم Liquid بسحب وعرض HTML لصورتنا.
• بمجرد القيام بذلك ، ينتقل إلى السطر التالي {٪ إنهاء إذا ٪}، الذي ينهي برنامجنا.

هذا مجرد مثال واحد لما يمكنك فعله بالعلامات. Shopify السائل له علامات لـ:

• مراقبة عندما يتم تنفيذ الكود
• أعاد/تكرير (كرر) كتلة من التعليمات البرمجية
• العرض ترميز HTML معين
• إنشاء متغيرات جديدة.

مرشحات سائلة

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

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

{{ blog.title | uppercase }}

• صيغة المرشحات هي {{…}}.
• هنا ، خاصية الكائن التي نبحث عنها هي "عنوان المدونة'.
• المرشح الذي نطبقه هو الأحرف الكبيرة.
• تشير '|' يفصل بين المدخلات والمخرجات من التعليمات البرمجية الخاصة بنا.

الآن ، عندما ينظر المستخدم إلى عنوان مدونتنا ، سيظهر بأحرف كبيرة.

فوائد Shopify سائل

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

ومع ذلك ، إذا لم تكن مطور ويب ، فأنت بدلاً من ذلك مجرد مالك متجر تتطلع إلى تجميل متجرك ، فهناك فوائد لك أيضًا:

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

متطلبات الدراسة

إذن ما الذي تحتاجه للبدء في استخدامه Shopify سائل؟

إذا كان لديك بالفعل Shopify متجر, Shopify سيكون السائل متاحًا لك لاستخدامه مجانًا. سنناقش كيف يمكنك العثور على Liquid أدناه. ولكن كل ما تحتاج إلى معرفته الآن هو أن كل موقع تم إنشاؤه على Shopify تم إنشاؤه باستخدام Liquid ، لذا يمكنك البدء في تعديل هذا الرمز يدويًا بمجرد إنشاء موقع.

ومع ذلك ، إذا لم يكن لديك ملف Shopify متجر ، ستحتاج إلى إنشاء واحدة لبدء اللعب مع Liquid. 

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

الآن بعد أن أصبح لديك الهيكل الأساسي لمتجرك عبر الإنترنت ، يمكنك سحب هذه البيانات من ملف Shopify الخادم وتخصيصه باستخدام السائل (المزيد حول هذا أدناه). 

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

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

بدء مع Shopify سائل

لذا ، باستخدام ما تعلمناه حتى الآن ، دعنا نرى كيف يمكننا المضي قدمًا في تعديل Shopify السمة باستخدام السائل. 

للوصول إلى السائل ، اتبع الخطوات التالية:

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

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

للتوضيح ، دعنا نمر بمثال سهل:

تغيير حجم الصور باستخدام Shopify سائل

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

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

إذًا ، كيف يمكننا تغيير حجم الصورة؟

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

• منتجاتنا
• متغيرات المنتج
• البنود
• المجموعات
• مقالات

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

في هذا المثال ، سنستهدف صور مقالات المدونة الخاصة بنا.

هذا هو الكود الأساسي:

{{ blog.articles.image | img_url: ‘100×100' }}

انفصال:

• المدونة هو الشيء الذي نبحث عنه ، ونريد الخاصية مقالات، حيث يحتوي هذا على جميع المقالات الموجودة في مدونتنا. على وجه التحديد ، نريد تغيير الصور في مقالات المدونة الخاصة بنا ، لذلك نحن نستهدف ملف صورة الملكية داخل المقالات.
• الآن نطبق المرشح img_url. إذا تركنا هذا كما هو ، فسيعرض ببساطة صورة مسحوبة من عنوان URL الذي قدمه ملف Shopify الخادم. ومع ذلك ، سنقدم أيضًا معلمة إضافية: حجم الصورة 100 × 100' (لاحظ أن Shopify يستخدم البكسل لتحديد نطاقات الحجم).
• أخيرًا ، نلتف الكود الخاص بنا باستخدام البنية السائلة ثنائية القوس ، والتي تُستخدم في المرشحات. 

وانتهينا! يجب أن يعيد هذا الإخراج لجميع صور المدونة الخاصة بنا ، مما يجعلها بحجم 100 × 100 بكسل.

النصائح والوجبات الجاهزة

آمل أن تكون قد قرأت هذا المقال ، فلديك الآن إجابة على السؤال: ما هو Shopify سائل؟

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

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

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

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

هذا كل شيء مني. عليك. اسمحوا لي أن أعرف عن تجاربك مع Shopify السائل في التعليقات أدناه!