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.

Magento 2 UI Components Overview

244 Aufrufe

Veröffentlicht am

Flexible UI rendering in Magento 2 is possible due to the usage of UI components. By utilizing them, you configure every page of your eCommerce website. Find a brief description of basic Magento 2 UI components in document.

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

  • Gehören Sie zu den Ersten, denen das gefällt!

Magento 2 UI Components Overview

  1. 1. Overview of UI components - Magento 2 Developer Documentation Visit Us: www.eglobeits.com
  2. 2. Magento 2 UI Components Basic Components ● Listing component ● Form component 1. Breadcrumbs 2. Pagination 3. Buttons 4. Popups 5. Drop-downs 6. Ratings 7. Forms 8. Sections 9. Icons 10. layout 11. Tabs and accordions 12. Tables 13. Loaders 14. Tooltips 15.Messages 16. Actions-toolbar
  3. 3. Magento 2 UI Library Magento UI Library Magento UI library is located under `/lib/web/` folder ➢ Lib ➢ Web ➢ css ➢ Fonts ➢ Images ➢ Jquery UI library provides the ability to customize and reuse the user interface elements and properties.
  4. 4. Liberation Scans ● simple and flexible UI rendering. ● standard module and can be found under MagentoUI namespace. ● providing/supporting interactions of JavaScript components and server ● Vendor ● Magento ● Module-ui –View ●Base ●ui_component ●Etc ●Definition.xml (UI components base declaration) ●Templates ●Container ●Export ●Form ●Default.xhtml (<uiComponent/> rendering html) ●Listing ●Default.xhtml ●Web ●Js ●Templates ●Form ●Element ●Button.html ●Input.html The actual rendering of the interface element in the browser is handled by KnockoutJS.
  5. 5. Definition.xml <form class="MagentoUiComponentForm"> <argument name="data" xsi:type="array"> <item name="js_config" xsi:type="array"> <item name="component" xsi:type="string">Magento_Ui/js/form/form</item> </item> <item name="template" xsi:type="string">templates/form/default</item> </argument> </form>
  6. 6. Magento 1 -Adding Product Editing form to a Page <adminhtml_catalog_product_new> <update handle="editor"/> <reference name="content"> <block type="adminhtml/catalog_product_edit" name="product_edit"></block> </reference> <reference name="left"> <block type="adminhtml/catalog_product_edit_tabs" name="product_tabs"></block> </reference> <reference name="js"> <block type="adminhtml/catalog_product_edit_js" template="catalog/product/js.phtml" name="catalog_product_js"></block> <block type="core/template" template="catalog/wysiwyg/js.phtml"/> </reference> </adminhtml_catalog_product_new>
  7. 7. <editor> <reference name="head"> <action method="setCanLoadExtJs"><flag>1</flag></action> <action method="addJs"><script>mage/adminhtml/variables.js</script></action> <action method="addJs"><script>mage/adminhtml/wysiwyg/widget.js</script></action> <action method="addJs"><script>lib/flex.js</script></action> <action method="addJs"><script>lib/FABridge.js</script></action> <action method="addJs"><script>mage/adminhtml/flexuploader.js</script></action> <action method="addJs"><script>mage/adminhtml/browser.js</script></action> <action method="addJs"><script>prototype/window.js</script></action> <action method="addItem"> <type>js_css</type><name>prototype/windows/themes/default.css</name> </action> <action method="addCss"> <name>lib/prototype/windows/themes/magento.css</name> </action> </reference> </editor> Magento 2 -adding product editing form to a page <uiComponent name="product_form"/>
  8. 8. Add New Tab in product edit page in Magento 2 admin Code / [namespace] / [your module] / View/ui_components / product_form.xml <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <fieldset name="product.packages"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Product Package</item> <item name="sortOrder" xsi:type="number">200</item> </item> </argument>
  9. 9. <field name="customFieldName"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">text</item> <item name="formElement" xsi:type="string">input</item> <item name="prefixName" xsi:type="string">customFieldName</item> <item name="label" xsi:type="string" translate="true">Package Label</item> <item name="component" xsi:type="string">Magento_Catalog/js/form/element/input</item> <item name="template" xsi:type="string">Magento_Catalog/form/element/input</item> </item> </argument> </field> </fieldset> </form>
  10. 10. Default.xhtml <div data-role="spinner" data-component="{{getName()}}.areas" class="admin__data-grid-loading-mask"> <div class="spinner"> <span/><span/><span/><span/><span/><span/><span/><span/> </div> </div> <div data-bind="scope: '{{getName()}}.areas'" class="entry-edit form-inline"> <!-- ko template: getTemplate() --><!-- /ko --> </div>
  11. 11. Thank You

×