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

ডিজাইনারদের জন্য Magentoঃ পর্ব ৬

by
Read Time:11 minsLanguages:
This post is part of a series called Magento for Designers.
Magento for Designers: Part 5
Magento for Designers: Multi-Store Functionality

Bengali (বাংলা) translation by Nazmul Shuvo (you can also view the original English article)

Magento একটি অসম্ভব শক্তিশালী ই-কমার্স প্ল্যাটফর্ম। এই মিনিসিরিজে, আমরা শিখবো কিভাবে এই প্ল্যাটফর্মের সাথে শুরু করা যায়, টার্মিনোলজিগুলো জানবো, একটি স্টোর সেট করব এবং এটি সম্পর্কিত সকল পরিপ্রেক্ষিত জেনে পরিশেষে আমরা নিজেরা এটি কাস্টমাইজ করা শিখবো।

এই ষষ্ঠ পর্বে, আমরা অসংখ্য পাঠক কতৃক অনুরোধকৃত একটি ফিচার তৈরি করবঃ হোম পেইজে ফিচারড প্রোডাক্টের স্লাইডার। এক্সাইটেড? চলুন শুরু করা যাক!

পূর্ন সিরিজ


একটি দ্রুত সংক্ষিপ্তবৃত্তি

গত পর্বে, আমরা তৈরি করেছি প্রোডাক্ট ইনফরমেশন পেইজ এবং ভালোভাবে দেখেছি  যে একটি আদর্শ Magento থিমে কিভাবে ডাটা এক্সট্রাক্ট এবং প্রদর্শিত হয়।

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


আমরা আজকে কি তৈরি করব?

আজকে, আমরা সকল গুরুত্বপূর্ণ হোম পেইজ তৈরি করব। সব সময়ের মত, আমি এটিকে যতটা সম্ভব সহজ করব এবং বহিঃস্থ ফিচারগুলি বাদ দিবো। ভিন্ন ভিন্ন ষ্টোর এর হোম পেইজে ভিন্ন কন্টেন্ট থাকে। সবচাইতে পপুলার এবং স্পষ্টভাবে সবচাইতে অনুরোধকৃত একটি ফিচার হচ্ছে একটি JavaScript চালিত কন্টেন্ট স্লাইডার যা বিশেষ করে ফিচারড প্রোডাক্টগুলি ফিচারিং করে প্রদর্শিত করবে। আমি জানি এটি কৌতূহলোদ্দীপক এবং এটি শুরু করতে আপনার নিশ্পিশ করছে। চলুন শুরু করা যাক!


পেইজের লক্ষ

আমাদের অন্যান্য পেইজগুলির মতো, এই নির্দিষ্ট পেইজের জন্য আমাদের লক্ষ্য অপেক্ষাকৃত সহজ। আমরা চাই একটি সাধারণ স্লাইডার যা নির্দিষ্ট প্রোডাক্টগুলিকে একটি সুবিন্যস্ত স্লাইডারে প্রদর্শিত করবে। এজন্য, আমার যা দরকারি মনে হয়েছে সেই এলিমেন্টগুলির একটি সংক্ষিপ্ত তালিকা আমি তৈরি করেছিঃ

  • হোম পেইজে JavaScript স্লাইডার
  • প্রোডাক্টে মনোযোগ আকর্ষণের জন্য স্লাইডারের বামদিকে একটি আকর্ষনীয় ছবি প্রয়োজন
  • ডান পাশের অংশে, আমরা অন্তর্ভুক্ত করব প্রোডাক্টের নাম, মুল্য এবং একটি সংক্ষিপ্ত বিবরণ
  • স্লাইডারের মধ্যে একটি ছোট ন্যাভিগেশন বিভিন্ন স্লাইডের মধ্যে সুইচ করার জন্য
  • এবং সবচাইতে গুরুত্বপূর্ণ, ফিচার্ড আইটেমগুলি পেতে কোন এক্সটেনশন এর উপর নির্ভর না করা

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


বেসিক লুক

পেইজটি মূলত এই রকম দেখানোর কথাঃ 


ধাপ ১ - HTML

প্রথমে আমরা HTML দেখবো শুধু কন্টেন্ট অংশের জন্য। আমি অনুমান করছি আপনি HTML এবং CSS এ বেশ পটু তাই আমি মোটামুটি গুরুত্বপূর্ণ অংশে চলে যাচ্ছি।

এই অবস্থায়, এর সব একদমই বেসিক।  আমরা পুরো স্লাইডশো টি home-slideshow দিয়ে মোড়াচ্ছি এবং স্লাইডারের জন্য দায়ি JavaScript এর কাছে এটি পাস করতে যাচ্ছি।

প্রতিটা স্লাইড slide নামের একটি ডিভ দ্বারা মোড়ানো। তার ভিতরে আমাদের দুটি ফ্লোটেড কন্টেইনার আছেঃ একটি ইমেজ এর জন্য এবং দ্বিতীয়টি নিজ নিজ প্রোডাক্ট সম্পর্কিত  তথ্যের জন্য।

এই অংশের কাজ সম্পন্ন।  আমরা এখন স্টাইলিং অংশে যেতে পারি।


ধাপ ২ - CSS

এখানে ফ্যান্সি কিছু নেই। এলিমেন্টগুলি জায়গায় বসাতে খুবই বেসিক CSS ব্যবহার হয়েছে।

শুধুমাত্র যে পয়েন্টটি নোট করতে হবে তা হল activeSlide এর ঘোষণা । এই ক্লাসটি বর্তমান স্লাইডের সংশ্লিষ্ট ন্যাভিগেশন anchor এর জন্য নির্ধারন করা হয়েছে।


ধাপ ৩ - আমাদের ষ্টোর সেটিং

আমাদের প্রথমে যা করতে হবে তা হল একটি পৃথক ক্যাটাগরি সেটআপ যা আমরা আমাদের স্লাইডারে প্রদর্শিত হবে এমন সব প্রোডাক্টে বরাদ্দ করতে পারি। catalog মেনুতে ক্লিক করুন এবং তারপর categories এ। add new root category টি নির্বাচন করুন।

Magento for Designer: Part VIMagento for Designer: Part VIMagento for Designer: Part VI

Key এর নাম আপনার পছন্দমতো দিন যদি না চান তবে  is active ড্রপডাউনে no সিলেক্ট করুন। এটি সাইটের অন্য অংশে প্রদর্শিত হোক আমরা তা চাই না।

Magento for Designer: Part VIMagento for Designer: Part VIMagento for Designer: Part VI

একবার নতুন ক্যাটাগরি সেভ হয়ে গেলে, আপনি নির্ধারিত ID টি খুজে পাবেন। এটি নোট করুন। পরবর্তীতে আমাদের এটি প্রয়োজন হবে।


ধাপ ৪ - আমাদের কোর কোড তৈরি

প্রাসঙ্গিক তথ্য বের করার জন্য আমরা একটি সিঙ্গেল টেমপ্লেট ফাইল ব্যবহার করব, প্রয়োজনমত এটি ফরম্যাট করব এবং সবকিছুর প্রদর্শন নিশ্চিত করব। আপনার এই ফাইলের নাম এবং অবস্থান নির্বাচনে সম্পূর্ণ স্বাধীনতা রয়েছে কিন্তু এটি সহজ রাখার স্বার্থে, আমি এটির নাম দিয়েছি featured.phtml এবং এটি catalog/product/featured.phtml এ রেখেছি। মনে রাখবেন, এটি আপনার ট্যামপ্লেট ফোল্ডারে যাবে, আপনার লেআউট ফোল্ডারে নয়।

ফাইলের কন্টেন্ট দেখতে এমনই দেখায়। দৈর্ঘ্য নিয়ে ভাববেন না, কোডের করার পরে আমরা প্রতিটি অংশের কাজ দেখব।

এখানে প্রথম অংশঃ 

প্রথমে, আমাদের ক্যাটাগরির ID নির্দিষ্ট করতে হবে যেখান থেকে আমরা আমাদের প্রোডাক্ট টেনে আনতে চাই। আমাদের ক্ষেত্রে, ক্যাটাগরির যে ID আমরা তৈরি করেছি, এটি ২ হবার কথা।

এটি হয়ত দেখে একটু ঝামেলার মনে হচ্ছে কিন্তু আমি আশ্বাস দিচ্ছি, এটি খুবই সহজ। এটি অনির্দিষ্টকালের জন্য রাখাতে, আমরা অবশ্যই ভেরিয়েবল cat_id এর মাধ্যমে যে বিভাগটি প্রয়োজন সেই ক্যাটাগরির ID টি পাস করব এবং Magento কে মিলে যাওয়া প্রোডাক্টের নাম, মুল্য, ইমেজ এবং সংক্ষিপ্ত বিবরণ এর জন্য জিজ্ঞেস/অনুরোধ করব। এই মুহুর্তে, আপনি যদি MVC এবং Magento'র অন্যান্য এসপেক্ট এ ভালো দক্ষ না হোন তবে আমি উপদেশ দিবো অন্যান্য অংশ নিয়ে সময় নষ্ট না করার।

আমাদের আইটেমগুলি মিলে যাচ্ছে কিনা তা চেক করা প্রয়োজন, তাই না? আমরা এখানে তাই করতে যাচ্ছি। শুধু নিশ্চিত হোন যে আমাদের ম্যাচিং আইটেম আছে। যদি না থাকে, আমরা একটি এরর প্রদর্শন করব।

চলুন আমাদের প্রোডাক্টের কালেকশন লুপিং এর মাধ্যমে শুরু করি!

আপনি যদি এই সিরিজের পূর্ববর্তী পাঠ পড়ে থাকেন, এই কোড আপনার খুবই পরিচিত মনে হবে। আমরা Magento'র বেইকড ইন মেথডগুলি ব্যবহার করেছি আমাদের প্রোডাক্ট সংক্রান্ত মিডিয়া উদ্ধারের জন্য।

দ্বিতীয় স্নিপেট একটু ভিন্ন দেখাতে পারে কারণ কিছু বেশি বিমূর্ত পদ্ধতি ব্যবহারের পরিবর্তে, সরাসরি আমাদের প্রয়োজনীয় ডাটা পেতে আমি ব্যবহার করেছি closer-to-bone মেথড।

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

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

এবং এর সাথে, আমাদের বেইস PHP কোড সম্পূর্ণ হয়েছে।


ধাপ ৫ - JavaScript

এই সিরিজে আমাদের প্রধান ফোকাস যেহেতু এখানে Magento র উপর তাই এখানে সম্পূর্ণ নতুন করে কিছু করাটা বোকামি। আমাদের স্লাইডার তৈরি করতে আজকে আমরা একটি চমৎকার প্লাগইন ব্যবহার করতে যাচ্ছিঃ the jQuery Cycle plugin

কিন্তু প্রথমে, root/js এ গিয়ে একটি cirrus নামে ফোল্ডার তৈরি করুন। এখানে নির্মাণের জন্য বিভিন্ন মানুষের বিভিন্ন পদ্ধতি থাকে। আমি থিমের একটি JS পৃথকভাবে রাখতে পছন্দ করি তাদেরকে সোর্স থেকে নির্মাণের পরিবর্তে। আমাদের  প্রয়োজন হবে jQuery (১.৪ সম্ভবত) এর একটি কপি, cycle plugin এর সর্বশেষ সংস্করণ এবং একটি কাস্টম স্ক্রিপ্ট ফাইল, আমি যার নাম দিচ্ছি mocha

এখানে আমাদের JS ফাইলের কন্টেন্ট গুলি।

প্রথমে উপরে, লক্ষ করবেন যে আমরা সবকিছু একটি (function($) { //Code })(jQuery) ব্লকের ভিতর আবৃত করেছি। এটি নিশ্চিত করে যে jQuery অন্তর্ভুক্ত অন্যসব লাইব্রেরির সাথে কনফ্লিক্ট করবে না।

ডকুমেন্ট রেডি ব্লক, সবসময়ের মত, নিশ্চিত করে যে আমাদের কোড পুরো পেইজের সকল এসেট লোড হওয়ার পড়ে রান করবে যেহেতু Magento সকল JavaScript ফাইল সবার উপরে রাখতে পছন্দ করে।

প্লাগইন ইনিশিয়ালাইজিং খুবই সহজ।  শুধু মেইন কন্টেইনারের ID টাইপ করুন, আমাদের ক্ষেত্রে এটি home-slideshow, এবং চলতে থাকুন। আমাদের বিডিং করানোর জন্য এটিতে আমি শুধু কিছু অপশনস এর টোয়েক করেছি।

কিছু জিনিস মনে রাখতে হবে যে আমরা ডায়নামিক ভাবে আমাদের ন্যাভিগেশন এলিমেন্ট এর কন্টেইনার DOM এর মধ্যে JavaScriptS এর সাথে তৈরি এবং পজিশনিং করছি। এই এলিমেন্ট তখনই প্রয়োজন হবে যখন JavaScript সক্রিয় থাকবে। যদি তা না হয়, আমাদের পেইজে আমরা খালি কিছু চাই না, কোন ধরনের বেহুদা কোডও নয়।

আমরা স্লাইডার প্লাগইনটিতে সিলেক্টর ন্যাভিগেশন কন্টেইনারেও পাস করেছি।

এই পর্যন্তই। আমাদের কোডের  JavaScript অংশ সম্পন্ন হয়েছে।


ধাপ ৬ - আমাদের হোম পেইজ সেটিং

এখন যখন আমাদের সমস্ত মূল কাজ হয়ে গেছে, আমরা এখন ফাইনালি আমাদের হোম পেইজ কনফিগার করতে পারব।

Magento for Designer: Part VIMagento for Designer: Part VIMagento for Designer: Part VI

CMS মেনুতে ক্লিক করুন এবং pages অপশনটি নির্বাচন করুন। ফলাফলের পাতায় home page এ ক্লিক করুন।

Magento for Designer: Part VIMagento for Designer: Part VIMagento for Designer: Part VI

প্রথম ট্যাবটি সুন্দর স্ব ব্যাখ্যামূলক হওয়ার কথা। নিশ্চিত হোন যে আমাদের পেইজটি সক্রিয়।

Magento for Designer: Part VIMagento for Designer: Part VIMagento for Designer: Part VI

কন্টেন্ট ট্যাবে, এডিটর ডিসেবল করার পরে নিশ্চিত হোন যে আপনি দেখানো কোড প্রবেশ করিয়েছেন।

এটি  Magento'র প্রয়োজনীয় ব্লক অন্তর্ভুক্তিকরণ মেথড। আমরা শুধু এটিকে একটি ID দিবো যা দ্বারা এটি রেফার করবে এবং এটিকে আমাদের কাস্টম ট্যামপ্লেট এ নির্দেশ করব।

Magento for Designer: Part VIMagento for Designer: Part VIMagento for Designer: Part VI

এই ডিজাইন ট্যাবে, যেহেতু আমরা এটি সবকিছুর জন্য ব্যবহার করছি তাই ট্যামপ্লেট লেআউট ১ কলামে পরিবর্তন করুন এবং নিচের দেখানো অংশ layout update xml ফিল্ডে প্রবেশ করান।

মনে আছে কিভাবে আমাদের প্রোডাক্ট পেইজ তৈরি করেছিলাম, আমরা পেইজ লেআউট ফাইলে কাস্টম CSS অন্তর্ভুক্ত করেছিলাম নিশ্চিত হতে যে পুরো কোডবেইস টা যাতে প্রতিটা পেইজের জন্য লোড না হয়? আমরা মূলত একই কাজ এখানে করতে যাচ্ছি। শুধুমাত্র এটির জন্য একটি XML ফাইল তৈরি করার বদলে, Magento আমাদের সরাসরি ইন্টারফেস এর মাধ্যমে প্রবেশ করতে দিচ্ছে।

আমরা শুধু কাস্টম CSS লোড করব, আমাদের JS লাইব্রেরি এবং স্ক্রিপ্ট ফাইল আমাদের সকল কোড ধারন করবে।

আমাদের সকল অগ্রগতি সংরক্ষণের জন্য "save" ক্লিক করুন, Magento'র ক্যাশ খালি করুন এবং আপনার পেইজে সুন্দর স্লাইডারটি দেখুন যা তার অসাধারণ সুন্দর রূপে স্লাইড করছে!


আমরা পরবর্তী পর্বে যা তৈরি করব

... এটি সম্পূর্ণ আপনার উপর। আমি ইতিমধ্যেই যে কোনো ভিউ কাস্টমাইজ করার জন্য প্রায় সব প্রাসঙ্গিক তথ্য কভার করেছি এবং প্রতিটি ভিউ এর মধ্য দিয়ে যাওয়া সম্পূর্ণরূপে প্রতিবিরোধী। এই পর্যন্ত শেষ করার পর যা বাকী আছে তা হলো কীভাবে কাস্টম মডিউল তৈরি করা যায় এবং আমি ভেবেছি এইভাবে এই সিরিজটির কোর্স চালিয়ে যাবো। আমি হয়ত Magento tweaks এবং অপটিমাইজেশন এর উপর একটি how-to টিউটোরিয়াল লিখতে পারি যদি যথেষ্ট সংখ্যক লোকজন এই ধরনের আর্টিকেল নিয়ে আগ্রহ দেখায়।

আপনি যদি মনে করেন যে এই সিরিজের পূর্বে কাছাকাছি অন্য কিছু কভার করা প্রয়োজন, আমাকে জানাতে নিচে একটি কমেন্ট করতে দ্বিধা বোধ করবেন না!


শেষ কথা

এবং আমাদের কাজ শেষ! আজকে, আমরা শিখেছি কিভাবে একটি কাস্টম হোম পেইজ ফিচারড প্রোডাক্টগুলি প্রদর্শনের স্লাইডার সহ সম্পূর্ণ করতে হয়। আমরা আরো শিখেছি থার্ড পার্টি কোন এক্সটেনশন এর উপর ভরসা করার পরিবর্তে এর সকল আমাদের নিজেদের কোডিং ব্যবহার করে করতে। আশা করি এটি আপনার প্রয়োজনসাধক হবে এবং আপনার কাছে এটি ইন্টারেস্টিং মনে হবে। যেহেতু অনেক পাঠকের কাছে এটি নতুন টপিক তাই আপনাদের যাতে কোন সংশয় না হয় তার জন্য আমি মনোযোগ এর সাথে কমেন্ট সেকশনটি দেখবো।

কোন প্রশ্ন? ভালো কিছু বলার আছে? সন্দেহ? কমেন্টে হিট করুন এবং আমাকে একটি নোট ছেড়ে যান। হ্যাপি কোডিং!

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.