Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.140 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

×