কেমন আছেন সবাই। আজকের এই ছোট্ট টিউটোরিয়ালে সবাইকে স্বাগতম। আজকে আমরা শপিফাই টেমপ্লেটিং ল্যাঙ্গুয়েজ কি সেটা নিয়ে আলোচনা করব। তো চলুন শুরু করা যাক। লিকুইড হলো রুবি বেসড একটি টেমপ্লেটিং ল্যাঙ্গুয়েজ যেটা শপিফাই ইউজ করে ডাইনামিক ডাটা জেনারেট করার জন্য। সেটা কিভাবে কাজ করে সেটা বোঝার জন্য চলুন প্রথমে আমরা একটু ব্যাকগ্রাউন্ড বোঝার চেষ্টা করি। 

Template Language: Liquid

ধরন, আমাদের একটি home.html ফাইল আছে এবং সেখানে দেখতে পাচ্ছেন টাইটেল ট্যাগের মধ্যে হোম টেক্সট আছে। এখন এই ফাইলটিকে ব্রাউজারে ওপেন করলে ব্রাউজার ট্যাবে হোম টেক্সট দেখতে পাবেন। আবার ধরন, about.html নামে আমাদের আরেকটি ফাইল আছে এবং সেখানেও টাইটেল ট্যাগের মধ্যে এবাউট টেক্সট আছে। এখন এই ফাইলটিকে ব্রাউজারে ওপেন করলে ব্রাউজার ট্যাবে একইভাবে about টেক্সট দেখতে পাবেন। তাহলে এখানে লক্ষ্যণীয় বিষয় হল আমরা পেজের টাইটেল গুলো ডায়নামিভাবে জেনারেট করতে পারছি না। বরং কোন পেজের টাইটেল কেমন হবে তার জন্য প্রত্যেকটা পেজে আলাদা ভাবে টাইটেল ট্যাগের ভেতরে বলে দিতে হচ্ছে।

এখন সেইম জিনিসটি শপিফাই তে কিভাবে কাজ করে সেটা একটু বোঝার চেষ্টা করুন।ধরন product.liquid নামে একটা ফাইল আছে এবং যেখানে প্রোডাক্টের টাইটেল, প্রাইস এবং ডেসক্রিপশন দেখার জন্য কিছু কোড আছে। এখন যদি আমরা ব্রাউজারে কোন প্রোডাক্টকে ওপেন করি তাহলে সেই প্রোডাক্টের টাইটেল, প্রাইস এবং ডেসক্রিপশন দেখতে পাবো। একইভাবে অন্য একটি প্রোডাক্ট কেউ ওপেন করলে সেইম জিনিসগুলোই আমরা দেখতে পাবো যেমনটি উপরের চিত্রে দেখা যাচ্ছে। এখানে লক্ষ্যণীয় বিষয় হল সেম কোড ব্যবহার করেই আমরা প্রত্যেকটা প্রোডাক্টের ইনফরমেশন গুলো দেখতে পাচ্ছি। এই কোডের ৩টি বৈশিষ্ট্য আমরা দেখতে পাচ্ছি - 

• কোডগুলো স্ট্যাটিক
• কোডগুলো প্লেইসহোল্ডার হিসেবে ব্যবহার হচ্ছে
• কোডগুলো প্রত্যেকটা প্রোডাক্ট এর ইনফরমেশন ডায়নামিক ভাবে জেনারেট করতে পারছে

তাহলে এখন আমরা টেমপ্লেট ল্যাঙ্গুয়েজকে এভাবে সংজ্ঞায়িত করতে পারে যে কিছু স্ট্যাটিক কোড যেগুলো প্লেইসহোল্ডার হিসেবে ব্যবহার হয় এবং ইনফরমেশন গুলো ডায়নামিক ভাবে জেনারেট করতে পারে। শপিফাই তে এই কোডগুলোকেই লিকুইড কোড বলা হয়।

Liquid basics: Building blocks

শপিফাই এর মেইন বিল্ডিং ব্লক মূলত তিনটি এবং এর লার্নিং কার্ভ অনেক ছোট। সুতরাং আপনি চাইলেই খুব সহজে এটি শিখতে পারেন। তাহলে চলুন দেখে নেওয়া যাক এর মেইনবিল্ডিং ব্লক গুলো -

• Objects - output shop data (শপের ডাটা প্রিন্ট করে)
• Filters - modify the output (প্রিন্ট করা ডাটা কে মডিফাই করতে পারে)
• Tags - define the logic that tells templates what to do (কোন টেমপ্লেট কে কি ধরনের কাজ করতে হবে অর্থাৎ লজিকগুলো কেমন হবে সেটি বলে দেয়)

Liquid delimiters

এবার চলুন দেখে নেওয়া যাক লিকুইড কোডের সিনট্যাক্স গুলো কেমন - 

• {%     %} - used for logic & control flow (ভেরিয়েবল এসাইন, ইটারেশন, কন্ডিশন ইত্যাদির জন্য ব্যবহার হয়)
• {{      }} - used for print(output) something (ডাটা প্রিন্ট করতে ব্যবহার করা হয়)
• |  - used for filter to modify output (আউটপুটকে মডিফাই করতে ব্যবহার করা হয়)

Liquid with examples

এবার চলুন এই ডেলিমিটার গুলোকে কিভাবে ব্যবহার করতে হয় 

Objects

সবকিছুকে অবজেক্ট আকারে চিন্তা করতে হয় যেমন প্রোডাক্ট এর ইনফরমেশন এর জন্য product,  কার্টের ইনফরমেশন এর জন্য cart অবজেক্ট ব্যবহার করতে হয়। আবার প্রত্যেকটা অবজেক্ট এর কিছু প্রপারটিস আছে যেমন - প্রোডাক্টের টাইটেল দেখার জন্য title,  প্রাইস এর জন্য price ইত্যাদি। প্রত্যেকটি অবজেক্টের প্রপারটিজ গুলোকে এক্সেস করতে ডট নোটেশন ব্যবহার করা হয়। নিচের কোডটি লক্ষ্য করুন 

{{ product.title }} - Bracelet

এখানে product হলো অবজেক্ট এবং title হলো তার প্রপার্টি। সুতরাং উপরের করতে রান করলে সেটি প্রোডাক্টের টাইটেল আউটপুট হিসেবে দেখাবে।

Filters

উপরের কোডটি প্রোডাক্টের টাইটেল দেখাচ্ছে  এবং টাইটেলটি Lowercase এ দেখাচ্ছে। কিন্তু আমরা যদি  টাইটেলটিকে Uppercase এ দেখাতে চাই তাহলে আমাদেরকে upcase নামে একটি ফিল্টার ইউজ করতে হবে। ফিল্টার ইউজ করার জন্য (।) Pipe সাইন ব্যবহার করতে হবে যেমন - 

{{ product.title | upcase }} - BRACELET

Tags

অনেক সময় দেখা যায় স্টোরে বা শপে কিছু প্রোডাক্ট এভেইলেবল নেই তখন আমরা কি করব অর্থাৎ আমরা চাচ্ছি যে যদি কোন প্রোডাক্ট available থাকে তাহলে available প্রিন্ট করবে। সেক্ষেত্রে আমরা নিচের কোডের মতো করে কন্ডিশন লিখতে পারি -

{% if product.available %}

<span>Available</span>

{% endif %}

Output:  Available

তো এই ছিল আজকের টিউটোরিয়াল। কেমন লাগলো সবাইকে ভালো লাগলেও জানাবেন খারাপ লাগলেও জানাবেন আর লাইক কমেন্ট এবং শেয়ার করতে ভুলবেন না। এতক্ষণ সাথে থাকার জন্য ধন্যবাদ সবাইকে।