با موتور مایع یک تم Shopify بسازید

محتوا

• پرونده ها و پوشه ها
• نگاشتن URL ها به الگوها
• مایع: اصول اولیه
• درک محصول. مایع
• خروجی
• منطق
• فیلترها
• بعدی چیست؟
• منابع و الهام بیشتر

طی چند هفته گذشته ، من در حال ساخت موضوع Shopify برای Viewport Industries ، شرکت Elliot Jay Stocks و من سال گذشته بودیم. ما Shopify را به چند دلیل انتخاب کردیم:

1. به ما امکان می دهد هم محصولات دیجیتال و هم محصولات فیزیکی را بفروشیم
2. این کاملاً میزبانی شده است ، به این معنی که هیچ سروری نگران نباشید
3. این از تعدادی درگاه پرداخت پشتیبانی می کند که به زیبایی با بانک ما ادغام می شوند
4. این موضوع مبتنی بر موضوع است ، به این معنی که ما می توانیم به راحتی از HTML ، CSS و JavaScript سایت موجود خود استفاده مجدد کنیم

Shopify از یک موتور الگویی به نام Liquid استفاده می کند تا داده ها را از فروشگاه شما به قالب های شما وارد کند. مایع شاید یکی از مواد تشکیل دهنده تم Shopify باشد که قبلاً از آن استفاده نکرده اید و می تواند جایگزین شود. اما خبر خوب این است که شروع کار در واقع آنقدرها هم سخت نیست.

اگر تاکنون از Smarty ، ERB یا Twig استفاده کرده اید ، موارد زیر برای شما آشنا خواهد بود. در غیر اینصورت ، نگران نباشید: فقط یادگیری چند قانون ساده است. به محض اینکه مهارت های مایع را به جعبه ابزار توسعه وب خود اضافه کردید ، می توانید در کمترین زمان برای مشتری ها تم ایجاد کنید.

پرونده ها و پوشه ها

مضامین Shopify چیزی بیش از تعدادی پرونده (پرونده های HTML با پسوند مایع ، CSS ، JS ، تصاویر و غیره) و پوشه ها نیست. مضامین می توانند هر طور که شما بخواهید به نظر برسند و کار کنند: در واقع هیچ محدودیتی وجود ندارد. در اینجا ساختار اصلی یک موضوع وجود دارد:

• دارایی های
• پیکربندی
• چیدمان ها
• موضوع. مایع
• قطعه ها
• الگوها
• 404. مایع
• مقاله. مایع
• وبلاگ. مایع
• سبد خرید. مایع
• مجموعه. مایع
• فهرست. مایع
• صفحه. مایع
• محصول. مایع
• جستجو. مایع

با استفاده از این فایل ها می توانید ابتدایی ترین مضامین را ایجاد کنید. البته ، شما احتمالاً می خواهید برخی از CSS ، JavaScript و چند تصویر را اضافه کنید. این موارد را در پوشه دارایی قرار می دهید. (لازم به ذکر است که در حال حاضر زیر پوشه ها در پوشه دارایی خود مجاز نیستند.)

برای کسب اطلاعات بیشتر در مورد نحوه کار تم ها ، و اطلاعاتی در مورد پوشه های پیکربندی و اسنیپت ها ، توصیه می کنم تم را از Scratch و تنظیمات Theme در Shopify Wiki بخوانید.

در غیر اینصورت می توانید در برنامه شریک رایگان ثبت نام کنید ، یک فروشگاه آزمایشی ایجاد کنید و یکی از بسیاری از موضوعات رایگان موجود در منطقه مدیریت فروشگاه آزمایشگاه خود را بازبینی کنید - فقط به ویرایشگر موضوع واقع در منوی موضوعات بروید.

نگاشتن URL ها به الگوها

تم های Shopify با نگاشتن URL فعلی به یک الگوی خاص کار می کنند. به عنوان مثال ، اگر ما در حال مشاهده محصولی هستیم که دارای URL زیر است ...

http://www.unitedpixelworkers.com/products/indianapolis

... سپس Shopify می داند که از شما استفاده کند محصول. مایع قالب. به همین دلیل است که فقط باید همیشه از نام پرونده های ذکر شده در بالا برای الگوهای خود استفاده کنید.

علاوه بر این که Shopify می داند کدام الگو را در رابطه با URL فعلی نمایش دهد ، تعدادی از متغیرهای بسیار خاص را در دسترس ما قرار می دهد. این موارد به عنوان "متغیرهای الگو" شناخته می شوند و به ما امکان می دهند داده ها را در الگوهای خود نمایش دهیم.

به عنوان مثال در الگوی مایع product.liquid ما به نام مناسب دسترسی داریم تولید - محصول متغیر. این بدان معنی است که ما می توانیم نام ، توضیحات ، قیمت و در دسترس بودن محصول خود را در الگوی خود قرار دهیم. ما از ترکیب متغیرهای مایع و الگو برای پر کردن الگوهای خود با داده های مربوط به محصولات خود استفاده خواهیم کرد.

برای مشاهده لیست کامل متغیرهای الگوی موجود ، از صفحه تقلب Shopify Cheap Sheet Mark Dunkley دیدن کنید.

مایع: اصول اولیه

مایع اینجاست تا زندگی ما به عنوان طراحان زمینه را آسان تر کند. یکی از روشهای اصلی انجام این کار استفاده از طرح بندی است. طرح بندی ها برای درج عناصر صفحه معمول مانند سرصفحه ، ناوبری اصلی ، پاورقی و ... ایده آل هستند.

در ساختار پوشه من در بالا ، فایلی را مشاهده خواهید کرد به نام موضوع. مایع در پوشه طرح بندی ها. شما می توانید theme.liquid را به عنوان الگوی اصلی ما در نظر بگیرید. همه الگوهای دیگر ما مانند product.liquid در داخل این الگوی اصلی ارائه شده اند. در صورت تمایل می توانید بیش از یک طرح داشته باشید ، اما طرح پیش فرض را همیشه باید theme.liquid بنامید.

من پرونده theme.liquid United Pixelworkers را ندیده ام ، اما می توانید تصور کنید که حاوی علامت گذاری برای مناطق مشخص شده با قرمز در زیر باشد.

شکل اولیه مایع ممکن است به این صورت باشد:

1. ! DOCTYPE html>
2. html>
3. سر>
4. {{content_for_header}}
5. عنوان> عنوان صفحه به اینجا می رود / عنوان>
6. / سر>
7. بدن>
8. {{content_for_layout}}
9. / بدن>
10. / html>

دو عبارت را می بینید که با پرانتزهای دو حلقه ای پیچیده شده اند: {{content_for_header}} و {{content_for_layout}}. اینها اولین نمونه های مایع در عمل هستند.

Shopify غالباً از {{content_for_header}} برای افزودن پرونده های خاص به بخش head> یک سند استفاده می کند: برای مثال ، افزودن کد رهگیری. {{content_for_layout}} جایی است که محتوای الگوی ما با نگاشت URL نشان داده می شود. به عنوان مثال ، اگر ما در حال مشاهده یک صفحه محصول هستیم ، فایل product.liquid ما جایگزین {{content_for_layout}} در پرونده طرح ما می شود.

درک محصول. مایع

اکنون که اصول طرح بندی را مرور کردیم ، وقت آن است که به الگویی نگاه کنیم.فروشگاه ها همه چیز در مورد محصولات هستند ، بنابراین اجازه دهید بررسی کنیم محصول. مایع.

در اینجا یک مثال بسیار ساده اما کاربردی از یک الگوی product.liquid وجود دارد.

1. h2> {{product.title}} / h2>
2. {{ توضیحات محصول }}
3. {٪ در صورت محصول. موجود٪}
4. فرم اقدام = "/ سبد خرید / افزودن" روش = "ارسال">
5. id = "product-select" name = 'id'> را انتخاب کنید
6. {٪ برای نوع محصول. انواع مختلف}}
7. option value = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
8. {٪ endfor٪}
9. / را انتخاب کنید>
10. نوع ورودی = "ارسال" نام = "افزودن" مقدار = "افزودن به سبد خرید" id = "خرید" />
11. / فرم>
12. {٪٪}}
13. p> این محصول در دسترس نیست / p>
14. {٪ endif٪}

تعدادی از مفاهیم اصلی مایع در اینجا کار می کنند. بیایید به ترتیب آنها را بررسی کنیم.

خروجی

خط اول کد شامل این عبارت است {{product.title}}. هنگام ارائه ، با این کار عنوان محصول تولید می شود ، همانطور که اکنون می دانید توسط URL تعیین می شود. در مثال United Pixelworkers در زیر ، عنوان محصول به سادگی 'Indianapolis' است.

Liquid از قالب نحو نقطه استفاده می کند. در این مثال ، {{product.title}} برابر با متغیر الگوی محصول و ویژگی عنوان آن است. با استفاده از همان روش می توانیم توضیحات محصول را تولید کنیم {{ توضیحات محصول }}.

این در اصطلاح مایع به عنوان شناخته شده است خروجی. تمام خروجی ها با پرانتزهای دوتایی فرفری مشخص می شوند ، به شرح زیر: {{your_output}}.

منطق

در سطر بعدی کد ، عبارتی را می بینید که در یک بریس پیچ قرار دارد و به دنبال آن٪: در این حالت ، {٪ در صورت محصول. موجود٪}. این یک مفهوم مهم دیگر در Liquid است که به عنوان شناخته می شود منطق. در پایین ، عبارات {٪ else٪} و در آخر عبارات {٪ endif٪} را مشاهده خواهید کرد.

این اگر بیانیه ما را قادر می سازد آنچه را که الگوی ما نمایش می دهد ، براساس یک یا چند شرط تعیین کنیم: در این حالت ، خواه محصول ما در دسترس باشد یا نه. به طور موثر این جمله این است که: "اگر محصول ما در دسترس است ، اطلاعات مربوط به آن را نشان دهید. در غیر این صورت پیامی را به کاربر اطلاع دهید که موجودی شما موجود نیست ".

تمام جملات منطقی موجود در مایع از نماد درصد مهاربند مجعد استفاده می کنند ، یعنی {٪ در صورت if٪}. فقط به یاد داشته باشید که بیانیه های خود را به درستی ببندید ، در غیر این صورت به مشکل برمی خورید. مثلا:

1. {٪ در صورت محصول. موجود٪}
2. دکمه افزودن به سبد خرید را در اینجا نشان دهید
3. {٪٪}}
4. پیام مربوط به زمان عرضه بعدی محصول را نمایش دهید
5. {٪ endif٪}

فیلترها

Liquid به ما امکان می دهد تا به روش های مختلف خروجی خود را دستکاری کنیم. یکی از این موارد استفاده از فیلترها است. محتوایی که وارد فیلتر می شود ، انتهای دیگر آن را به روشی خاص تغییر می دهد.

با مشاهده محصول. مثال مایع بالا ، متوجه خواهید شد {پول}. نوع اصطلاحی است که برای توصیف تنوع محصول استفاده می شود: به عنوان مثال ، رنگ ها و اندازه های مختلف. آنچه در اینجا جالب است این است که ما از فیلتر برای تغییر قیمت تولید استفاده می کنیم - در این مورد ، با استفاده از فیلتر پول. این باعث می شود که نماد واحد پول فروشگاه به جلوی قیمت اضافه شود.

فیلترهای دیگر شامل strip_html، که هر برچسب HTML را از یک متن مشخص حذف می کند و ucase ، که آن را به حروف بزرگ تبدیل خواهد کرد.

همچنین می توانید فیلترها را با هم پیوند دهید. مثلا:

1. {Article.content}

در این مثال ، ما ویژگی محتوای متغیر الگو مقاله را می گیریم و آن را به فیلتر strip_html و در آخر به فیلتر کوتاه منتقل می کنیم. مشاهده خواهید کرد که فیلتر کوتاه به ما اجازه می دهد تا مشخص کنیم که خروجی نهایی چه مدت طول می کشد: در این حالت 20 حرف است.

فیلترها همچنین به ما امکان می دهند سریع کار ایجاد عناصر تصویر و اسکریپت در الگوها را انجام دهیم. در اینجا یک روش بسیار سریع برای استفاده از فیلتر برای خروج یک تصویر با برچسب alt مرتبط وجود دارد:

1. {asset_url}

استفاده از این مورد در قالب Shopify منجر به ارائه عنصر img زیر در الگوی ما می شود:

1. img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "آرم سایت" />

asset_url فیلتر بسیار مفید است زیرا مسیر کامل را به موضوع فعلی بازمی گرداند دارایی های پوشه استفاده از این فیلتر این امکان را برای شما فراهم می کند تا بتوانید طرح زمینه خود را در چندین فروشگاه استفاده کنید و دیگر نگران مسیرها نباشید.

بعدی چیست؟

امیدوارم که این چند مثال به شما نشان دهند که مایع به این پیچیدگی نیست. مطمئناً شما کارهای بیشتری می توانید انجام دهید ، اما با تسلط بر خروجی ، منطق و فیلترها ، شما در درک بیشتر مواردی که برای ساخت یک تم Shopify نیاز دارید ، قرار دارید.

منابع و الهام بیشتر

• مقدماتی مفید Shopify
• Mark Dunkley’s Shopify Cheet Sheet
• Blankify: یک تم آغازگر Shopify
• آموزش: ساخت یک تم از ابتدا
• برنامه شریک Shopify
• 40 فروشگاه الهام بخش Shopify