শপিফাই লিকুইডে কার্যকর সিএসএস হুক তৈরি করা
শপিফাই স্টোরের ডিজাইন কাস্টমাইজ করার ক্ষেত্রে লিকুইড (Liquid) টেমপ্লেটগুলি একটি মজবুত ভিত্তি সরবরাহ করে। তবে কখনও কখনও নির্দিষ্ট স্টাইলিংয়ের জন্য কোডে হুক (hook) যুক্ত করার প্রয়োজন হতে পারে। এই হুকগুলো লেআউটের বিভিন্ন অংশে কাস্টম CSS ক্লাস প্রয়োগ করতে সহায়তা করে, যার ফলে স্টাইলশিট আরও সংগঠিত এবং পরিচালনাযোগ্য হয়ে ওঠে।
আমরা অনেকেই CSS এবং JavaScript হুকের জন্য <body> ক্লাস ব্যবহার করি। ওয়ার্ডপ্রেসের মতোই, শপিফাইতে <body> এলিমেন্টে বেশ কয়েকটি দরকারী ক্লাস যুক্ত করা যায় এবং এটি বেশ সহজ।
কার্যকর হুক তৈরির পদ্ধতি:
প্রধান (বা বিকল্প) লেআউট ফাইলে <body> তে কিছু উপকারী ক্লাস যুক্ত করার কিছু ধারণা-
বর্তমানে রেন্ডার করা টেম্পলেটের নাম <body> ক্লাসে যুক্ত করা
<body class="{{ template | handleize }}">এই উদাহরণে, আমরা বর্তমানে ব্যবহৃত টেমপ্লেটের নাম পেতে ‘ template’ ব্যবহার করেছি। এর কিছু উদাহরণ হলঃ
<body class="index">
<body class="product">
<body class="collection">এটি বিশেষভাবে উপকারী যখন একটি নির্দিষ্ট টেম্পলেট লক্ষ্য করতে হবে।
বর্তমানে রেন্ডার করা প্রোডাক্ট হ্যান্ডেল <body> ক্লাসে যুক্ত করাঃ
যখন কোন সিংগেল প্রোডাক্ট পেইজ ভিউ করা হয় তখন এর টেমপ্লেট নামের পাশাপাশি প্রোডাক্ট হ্যান্ডেল নেইম যোগ করার প্রয়োজন হতে পারে। <body> এলিমেন্ট কে clean & readable রাখতে আমরা একটি if স্টেটমেন্ট ব্যবহার করে প্রোডাক্টের পৃষ্ঠাটি দেখার সময় শুধুমাত্র প্রোডাক্ট হ্যান্ডেল যুক্ত করতে পারি:
<body class="{{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}">এর কিছু উদাহরণ হলঃ
<body class="product leather-anchor">এখানে `product` হল বর্তমানে রেন্ডার করা টেমপ্লেট নেইম এবং `leather-anchor` হল বর্তমান প্রোডাক্ট এর হ্যান্ডেল নেইম।
যদি আপনি বিকল্প প্রোডাক্ট টেমপ্লেট (alternative template) ব্যবহার করেন তবে আপনি contains অপারেটর ব্যবহার করতে পারেন:
<body class="{{ template }}{% if template contains "product" %} {{ product.handle }}{% endif %}">বর্তমান পৃষ্ঠার শিরোনাম (page title) <body> ক্লাসে যুক্ত করাঃ
কিছু থিম একটি আইডি আকারে <body> এলিমেন্টে বর্তমান পৃষ্ঠার শিরোনাম (page title) যোগ করে, সেক্ষেত্রে উপরের কোডটি এখন নিম্নরূপ দেখাবে:
<body id="{{ page_title | handleize }}" class="{{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}">এই উদাহরণে, আমরা handleize লিকুইড ফিল্টার ব্যবহার করছি যাতে আইডি বা ক্লাস যা আমরা যুক্ত করছি তা URL নিরাপদ এবং CSS এবং JS ফাইলে রেফারেন্স করা সহজ হয়। উদাহরণস্বরূপ, এটি “Blue Jeans” শিরোনামকে “blue-jeans” এ পরিণত করবে।
বর্তমানে দেখা কালেকশন (collection) নাম <body> ক্লাসে যুক্ত করাঃ
<body> এলিমেন্ট কে clean & readable রাখতে আমরা একটি if স্টেটমেন্ট ব্যবহার করে কালেকশন (collection) নাম যুক্ত করতে পারি:
<body id="{{ page_title | handleize }}" class="{{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}{% if template == "collection" %} {{ collection.handle }}{% endif %}">আবারও আপনি যদি বিকল্প টেম্পলেট (alternative template) ব্যবহার করতে চান তাহলে contains অপারেটর ব্যবহার করতে পারেন।
সারসংক্ষেপঃ
আশা করি আপনি উপরের উদাহরণে Liquid কতটা flexible তা দেখেছেন। <body> উপাদানে বিভিন্ন ক্লাস যুক্ত করতে উপকারী হুক দেয় যা আমরা CSS এবং JavaScript এ ব্যবহার করতে পারি ।