Magento দিয়ে সম্পূর্ণ E-commerce Site [পর্ব-৩] :: Magento Frontend পরিচিতি

আসসালামু আলাইকুম, আশা করি সবাই ভালো আছেন। সবাইকে ঈদ এর অনেক অনেক শুভেচ্ছা ও ভালোবাসা জানিয়ে শুরু করছি Magento Tutorial । গত পর্বে আমি আপনাদের MAGENTO INSTALL সম্পর্কে ধারণা দেয়ার চেষ্টা করেছিলাম। আশাকরি সবাই INSTALL করতে পেরেছেন। এবার আমরা MAGENTO FRONTEND সম্পর্কে বিস্তারিত জানার চেষ্টা করবো। আশাকরি সবার ভালো লাগবে।

Magento-র Frontend

Frontend হলো Web Store এর একটি User View যা কিনা  Web Store এর Product, Product এর বিবরন প্রদর্শন করে এবং Customer দের Ordering, Payment এবং Tracking বৈশিষ্ট্যগুলো সম্পর্কে জানায়।আপনি   -এই Link এর মাধ্যমে Magento এর Demo Web Store ব্যবহার করে দেখতে পারেন।Magento Demo Store এর এবং Frontend এর Screenshot দেয়া হলোঃ-

Product Presentation

Magento -এর Frontend -এ Product Browsing এর জন্য বিভিন্ন Option বিদ্যমান । এটি প্রতিটি Product এর Detail Information প্রদর্শন করে। এখানে Multiple Product উপস্থাপন করা যায় এবং Web Store এর Product সমূহ কে List অথবা Grid এ প্রদর্শন করা যায়। এছাড়াও Sort Order ও Filter করে Product বাছাই করা যায়।

Categories

Web store এর Product গুলো Group আকারে বিভিন্ন Category-র মধ্যে অন্তর্ভূক্ত থাকে। একটি Product বিভিন্ন Category -তে অন্তর্ভূক্ত থাকতে পারে। Category গুলো Web Store Page এর Top Navigation -এ প্রদর্শিত হয়।
Magento Demo Store-এ পাঁচটি Category দেওয়া হয়েছে। সেগুলো হলঃ- Furniture, Electronics, Apparel, Music এবং E-books । প্রতিটি Category-এর কিছু Sub-Category থাকতে পারে যা কিনা Category এর নিচে Dropdown আকারে প্রদর্শন করে Customer-গন সরাসরি Sub-Category থেকেও তার প্রয়োজনীয় Product খুঁজে বের করতে পারেন।
Category Page-এর একটি নমুনা দেখানো হলোঃ-

এখানে Cell Phones, Cameras, Computer ইত্যাদি হলো Electronics এর Sub-Category । আবার Accessories এবং Digital Cameras হলো Cameras এর Sub-Category। একটি Category অথবা Sub-Category প্রত্যেকে Product ধারন করে অথবা একটি Landing Page Show করে যাতে কিছু Product প্রদর্শিত হয়।
একটি Category Page এর নমুনা দেখানো হলোঃ-

প্রদর্শিত Product গুলোকে Filter করা

সাধারনত Customer গন Category এবং Sub-Category থেকে তাদের পছন্দের Product টি খুজে বের করেন। Customer তার Product গুলোকে বিভিন্ন Attribute অনুযায়ী Filter করতে পারেন। Web Store এর Left Bar এ SHOP BY Option টি থাকে। এখানে বিভিন্ন Category Product-এর Attribute থাকে। যেমনঃ- PRICE, COLOR, MANUFACTURER ইত্যাদি। Color এর মধ্যে বিভিন্ন Color Name, Price এর মধ্যে বিভিন্ন Range বিশিষ্ট Price বিদ্যমান থাকে। Product গুলোর Price, Color ইত্যাদি অনুযায়ী Product Filter করা যায়।
উদাহরণঃ যেমন Apparel Category তে তিনটি Green Product রয়েছে সেক্ষেত্রে নিম্নোক্ত ভাবে দেখা যাবেঃ-

যখন Customer Green -এ Click করবে তখন সব Green Color এর Product গুলো দেখাবে। অর্থ্যৎ ঐ Category এর Product গুলো Green Color এর মাধ্যমে Filter হবে।
তখন নিন্মোক্ত Page টি প্রর্দশিত হবেঃ-

Filter টি Clear করতে হলে Clear All Item Link এ Click করতে হবে।
(বিঃদ্রষ্টব্যঃ- এখানে তৃতীয় Product টি দেখানো হয়েছে কারণ এটি Red এবং Green উভয় Attribute -এ Assign করা আছে।)

Popular Tags

Customer দের সঠিক Product বাছাই করার জন্য Magento তে আরও একটি Option রয়েছে যাকে বলা হয় Popular Tags, Product গুলো Popular Tags এর মধ্যে Assign করা থাকে, ফলে এটির মাধ্যমেও Customer গন তাদের পছন্দের Product টি খুঁজে পেতে পারেন।

এই Popular Tag গুলো Product Page থাকে Customer গনও Add করতে পারেন এবং তা Backend থেকে প্রয়োজনীয় Edit ও Approve করা হয়।

Searching

Magento Web Store এর উপরের ডান দিকে একটি Search-bar থাকে যেখানে Customer গনও Product এর নাম, নামের কিছু অংশ অথবা Attribute দিয়ে Search করে তার কাঙ্খিত Product টি খুঁজে পেতে পারেন।

Comparing Products

Magento, Customer-দেরকে তাদের পছন্দের Product সমূহের মধ্যে তুলনা করনের সুবিধা প্রদান করে। Product সমূহের মধ্যে তুলনা করতে যা করতে হবে তা হলোঃ-
(1) একজন Customer কে প্রথমে সে যে Product টি (Compare) তুলনা করতে চায় সেটির Add to Compare Option এ Click করতে হবে।
নিচে দেখানো হলোঃ-

(2) Customer যে সকল Product সমূহের মধ্যে তুলনা করতে চান তা উপরোক্তি ভাবে Select করার পর Compare Items Options এ Click করতে হবে।
নিচে দেখানো হলোঃ-

Compare Items-Option- এ Click করার পর নিন্মোক্ত ভাবে Page টি Pop-Up Window তে প্রদর্শিত হবে।

[Note:-চিত্রে প্রদর্শিত এক একটি Row হলো Product গুলোর তুলনা যোগ্য বৈশিষ্ট্য (Comparable Attribute)। যেমন Model, Description, Color ইত্যাদি।]

Shorting Products

একজন Customer, Sort by Field থেকে প্রয়োজন অনুযায়ী Option Select করে Product সমূহকে Sort করে প্রদর্শন করাতে পারেন।
নিচে চিত্রের মাধ্যমে দেখানো হলো:-

Grid/List View

Product সমূহ Grid(Table) আকারে প্রদর্শন করা যায়, যা পূর্ববর্তী ছবিতে দেখানো হয়েছে এছাড়াও List আকারে Product গুলোকে প্রদর্শন করা যেতে পারে যা নিচে দেখানো হলোঃ-

Recently Viewed

Customer যে সকল Product দেখে সেগুলোর একটি List তৈরি হয় যা কিনা Recently Viewed Products নামের একটি Area-তে প্রদর্শিত হয়। যেখান থেকে Customer গণ সহজেই পূর্বের Product গুলো আবার দেখতে পারেন।
যা নিচে দেখানো হলোঃ-

Level 0

আমি সাব্বির শুভ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 7 টি টিউন ও 42 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

যেকোনো সমস্যায় আমি আছি আপনাদের পাশে, আমাকে FACEBOOK, GOOGLE TALK এ পাবেন অ্যাড করে নিতে পারেন। ফেসবুক = http://www.facebook.com/shuvo.rpi গুগলটক = mbshuvo


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 0

শিক্ষনীয় টিউনস। চালিয়ে যান। মাঝ পথে বন্ধ হলে কোন কাছে আসবে না।

Want BABY Name book. Give link it? Any one…..

শুধু আপনার টিউন টা তে কমেন্ট করার জন্য লগিন করলাম।
আপনার টিউটরিয়াল এর প্রত্যাশায় আমি একটা ই-কমার্স সাইট এর প্রজেক্ট হাতে নিলাম।
প্লীজ কমপ্লিট করবেন আশা করি।

টিউন টি সুন্দর ও গুছানো হয়েছে। চালিয়ে জান 🙂

ভাইয়া, আপনাকে অনেক ধন্যবাদ এরকম একটি উদ্যোগ নিয়ে ই কমাস শেখানোর জন্য। অসাধারন টিউন করেছেন। শুধু একটি কথা ই জানতে চাই ভাইয়া, আমি ই কমার্স সাইট তৈরি শিখতে অনেক আগ্রহি। আমি কিভাবে magento. oSCommerce, ZenCart খুব ভালভাবে সিখতে পারি। আমি এই বিষয় গুলোতে প্রফেশনাল হতে চাচ্ছি। উল্লেক্ষ আমি HTML, CSS, JS & C Language বেশ ভাল জানি। ভাইয়া আপনার কাছে কি এগুলো সেখার কোন ভিডিও টিউটরিয়াল আছে? থাকলে প্লিয ভাইয়া লিঙ্ক শেয়ার করুন। আর ভাইয়া magento এর তো একটি পেইড ভারশন আছে। দুটোর মধ্যে পার্থক্য কি?
প্লিয ভাইয়া জানাবেন। আপনি আমাকে মেইল করেও লিঙ্ক দিতে পারেন।
[email protected]

প্রীতম আপনাকে ধন্যবাদ। আপনি অনলিনে এ সার্চ দিলে অনেক ভিডিও টিউটরিয়াল পাবেন। আমার কাছে কোন লিঙ্ক নাই। আমি বই পড়ার চেষ্টা করি। আপনিও করতে পারেন। আর পেইড ভারশন বেপারে আমার জানা নাই।

এই পর্বটা খুবই সুন্দর হয়েছে।
ধন্যবাদ।

Level 0

আপনা পরবর্তী টিউনের অপেক্ষা রয়েছি, খুবই চমৎকার টিউন হয়েছে। আমি ইংলিশ টিউটোরিয়াল পড়তে পড়তে হটাৎ করে মনে হলো বাংলা কোন টিউটোরিয়াল আছে কিনা তাই গুগুলের মাধ্যমে আপনার টিউটি পেয়ে গেলাম। ধন্যবাদ ও পরবর্তী টিউনের অপেক্ষায়।

psd থেকে কিভাবে ম্যাজেন্টো Template ,বানাবো এর উপর টিউটোরিয়াল চাই

Level 0

next tune kobe diben please

Level 0

superb kaj korchen vai. ei jonno apnake onek onek dhonnobad