Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

دعونا نصمم موضوع شوبيفي دعونا نصمم موضوع شوبيفي

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

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

لبدء تشغيل كتالوج ShopForest's شوبيفي، سيحصل مؤلفو كل نموذج مقبول على مكافأة $ 100 - حتى يكون هناك عشرة قوالب في الفئة.

يشتهر شوبيفي بمرونته في التصميم. انظر بعض الأمثلة.لقد أنشأ شوبيفي (وأطلقه في وقت لاحق كمصدر مفتوح) محرك القولبة السائل. يسمح السائل بحرية التصميم الكاملة للمصممين.

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

ما هو السائل؟

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

تم تطوير السائل في الأصل في Ruby للاستخدام مع شوبيفي وتم إصداره كمشروع مفتوح المصدر. منذ ذلك الحين، تم استخدامه في مشاريع روبي اون رويلس الأخرى، وتم نقله إلى PHP و javascript.

معاينة سريعة للسائل

دعونا ننظر إلى ما يلزم للبدء مع السائل.

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

ما الذي يجري أعلاه؟

Shopify banner

في السائل، هناك نوعان من العلامات: الخرج و الوسوم. الوسوم السائلة محاطة بأقواس معقوفة وعلامات النسبة المئوية؛ يحاط الخرج بقوسين متعرجين.

في المقتطف أعلاه، يكون السطر الأول من السائل: {٪ للمنتج في المنتجات٪} .... {٪ endfor٪} هذا مثال على وسم السائل. تدور الوسوم  فوق مجموعة من العناصر وتسمح لك بالعمل مع كل منها. إذا كنت قد استخدمت من قبل حلقات for في PHP، أو Ruby، أو javascript، أو (أدخل أي لغة برمجة هنا)، فإنها تعمل بنفس الطريقة في السائل.

السطر التالي من السائل في المقتطف أعلاه هو {{product.title}}. هذا مثال على خرج السائل. سيطلب ذلك عنوان المنتج وعرض النتيجة على الشاشة.

السطر التالي من السائل يقدم شيئًا جديدًا: {{product.price | money_with_currency}} هنا لدينا مثال على مرشح سائل. إنها تسمح لك بمعالجة سلسلة أو متغير معين. تأخذ المرشحات القيمة على يسارها وتفعل شيئًا ما بها. تأخذ المرشحات القيمة على يسارها وتفعل شيئًا ما بها. يسمى هذا الفلتر المحدد تنسيق -كـ- نقود؛ إنه يأخذ رقمًا، مسبوقاً بعلامة الدولار ويلفه برمز العملة الصحيح.

مثال بسيط:

يمكن أن تولد HTML التالية

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

ما الذي يقدمه السائل؟

من حيث الوسوم السائلة، بالإضافة إلى وسم for، فهناك العديد من الوسوم الأخرى. الأكثر شيوعا هي:

تعليق:

If/Else:

القضية

تحقق من القائمة الكاملة للعلامات.

يوفر السائل أيضًا الكثير من الفلاتر التي يمكنك استخدامها لارسال بياناتك. بعض النقاط الشائعة هي:

التمويل:

الضم

التاريخ:

تحقق من قائمة كاملة من المرشحات المتاحة.

تشريح موضوع شوبيفي

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

  1. مجلد الأصول: في مجلد الأصول تقوم بتخزين كافة الملفات التي تريد استخدامها مع السمة الخاصة بك. يتضمن ذلك جميع أوراق الأنماط والنصوص والصور والملفات الصوتية وما إلى ذلك التي ستستخدمها. في النماذج الخاصة بك، يمكنك الوصول إلى هذه الملفات باستخدام المرشح asset_url.
  2. مجلد التخطيط: يجب أن يحتوي هذا المجلد على ملف واحد يسمى theme.liquid. يحتفظ theme.liquid بالعناصر العالمية لموضوع شوبيفي الخاص بك. سيتم لف هذا الرمز حول جميع النماذج الأخرى في متجرك. في ما يلي مثال على موضوع أساسي للغاية.

    العناصر المطلوبة

    هناك نوعان من العناصر الهامة جدا التي يجب أن تكون موجودة في ملف theme.liquid. الأول هو {{محتوى من أجل الترويسة}}. يجب وضع هذا المتغير في رأس موضوع السائل الخاص بك. يسمح لـ شوبيفي بإدخال أي رمز ضروري في رأس المستند، مثل برنامج نصي لتتبع الإحصائيات. بالنسبة إلى أولئك المتآلفين مع WordPress، فإن هذا يشبه تمامًا الدالة wp_head ().

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

  3. مجلد الحافظات: يحتفظ هذا المجلد ببقية قوالب شوبيفي الخاصة بك. إنها تتكون من:
    1. index.liquid: يتم عرضه كصفحة فهرس رئيسية لمتجرك.
    2. product.liquid: سيستخدم كل منتج هذا القالب لعرض نفسه.
    3. cart.liquid: يعرض سلة تسوق المستخدم الحالية.
    4. collection.liquid: يعرض  لمجموعات من المنتجات.
    5. page.liquid: يعرض لأي صفحات ثابتة ربما أنشأها المتجر.
    6. blog.liquid: يعرض لأي مدونات شوبيفي للمحل.
    7. article.liquid: يعرض لأي مقالات مدونة ويتضمن نموذجًا لتقديم التعليقات.
    8. 404.liquid: يعرض  في أي وقت يعرض المتجر رقم 404.
    9. search.liquid: يعرض لنتائج بحث المتجر.

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

الهيكل الأساسي للبدء

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

هذا هو المكان الذي تأتي فيه الرؤية.

الرؤية - شوبيفي في صندوق

ما هي الرؤية؟

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

ما الذي أحتاجه لتشغيل الرؤية؟

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

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

ملخص

شوبيفي هي منصة التجارة الإلكترونية سريعة النمو بالفعل مع الآلاف من البائعين الذين يتطلعون إلى عرض منتجاتهم. باستخدام الرؤية، يمكنك الوصول إلى الأرضية المناسبة وتشغيلها في أسرع وقت. وتحصل النماذج العشرة الأولى التي تم نشرها على فئة Theemeforest's شوبيفي على 100 دولار إضافية. لذلك عليك أن تبدأ!

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

أفضل قوالب شوبيفي من ThemeForest .... حتى الآن!

  • Drifter

    التائه

    "يتميز مظهر شوبيفي الأنيق بخطوط بسيطة ولمسات تصميمية حديثة تعرض منتجاتك. وتتيح صناديق الضوء المخصصة من jQuery عرض منتجاتك بالتفصيل الكامل."

    عرض الموضوع

  • Drifter

    الوردي الخيالي

    "موضوع خيالي مع تصميم الويب 2.0 حديث".

    عرض الموضوع

  • اشترك في NETTUTS RSS Feed لمزيد من المقتنيات اليومية لتطوير الويب والمقالات.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.