Magento 2 এজেএক্স সহ HTML কীভাবে রেন্ডার করবেন

আমি ম্যাজেন্টো 2 এজেএক্সের মাধ্যমে এইচটিএমএল রেন্ডার করার সেরা উপায়টি সন্ধান করার চেষ্টা করি।

উপায় 1: বিন্যাস ছাড়াই নিয়ামক ব্যবহার করা

ফাইল Foo/Bar/Controller/Popin/Content.php

<?php

namespace Foo\Bar\Controller\Popin;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;

/**
 * Class Content
 */
class Content extends Action
{

    /**
     * Content constructor.
     *
     * @param Context $context
     */
    public function __construct(
        Context $context
    ) {
        parent::__construct($context);
    }

    /**
     *
     */
    public function execute()
    {
        /** @var \Magento\Framework\View\Layout $layout */
        $layout = $this->_view->getLayout();

        /** @var \Foo\Bar\Block\Popin\Content $block */
        $block = $layout->createBlock(\Foo\Bar\Block\Popin\Content::class);
        $block->setTemplate('Foo_Bar::popin/content.phtml');

        $this->getResponse()->setBody($block->toHtml());
    }
}

উপায় 2: কাস্টম লেআউট সহ নিয়ামক ব্যবহার করে

ফাইল Foo/Bar/Controller/Popin/Content.php

<?php

namespace Foo\Bar\Controller\Popin;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;

/**
 * Class Content
 */
class Content extends Action
{

    /**
     * Content constructor.
     *
     * @param Context $context
     */
    public function __construct(
        Context $context
    ) {
        parent::__construct($context);
    }

    /**
     *
     */
    public function execute()
    {
        $this->_view->loadLayout();
        $this->_view->renderLayout();
    }
}

ফাইল Foo/Bar/view/frontend/page_layout/ajax-empty.xml

<?xml version="1.0"?>

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <container name="root"/>
</layout>

ফাইল Foo/Bar/view/frontend/layout/foo_bar_popin_content.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="ajax-empty" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="root">
            <block class="Foo\Bar\Block\Popin\Content" name="foo_bar_popin_content" template="Foo_Bar::popin/content.phtml" cacheable="false"/>
        </referenceContainer>
    </body>
</page>

আইএমও সেরা অনুশীলনটিকে ওয়ে 2 বলে মনে হচ্ছে কারণ এটি যুক্তিটিকে নিয়ন্ত্রণকারী থেকে পৃথক করে।
তবে ওয়ে 2 এর সমস্যাটি হ'ল <body>এবং এর <head>সাথে CSS/ JSউত্পন্ন হয়েছে সুতরাং এটিতে কেবল আমার ব্লক টেমপ্লেট সহ এটি একটি সম্পূর্ণ পরিষ্কার HTML নয়।

আমি কি কাস্টম লেআউটটি ভুল উপায়ে ব্যবহার করছি?
হয় ওয়ে 1 একটি ভাল অনুশীলন হিসাবে বিবেচনা করা হয়?
অন্য কোন উপায় আছে কি?

— ম্যাথো জিওফ্রে
সূত্র

উত্তর:

আমিও ২ টি পথে যেতে পারি এবং প্রকৃতপক্ষে আপনি মাথা, দেহ, সিএসএস ইত্যাদির পরিবর্তে আজেএক্সের মাধ্যমে "খাঁটি" এইচটিএমএল রেন্ডার করতে পারেন।

কৌশলটি হ'ল:

আপনার নিয়ামককে বলুন যে প্রতিক্রিয়ার \Magento\Framework\View\Result\Layoutচেয়ে প্রকারের মতো প্রতিক্রিয়া তৈরি করুন\Magento\Framework\View\Result\Page
এর <layout...>...</layout>চেয়ে মূলের নোডের সাথে একটি লেআউট এক্সএমএল ফাইল ব্যবহার করুন<page...>...</page>

এখানে একটি খুব সাধারণ বাস্তবায়ন।

নিয়ামক

<?php    
namespace Namespace\Module\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\ResponseInterface;
use Magento\Framework\Controller\ResultFactory;

class Index extends Action
{
    /**
     * Dispatch request
     *
     * @return \Magento\Framework\Controller\ResultInterface|ResponseInterface
     * @throws \Magento\Framework\Exception\NotFoundException
     */
    public function execute()
    {
        return $this->resultFactory->create(ResultFactory::TYPE_LAYOUT);
    }
}

বিন্যাস

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <container name="root">
        <block class="Namespace\Module\Block\Some\Block" name="namespace_module.some_block" />
    </container>
</layout>

গিথুবের উপর উদাহরণ

এই উদাহরণ মডিউলটি দেখুন: https://github.com/herveguetin/Herve_AjaxLayout_M2

এই মডিউলটি এটি তৈরি করে:

— হার্ভ গুটিন
সূত্র

আমি যদি পুরো লেআউটটি লোড করতে চাই (কয়েকটি পাত্রে এক্সএমএল, ব্লক ইত্যাদি)? -> টুএইচটিএমএল তৈরি করুন এবং জসনের মাধ্যমে আজাক্সে প্রেরণ করবেন?

— mattkrupnik

বাক্সের বাইরে, ম্যাজেন্টো এজেএক্সের মাধ্যমে এইচটিএমএল রেন্ডার করতে সেগুলির কোনও পদ্ধতি ব্যবহার করে না।

আমি যা দেখেছি, প্রতিবার এ জাতীয় জিনিসটি করা দরকার, ফলাফলটি পরিবহনের জন্য জেএসওএন ব্যবহার করা হয়।

এর থেকে উদাহরণ Magento/Checkout/Controller/Cart/Add:

$this->getResponse()->representJson(
    $this->_objectManager->get('Magento\Framework\Json\Helper\Data')->jsonEncode($result)
);

তারপরে ম্যাজ্যান্টো 2 ফ্রন্টএন্ডে ডেটা পরিচালনা করতে এবং নির্দিষ্ট করা ব্লকগুলি আপডেট করতে হবে যা আপডেট করতে হবে তা আপডেট করার জন্য বিভাগগুলি নামে একটি নতুন প্রক্রিয়া ব্যবহার করে, আপনি এই প্রশ্নোত্তর এর বিভাগগুলি সম্পর্কে আরও শিখতে পারেন: /magento//a/ 143381/2380

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

— ডিজিটাল পিয়ানিজমে রাফেল
সূত্র

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

— ম্যাথো জিওফ্রে

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

— সর্বোচ্চ

@ ম্যাথো হ্যাঁ, আমি বুঝতে পেরেছি: আমার মন্তব্যটি উত্তর সংশোধন করার জন্য রাফেলকে সম্বোধন করেছে, কারণ উত্তরের দ্বিতীয় অংশটি অন্য ব্যবহারকারীরা ভুল বুঝে নিতে পারেন।

— সর্বোচ্চ

@ ম্যাক্সস্টেস্প্যান্টেভিচকে ধন্যবাদ জানার জন্য ধন্যবাদ, আপনি যা বলেছিলেন তা প্রতিফলিত করার জন্য আমি আমার উত্তর সম্পাদনা করেছি

— ডিজিটাল পিয়ানিজমে

আমি আপনার ফিডব্যাকগুলি ব্যবহার করে একটি উত্তর যুক্ত করেছি। আপনার সহায়তার জন্য দুজনকে ধন্যবাদ

— ম্যাথো জিওফ্রে

আমার উদাহরণে আমি sectionsএটি ব্যবহার করতে পারছি না কারণ এটি হয় না customer dataএবং এটি কোনও PUT/ POSTক্রিয়াকলাপের পরে নয় তবে Raphael at Digital Pianismউত্তরটি ব্যবহার করে বুঝলাম কীভাবে ম্যাগেন্টো বিভাগগুলি রেন্ডার করে।

আমরা cartবিভাগটির উদাহরণ নিলে \Magento\Customer\CustomerData\SectionPool::getSectionDataByNamesবিভাগ থেকে ডেটা পুনরুদ্ধার করতে এটি পদ্ধতিটি ব্যবহার করে । এটি \Magento\Checkout\CustomerData\Cart::getSectionDataসহ বিভাগের অঞ্চলগুলি সহ একটি একক অ্যারে নিয়ে যায়$this->layout->createBlock('Magento\Catalog\Block\ShortcutButtons')->toHtml()

তার উপর নির্ভর করে এখানে চূড়ান্ত নিয়ামক শ্রেণি:

<?php

namespace Foo\Bar\Controller\Popin;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\Result\JsonFactory;
use Magento\Framework\Data\Form\FormKey\Validator;
use Psr\Log\LoggerInterface;

/**
 * Class Content
 */
class Content extends Action
{

    /**
     * @var LoggerInterface $logger
     */
    private $logger;
    /**
     * @var Validator $formKeyValidator
     */
    private $formKeyValidator;
    /**
     * @var JsonFactory $resultJsonFactory
     */
    private $resultJsonFactory;

    /**
     * Content constructor.
     *
     * @param Context $context
     * @param LoggerInterface $logger
     * @param Validator $formKeyValidator
     * @param JsonFactory $resultJsonFactory
     */
    public function __construct(
        Context $context,
        LoggerInterface $logger,
        Validator $formKeyValidator,
        JsonFactory $resultJsonFactory
    ) {
        $this->logger            = $logger;
        $this->formKeyValidator  = $formKeyValidator;
        $this->resultJsonFactory = $resultJsonFactory;
        parent::__construct($context);
    }

    /**
     *
     */
    public function execute()
    {
        if (!$this->formKeyValidator->validate($this->getRequest())) {
            return $this->resultRedirectFactory->create()->setPath('checkout/cart/');
        }

        /** @var \Magento\Framework\Controller\Result\Json $resultJson */
        $resultJson = $this->resultJsonFactory->create();

        try {
            /** @var \Magento\Framework\View\Layout $layout */
            $layout = $this->_view->getLayout();
            /** @var \Foo\Bar\Block\Popin\Content $block */
            $block = $layout->createBlock(\Foo\Bar\Block\Popin\Content::class);
            /** @var array $response */
            $response = [
                'content' => $block->toHtml(),
            ];
        } catch (\Exception $exception) {
            $resultJson->setStatusHeader(
                \Zend\Http\Response::STATUS_CODE_400,
                \Zend\Http\AbstractMessage::VERSION_11,
                'Bad Request'
            );
            /** @var array $response */
            $response = [
                'message' => __('An error occurred')
            ];
            $this->logger->critical($exception);
        }

        return $resultJson->setData($response);
    }
}

— ম্যাথো জিওফ্রে
সূত্র