ম্যাজেন্টো 2: কীভাবে চেকআউট পৃষ্ঠায় অতিরিক্ত ব্লক যুক্ত করবেন?

11

আমি উপরের ফাইলটিকে ওভাররাইড করতে চাই এবং এতে আমার কাস্টম ব্লকটি প্রদর্শন করতে চাই li।

Magento \ বিক্রেতা \ Magento \ মডিউল-চেকআউট \ দৃশ্য \ ফ্রন্টএন্ড \ ওয়েব \ টেমপ্লেট \ shipping.html

<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
    <div class="step-title" data-bind="i18n: 'Shipping Address'" data-role="title"></div>
</li>   

<!-- ko if:myBlock --> // Mine need to call block created from Admin
<li>
    <p data-bind="html: myBlock"></p>
</li> 
<!-- /ko -->

<!--Shipping method template-->
<li id="opc-shipping_method"
    class="checkout-shipping-method"
    data-bind="fadeVisible: visible(), blockLoader: isLoading"
    role="presentation">
    <div class="checkout-shipping-method">
        <div class="step-title" data-bind="i18n: 'Shipping Methods'" data-role="title"></div>
    </div>
</li>

যদি অ্যাডমিনে ব্লক সক্ষম থাকে তবে এটি liব্লক ডেটা সহ একটি কাস্টম দেখায়, অন্যথায় এটি কিছুই দেখায় না।

.htmlব্লকটি সক্ষম রয়েছে কি না আমরা সরাসরি ফাইলটিতে পরীক্ষা করতে পারি ?

magento2  checkout  blocks  custom  magento-2.1.3 
— অঙ্কিত শাহ
সূত্র
— অ্যালেক্স কনস্টান্টাইনসাইকু
হাই @ অ্যালেক্সকনস্ট্যান্টাইনসুকু শিপিংয়ের উপরে উপস্থাপন করতে চান
— অঙ্কিত শাহ

উত্তর:

20

এখানে আমি চেকআউটটির শিপিং পদ্ধতির উপরে কাস্টম ব্লক দেখানোর উদাহরণ দিই

1) di.xML এ তৈরি করুন

অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল, / etc / ফ্রন্টএন্ড / di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="cms_block_config_provider" xsi:type="object">Vendor\Module\Model\ConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

2) আপনার উইন্ডোজ কোডে চেকআউটকনফিগের স্থিতিশীল ব্লকটি সংজ্ঞায়িত করতে কনফিগারপ্রভাইডার.এফপি তৈরি করুন

অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল / মডেল / ConfigProvider.php

<?php

namespace Vendor\Module\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\View\LayoutInterface;

class ConfigProvider implements ConfigProviderInterface
{
    /** @var LayoutInterface  */
    protected $_layout;

    public function __construct(LayoutInterface $layout)
    {
        $this->_layout = $layout;
    }

    public function getConfig()
    {
        $myBlockId = "my_static_block"; // CMS Block Identifier
        //$myBlockId = 20; // CMS Block ID

        return [
            'my_block_content' => $this->_layout->createBlock('Magento\Cms\Block\Block')->setBlockId($myBlockId)->toHtml()
        ];
    }
}

3) আপনার মডিউলে Checkout_index_index.xML ওভাররাইড করুন এবং আপনার নিজস্ব শিপিং উপাদানটি সংজ্ঞায়িত করুন component

অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল / দৃশ্য / ফ্রন্টএন্ড / লেআউট / checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="checkout" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="component" xsi:type="string">Vendor_Module/js/view/shipping</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

4) এখন শিপিং.জেএস তৈরি করুন এবং আপনার নিজস্ব শিপিং টেম্পলেট ফাইলটি সংজ্ঞায়িত করুন

অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল / দৃশ্য / ফ্রন্টএন্ড / ওয়েব / JS / দৃশ্য / shipping.js

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/view/shipping'
    ],
    function(
        $,
        ko,
        Component
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_Module/shipping'
            },

            initialize: function () {
                var self = this;
                this._super();
            }

        });
    }
);

5) কপি শিপিং। Html থেকে

বিক্রেতা / Magento / মডিউল-চেকআউট / দৃশ্য / ফ্রন্টএন্ড / ওয়েব / টেমপ্লেট / shipping.html

করতে তোমার মডিউল

অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল / দৃশ্য / ফ্রন্টএন্ড / ওয়েব / টেমপ্লেট / shipping.html

এখনই যোগ window.checkoutConfig.my_block_content করার shipping.html যেখানে আপনি আপনার স্ট্যাটিক ব্লক দেখাতে চান

<div data-bind="html: window.checkoutConfig.my_block_content"></div>

এখানে আমি আমার স্থিতিশীল ব্লকে নতুন পণ্য উইজেট যুক্ত করি

আউটপুট:

এখানে চিত্র বর্ণনা লিখুন

— প্রিন্স প্যাটেল
সূত্র
আমি একই কাজ করেছি কিন্তু কাজ করছি না। আমি এই ট্যাবে স্থিতিশীল ব্লক সামগ্রী দেখতে পাচ্ছি না।
— সরফরাজ সিপাই
@ প্রিন্স, "শিপিং পদ্ধতি" এর নীচে ব্লক প্রদর্শন করতে আমার কী করা উচিত?
— বিনয়া মহেশ্বরী
1
@ বিনায়া মহেশ্বরী shipping.htmlশিপিং পদ্ধতির পরে ব্লকটি দেখানোর জন্য আপনার ব্লক ডিভিকে শেষ রাখবেন
— প্রিন্স প্যাটেল
1
@ বিনায়া মহেশ্বরী এটি ব্রাউজার ক্যাশে হতে হবে। নকআউট জেএস
— প্রিন্স প্যাটেল
1
হ্যাঁ! এটি ব্রাউজারের ক্যাশে ছিল, আপনার সহায়তার জন্য ধন্যবাদ।
— বিনয়া মহেশ্বরী
4

আমি সাইডবারের নীচে চেকআউট পৃষ্ঠায় একটি সিএমএস ব্লক প্রদর্শন করতে এটি করেছি। 1. টেমপ্লেটগুলিতে / onepage.phtml আমি এই জাতীয় সিম ব্লক বিষয়বস্তু ধরে রাখতে একটি জেএস ভেরিয়েবল তৈরি করেছি:

<?php $myCmsBlock = $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('my_cms_block')->toHtml() ?>

<script type="text/javascript">
    var my_cms_block = <?php echo json_encode($myCmsBlock)?>;
</script>

২. নকআউট টেমপ্লেট ফাইলে (আমার ক্ষেত্রে এটি ওয়েব / জেএস / টেম্পলেট / সাইডবার এইচটিএমএল ছিল) উপরের জেএস ভেরিয়েবলের থেকে সিমস ব্লক সামগ্রীটি প্রদর্শিত হয়েছিল:

<div class="opc-help-cms" data-bind="html:my_cms_block">
    </div>

আশা করি এটি কাউকে সাহায্য করবে! ধন্যবাদ!

— সিজু জোসেফ
সূত্র
সহজ সমাধান। কাস্টম onepage.phtml প্রস্তুত করার জন্য কেবল প্রয়োজন। আমি এই ম্যাজেন্টো.স্ট্যাকেক্সেঞ্জার.কম
— গেডিমিনাস
আপনি কি জানেন যে আমি যদি অর্থ প্রদানের পদক্ষেপে এটি যুক্ত করতে চাই তবে আমার কী করা উচিত? আপনি উপরে উল্লিখিত যা বিক্রেতার / ম্যাজেন্টো / মডিউল-চেকআউট / ভিউ / ফ্রন্টএন্ড / ওয়েব / টেমপ্লেট / অনপেজ এইচটিএমএল এবং পেমেন্ট এইচটিএমএলে যোগ করার চেষ্টা করেছি তবে কোনও প্রভাব ফেলেনি। magento.stackexchange.com/Qestions/296500/…
— ক্রিস ওয়েন
পেমেন্ট এইচটিএমএল onepage.phtml থেকে জেএস ভেরিয়েবল অ্যাক্সেস করতে সক্ষম হওয়া উচিত। চেকআউট পৃষ্ঠায় কনসোলে এটি মুদ্রণের মাধ্যমে এটি যথাযথভাবে রেন্ডার হয়েছে তা নিশ্চিত করুন
— সিজু জোসেফ
-1

পিএইচটিএমএল ফাইতে স্ট্যাটিক ব্লক যুক্ত করুন:

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>

এক্সএমএল ব্যবহার করে ব্লক যুক্ত করুন:

<referenceContainer name="content">
    <block class="Magento\Cms\Block\Block" name="block_identifier">
       <arguments>
         <argument name="block_id" xsi:type="string">block_identifier</argument>
       </arguments>
    </block>
</referenceContainer>

সেমি পৃষ্ঠাতে ব্লক যুক্ত করুন:

{{block class="Magento\Cms\Block\Block" block_id="block_identifier"}}
— চরভি পরীখ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.