GoConqr has a new look! Let us know what you think.

Sign up free

Flashcards

MCAD: Customizing the Magento UI

Miska Red Magento 2 Magento 2 English 73 cards

Cards in this deck (73)

  1. 1Where Theme Stored?Themes are stored in app/design/[area]
  2. 2How Many Required Files on theme?theme.xml and registration.php are the only two required files.
  3. 3How to Overriding existing Magento or 3rd-party module template file?Overriding existing Magento or 3rd-party module template file
    is as simple as replicating the directory structure in your theme
  4. 4Creating theme not recommended?You can extend and customize an available
    theme or even create one from scratch, although that is not recommended.
  5. 5How to create custom theme?Creating a theme usually involves copying and modifying any necessary templates,
    creating XML fles to adjust layouts, and creating the necessary styles to make the
    frontend (or adminhtml area) match the design specifcations
  6. 6Custom themes are located ?in the app/design/frontend directory. They
    continue the notation of ThemePackage_ThemeName.
  7. 7when etc/view.xml is required ?if there is no parent theme
  8. 8What required files for theme?only required files are registration.php & theme.xml
  9. 9theme.xml Worked?theme.xml specifes the parent (fallback) theme, the theme
    name, and a preview image
  10. 10what task done by registration.php?The
    registration fle is identical to a module’s (in app/code/MyCompany/MyModule)
    registration.php
  11. 11How do you defne theme hierarchy for your project?Specify the parent theme in the parent node of theme.xml
  12. 12How to use using the debugger, or by enabling template hints CLI?bin/magento dev:template-hints:enable
  13. 13How to debugger template manually?Another way is to fnd a unique
    string in the HTML (translation, tag or class). Searching the entire project directory
  14. 14How can you modify a template from Magento_Catalog module?you are modifying a template from the Magento_Catalog
    module, create a Magento_Catalog folder inside your theme directory
  15. 15How to manage file when extending an existing theme?If you are extending an existing theme, check that theme to see if the file exists
    there. If so, copy it from there.
  16. 16Where copy in your theme vendor/magento/module-customer/ view/frontend/templates/account/dashboard/info.phtml?app/design/frontend/SwiftOtter_Flow/Magento_
    Customer/templates/account/dashboar/info.phtml
  17. 17How can Blocks can be referenced ?Blocks can be referenced with the $block variable into a template.
  18. 18What methods can be accessed $block variable (Blocks can be referenced with the $block variable into template)?As such, only public methods can be accessed
  19. 19What is Blocks?Blocks are PHP classes that provide information to the .phtml templates
  20. 20What are the lifeblood of normally static .phtml files?block
  21. 21block allows ?block allows for a separation of
    duties from the template file: blocks handle data access and retrieval (dependency injection works here ), whereas the templates display information
  22. 22By default, template blocks are injected?By default, template blocks are injected with a \Magento\Framework\View\
    Element\Template\Context object
  23. 23Context object $this->validator contains a number of other objects that are loaded into the instance?$this->validator: \Magento\Framework\View\Element\Template\
    File\Validator
  24. 24Context object $this->resolver contains a number of other objects that are loaded into the instance?$this->resolver: \Magento\Framework\View\Element\Template\
    File\Resolver
  25. 25Context object $this->_flesystem contains a number of other objects that are loaded into the instance?$this->_flesystem: \Magento\Framework\Filesystem
  26. 26Context object $this->templateEnginePool contains a number of other objects that are loaded into the instance?$this->templateEnginePool: \Magento\Framework\View\
    TemplateEnginePool
  27. 27Context object $this->_storeManager contains a number of other objects that are loaded into the instance?$this->_storeManager: \Magento\Store\Model\
    StoreManagerInterface
  28. 28Context object $this->_appState contains a number of other objects that are loaded into the instance?$this->_appState: \Magento\Framework\App\State
  29. 29Context object $this->pageConfg contains a number of other objects that are loaded into the instance?$this->pageConfg: \Magento\Framework\View\Page\Confg
  30. 30Where abstract block is found?in vendor/magento/framework/View/Element/
    AbstractBlock.php
  31. 31Identify the stages in the lifecycle of a block?1.Block is created (__construct).
    2.The setLayout method is called, assigning _layout to be the current
    layout object.
  32. 32When Magento is ready to obtain the HTML?1. toHtml is called
    • The view_block_abstract_to_html_before event is triggered.
    • If a cache entry is present, the template will not be loaded.
    • _beforeToHtml
    • _toHtml
    • _afterToHtml (regardless of whether or not the cached value
    was used)
    • The view_block_abstract_to_html_after event is triggered
    2. HTML is returned
  33. 33plugins can only modify the flow of data from--- methods?public
  34. 34best choice for globally modifying data ?Blocks do not expose many public methods and so the best choice for globally modifying data is often a plugin for toHtml
  35. 35the use cases for events triggered from blocks is------?limited
  36. 36who is responsible for rendering the block as HTML?the toHtml is responsible for rendering the block as HTML
  37. 37When using a template ---- involves loading a template?toHtml
  38. 38What do If a cache entry exists _toHtml ?If a cache entry exists, that
    is returned. Otherwise, the toHtml method passes off rendering to the _toHtml
    method for the actual rendering.
  39. 39when a block can be cached?1. cache lifetime is not null.
    2. block_html cache type is enabled.
  40. 40How long cache lifetime default?By default, the cache lifetime is not set, so this needs to be specifed to enable
    caching the block
  41. 41cache key is generated?If caching can happen, a cache key is generated ($this->getCacheKey()).
  42. 42searched process?The
    rendered HTML is then searched for the presence of SID parameters (session IDs),
    which are then replaced with a placeholder before the string is saved
  43. 43Where renders HTML to the user.?Template (vendor/magento/framework/View/Element/Template.php):
    renders HTML to the user.
  44. 44Where prints a text string?Text (vendor/magento/framework/View/Element/Text.php):
  45. 45Where prints a ListText?ListText (vendor/magento/framework/View/Element/Text/
    ListText.php): similar to a container as it returns the output of each of the
    child blocks.
  46. 46What task done by Templates?Templates are used to display HTML
  47. 47Where extend the basic template-type block?There are many blocks that . find a number of them in the vendor/magento/
    framework/View/Element directory
  48. 48Why Layout XML ?Layout XML is the powerful link between blocks and templates.
  49. 49What task done by in layout XML in the tag?: creates a new block. Expects the full namespace and class name
    for the block (do not put a “\” at the beginning of the type).
  50. 50What task done by in layout XML in the tag?: a grouping of blocks. Specify an HTML tag and class to
    wrap the output of the child blocks
  51. 51What task done by in layout XML in the tag?and : sets a value in the block’s $data array
  52. 52What task done by in layout XML in the tag?: targets an existing block to make modifcations to it.
  53. 53What task done by in layout XML in the tag?: targets an existing container to make
    modifcations to it
  54. 54What task done by & in layout XML in the tag?: enables moving of an existing block to another block or container.
    • : removes a block.
  55. 55What task done by in layout XML in the tag?: adds a layout handle to be displayed
  56. 56Where to create a new layout XML fleEnsure the following directory exists: app/code/AcmeWidgets/
    ProductPromotor/view/frontend/layout
  57. 57new layout XML fle extention?Create a file for the handle to modify and append .xml to it. Example:
    “catalog_product_view.xml”
  58. 58Where Add the new layout XML fle?Add the XML node at the root
  59. 59Describe how to pass variables from layout to block?Use the arguments and argument nodes. These call setData on the block. As
    such, you can retrieve these values later by calling the getData() method. This is
    also how the ViewModel is specifed.
  60. 60used ?used with a JSON object to load modules and initialize them with servergenerated confguration
  61. 61data-mage-init attribute instantiates?data-mage-init attribute instantiates a Javascript module
    with any provided confguration for the current tag
  62. 62How use JavaScript and UI Components?Using JavaScript and UI Components to load customer-specifc
    data allows Magento to keep a page fully-cached.
  63. 63How Magento 2 utilizes RequireJS?Magento 2 utilizes RequireJS to create a modular and extensible system
    in JavaScript
  64. 64How Javascript modules can be completely custom, can extend a UI Component module?Javascript modules can be completely custom, can extend a UI Component module, or be a jQuery widget. They can be asynchronously loaded or embedded directly in a page using a plain tag. Magento’s <script type="text/xmagento-init"/> allows for loading modules and passing even complex
    confguration info into them
  65. 65tag. Magento’s <script type="text/xmagento-init"/> allows for loading modules and passing even complex confguration info into them?modules handle much interaction between the website user and the
    Magento PHP application
  66. 66Where UI components work well?UI components work well in the admin panel for grids and forms. Customizing
    these pages involves making updates to XML instead of repeating many lines of
    boilerplate PHP
  67. 67requirejs-confg.js?manages the dependency injection preferences for the
    Magento JavaScript application. RequireJS confg can be used to load your module
    instead of an existing resource. It can also create aliases for module paths
  68. 68Write example of requirejs-confg.js??var confg = { "map": {"*":{"mage/adminhtml/wysiwyg/tiny_mce/setup":"AcmeWidgets_ProductPromoter/js/WysiwygSetupOverride" } } };
  69. 69x-magento-init?Initializes a JavaScript module with specifc parameters
  70. 70Write example x-magento-init??{
    ".hero": { // creates a new JavaScript object
    instance for each selected item
    "AcmeWidgets_ProductPromoter/js/hero": {
    imageCount: 1}}}
  71. 71data-mage-init?This is similar to x-magento-init except that it is an attribute for an HTML tag
  72. 72Write example data-mage-init?
  73. 73—

Information

Description
Customizing the Magento UI
Created by
Miska Red · Jul 2019
Updated
Jul 2, 2019
Views
172
Rating

Feedback

What is it about?

What do you think of the new look?

How do you like it?