ম্যাজেন্টো ফ্রেমওয়ার্কে (Magento Framework) কাস্টম চেকআউট স্টেপ তৈরি করা ই-কমার্স সাইটে চেকআউট প্রক্রিয়াকে কাস্টমাইজ করার একটি গুরুত্বপূর্ণ অংশ। এটি আপনাকে ব্যবহারকারীদের জন্য অতিরিক্ত ফিল্ড বা তথ্য সংগ্রহ করার সুযোগ দেয়। ম্যাজেন্টো স্ট্যান্ডার্ড চেকআউট প্রক্রিয়ায় ৬টি স্টেপ থাকে, কিন্তু আপনি কাস্টম চেকআউট স্টেপ তৈরি করে সাইটের চেকআউট অভিজ্ঞতা কাস্টমাইজ করতে পারেন।
এখানে আমরা একটি কাস্টম চেকআউট স্টেপ তৈরি করার প্রক্রিয়া নিয়ে আলোচনা করব।
১. কাস্টম চেকআউট স্টেপ তৈরি করার জন্য ডিরেক্টরি ও ফাইল স্ট্রাকচার তৈরি করা
প্রথমে, আপনাকে আপনার কাস্টম চেকআউট স্টেপের জন্য একটি মডিউল তৈরি করতে হবে। চলুন একটি উদাহরণ ব্যবহার করি যেখানে একটি কাস্টম "Survey" স্টেপ তৈরি করা হচ্ছে।
১.১. মডিউল তৈরি করা
app/code/[Vendor]/[ModuleName] ফোল্ডারে একটি নতুন ডিরেক্টরি তৈরি করুন:
app/code/Custom/CheckoutStepমডিউল রেজিস্ট্রেশন ফাইল (
registration.php) তৈরি করুন:<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Custom_CheckoutStep', __DIR__ );module.xml কনফিগারেশন ফাইল তৈরি করুন:
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Custom_CheckoutStep" setup_version="1.0.0"/> </config>মডিউল সক্রিয় করতে নিচের কমান্ড রান করুন:
php bin/magento module:enable Custom_CheckoutStep php bin/magento setup:upgrade php bin/magento cache:flush
২. কাস্টম চেকআউট স্টেপ যোগ করা
এখন আপনার মডিউল তৈরি হয়ে গেছে, পরবর্তী পদক্ষেপে কাস্টম চেকআউট স্টেপ যুক্ত করতে হবে। ম্যাজেন্টো চেকআউট স্টেপগুলি XML ফাইল এবং PHP ক্লাস দ্বারা পরিচালিত হয়।
২.১. Layout XML ফাইল তৈরি করা
app/code/Custom/CheckoutStep/view/frontend/layout/checkout_index_index.xml ফাইল তৈরি করুন:
<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout.xsd">
<checkout_index_index>
<referenceContainer name="checkout.steps">
<block class="Magento\Framework\View\Element\Template" name="custom.checkout.step" template="Custom_CheckoutStep::checkout/step.phtml" before="payment" />
</referenceContainer>
</checkout_index_index>
</layout>
এই XML ফাইলটি কাস্টম চেকআউট স্টেপকে চেকআউট পেজে নির্দিষ্ট করবে। before="payment" মানে এই স্টেপটি পেমেন্ট স্টেপের আগে প্রদর্শিত হবে।
২.২. কাস্টম স্টেপের জন্য টেমপ্লেট ফাইল তৈরি করা
এখন আপনাকে চেকআউট স্টেপের জন্য একটি টেমপ্লেট ফাইল তৈরি করতে হবে। এটি HTML এবং PHP ব্যবহার করে স্টেপের কনটেন্ট প্রদর্শন করবে।
app/code/Custom/CheckoutStep/view/frontend/templates/checkout/step.phtml ফাইল তৈরি করুন:
<div class="custom-checkout-step">
<h3>Survey Step</h3>
<p>Fill out this survey before proceeding to payment.</p>
<textarea name="survey" id="survey" rows="5" cols="40"></textarea>
</div>
এখানে, একটি টেক্সটএরিয়া ফিল্ড আছে যা ব্যবহারকারীকে কিছু তথ্য জমা দিতে উৎসাহিত করবে।
৩. কাস্টম চেকআউট স্টেপের জন্য PHP ক্লাস তৈরি করা
কাস্টম চেকআউট স্টেপের জন্য PHP ক্লাস তৈরি করা প্রয়োজন, যাতে এই স্টেপটি সঠিকভাবে কাজ করে এবং সিস্টেমে তথ্য সংগ্রহ করা যায়।
৩.১. Checkout Step Controller তৈরি করা
app/code/Custom/CheckoutStep/Controller/Index/Save.php ফাইল তৈরি করুন:
<?php
namespace Custom\CheckoutStep\Controller\Index;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;
use Magento\Checkout\Model\Session;
class Save extends \Magento\Framework\App\Action\Action
{
protected $resultJsonFactory;
protected $checkoutSession;
public function __construct(
Context $context,
JsonFactory $resultJsonFactory,
Session $checkoutSession
) {
$this->resultJsonFactory = $resultJsonFactory;
$this->checkoutSession = $checkoutSession;
parent::__construct($context);
}
public function execute()
{
$surveyData = $this->getRequest()->getParam('survey');
$this->checkoutSession->setSurveyData($surveyData);
$result = $this->resultJsonFactory->create();
return $result->setData(['success' => true]);
}
}
এখানে Save কন্ট্রোলারটি ফর্ম ডেটা (survey) সংগ্রহ করে এবং Checkout Session এ সেই ডেটা সংরক্ষণ করে।
৩.২. JavaScript ফাইল তৈরি করা (Optional)
যদি আপনি কাস্টম স্টেপে ফর্ম সাবমিট করার জন্য JavaScript ব্যবহার করতে চান, তবে আপনাকে একটি JavaScript ফাইলও যুক্ত করতে হবে। উদাহরণস্বরূপ, চেকআউট স্টেপের জন্য একটি form-submit.js ফাইল তৈরি করুন।
app/code/Custom/CheckoutStep/view/frontend/web/js/form-submit.js:
define([
'jquery',
'mage/url',
'Magento_Checkout/js/model/quote'
], function ($, url, quote) {
'use strict';
return function (config) {
$('#survey-form').on('submit', function (e) {
e.preventDefault();
var surveyData = $('#survey').val();
$.ajax({
url: url.build('checkout/index/save'),
type: 'POST',
data: { survey: surveyData },
success: function (response) {
if (response.success) {
alert('Survey submitted successfully');
}
}
});
});
};
});
এটি survey ফর্ম ডেটা POST করে কাস্টম কন্ট্রোলারকে পাঠাবে এবং ফলাফল প্রাপ্তি হলে একটি সফল বার্তা প্রদর্শন করবে।
৩.৩. JavaScript ফাইলকে Layout XML এ অন্তর্ভুক্ত করা
checkout_index_index.xml ফাইলটি খুলুন এবং JavaScript ফাইলটি অন্তর্ভুক্ত করুন:
<referenceContainer name="checkout.steps">
<block class="Magento\Framework\View\Element\Template" name="custom.checkout.step" template="Custom_CheckoutStep::checkout/step.phtml" before="payment">
<arguments>
<argument name="js" xsi:type="string">Custom_CheckoutStep::js/form-submit.js</argument>
</arguments>
</block>
</referenceContainer>
৪. চেকআউট স্টেপ প্রক্রিয়া শেষ করা
এখন আপনার কাস্টম চেকআউট স্টেপ সফলভাবে তৈরি হয়েছে এবং এটি চেকআউট প্রক্রিয়ায় কাজ করবে। আপনি কাস্টম স্টেপে ডেটা জমা করানো, তথ্য সেভ করা এবং পেমেন্ট স্টেপে যাওয়ার জন্য কাস্টম লজিক যোগ করতে পারেন।
সারাংশ
ম্যাজেন্টোতে কাস্টম চেকআউট স্টেপ তৈরি করা একটি শক্তিশালী কাস্টমাইজেশন প্রক্রিয়া যা আপনার ই-কমার্স সাইটের চেকআউট প্রক্রিয়াকে আরও ব্যবহারকারী-বান্ধব এবং কার্যকরী করতে সাহায্য করে। XML, PHP, এবং JavaScript ফাইল ব্যবহার করে আপনি কাস্টম স্টেপ তৈরি করতে পারেন এবং ফর্ম ডেটা সংগ্রহ, স্টোর এবং ব্যবহারকারীদের জন্য একটি স্নিগ্ধ চেকআউট অভিজ্ঞতা তৈরি করতে পারেন।
Read more
