Magento2-handson
Andralungu @iamspringerin
Dependency InjectionPlugins
ServiceContracts
Composer
Proxies
Factories
UiComponents
knockout&Require
Andralungu @iamsprin...
The clients asks: I want to know when a user wants the invoice
and in this case we need the company name
Addacheckbox,duri...
Addacheckbox,duringtheshippingsteptobecheckedincasetheuserwants
theinvoiceandinthatcasethecompanyfieldbecomesvisibleandreq...
Beforewegetstarted
Requirements :
● composer create-project
--repository-url=https://repo.magento.com/
magento/project-com...
Wheretogetstarted:let’sCreateourmagento2module
http://tinyurl.com/m2mmro-start
bitbull-team/meetmagentoro/registration.php...
Wheretogetstarted:let’sCreateourmagento2module
bitbull-team/meetmagentoro/composer.json
"name": "bitbull-team/meetmagentor...
Wheretogetstarted:let’sCreateourmagento2module
http://tinyurl.com/m2mmro-start
bitbull-team/meetmagentoro/etc/module.xml
<...
SETUPSCRIPTS
Setup/InstallSchema
Setup/UpgradeSchema
Setup/InstallData
Setup/UpgradeData
Setup/Recurring - Magento_Indexer...
SETUPSCRIPTS
bitbull-team/meetmagentoro/Setup/InstallSchema.php
namespace BitbullMeetMagentoRoSetup;
use MagentoFrameworkS...
SETUPSCRIPTS
bitbull-team/meetmagentoro/Setup/InstallSchema.php
public function install(SchemaSetupInterface $setup, Modul...
SETUPSCRIPTS
magento/module-catalog/Setup/UpgradeData.php
public function upgrade(
ModuleDataSetupInterface $setup,
Module...
SETUPSCRIPTS
bin/magento module:enable Bitbull_MeetMagentoRo
bin/magento setup:upgrade
Expected result:
- In the db, insid...
SHowitonthefrontend:theeasypart?
http://tinyurl.com/m2mmro-coxml
<argument name=" jsLayout" xsi:type="array">
<item name="...
SHowitonthefrontend
<item name="invoice-checkbox" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js...
SHowitonthefrontend
bitbull-team/meetmagentoro/view/frontend/web/template/form/element/invoice-check.html
<item name="elem...
SHowitonthefrontend
bitbull-team/meetmagentoro/view/frontend/web/js/invoice-input.js
<item name="component" xsi:type="stri...
SHowitonthefrontend
bitbull-team/meetmagentoro/view/frontend/web/js/invoice-input.js
<item name="component" xsi:type="stri...
Sendittothebackend
bitbull-team/meetmagentoro/view/frontend/requirejs-config.js
var config = {
config:{
mixins: {
'Magento...
Sendittothebackend
bitbull-team/meetmagentoro/view/frontend/web/js/action/set-shipping-information-mixin.js
define([
'jque...
Onestepback:module.xml
If you know that your component’s logic depends on something in another component then you should a...
Onestepback:module.xml
If you change the component load order using <sequence>, you
must regenerate the component list in ...
Whatwe’vegotsofar
I am a truly believer in Murphy's law so ...let’s see it in action
Saveitinsidetheorder
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
...
Saveitinsidetheorder
/**
* @param EventObserver $observer
* @return $this
*/
public function execute(EventObserver $observ...
Sorrybutisnottheend….
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceS...
Sorrybutisnottheend….
/**
*
* @param MagentoSalesApiOrderRepositoryInterface $subject
* @param MagentoSalesApiDataOrderSea...
Sorrybutisnottheend….
/**
* @param MagentoSalesApiDataOrderInterface $order
* @return MagentoSalesApiDataOrderInterface
*/...
THEEND
Questions ?
Thank you
Magento 2 -  hands on MeetMagento Romania 2016
Nächste SlideShare
Wird geladen in …5
×

Magento 2 - hands on MeetMagento Romania 2016

1.005 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

Magento 2 - hands on MeetMagento Romania 2016

  1. 1. Magento2-handson Andralungu @iamspringerin
  2. 2. Dependency InjectionPlugins ServiceContracts Composer Proxies Factories UiComponents knockout&Require Andralungu @iamspringerin http://tinyurl.com/m2mmro-links ExtensionAttributes
  3. 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. 4. Addacheckbox,duringtheshippingsteptobecheckedincasetheuserwants theinvoiceandinthatcasethecompanyfieldbecomesvisibleandrequired. Easy task, right? Estimationonmagento1vsMagento2 Andralungu @iamspringerin
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. Whatwe’vegotsofar I am a truly believer in Murphy's law so ...let’s see it in action
  24. 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. 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. 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. 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. 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. 29. THEEND Questions ? Thank you

×