مائع انجن کے ساتھ ایک شاپ تھیم بنائیں

مواد

• تھیم فائلیں اور فولڈرز
• ٹیمپلیٹس میں یو آر ایل کی نقشہ سازی
• مائع: بنیادی باتیں
• product.liquid کو سمجھنا
• آؤٹ پٹ
• منطق
• فلٹرز
• اس کے بعد کیا ہے؟
• مزید وسائل اور پریرتا

پچھلے چند ہفتوں کے دوران ، میں ویوپورٹ انڈسٹریز کے لئے شاپ تھیم بنارہا ہوں ، کمپنی ایلیٹ جے اسٹاکس اور میں نے پچھلے سال تشکیل دی تھی۔ ہم نے کئی وجوہات کی بنا پر شاپائف کا انتخاب کیا:

1. یہ ہمیں ڈیجیٹل اور جسمانی دونوں طرح کی مصنوعات فروخت کرنے کی اجازت دیتا ہے
2. یہ مکمل طور پر میزبانی کی گئی ہے ، جس کی فکر کرنے کے لئے کوئی سرور نہیں ہے
3. یہ متعدد ادائیگی کے گیٹ ویز کی حمایت کرتا ہے جو ہمارے بینک کے ساتھ اچھی طرح سے مل جاتے ہیں
4. یہ تھیم پر مبنی ہے ، جس کا مطلب ہے کہ ہم اپنی موجودہ سائٹ کے HTML ، CSS اور جاوا اسکرپٹ کو آسانی سے دوبارہ استعمال کرسکتے ہیں

شاپائف آپ کے ٹیمپلیٹس میں اپنے اسٹور سے ڈیٹا آؤٹ پٹ کرنے کے لئے مائع نامی ایک ٹیمپلیٹ انجن کا استعمال کرتا ہے۔ مائع شاید شاپائف تھیم کا ایک جزو ہے جو آپ نے پہلے نہیں استعمال کیا ہے اور یہ نتیجہ برآمد ہوسکتا ہے۔ لیکن اچھی خبر یہ ہے کہ شروع کرنا اتنا مشکل نہیں ہے۔

اگر آپ نے کبھی اسمارٹی ، ای آر بی یا ٹوئگ استعمال کیا ہے تو ، اس کے بعد آپ کو معلوم ہوگا۔ اگر نہیں تو ، فکر نہ کریں: یہ کچھ آسان اصولوں کو سیکھنے کی بات ہے۔ ایک بار جب آپ نے اپنے ویب ڈویلپمنٹ ٹول کٹ میں مائع مہارتوں کو شامل کرلیا تو ، آپ کو مؤکلوں کے لئے وقت کی تیاری کرنا شروع کردیں گے۔

تھیم فائلیں اور فولڈرز

شاپائف تھیمز متعدد فائلوں (HTML فائلوں جن میں ایک توسیعی توسیع ، سی ایس ایس ، جے ایس ، تصاویر اور اسی طرح) اور فولڈرز سے زیادہ کچھ نہیں ہے۔ اگر آپ چاہیں تو تھیمز دیکھ سکتے ہیں اور کام کرسکتے ہیں: واقعی میں کوئی پابندی نہیں ہے۔ یہاں ایک تھیم کا بنیادی ڈھانچہ ہے:

• اثاثے
• تشکیل
• ترتیب
• theme.liquid
• ٹکڑوں
• ٹیمپلیٹس
• 404.liquid
• آرٹیکل ڈاٹ لیڈ
• blog.liquid
• cart.liquid
• collection.liquid
• index.liquid
• page.liquid
• product.liquid
• سرچ.liquid

ان فائلوں کی مدد سے ، آپ تھیمز کا سب سے بنیادی تشکیل دے سکتے ہیں۔ یقینا ، آپ شاید کچھ سی ایس ایس ، جاوا اسکرپٹ اور کچھ تصاویر شامل کرنا چاہیں گے۔ آپ نے یہ اثاثے والے فولڈر میں ڈال دیا۔ (قابل غور بات یہ ہے کہ فی الحال آپ کو اپنے اثاثے والے فولڈر میں ذیلی فولڈروں کی اجازت نہیں ہے۔)

تھیمز کیسے کام کرتے ہیں ، اور تشکیل اور ٹکڑوں کے فولڈروں کے بارے میں جاننے کے ل I ، میں شاپ ویکی پر سکریچ اور تھیم سیٹنگ سے تھیم پڑھنے کی سفارش کروں گا۔

متبادل کے طور پر آپ مفت پارٹنر پروگرام میں سائن اپ کرسکتے ہیں ، ٹیسٹ شاپ تشکیل دے سکتے ہیں اور اپنے ٹیسٹ شاپ کے ایڈمن ایریا سے دستیاب بہت سے مفت تھیموں میں سے ایک کا معائنہ کرسکتے ہیں - صرف تھیمس مینو میں واقع تھیم ایڈیٹر پر جائیں۔

ٹیمپلیٹس میں یو آر ایل کی نقشہ سازی

موجودہ URL کو کسی مخصوص ٹیمپلیٹ پر نقشہ لگا کر شاپ تھیمز کام کرتے ہیں۔ مثال کے طور پر ، اگر ہم کوئی پروڈکٹ دیکھ رہے ہیں جس میں درج ذیل یو آر ایل موجود ہے ...

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

... تب شاپائف کو اپنا استعمال کرنا معلوم ہوگا product.liquid سانچے. یہ اسی وجہ سے ہے کہ آپ اپنے ٹیمپلیٹس کے ل above مذکورہ فائل کے ناموں کو ہمیشہ استعمال کریں۔

موجودہ یو آر ایل کے سلسلے میں کونسا ٹیمپلیٹ ڈسپلے کرنا ہے یہ جاننے کے لئے شاپائف کے علاوہ ، یہ ہمارے لئے بہت سارے مخصوص متغیرات کو دستیاب کرتا ہے۔ یہ ’ٹیمپلیٹ متغیرات‘ کے نام سے مشہور ہیں اور ہمیں اپنے ٹیمپلیٹس میں ڈیٹا ظاہر کرنے کے اہل بناتے ہیں۔

مثال کے طور پر ہمارے product.liquid سانچے میں ، ہمارے پاس مناسب طریقے سے نام تک رسائی ہے پروڈکٹ متغیر اس کا مطلب ہے کہ ہم اپنے نمونے میں نام ، وضاحت ، قیمت اور اپنی مصنوع کی دستیابی پیدا کرسکتے ہیں۔ ہم اپنے ٹیمپلیٹس کو اپنی مصنوعات سے متعلق ڈیٹا کے ساتھ آباد کرنے کیلئے مائع اور ٹیمپلیٹ متغیرات کے امتزاج کا استعمال کریں گے۔

دستیاب ٹیمپلیٹ متغیرات کی مکمل فہرست کے لئے ، مارک ڈنکلے کی شاپف دھوکہ دہی شیٹ ملاحظہ کریں۔

مائع: بنیادی باتیں

مائع یہاں تھیم ڈیزائنرز کی حیثیت سے ہماری زندگی آسان بنانے کے لئے ہے۔ یہ کرنے کا ایک اہم طریقہ ترتیب کے استعمال سے ہے۔ ترتیب عام صفحے کے عناصر جیسے ہیڈر ، مین نیویگیشن ، فوٹر اور اسی طرح شامل کرنے کے ل for مثالی ہیں۔

میرے فولڈر ڈھانچے میں ، آپ کو ایک فائل نظر آئے گی theme.liquid لے آؤٹ فولڈر میں۔ آپ تھیم ڈاٹ لیڈ کے بارے میں ہمارے ماسٹر ٹیمپلیٹ کی طرح سوچ سکتے ہیں۔ ہمارے دوسرے سبھی ٹیمپلیٹس ، جیسے product.liquid ، کو اس ماسٹر ٹیمپلیٹ کے اندر پیش کیا گیا ہے۔ اگر آپ چاہیں تو آپ ایک سے زیادہ لے آؤٹ لے سکتے ہیں ، لیکن پہلے سے طے شدہ کو ہمیشہ تھیم کہا جانا چاہئے۔

میں نے یونائیٹڈ پکسل ورکرز کی تھیم ڈاٹ لیڈ فائل نہیں دیکھی ہے ، لیکن آپ تصور کرسکتے ہیں کہ اس میں نیچے سرخ رنگ میں بیان کردہ علاقوں کے لئے نشان لگا دیا گیا ہے۔

یہاں ایک بنیادی تھیم کی طرح ہے ۔دقیق ترتیب کی طرح نظر آسکتی ہے۔

1. ! ڈوکیٹ ایچ ٹی ایم ایل>
2. html>
3. سر>
4. {{Content_for_header}
5. عنوان> صفحہ عنوان یہاں جاتا ہے / عنوان>
6. / سر>
7. باڈی>
8. {{Content_for_layout}
9. / باڈی>
10. / html>

آپ کو ڈبل گھوبگھرالی منحنی خطوط وحدانی میں لپٹے ہوئے دو جملے دیکھیں گے: {{Content_for_header} اور {{Content_for_layout}. یہ عملی طور پر مائع کی ہماری پہلی مثال ہیں۔

شاپائف اکثر کسی دستاویز کے حص >ہ> حص sectionہ میں مخصوص فائلوں کو شامل کرنے کے لئے {{Content_for_header} uses کا استعمال کرتا ہے: مثال کے طور پر ، ٹریکنگ کوڈ میں اضافہ کرنا۔ URL {Content_for_layout}} وہ جگہ ہے جہاں ہمارے URL سے نقش شدہ ٹیمپلیٹ کا مواد ظاہر ہوگا۔ مثال کے طور پر ، اگر ہم کسی پروڈکٹ کا صفحہ دیکھ رہے ہیں تو ، ہماری product.liquid فائل ہماری ترتیب فائل میں {{Content_for_layout} replace کی جگہ لے لے گی۔

product.liquid کو سمجھنا

اب جب کہ ہم لے آؤٹ کی بنیادی باتوں سے گزر چکے ہیں ، اب وقت آگیا ہے کہ کسی ٹیمپلیٹ کو دیکھیں۔دکانیں سبھی مصنوعات کے بارے میں ہوتی ہیں ، تو آئیے دیکھتے ہیں product.liquid.

یہاں ایک پراڈکٹ ڈاٹ ٹیمپلیٹ کی ایک بہت ہی آسان لیکن عملی مثال ہے۔

1. h2> {{product.title} </ h2>
2. {{ مصنوعات کی وضاحت }}
3. product٪ اگر پروڈکٹ۔ دستیاب٪
4. form کارروائی = "/ کارٹ / شامل کریں" طریقہ = "پوسٹ">
5. id = "product-select" name = ’id’> منتخب کریں
6. .٪ مصنوعات میں مختلف قسم کے
7. آپشن ویلیو = "{{variant.id}}"> {{variant.title}} - iant variant.price} / آپشن>
8. end٪ endfor٪٪
9. / منتخب کریں>
10. ان پٹ کی قسم = "جمع" نام = "شامل" ویلیو = "ٹوکری میں شامل کریں" id = "ખરીદી" />
11. / form>
12. {٪٪٪
13. p> یہ مصنوعہ دستیاب نہیں ہے
14. {٪ ختم کرو اگر ٪}

یہاں کام پر بہت سے اہم مائع تصورات موجود ہیں۔ آئیے ان کو ترتیب سے دیکھیں۔

آؤٹ پٹ

کوڈ کی پہلی سطر میں جملہ موجود ہے . {product.title}. جب پیش کیا جاتا ہے ، تو اس پروڈکٹ کا عنوان برآمد ہوگا ، جس کا پتہ اب آپ جانتے ہو کہ URL کے ذریعہ طے ہوتا ہے۔ ذیل میں یونائیٹڈ پکسل ورکرز مثال میں ، مصنوع کا عنوان صرف ’انڈیانا پولس‘ ہے۔

مائع ڈاٹ نحو کی شکل کا استعمال کرتا ہے۔ اس مثال میں ، {{product.title} the پروڈکٹ ٹیمپلیٹ متغیر اور اس کے عنوان وصف کے برابر ہے۔ ہم استعمال کرتے ہوئے اسی طرح مصنوعات کی وضاحت آؤٹ پٹ کرسکتے ہیں {{ مصنوعات کی وضاحت }}.

اس کے طور پر مائع کی شرائط میں جانا جاتا ہے آؤٹ پٹ. تمام آؤٹ پٹ کو ڈبل گھوبگھرالی منحنی خطوط وحدانی کے ذریعہ بیان کیا گیا ہے ، جیسے: _ {your_output}}.

منطق

کوڈ کی اگلی لائن پر ، آپ کو گھوبگھرالی منحنی خطوط وحدانی میں بیان ملاحظہ کریں گے جس کے بعد٪:: اس معاملے میں ، product٪ اگر پروڈکٹ۔ دستیاب٪. مائع میں یہ ایک اور اہم تصور ہے جس کے نام سے جانا جاتا ہے منطق. مزید نیچے ، آپ کو {٪٪} اور آخر میں finally٪ endif٪} بیانات دیکھیں گے۔

یہ اگر بیان ایک یا ایک سے زیادہ شرائط پر مبنی ، جو ہمارا نمونہ دکھاتا ہے اس کی تعمیل کرنے کے قابل بناتا ہے: اس معاملے میں ، چاہے ہماری مصنوعات دستیاب ہو یا نہ ہو۔ مؤثر طریقے سے یہ کہہ رہا ہے ، "اگر ہماری مصنوع دستیاب ہے تو ، اس سے متعلق معلومات دکھائیں۔ بصورت دیگر کوئی پیغام دکھائیں جس سے صارف کو یہ معلوم ہوسکے کہ یہ ختم نہیں ہوا ہے۔

مائع میں تمام منطقی بیانات گھوبگھرالی منحنی خطوط وحدانی فیصد سنکیتن کا استعمال کرتے ہیں ، یعنی {٪ اگر…٪}۔ بس اپنے بیانات کو مناسب طریقے سے بند کرنا یاد رکھیں ، یا آپ پریشانی میں پڑ جائیں گے۔ مثال کے طور پر:

1. product٪ اگر پروڈکٹ۔ دستیاب٪
2. یہاں ٹوکری کے بٹن میں شامل دکھائیں
3. {٪٪٪
4. اگلی مصنوع کب دستیاب ہوگی اس کے بارے میں پیغام ڈسپلے کریں
5. {٪ ختم کرو اگر ٪}

فلٹرز

مائع ہمیں کئی طریقوں سے اپنی پیداوار میں ہیرا پھیری کرنے کے قابل بناتا ہے۔ ان میں سے ایک فلٹر استعمال کرنا ہے۔ وہ مواد جو فلٹر میں جاتا ہے وہ دوسرے کونے سے باہر نکل آئے گا جو ایک خاص طریقے سے تبدیل ہوتا ہے۔

مندرجہ بالا product.liquid مثال کو دیکھ کر ، آپ دیکھیں گے {رقم. مختلف حالت ایک اصطلاح ہے جو کسی مصنوع کی مختلف حالتوں کو بیان کرنے کے لئے استعمال ہوتی ہے: مثال کے طور پر ، مختلف رنگ اور سائز۔ یہاں دلچسپ بات یہ ہے کہ ہم پیسہ کے فلٹر کو استعمال کرکے - قیمتوں کے آؤٹ پٹ کو تبدیل کرنے کے لئے فلٹر کا استعمال کرتے ہیں۔ اس کے نتیجے میں دکان کے کرنسی کی علامت قیمت کے سامنے میں شامل ہوجائے گی۔

دوسرے فلٹرز میں شامل ہیں پٹی_ html، جو کسی متن کے ٹکڑے اور کسی بھی HTML ٹیگ کو ختم کردے گا یوکیس ، جو اسے اوپری صورت میں بدل دے گا۔

آپ فلٹرز میں بھی شامل ہوسکتے ہیں۔ مثال کے طور پر:

1. {آرٹیکلکونٹ}

اس مثال میں ، ہم آرٹیکل ٹیمپلیٹ متغیر کی مواد کی خصوصیت کو لے رہے ہیں اور اسے پٹی_ ایچ ٹی ایم ایل فلٹر اور آخر میں تراشنے والے فلٹر میں بھیج رہے ہیں۔ آپ دیکھیں گے کہ چھوٹا ہوا فلٹر ہمیں یہ بتانے کی اجازت دیتا ہے کہ ہم آخری پیداوار کب تک بننا چاہتے ہیں: اس معاملے میں ، 20 حرف۔

فلٹرز ہمیں ٹیمپلیٹس میں اسکرپٹ اور تصویری عناصر بنانے میں تیزی سے کام کرنے کی بھی اجازت دیتے ہیں۔ کسی وابستہ ایل ای ٹی ٹیگ کے ذریعہ کسی تصویر کو آؤٹ پٹ کرنے کے لئے فلٹر استعمال کرنے کا ایک بہت ہی تیز طریقہ یہ ہے:

1. set asset_url l

ہمارے شاپ تھیم میں اس کا استعمال کرنے کے نتیجے میں ہمارے نمونے میں درج ذیل img عنصر پیش کیا جائے گا۔

1. img src = "/ فائلیں / دکانیں / آپ_شپ_نمبر / اثاثے / لوگو.پینگ" alt = "سائٹ لوگو" />

asset_url فلٹر بہت مفید ہے کیوں کہ یہ موجودہ تھیم کی پوری راہ لوٹاتا ہے اثاثے فولڈر اس فلٹر کو استعمال کرنے سے آپ اپنے تھیم کو متعدد دکانوں پر لگانا ممکن بناتے ہیں اور راستوں کی فکر کرنے کی ضرورت نہیں ہے۔

اس کے بعد کیا ہے؟

امید ہے کہ ، ان چند مثالوں نے آپ کو دکھایا ہے کہ مائع اتنا پیچیدہ نہیں ہے۔ یقینا ، اس کے ساتھ آپ اور بھی بہت کچھ کرسکتے ہیں ، لیکن آؤٹ پٹ ، منطق اور فلٹرز کو عبور حاصل کرکے ، آپ شاپائف تھیم بنانے کے ل will آپ کو زیادہ تر چیزوں کو سمجھنے کے راستے میں ہیں۔

مزید وسائل اور پریرتا

• مفید اسٹارٹر شاپ ٹیوٹوریلز
• مارک ڈنکلے کی شاپ شیف شیٹ
• خالی جگہ: ایک شاپ اسٹارٹر تھیم
• سبق: شروع سے ایک تھیم کی تعمیر
• شاپائف پارٹنر پروگرام
• 40 متاثر کن شافائ اسٹورز