How to add a checkbox in the checkout process in magento 2 going through setup scrips, frontend with uicomponent, backend use of observer and plugins.

1. Magento2-handson
Andralungu @iamspringerin

2. Dependency InjectionPlugins
ServiceContracts
Composer
Proxies
Factories
UiComponents
knockout&Require
Andralungu @iamspringerin
http://tinyurl.com/m2mmro-links
ExtensionAttributes

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

4. Addacheckbox,duringtheshippingsteptobecheckedincasetheuserwants
theinvoiceandinthatcasethecompanyfieldbecomesvisibleandrequired.
Easy task, right?
Estimationonmagento1vsMagento2
Andralungu @iamspringerin

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

29. THEEND
Questions ?
Thank you