Magento Theme Development

Web Development - ম্যাজেন্টো ফ্রেমওয়ার্ক (Magento Framework)

ম্যাজেন্টো ফ্রেমওয়ার্ক (Magento Framework) এর থিম ডেভেলপমেন্ট একটি গুরুত্বপূর্ণ দিক, যা একটি ই-কমার্স সাইটের ডিজাইন এবং ব্যবহারকারীর অভিজ্ঞতা তৈরি করে। Magento থিম ডেভেলপমেন্টের মাধ্যমে আপনি আপনার সাইটের লুক এবং ফিল কাস্টমাইজ করতে পারেন। থিম ডেভেলপমেন্টের জন্য আপনাকে কিছু গুরুত্বপূর্ণ কনসেপ্ট এবং টুলস শিখতে হবে, যেমন XML, PHTML, CSS, এবং JavaScript। এখানে আমরা Magento থিম ডেভেলপমেন্টের প্রক্রিয়া এবং এর মূল উপাদানগুলো নিয়ে বিস্তারিত আলোচনা করব।

Magento থিম ডেভেলপমেন্টের পরিচিতি

Magento থিম হলো একটি কাস্টমাইজেবল ডিজাইন প্যাকেজ, যা একটি Magento সাইটের লুক এবং ফিল নিয়ন্ত্রণ করে। এটি এক্সটেনশনের মতোই ফাইল ও ডিরেক্টরির মাধ্যমে কাজ করে, তবে এটি সাধারণত ফ্রন্ট-এন্ড ইউজার ইন্টারফেসে (UI) পরিবর্তন আনে। Magento থিম তৈরি বা কাস্টমাইজ করার জন্য আপনাকে Magento এর ফোল্ডার স্ট্রাকচার এবং টেমপ্লেট ফাইলগুলো ভালোভাবে জানাতে হবে।

Magento থিম ডেভেলপমেন্টের জন্য পদক্ষেপ

১. থিমের বেসিক কাঠামো তৈরি

Magento থিমের বেসিক কাঠামো তৈরি করতে, আপনাকে একটি নির্দিষ্ট ডিরেক্টরি স্ট্রাকচার তৈরি করতে হবে। এখানে একটি সাধারণ স্ট্রাকচার দেওয়া হল:

app/design/frontend/[Vendor]/[theme]
├── layout/
│   └── [page layout xml files].xml
├── templates/
│   └── [PHTML files].phtml
├── web/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── images/
├── etc/
│   └── theme.xml
└── registration.php

layout/: এখানে XML ফাইল থাকে যা Magento পেজের লেআউট নির্ধারণ করে।
templates/: এখানে .phtml ফাইলগুলো থাকে, যা PHP কোড এবং HTML মিশ্রিত করে সাইটের UI তৈরি করে।
web/: CSS, JavaScript, এবং ইমেজ ফাইলগুলো এখানে থাকে।
etc/: থিমের কনফিগারেশন ফাইল থাকে, যেমন theme.xml।
registration.php: Magento কে থিমের অস্তিত্ব জানান দেয়।

২. `theme.xml` ফাইল তৈরি করা

প্রথমে, আপনার থিমের ডিরেক্টরিতে একটি theme.xml ফাইল তৈরি করুন। এই ফাইলটি থিমের তথ্য এবং তার কাঠামো সম্পর্কে Magento কে জানায়।

<?xml version="1.0" encoding="UTF-8"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Your Theme Name</title>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>images/preview.jpg</preview_image>
    </media>
</theme>

title: থিমের নাম।
parent: আপনি কোন থিমের উপর ভিত্তি করে থিম তৈরি করছেন। সাধারণত Magento/blank বা Magento/luma ব্যবহার করা হয়।
preview_image: থিমের প্রিভিউ ইমেজ।

৩. `registration.php` ফাইল তৈরি করা

Magento থিমের ডিরেক্টরিতে একটি registration.php ফাইল তৈরি করুন, যা Magento কে থিমটি রেজিস্টার করতে সহায়ক হবে।

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/YourVendor/your_theme',
    __DIR__
);

এখানে YourVendor এবং your_theme পরিবর্তন করুন আপনার থিমের নাম অনুযায়ী।

৪. লেআউট XML ফাইল তৈরি করা

থিমের লেআউট নির্ধারণ করতে আপনাকে XML ফাইল তৈরি করতে হবে। layout/ ডিরেক্টরিতে একটি .xml ফাইল তৈরি করুন, যেমন default.xml বা অন্য কোনো পেজ লেআউটের জন্য।

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="example_block" template="YourVendor_YourTheme::example.phtml"/>
        </referenceContainer>
    </body>
</page>

এই XML ফাইলটি content কন্টেইনারে একটি নতুন ব্লক যুক্ত করবে এবং সেই ব্লকের জন্য example.phtml টেমপ্লেট ফাইল ব্যবহার করবে।

৫. PHTML ফাইল তৈরি করা

PHTML ফাইলগুলোতে আপনি PHP এবং HTML কোড লিখে সাইটের UI তৈরি করেন। উদাহরণস্বরূপ:

<!-- app/design/frontend/YourVendor/your_theme/templates/example.phtml -->
<div class="example-class">
    <h1>Welcome to Your Custom Magento Theme!</h1>
</div>

এখানে, আপনি Magento এর বিভিন্ন ডেটা যেমন প্রোডাক্ট, ক্যাটালগ, এবং কাস্টমারের ইনফরমেশনও টেমপ্লেটের মধ্যে ব্যবহার করতে পারেন।

৬. CSS এবং JavaScript যুক্ত করা

থিমের স্টাইল এবং ইন্টারঅ্যাকটিভিটি বাড়ানোর জন্য আপনাকে CSS এবং JavaScript ফাইল যোগ করতে হবে। এই ফাইলগুলো web/ ডিরেক্টরিতে রাখতে হবে।

CSS: web/css/style.css এ আপনার স্টাইল শিটগুলো রাখতে পারেন।
JavaScript: web/js/script.js ফাইলটি ব্যবহার করতে পারেন UI এ ইন্টারঅ্যাকটিভ ফিচার যোগ করতে।

৭. থিম কাস্টমাইজেশন

একবার আপনি বেসিক থিম তৈরি করে ফেললে, আপনি সাইটের ডিজাইন এবং কার্যকারিতা আরও কাস্টমাইজ করতে পারেন। যেমন:

থিমের জন্য কাস্টম গ্রাফিক্স বা ইমেজ যোগ করা।
CSS কোডে পরিবর্তন এনে সাইটের রং, লেআউট বা অন্যান্য ডিজাইন উপাদান পরিবর্তন করা।
Magento এর বিভিন্ন ব্লক, উইজেট এবং পেজ লেআউট কনফিগারেশন পরিবর্তন করা।

Magento থিম ডেভেলপমেন্টে সাধারণ সমস্যা ও সমাধান

ক্যাশ সমস্যা: থিম পরিবর্তনের পর সাইটের আপডেট না দেখালে ক্যাশ ক্লিয়ার করুন:
```
bin/magento cache:flush
```
ডেভেলপমেন্ট মোডে পরিবর্তন: সাইটে পরিবর্তনগুলি তাড়াতাড়ি দেখতে ডেভেলপমেন্ট মোডে স্যুইচ করুন:
```
bin/magento deploy:mode:set developer
```
থিম অ্যাক্টিভেশন: থিম অ্যাক্টিভেট করতে:
```
bin/magento theme:enable YourVendor_YourTheme
```

সারাংশ

Magento থিম ডেভেলপমেন্ট একটি শক্তিশালী প্রক্রিয়া, যা ব্যবসায়ীদের তাদের সাইটের লুক এবং ফিল কাস্টমাইজ করার সুযোগ দেয়। Magento থিম তৈরি করার জন্য আপনাকে ফোল্ডার স্ট্রাকচার, XML ফাইল, PHTML টেমপ্লেট এবং CSS/JS ফাইলগুলো নিয়ে কাজ করতে হবে। এই থিম ডেভেলপমেন্ট প্রক্রিয়া আপনাকে Magento সাইটে সম্পূর্ণ কাস্টম ডিজাইন এবং কার্যকারিতা তৈরি করার সুযোগ দেয়।

Content added By

Rezwan Siddiki Tamim

Magento এর থিম আর্কিটেকচার

104

ম্যাজেন্টো ফ্রেমওয়ার্ক (Magento Framework) এর থিম আর্কিটেকচার অত্যন্ত কাস্টমাইজেবল এবং মডুলার। Magento এর থিম আর্কিটেকচার ডিজাইন এবং ইউজার ইন্টারফেস (UI) নিয়ন্ত্রণে গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি ব্যবসায়ীদের তাদের ই-কমার্স সাইটের দেখভাল এবং অনুভূতির সাথে সাথে কাস্টম ফিচার যোগ করতে সাহায্য করে। Magento থিমগুলি বিভিন্ন স্তরে বিভক্ত থাকে এবং প্রতিটি স্তরের নিজস্ব ফাংশনালিটি এবং কাস্টমাইজেশন সুবিধা প্রদান করে।

Magento থিম আর্কিটেকচারের মূল উপাদান

১. থিম ফোল্ডার স্ট্রাকচার (Theme Folder Structure)

Magento এর থিম আর্কিটেকচার একটি ফোল্ডার ভিত্তিক সিস্টেমে সাজানো, যেখানে প্রতিটি ফোল্ডার নির্দিষ্ট ফাইল ও কনফিগারেশন ধারণ করে। এটি সাধারণত দুটি স্তরে বিভক্ত:

app/design/frontend/: এখানে থিমের মূল ফোল্ডার রাখা হয়। এটি একটি ফ্রন্টএন্ড থিম যা Magento সাইটের ইউজার ইন্টারফেস এবং ডিজাইন কন্ট্রোল করে।
app/design/adminhtml/: এটি অ্যাডমিন প্যানেলের জন্য থিম। এর মাধ্যমে আপনি Magento অ্যাডমিন প্যানেলের UI কাস্টমাইজ করতে পারেন।

এছাড়া, থিমের কনফিগারেশন, লেআউট, টেমপ্লেট এবং স্টাইল শিটও বিভিন্ন ফোল্ডারে থাকে।

২. থিমের মূল উপাদান

Magento থিমের মূল উপাদানগুলো নিম্নরূপ:

layout: থিমের লেআউট ফাইলগুলি এখানে থাকে, যা পেজ স্ট্রাকচার এবং কনটেন্টের অবস্থান নির্ধারণ করে। এগুলি XML ফরম্যাটে থাকে এবং বিভিন্ন ব্লক এবং কন্টেন্ট এলিমেন্টের জন্য কনফিগারেশন দেয়।
templates: এই ফোল্ডারে HTML ফাইল থাকে যা পেজের ডিজাইন এবং কন্টেন্ট উপস্থাপন করে। এটি ব্লক এবং লেআউট ফাইলের সাথে একসাথে কাজ করে।
skin: থিমের স্টাইল এবং সিএসএস ফাইলগুলি এখানে থাকে। এটি আপনাকে থিমের ভিজ্যুয়াল ডিজাইন কাস্টমাইজ করতে দেয়। ফন্ট, কালার, ব্যাকগ্রাউন্ড ইত্যাদি স্টাইলিং এখানেই কনফিগার করা হয়।
etc: এখানে থিমের কনফিগারেশন ফাইল থাকে, যেমন XML ফাইল, যা থিমের আচরণ এবং এর কাস্টমাইজেশন নির্ধারণ করে।
local.xml: এই ফাইলটি ম্যাজেন্টোতে কাস্টম লেআউট এবং ব্লক কনফিগারেশন ধারণ করে।

৩. থিমের স্তর (Theme Layers)

Magento থিম আর্কিটেকচার বেশ কয়েকটি স্তরের মধ্যে বিভক্ত। প্রতিটি স্তর বিভিন্ন ধরণের কনফিগারেশন এবং কাস্টমাইজেশন নিয়ন্ত্রণ করে:

মেইন থিম (Parent Theme): এটি মূল থিম যেটি কোনো থিমের ভিত্তি হিসেবে কাজ করে এবং অন্যান্য থিম বা কাস্টম থিমের জন্য বেস ফাইল সরবরাহ করে। এটি সাধারণত ডিজাইন, কনফিগারেশন এবং টেমপ্লেট সরবরাহ করে।
চাইল্ড থিম (Child Theme): একটি চাইল্ড থিম মূল থিম থেকে উত্তরাধিকারী এবং সেটির ফিচার ব্যবহার করে। আপনি চাইল্ড থিম ব্যবহার করে থিমের ফিচার কাস্টমাইজ করতে পারেন বা নতুন ফিচার যোগ করতে পারেন, যাতে মূল থিমের কনফিগারেশন অক্ষত থাকে।

৪. থিম কাস্টমাইজেশন (Theme Customization)

Magento থিম কাস্টমাইজ করা বেশ সহজ। থিম কাস্টমাইজেশনের জন্য বিভিন্ন উপায় রয়েছে:

থিম ডেভেলপমেন্ট: Magento ডেভেলপাররা মূল থিম বা চাইল্ড থিম তৈরি করতে পারেন এবং এর মধ্যে কাস্টম লেআউট, টেমপ্লেট, ব্লক ইত্যাদি ব্যবহার করতে পারেন।
CSS এবং LESS: থিমের ভিজ্যুয়াল ডিজাইন কাস্টমাইজ করতে CSS বা LESS ফাইল ব্যবহার করা হয়। Magento LESS সাপোর্ট করে, যা CSS-এর ওপর একটি প্রিসিপ্ট ভাষা এবং উন্নত কাস্টমাইজেশনের সুবিধা প্রদান করে।
JavaScript এবং jQuery: Magento থিমের মধ্যে JavaScript এবং jQuery কোড ব্যবহৃত হয়, যা ডাইনামিক ইন্টারঅ্যাকশন এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে।

৫. থিম কনফিগারেশন (Theme Configuration)

Magento-তে থিম কনফিগারেশন দুইভাবে করা যায়:

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

৬. থিমের পারফরম্যান্স এবং সিকিউরিটি (Theme Performance and Security)

Magento থিম ডিজাইন করার সময় পারফরম্যান্স এবং নিরাপত্তা অত্যন্ত গুরুত্বপূর্ণ। কিছু বিষয় খেয়াল রাখা উচিত:

কোড অপটিমাইজেশন: থিমের CSS, JavaScript, এবং টেমপ্লেট কোড অপটিমাইজ করা উচিত, যাতে সাইটের লোড টাইম কম হয়।
নিরাপত্তা: থিম ডেভেলপারদের অবশ্যই সিকিউরিটি নির্দেশিকা অনুসরণ করতে হবে, যাতে থিমে কোনো ধরনের নিরাপত্তা সমস্যা না ঘটে।

সারাংশ

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

Content added By

Rezwan Siddiki Tamim

Custom Theme তৈরি করা

ম্যাজেন্টো ফ্রেমওয়ার্ক (Magento Framework) ব্যবহার করে কাস্টম থিম তৈরি করা একটি গুরুত্বপূর্ণ পদক্ষেপ, যা আপনার ই-কমার্স সাইটের ডিজাইন এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে। Magento-এর কাস্টম থিম তৈরি করা শুরু করার আগে, আপনাকে কিছু মূল বিষয় জানার প্রয়োজন আছে, যেমন থিমের কাঠামো, কাস্টমাইজেশন, এবং থিম ডেভেলপমেন্টের প্রক্রিয়া। এখানে আমরা Magento-এ কাস্টম থিম তৈরি করার বিস্তারিত পদক্ষেপ আলোচনা করব।

Magento তে কাস্টম থিম তৈরি করার প্রাথমিক প্রস্তুতি

১. সিস্টেম রিকোয়্যারমেন্ট (System Requirements)

Magento-এ কাস্টম থিম তৈরি করতে আপনার সিস্টেমে Magento সঠিকভাবে ইনস্টল করা থাকতে হবে। এছাড়াও, PHP, MySQL এবং Apache বা Nginx ওয়েব সার্ভার সঠিকভাবে কনফিগার করতে হবে।

২. ডেভেলপার মোডে সিস্টেম চালু করা (Enable Developer Mode)

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

php bin/magento deploy:mode:set developer

Magento তে কাস্টম থিম তৈরি করার পদক্ষেপ

১. থিমের ডিরেক্টরি তৈরি করা (Create the Theme Directory)

Magento তে কাস্টম থিম তৈরি করতে প্রথমে আপনাকে একটি নতুন থিম ডিরেক্টরি তৈরি করতে হবে। এর জন্য, Magento-এর app/design/frontend ডিরেক্টরিতে নতুন থিমের জন্য একটি ফোল্ডার তৈরি করুন।

app/design/frontend/[VendorName]/[ThemeName]

এখানে [VendorName] আপনার কোম্পানির বা ডেভেলপার নাম, এবং [ThemeName] আপনার থিমের নাম।

২. থিমের বেস ফাইল তৈরি করা (Create Basic Theme Files)

কাস্টম থিম তৈরির জন্য কিছু বেসিক ফাইল তৈরি করতে হবে। নিচে কিছু গুরুত্বপূর্ণ ফাইলের নাম দেওয়া হলো যা একটি সাধারণ Magento থিমের জন্য প্রয়োজন:

theme.xml: এই ফাইলটি Magento কে আপনার থিম সম্পর্কে তথ্য প্রদান করে।

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>My Custom Theme</title>
    <parent>Magento/blank</parent>
</theme>

registration.php: এই ফাইলটি Magento কে জানায় যে, এটি একটি বৈধ থিম।

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/[VendorName]/[ThemeName]',
    __DIR__
);

styles.css: এই ফাইলটি আপনার থিমের কাস্টম CSS কোড ধারণ করবে।
default.xml: এই ফাইলটি থিমের লেআউট কনফিগারেশন ধারণ করে।

৩. থিমের লেআউট কাস্টমাইজ করা (Customize Layout)

Magento থিমের লেআউট কাস্টমাইজ করার জন্য, আপনাকে layout ফোল্ডারে .xml ফাইলগুলি তৈরি করতে হবে। আপনি বিভিন্ন পেজের জন্য কাস্টম লেআউট তৈরি করতে পারেন।

উদাহরণস্বরূপ, হোমপেজের জন্য একটি কাস্টম লেআউট তৈরি করা:

<layout>
    <update handle="default"/>
    <block class="Magento\Framework\View\Element\Template" name="custom_block" template="[VendorName]_[ThemeName]::custom_template.phtml"/>
</layout>

৪. থিমের টেমপ্লেট তৈরি করা (Create Template Files)

Magento থিমের টেমপ্লেট ফাইলগুলি .phtml এক্সটেনশনে তৈরি হয়। আপনি এই ফাইলগুলির মাধ্যমে HTML এবং PHP কোড ব্যবহার করে কন্টেন্ট প্রদর্শন করতে পারবেন।

উদাহরণস্বরূপ, custom_template.phtml তৈরি করতে পারেন যা আপনার কাস্টম কন্টেন্ট প্রদর্শন করবে।

৫. থিমের ইমেজ এবং মিডিয়া ফাইল যুক্ত করা (Add Images and Media Files)

Magento থিমের জন্য ইমেজ এবং মিডিয়া ফাইল web/images ডিরেক্টরিতে রাখা হয়। আপনি এখানে থিমের লোগো, ব্যানার, আইকন এবং অন্যান্য মিডিয়া ফাইল আপলোড করতে পারবেন।

৬. কাস্টম জাভাস্ক্রিপ্ট এবং CSS যুক্ত করা (Add Custom JavaScript and CSS)

আপনার থিমে কাস্টম জাভাস্ক্রিপ্ট এবং CSS যুক্ত করতে web/js এবং web/css ফোল্ডারে ফাইল তৈরি করতে হবে। এরপর, আপনি এই ফাইলগুলোকে default.xml ফাইলে যুক্ত করতে পারবেন।

<head>
    <css src="[VendorName]_[ThemeName]::css/styles.css"/>
    <script src="[VendorName]_[ThemeName]::js/custom.js"/>
</head>

৭. থিমের স্থানীয় কনফিগারেশন (Local Configuration of Theme)

আপনি Magento অ্যাডমিন প্যানেল থেকে থিমের কনফিগারেশন পরিবর্তন করতে পারেন। Content > Design > Configuration এ গিয়ে থিম সেট করতে পারবেন এবং আপনার কাস্টম থিম সিলেক্ট করতে পারবেন।

থিম অ্যাক্টিভেট করা (Activate the Theme)

থিমটি তৈরি করার পর, আপনাকে থিমটি Magento সাইটে অ্যাক্টিভেট করতে হবে। এর জন্য, নিচের কমান্ডটি ব্যবহার করতে হবে:

php bin/magento theme:enable [VendorName]_[ThemeName]
php bin/magento setup:upgrade
php bin/magento cache:flush

সারাংশ

Magento তে কাস্টম থিম তৈরি করা একটি সৃজনশীল এবং কাস্টমাইজেবল প্রক্রিয়া, যা আপনার ই-কমার্স সাইটের ডিজাইন এবং কার্যকারিতা উন্নত করতে সাহায্য করে। থিম তৈরি করতে হলে, থিমের ডিরেক্টরি তৈরি, প্রয়োজনীয় ফাইল তৈরি, কাস্টম টেমপ্লেট এবং CSS/JS যুক্ত করার মতো পদক্ষেপ নিতে হয়। এই প্রক্রিয়ার মাধ্যমে, আপনি Magento এর জন্য একটি ইউনিক এবং শক্তিশালী থিম তৈরি করতে সক্ষম হবেন।

Content added By

Rezwan Siddiki Tamim

Magento এর জন্য Layouts এবং Templates

ম্যাজেন্টো ফ্রেমওয়ার্কে Layouts এবং Templates হল সাইটের ফ্রন্টএন্ড কনফিগারেশন এবং কাস্টমাইজেশন ব্যবস্থার জন্য অত্যন্ত গুরুত্বপূর্ণ উপাদান। এগুলি সাইটের ভিজ্যুয়াল উপস্থাপন এবং ইউজার এক্সপেরিয়েন্স (UX) নিয়ন্ত্রণ করতে সহায়তা করে। ম্যাজেন্টোতে, Layouts সাইটের কাঠামো তৈরি করে এবং Templates কন্টেন্টের প্রদর্শন এবং স্টাইলিং নিয়ন্ত্রণ করে।

Layouts: ম্যাজেন্টো লেআউট সিস্টেম

Layouts হল ম্যাজেন্টো সাইটের পেজের কাঠামো এবং অবজেক্টের অবস্থান নির্ধারণ করে। এটি মূলত পেজের বিভিন্ন সেকশনের অর্গানাইজেশন এবং কন্টেন্ট রেন্ডারিংয়ের জন্য দায়িত্বশীল। ম্যাজেন্টো লেআউট সিস্টেম XML ফাইল ব্যবহার করে কাজ করে, যেখানে পেজের কাঠামো, ব্লক এবং কন্টেন্ট এলিমেন্ট নির্ধারণ করা হয়।

১. Layout XML ফাইল

Magento লেআউট সিস্টেমের মূল অংশ হল layout XML ফাইল। এই ফাইলগুলো পেজের কাঠামো এবং ব্লককে নির্দেশ দেয়। এই ব্লকগুলো হলো সাইটের বিভিন্ন এলিমেন্ট, যেমন: মেনু, সাইডবার, কন্টেন্ট, ফুটার ইত্যাদি।

app/design/frontend/[Vendor]/[theme]/layout/ ডিরেক্টরির মধ্যে সাধারণত লেআউট ফাইলগুলো থাকে।
উদাহরণস্বরূপ, catalog_category_view.xml, catalog_product_view.xml ফাইলগুলি পণ্য ক্যাটালগ এবং পণ্য পেজের লেআউট কনফিগারেশনের জন্য ব্যবহৃত হয়।

Layout ফাইলের সঠিক গঠন:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Catalog\Block\Product\View" name="product.info" template="Magento_Catalog::product/view.phtml"/>
        </referenceContainer>
    </body>
</page>

এখানে, referenceContainer ট্যাগটি সাইটের কাঠামোর একটি অংশ (যেমন কন্টেন্ট) নির্দেশ করে এবং block ট্যাগটি একটি নির্দিষ্ট ব্লক বা এলিমেন্ট, যেমন পণ্য ডিটেইলস রেন্ডার করতে ব্যবহার করা হয়।

২. Layout Update XML

Magento বিভিন্ন পেজের জন্য লেআউট আপডেট XML ফাইল প্রদান করে, যার মাধ্যমে সাইটের কাঠামো পরিবর্তন করা যায়। এই ফাইলগুলির মাধ্যমে আপনি কোন ব্লক কোথায় এবং কিভাবে প্রদর্শিত হবে তা কাস্টমাইজ করতে পারেন।

উদাহরণস্বরূপ, catalog_product_view.xml ফাইলটি পণ্যের পেজের জন্য কনফিগারেশন ধারণ করে, যেখানে আপনি পণ্য বিশদ, ইমেজ গ্যালারি এবং অন্যান্য তথ্য সাজাতে পারবেন।

Templates: ম্যাজেন্টো টেমপ্লেট সিস্টেম

Templates হল সেই ফাইল যা ব্লকের কন্টেন্ট প্রদর্শনের জন্য স্টাইল এবং HTML গঠন সরবরাহ করে। এটি ম্যাজেন্টো সাইটের ফ্রন্টএন্ড ডিজাইন এবং লেআউটের স্টাইলিং নিয়ন্ত্রণ করে। টেমপ্লেট ফাইলগুলি PHP এবং HTML মিশ্রণ হয়ে থাকে এবং এগুলি PHTML ফাইল এক্সটেনশনে পাওয়া যায়।

১. Template ফাইল

Magento এর টেমপ্লেট ফাইলগুলি বিভিন্ন ব্লক এবং কন্টেন্ট এলিমেন্টের জন্য ডিজাইন করা হয়। এই টেমপ্লেট ফাইলগুলি নির্দিষ্ট ব্লককে কাস্টমাইজ করার জন্য ব্যবহার করা যায়।

উদাহরণস্বরূপ, catalog/product/view.phtml ফাইলটি পণ্য প্রদর্শনের জন্য ব্যবহৃত টেমপ্লেট।
app/design/frontend/[Vendor]/[theme]/templates ডিরেক্টরিতে সাধারণত টেমপ্লেট ফাইলগুলো রাখা হয়।

Template ফাইলের উদাহরণ:

<div class="product-info">
    <h1><?php echo $block->getProduct()->getName(); ?></h1>
    <p><?php echo $block->getProduct()->getDescription(); ?></p>
    <p><?php echo $block->getProduct()->getPrice(); ?></p>
</div>

এখানে, getProduct() ম্যাজেন্টো ব্লক থেকে পণ্য সম্পর্কিত তথ্য নিয়ে আসে এবং তারপর getName(), getDescription(), getPrice() ফাংশনগুলির মাধ্যমে পণ্য নাম, বিবরণ এবং মূল্য প্রদর্শিত হয়।

২. Template Override

Magento থিমের মাধ্যমে আপনি কোনো ব্লকের টেমপ্লেট ফাইলের ডিফল্ট কাঠামো কাস্টমাইজ করতে পারেন। সাধারণত, ডিফল্ট টেমপ্লেট ফাইল vendor/magento/module-catalog/view/frontend/templates ডিরেক্টরিতে থাকে, এবং আপনি এটিকে আপনার কাস্টম থিমে ওভাররাইড করতে পারেন।

উদাহরণস্বরূপ, catalog/product/view.phtml ফাইলটি কাস্টম থিমে app/design/frontend/[Vendor]/[theme]/templates/catalog/product/view.phtml ফাইলে কপি করে কাস্টমাইজ করা যায়।

Layout এবং Template এর মধ্যে পার্থক্য

Layout:
- পেজের কাঠামো নির্ধারণ করে।
- ব্লক এবং কন্টেন্ট এলিমেন্টদের অবস্থান নির্ধারণ করে।
- XML ফাইলগুলো ব্যবহার করে লেআউট কনফিগার করা হয়।
Template:
- পেজের কন্টেন্ট এবং এর স্টাইলিং পরিচালনা করে।
- পেজের কন্টেন্ট কীভাবে প্রদর্শিত হবে তা নির্ধারণ করে।
- PHTML ফাইলগুলো ব্যবহার করে টেমপ্লেট কাস্টমাইজ করা হয়।

ম্যাজেন্টো থিমে Layout এবং Template কাস্টমাইজেশন

Magento থিম কাস্টমাইজেশন করার জন্য Layout এবং Template দুটি গুরুত্বপূর্ণ উপাদান। আপনি layout XML ফাইলগুলির মাধ্যমে পেজের কাঠামো কাস্টমাইজ করতে পারেন এবং template ফাইলের মাধ্যমে কন্টেন্ট এবং স্টাইলিং পরিবর্তন করতে পারেন। সঠিকভাবে এই দুটি উপাদান ব্যবহার করে, আপনি Magento সাইটের ফ্রন্টএন্ডের ডিজাইন এবং ফাংশনালিটি সম্পূর্ণভাবে কাস্টমাইজ করতে পারবেন।

সারাংশ

ম্যাজেন্টো ফ্রেমওয়ার্কের Layouts এবং Templates সাইটের কাঠামো এবং ডিজাইন কাস্টমাইজ করার জন্য অত্যন্ত গুরুত্বপূর্ণ। Layouts XML ফাইলগুলির মাধ্যমে সাইটের কাঠামো এবং ব্লকগুলোর অবস্থান নিয়ন্ত্রণ করে, যেখানে Templates PHTML ফাইলগুলির মাধ্যমে কন্টেন্টের প্রদর্শন এবং স্টাইলিং নিয়ন্ত্রণ করে। এদের মাধ্যমে আপনি সাইটের UI/UX আরও কার্যকর এবং কাস্টমাইজড করতে পারেন।

Content added By

Rezwan Siddiki Tamim

Static Blocks এবং Widgets তৈরি এবং ব্যবস্থাপনা

ম্যাজেন্টো ফ্রেমওয়ার্কে Static Blocks এবং Widgets তৈরি এবং ব্যবস্থাপনা একটি গুরুত্বপূর্ণ ফিচার, যা ব্যবহারকারীদের ই-কমার্স সাইটে কাস্টম কনটেন্ট প্রদর্শন এবং ইন্টারঅ্যাক্টিভ ফিচার যুক্ত করতে সহায়ক। Static Blocks এবং Widgets আপনার সাইটের উপরের বা নীচের অংশে কাস্টম কনটেন্ট, প্রোমোশন, বিজ্ঞাপন, ফর্ম বা অন্য যেকোনো ডাইনামিক ফিচার যোগ করতে ব্যবহার করা হয়।

এখানে Magento এ Static Blocks এবং Widgets তৈরি এবং ব্যবস্থাপনার পুরো প্রক্রিয়া বিস্তারিতভাবে আলোচনা করা হবে।

Static Blocks এবং Widgets এর পরিচিতি

Static Blocks

Static Blocks Magento এর একটি ফিচার যা নির্দিষ্ট কনটেন্ট প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারণত প্রোমোশনাল কনটেন্ট, ওয়েবসাইটের ফুডার বা সাইডবারে ডিসপ্লে করার জন্য ব্যবহার হয়। Static Blocks HTML, CSS, এবং JavaScript ব্যবহার করে কাস্টম কনটেন্ট প্রদর্শন করতে সক্ষম। এগুলোকে পেজের কোনো নির্দিষ্ট অংশে যুক্ত করা যায় বা কিছু নির্দিষ্ট পেজে অবস্থান করা যেতে পারে।

Widgets

Magento এ Widgets হল ডাইনামিক কন্টেন্ট বা কার্যকারিতা প্রদর্শন করার জন্য ব্যবহৃত উপাদান। এগুলি পেজের বিভিন্ন স্থানে যেমন সাইডবার, হেডার, ফুটার ইত্যাদিতে ডিসপ্লে করা যেতে পারে। Widgets ব্যবহারকারীকে ইন্টারঅ্যাক্টিভ অভিজ্ঞতা প্রদান করে, যেমন প্রোডাক্ট কারোসেল, সার্চ বক্স, প্রোডাক্ট স্লাইডার ইত্যাদি। এগুলি ব্যবহারকারী-বন্ধুত্বপূর্ণ এবং কাস্টমাইজযোগ্য।

Static Blocks তৈরি এবং ব্যবস্থাপনা

১. Static Block তৈরি করা

Magento Admin Panel এর মাধ্যমে Static Block তৈরি করতে নিচের পদক্ষেপগুলো অনুসরণ করুন:

Admin Panel এ লগইন করুন: আপনার Magento Admin Panel এ লগইন করুন।
Content → Blocks নির্বাচন করুন: Admin Panel থেকে "Content" মেনুতে যান এবং তারপর "Blocks" অপশনটি নির্বাচন করুন।
Add New Block নির্বাচন করুন: পৃষ্ঠার উপরে "Add New Block" বাটনে ক্লিক করুন।
Block তথ্য প্রদান করুন: এখানে আপনাকে ব্লকের নাম (Title), ব্লকের কোড (Identifier), এবং কনটেন্ট (Content) প্রদান করতে হবে।
- Title: ব্লকের শিরোনাম বা নাম।
- Identifier: ব্লকের একটি ইউনিক আইডি যা আপনি পরবর্তীতে কোডের মাধ্যমে রেফারেন্স করতে পারবেন।
- Content: HTML কোড, CSS, বা JavaScript যা আপনি এই ব্লকে প্রদর্শন করতে চান।
Save Block: সব তথ্য পূরণ করার পর "Save Block" বাটনে ক্লিক করুন।

২. Static Block যুক্ত করা

একবার Static Block তৈরি হয়ে গেলে, আপনি এটি আপনার সাইটে যেকোনো স্থানে যুক্ত করতে পারেন:

Layout Update: আপনি ব্লকটি নির্দিষ্ট পৃষ্ঠার লেআউটে যুক্ত করতে পারেন।
CMS Pages: একটি CMS পেজে Static Block যোগ করতে CMS → Pages এ গিয়ে পেজটি এডিট করুন এবং Content অংশে ব্লক কোড ব্যবহার করুন। উদাহরণ:
```
{{block class="Magento\Cms\Block\Block" block_id="your_block_identifier"}}
```

Widgets তৈরি এবং ব্যবস্থাপনা

১. Widget তৈরি করা

Magento এ Widget তৈরি করার জন্য নিচের পদক্ষেপগুলি অনুসরণ করুন:

Admin Panel এ লগইন করুন: Magento Admin Panel এ লগইন করুন।
Content → Widgets নির্বাচন করুন: Admin Panel থেকে "Content" মেনুতে যান এবং "Widgets" নির্বাচন করুন।
Add Widget নির্বাচন করুন: পৃষ্ঠার উপরে "Add Widget" বাটনে ক্লিক করুন।
Widget টাইপ নির্বাচন করুন: একটি পপ-আপ উইন্ডো আসবে যেখানে আপনি Widget এর টাইপ নির্বাচন করতে পারবেন। Magento বিভিন্ন ধরনের উইজেট যেমন "Catalog Product List", "CMS Static Block", "Newsletter" ইত্যাদি প্রদান করে।
Widget Configuration: এখন আপনাকে Widget এর কনফিগারেশন করতে হবে:
- Storefront Properties: Widget এর শিরোনাম, কনটেন্ট এবং কোন পৃষ্ঠায় প্রদর্শিত হবে তা নির্ধারণ করুন।
- Widget Instance: Widget এর জন্য প্রয়োজনীয় কনফিগারেশন সেটিংস প্রদান করুন, যেমন কনটেন্ট, প্রদর্শন স্থান ইত্যাদি।
Save Widget: সব কনফিগারেশন করার পর "Save Widget" বাটনে ক্লিক করুন।

২. Widget প্লেসমেন্ট

একবার Widget তৈরি হলে, আপনি এটিকে যেকোনো পৃষ্ঠার নির্দিষ্ট স্থানে যোগ করতে পারেন:

CMS Pages: CMS পেজে Widget যোগ করতে CMS → Pages এ যান এবং পেজটি এডিট করুন। এখানে, "Insert Widget" বাটনে ক্লিক করুন এবং আপনার তৈরি Widget নির্বাচন করুন।
Layout Updates: আপনি লেআউট আপডেট ব্যবহার করে নির্দিষ্ট পৃষ্ঠায় Widget বসাতে পারেন।

Static Blocks এবং Widgets ব্যবস্থাপনা

১. Static Blocks এবং Widgets সম্পাদনা

Magento Admin Panel থেকে Static Blocks এবং Widgets সম্পাদনা করা খুব সহজ। প্রতিটি ব্লক বা উইজেটের পাশে একটি "Edit" অপশন থাকবে, যা আপনি ক্লিক করে সংশ্লিষ্ট ব্লক বা উইজেটের কনটেন্ট বা কনফিগারেশন পরিবর্তন করতে পারবেন।

২. Static Blocks এবং Widgets সরানো

যদি আপনি কোনো Static Block বা Widget আর ব্যবহার করতে না চান, তাহলে আপনি তা Admin Panel থেকে সহজেই মুছে ফেলতে পারবেন। শুধুমাত্র "Delete" অপশনটি নির্বাচন করুন এবং ব্লক বা উইজেটটি সরিয়ে দিন।

সারাংশ

Magento ফ্রেমওয়ার্কে Static Blocks এবং Widgets তৈরি এবং ব্যবস্থাপনা একটি গুরুত্বপূর্ণ কার্যকলাপ যা সাইটে কাস্টম কনটেন্ট এবং ডাইনামিক ফিচার যোগ করতে সহায়ক। Static Blocks HTML, CSS এবং JavaScript এর মাধ্যমে কাস্টম কনটেন্ট প্রদর্শন করতে সাহায্য করে, যেখানে Widgets ইন্টারঅ্যাক্টিভ ফিচার এবং কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়। এগুলোর মাধ্যমে Magento সাইটের কাস্টমাইজেশন আরও সহজ এবং শক্তিশালী হয়ে ওঠে।

Content added By

Rezwan Siddiki Tamim

Magento Framework এর পরিচিতি Magento Framework সেটআপ এবং ইনস্টলেশন Magento Admin Panel পরিচিতি Magento Layout এবং XML Customization Magento Module Development

Magento Theme Development

Magento থিম ডেভেলপমেন্টের পরিচিতি

Magento থিম ডেভেলপমেন্টের জন্য পদক্ষেপ

১. থিমের বেসিক কাঠামো তৈরি

২. theme.xml ফাইল তৈরি করা

৩. registration.php ফাইল তৈরি করা

৪. লেআউট XML ফাইল তৈরি করা

৫. PHTML ফাইল তৈরি করা

৬. CSS এবং JavaScript যুক্ত করা

৭. থিম কাস্টমাইজেশন

Magento থিম ডেভেলপমেন্টে সাধারণ সমস্যা ও সমাধান

সারাংশ

Magento এর থিম আর্কিটেকচার

Magento থিম আর্কিটেকচারের মূল উপাদান

১. থিম ফোল্ডার স্ট্রাকচার (Theme Folder Structure)

২. থিমের মূল উপাদান

৩. থিমের স্তর (Theme Layers)

৪. থিম কাস্টমাইজেশন (Theme Customization)

৫. থিম কনফিগারেশন (Theme Configuration)

৬. থিমের পারফরম্যান্স এবং সিকিউরিটি (Theme Performance and Security)

সারাংশ

Custom Theme তৈরি করা

Magento তে কাস্টম থিম তৈরি করার প্রাথমিক প্রস্তুতি

১. সিস্টেম রিকোয়্যারমেন্ট (System Requirements)

২. ডেভেলপার মোডে সিস্টেম চালু করা (Enable Developer Mode)

Magento তে কাস্টম থিম তৈরি করার পদক্ষেপ

১. থিমের ডিরেক্টরি তৈরি করা (Create the Theme Directory)

২. থিমের বেস ফাইল তৈরি করা (Create Basic Theme Files)

৩. থিমের লেআউট কাস্টমাইজ করা (Customize Layout)

৪. থিমের টেমপ্লেট তৈরি করা (Create Template Files)

৫. থিমের ইমেজ এবং মিডিয়া ফাইল যুক্ত করা (Add Images and Media Files)

৬. কাস্টম জাভাস্ক্রিপ্ট এবং CSS যুক্ত করা (Add Custom JavaScript and CSS)

৭. থিমের স্থানীয় কনফিগারেশন (Local Configuration of Theme)

থিম অ্যাক্টিভেট করা (Activate the Theme)

সারাংশ

Magento এর জন্য Layouts এবং Templates

Layouts: ম্যাজেন্টো লেআউট সিস্টেম

১. Layout XML ফাইল

Layout ফাইলের সঠিক গঠন:

২. Layout Update XML

Templates: ম্যাজেন্টো টেমপ্লেট সিস্টেম

১. Template ফাইল

Template ফাইলের উদাহরণ:

২. Template Override

Layout এবং Template এর মধ্যে পার্থক্য

ম্যাজেন্টো থিমে Layout এবং Template কাস্টমাইজেশন

সারাংশ

Static Blocks এবং Widgets তৈরি এবং ব্যবস্থাপনা

Static Blocks এবং Widgets এর পরিচিতি

Static Blocks

Widgets

Static Blocks তৈরি এবং ব্যবস্থাপনা

১. Static Block তৈরি করা

২. Static Block যুক্ত করা

Widgets তৈরি এবং ব্যবস্থাপনা

১. Widget তৈরি করা

২. Widget প্লেসমেন্ট

Static Blocks এবং Widgets ব্যবস্থাপনা

১. Static Blocks এবং Widgets সম্পাদনা

২. Static Blocks এবং Widgets সরানো

সারাংশ

All Notifications

Promotion

২. `theme.xml` ফাইল তৈরি করা

৩. `registration.php` ফাইল তৈরি করা