Magento 2 - hands on MeetMagento Romania 2016
4 likes2,003 views
The document outlines the development process for a Magento 2 module named 'bitbull_meetmagentoro', which adds an invoice request option during the shipping step of the checkout process. It includes detailed instructions on setting up the module, adding necessary database columns, and customizing frontend components. Additionally, it describes how to save and retrieve the invoice checkbox status in the order details using Magento's event observers and plugins.
![Wheretogetstarted:let’sCreateourmagento2module
bitbull-team/meetmagentoro/composer.json
"name": "bitbull-team/meetmagentoro",
"description": "sample magento 2 module starter",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magento/magento-composer-installer": "*"
},
……………………...
"autoload": {
"files": [
"registration.php"
],
"psr-4": {
"BitbullMeetMagentoRo": ""
}
}
http://tinyurl.com/m2mmro-start](https://image.slidesharecdn.com/magento2-handson-161029093357/85/Magento-2-hands-on-MeetMagento-Romania-2016-7-320.jpg)
![SETUPSCRIPTS
bitbull-team/meetmagentoro/Setup/InstallSchema.php
public function install(SchemaSetupInterface $setup, ModuleContextInterface
$context)
{
$installer = $setup;
$installer->startSetup();
$installer->getConnection()->addColumn(
$installer->getTable('sales_order'),
'invoice_checkbox',
[
'type' => MagentoFrameworkDBDdlTable::TYPE_SMALLINT,
'nullable' => false,
'default' => '0',
'comment' => 'Request invoice'
]
);
$setup->endSetup();
}](https://image.slidesharecdn.com/magento2-handson-161029093357/85/Magento-2-hands-on-MeetMagento-Romania-2016-11-320.jpg)
![SHowitonthefrontend
bitbull-team/meetmagentoro/view/frontend/web/js/invoice-input.js
<item name="component" xsi:type="string">Bitbull_MeetMagentoRo/js/invoice-input</item>
define([
'underscore',
'Magento_Ui/js/form/element/abstract',
'jquery'
], function (_, Abstract, $) {
"use strict";
return Abstract.extend({
defaults: {
visible: false,
required: false,
listens: {
'${ $.provider }:${ $.customScope ? $.customScope + "." :
""}custom_attributes.invoice-checkbox': 'setVisible'](https://image.slidesharecdn.com/magento2-handson-161029093357/85/Magento-2-hands-on-MeetMagento-Romania-2016-17-320.jpg)
![SHowitonthefrontend
bitbull-team/meetmagentoro/view/frontend/web/js/invoice-input.js
<item name="component" xsi:type="string">Bitbull_MeetMagentoRo/js/invoice-input</item>
setVisible: function () {
var visible =
this.source.shippingAddress.custom_attributes['invoice-checkbox'];
if (visible) {
this.validation['required-entry'] = true;
} else {
this.error(false);
this.validation = _.omit(this.validation, 'required-entry');
}
this.visible(visible);
this.required(visible);
return this;
}
<item name="dataScope"
xsi:type="string">shippingAddress.custom_attributes.invoice-checkbox</item>](https://image.slidesharecdn.com/magento2-handson-161029093357/85/Magento-2-hands-on-MeetMagento-Romania-2016-18-320.jpg)
![Sendittothebackend
bitbull-team/meetmagentoro/view/frontend/web/js/action/set-shipping-information-mixin.js
define([
'jquery',
'mage/utils/wrapper',
'Magento_Checkout/js/model/quote'
], function ($, wrapper, quote) {
'use strict';
return function (setShippingInformationAction) {
return wrapper.wrap(setShippingInformationAction, function (originalAction) {
var shippingAddress = quote.shippingAddress();
if (shippingAddress['extension_attributes'] === undefined) {
shippingAddress['extension_attributes'] = {};
}
shippingAddress['extension_attributes']['invoice_checkbox'] =
shippingAddress.customAttributes['invoice_checkbox'];
// original action Magento_Checkout/js/action/set-shipping-information
return originalAction();](https://image.slidesharecdn.com/magento2-handson-161029093357/85/Magento-2-hands-on-MeetMagento-Romania-2016-20-320.jpg)
Magento 2 - hands on MeetMagento Romania 2016
- 3. The clients asks: I want to know when a user wants the invoice and in this case we need the company name Addacheckbox,duringtheshippingsteptobe checkedincasetheuserwantstheinvoiceandin thatcasethecompanyfieldbecomes required
- 5. Beforewegetstarted Requirements : ● composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition <installation directory name> ● bin/magento setup:install ● bin/magento deploy:mode:set developer ● bin/magento cache:disable
- 6. Wheretogetstarted:let’sCreateourmagento2module http://tinyurl.com/m2mmro-start bitbull-team/meetmagentoro/registration.php <?php MagentoFrameworkComponentComponentRegistrar::register( MagentoFrameworkComponentComponentRegistrar::MODULE, 'Bitbull_MeetMagentoRo', __DIR__ ); Magento components, including modules, themes, and language packages, must be registered in the Magento system through the Magento ComponentRegistrar class
- 7. Wheretogetstarted:let’sCreateourmagento2module bitbull-team/meetmagentoro/composer.json "name": "bitbull-team/meetmagentoro", "description": "sample magento 2 module starter", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/magento-composer-installer": "*" }, ……………………... "autoload": { "files": [ "registration.php" ], "psr-4": { "BitbullMeetMagentoRo": "" } } http://tinyurl.com/m2mmro-start
- 8. Wheretogetstarted:let’sCreateourmagento2module http://tinyurl.com/m2mmro-start bitbull-team/meetmagentoro/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="Bitbull_MeetMagentoRo" setup_version="0.1.0"> </module> </config>
- 9. SETUPSCRIPTS Setup/InstallSchema Setup/UpgradeSchema Setup/InstallData Setup/UpgradeData Setup/Recurring - Magento_Indexer module checks for new defined indexers and adds them to indexer_state table. Setup/Uninstall
- 10. SETUPSCRIPTS bitbull-team/meetmagentoro/Setup/InstallSchema.php namespace BitbullMeetMagentoRoSetup; use MagentoFrameworkSetupInstallSchemaInterface; use MagentoFrameworkSetupModuleContextInterface; use MagentoFrameworkSetupSchemaSetupInterface; /** * Class InstallSchema * @package BitbullMeetMagentoRoSetup */ class InstallSchema implements InstallSchemaInterface {
- 11. SETUPSCRIPTS bitbull-team/meetmagentoro/Setup/InstallSchema.php public function install(SchemaSetupInterface $setup, ModuleContextInterface $context) { $installer = $setup; $installer->startSetup(); $installer->getConnection()->addColumn( $installer->getTable('sales_order'), 'invoice_checkbox', [ 'type' => MagentoFrameworkDBDdlTable::TYPE_SMALLINT, 'nullable' => false, 'default' => '0', 'comment' => 'Request invoice' ] ); $setup->endSetup(); }
- 12. SETUPSCRIPTS magento/module-catalog/Setup/UpgradeData.php public function upgrade( ModuleDataSetupInterface $setup, ModuleContextInterface $context){ $setup->startSetup(); if ($context->getVersion() && version_compare($context->getVersion(), '2.0.1') < 0) <module name="Magento_Catalog" setup_version="2.0.7"> magento/module-catalog/etc/module.xml
- 13. SETUPSCRIPTS bin/magento module:enable Bitbull_MeetMagentoRo bin/magento setup:upgrade Expected result: - In the db, inside setup_module ( old core_resource) # module, schema_version, data_version Bitbull_MeetMagentoRo, 0.1.0, 0.1.0 - Listed in config.php - Listed with bin/magento module:status - And our new column inside sales_order
- 14. SHowitonthefrontend:theeasypart? http://tinyurl.com/m2mmro-coxml <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=" shipping-address-fieldset" xsi:type="array"> <item name="children" xsi:type="array"> <item name=" invoice-checkbox" xsi:type="array"> bitbull-team/meetmagentoro/view/frontend/layout/checkout_index_index.xml
- 15. SHowitonthefrontend <item name="invoice-checkbox" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item> <item name="config" xsi:type="array"> <item name="customScope" xsi:type="string">shippingAddress.custom_attributes</item> <item name="template" xsi:type="string">ui/form/field</item> <item name="elementTmpl" xsi:type="string">Bitbull_MeetMagentoRo/form/element/invoice-check</item> </item> <item name="provider" xsi:type="string">checkoutProvider</item> <item name="dataScope" xsi:type="string">shippingAddress.custom_attributes.invoice-checkbox</item> <item name="description" xsi:type="string">Request Invoice</item> <item name="sortOrder" xsi:type="string">121</item> </item> <item name="company" xsi:type="array"> <item name="component" xsi:type="string">Bitbull_MeetMagentoRo/js/invoice-input</item> <item name="sortOrder" xsi:type="string">122</item> </item>
- 16. SHowitonthefrontend bitbull-team/meetmagentoro/view/frontend/web/template/form/element/invoice-check.html <item name="elementTmpl" xsi:type="string">Bitbull_MeetMagentoRo/form/element/invoice-check</item> <div class="field choice"> <input type="checkbox" class="checkbox" data-bind="checked: value, attr: { id: uid, disabled: disabled, name: inputName }, hasFocus: focused"> <label data-bind="checked: value, attr: { for: uid }"> <span data-bind="text: description"></span> </label> </div>
- 17. SHowitonthefrontend bitbull-team/meetmagentoro/view/frontend/web/js/invoice-input.js <item name="component" xsi:type="string">Bitbull_MeetMagentoRo/js/invoice-input</item> define([ 'underscore', 'Magento_Ui/js/form/element/abstract', 'jquery' ], function (_, Abstract, $) { "use strict"; return Abstract.extend({ defaults: { visible: false, required: false, listens: { '${ $.provider }:${ $.customScope ? $.customScope + "." : ""}custom_attributes.invoice-checkbox': 'setVisible'
- 18. SHowitonthefrontend bitbull-team/meetmagentoro/view/frontend/web/js/invoice-input.js <item name="component" xsi:type="string">Bitbull_MeetMagentoRo/js/invoice-input</item> setVisible: function () { var visible = this.source.shippingAddress.custom_attributes['invoice-checkbox']; if (visible) { this.validation['required-entry'] = true; } else { this.error(false); this.validation = _.omit(this.validation, 'required-entry'); } this.visible(visible); this.required(visible); return this; } <item name="dataScope" xsi:type="string">shippingAddress.custom_attributes.invoice-checkbox</item>
- 19. Sendittothebackend bitbull-team/meetmagentoro/view/frontend/requirejs-config.js var config = { config:{ mixins: { 'Magento_Checkout/js/action/set-shipping-information': { 'Bitbull_MeetMagentoRo/js/action/set-shipping-information-mixin': true } } }, map: { '*': { 'Bitbull_MeetMagentoRo/js/invoice-input': 'Bitbull_MeetMagentoRo/js/invoice-input' } } } http://tinyurl.com/m2mmro-requirejs
- 20. Sendittothebackend bitbull-team/meetmagentoro/view/frontend/web/js/action/set-shipping-information-mixin.js define([ 'jquery', 'mage/utils/wrapper', 'Magento_Checkout/js/model/quote' ], function ($, wrapper, quote) { 'use strict'; return function (setShippingInformationAction) { return wrapper.wrap(setShippingInformationAction, function (originalAction) { var shippingAddress = quote.shippingAddress(); if (shippingAddress['extension_attributes'] === undefined) { shippingAddress['extension_attributes'] = {}; } shippingAddress['extension_attributes']['invoice_checkbox'] = shippingAddress.customAttributes['invoice_checkbox']; // original action Magento_Checkout/js/action/set-shipping-information return originalAction();
- 21. Onestepback:module.xml If you know that your component’s logic depends on something in another component then you should add it to require in composer.json and <sequence> in module.xml <module name="Bitbull_MeetMagentoRo" setup_version="0.1.0"> <sequence> <module name="Magento_Checkout"/> <module name="Magento_Ui"/> </sequence> </module> "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/magento-composer-installer": "*", "magento/module-ui": "100.1.*", "magento/framework": "100.1.*", "magento/module-checkout": "100.1.*" },
- 22. Onestepback:module.xml If you change the component load order using <sequence>, you must regenerate the component list in config.php; otherwise, the load order does not take effect. bin/magento module:disable Bitbull_MeetMagentoRo bin/magento module:enable Bitbull_MeetMagentoRo
- 23. Whatwe’vegotsofar I am a truly believer in Murphy's law so ...let’s see it in action
- 24. Saveitinsidetheorder <?xml version="1.0" encoding="UTF-8"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd"> <event name=" sales_model_service_quote_submit_before"> <observer name="save-checkbox-invoice-order" instance="BitbullMeetMagentoRoObserverSaveCheckboxInvoiceToOrderObserver"/> </event> </config> bitbull-team/meetmagentoro/etc/events.xml
- 25. Saveitinsidetheorder /** * @param EventObserver $observer * @return $this */ public function execute(EventObserver $observer) { /** @var MagentoSalesApiDataOrderInterface $order */ $order = $observer->getOrder(); /** @var MagentoQuoteModelQuote $quote */ $quote = $observer->getQuote(); $invoiceCheckbox = $quote->getShippingAddress()->getExtensionAttributes()->getInvoiceCheckbox(); $order->setInvoiceCheckbox($invoiceCheckbox); return $this; } bitbull-team/meetmagentoro/Observer/SaveCheckboxInvoiceToOrderObserver.php
- 26. Sorrybutisnottheend…. <?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="MagentoSalesApiOrderRepositoryInterface"> <plugin name="add-invoice-check" type="BitbullMeetMagentoRoPluginSalesApiOrderRepositoryInterfacePlugin"/> </type> </config> bitbull-team/meetmagentoro/etc/di.xml
- 27. Sorrybutisnottheend…. /** * * @param MagentoSalesApiOrderRepositoryInterface $subject * @param MagentoSalesApiDataOrderSearchResultInterface $result * @return MagentoSalesApiDataOrderSearchResultInterface */ public function afterGetList( MagentoSalesApiOrderRepositoryInterface $subject, MagentoSalesApiDataOrderSearchResultInterface $result ) { foreach ($result->getItems() as $order) { $this->getInvoiceCheckExtensionAttribute($order); } return $result; } bitbull-team/meetmagentoro/Plugin/Sales/Api/OrderRepositoryInterfacePlugin.php
- 28. Sorrybutisnottheend…. /** * @param MagentoSalesApiDataOrderInterface $order * @return MagentoSalesApiDataOrderInterface */ private function getInvoiceCheckExtensionAttribute($order) { /** @var MagentoSalesApiDataOrderExtensionInterface $extensionAttributes */ $extensionAttributes = $order->getExtensionAttributes(); if ($extensionAttributes && $extensionAttributes->getInvoiceCheckbox()) { return $order; } if (null === $extensionAttributes) { $extensionAttributes = $this->orderExtensionFactory->create(); } $extensionAttributes->setInvoiceCheckbox($order->getInvoiceCheckbox()); $order->setExtensionAttributes($extensionAttributes); return $order; } bitbull-team/meetmagentoro/Plugin/Sales/Api/OrderRepositoryInterfacePlugin.php