30 апр. 2017
В Magento 1 для каждого shipping method есть возможность вывести дополнительный блок с информацией, которая может впоследствии понадобиться.
Можно выводить уведомление клиентам, к примеру "Доставка осуществляется по рабочим дням с 10:00 до 17:00"
Посмотрим, как это сделать.
Для начала создадим базу модуля, подключив его через composer к нашему магазину.
composer.json
{ "name": "vendor/module", "type": "magento2-module", "license": "proprietary", "homepage": "http://www.example.ru/magento2-module.html", "description": "Модуль доставки", "keywords": [ "magento", "module", "delivery", "vendor" ], "authors": [ { "name": "Vendor", "email": "[email protected]", "homepage": "http://www.vendor.ru/" } ], "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/framework": "*" }, "repositories": [ { "type": "composer", "url": "https://repo.magento.com" } ], "autoload": { "files": [ "registration.php" ], "psr-4": { "Vendor\\Module\\": "" } } }
registration.php
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::Module, 'Vendor_Module', __DIR__ );
etc/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="Vendor_Module" setup_version="2.0.0"> </module> </config>
Для вставки блока в чекаут, нужно создать dependency injection (di). В Magento 2 DI открывает большие возможности по кастомизации функционала кода "не добавляя костыли".
etc/frontend/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="checkout_module_shipping_block" xsi:type="object">Vendor\Module\Model\CheckoutConfigProvider</item> </argument> </arguments> </type> </config>
Следующим шагом добавим вывод блока в нужную секцию чекаута
view/frontend/layout/checkout_index_index.xml
<?xml version="1.0"?> <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="children" xsi:type="array"> <item name="shippingAdditional" xsi:type="array"> <item name="component" xsi:type="string">uiComponent</item> <item name="displayArea" xsi:type="string">shippingAdditional</item> <item name="children" xsi:type="array"> <item name="module_block" xsi:type="array"> <item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping/module-block</item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </argument> </arguments> </referenceBlock> </body> </page>
В Magento 2 весь frontend завязан на UI компонентах, которые можно расширять/подключать.
view/frontend/web/js/view/checkout/shipping/module-block.js
define([ 'uiComponent' ], function (Component) { 'use strict'; var show_module_block = window.checkoutConfig.show_module_block; return Component.extend({ defaults: { template: 'Vendor_Module/checkout/shipping/module-block' }, canVisibleBlock: show_module_block }); });
Внесем информацию в шаблон нашего блока.
view/frontend/web/template/checkout/shipping/module-block.html
<div data-bind="visible: canVisibleBlock"> <h1> Additional Block check app/code/Magento/Checkout/view/frontend/web/template/shipping.html </h1> <input type="text"> </div> <br/>
В шаблоне можно заметить необычный параметр data-bind="visible: canVisibleBlock". Параметр visible позволяет динамически задавать условие видимости блока в чекауте. К примеру, если ваш модуль доставки выключен, то незачем показывать инфоблок.
Magento 2 позволяет динамически подключать конфигурационные параметры на frontend. Для этого создадим модель, которая будет отвечать за работу конфигурации.
Model/CheckoutConfigProvider.php
<?phpnamespace Vendor\Module\Model;
use Magento\Checkout\Model\ConfigProviderInterface;
class CheckoutConfigProvider implements ConfigProviderInterface { /** @var \Vendor\Module\Helper\Data */ protected $_helper;
<span style="color: #008800; font-weight: bold">public</span> <span style="color: #008800; font-weight: bold">function</span> <span style="color: #0066BB; font-weight: bold">__construct</span>( \Vendor\Module\Helper\Data <span style="color: #996633">$helper</span> ) { <span style="color: #996633">$this</span><span style="color: #333333">-></span><span style="color: #0000CC">_helper</span> <span style="color: #333333">=</span> <span style="color: #996633">$helper</span>; } <span style="color: #DD4422">/**</span>
* {@inheritdoc} */ public function getConfig() { $showHide = []; $showHide[‘show_module_block’] = $this->_helper->getConfig(‘active’); return $showHide; } }
В нашем примере, мы используем метод готового helper'а модуля для упрощения получения настроек метода доставки.
Привяжем параметр показа инфоблока к включенности самого модуля доставки.
etc/adminhtml/system.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd"> <system> <section id="carriers"> <group id="module" translate="label" type="text" sortOrder="99" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Vendor Module</label> <field id="active" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="0"> <label>Enabled</label> <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> </field> </group> </section> </system> </config>
Чистим кеш:
demo@webhosting:/current$ php bin/magento cache:clean Cleaned cache types: config layout block_html collections reflection db_ddl eav customer_notification full_page config_integration config_integration_api translate config_webservice
Запускаем перегенерацию DI:
demo@webhosting:/current$ php bin/magento setup:di:compile Compilation was started. Interception cache generation... 7/7 [============================] 100% 3 mins 264.0 MiB Generated code and dependency injection configuration successfully.
Модуль готов. Заходим в настройки, включаем модуль. Готово.