Table of Contents for
Magento 2 - Build World-Class online stores

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Magento 2 - Build World-Class online stores by Jonathan Bownds Published by Packt Publishing, 2017
  1. Cover
  2. Table of Contents
  3. Magento 2 - Build World-Class online stores
  4. Magento 2 - Build World-Class online stores
  5. Credits
  6. Preface
  7. 1. Module 1
  8. 1. Magento Fundamentals
  9. XAMPP installation
  10. Magento
  11. Summary
  12. 2. Magento 2.0 Features
  13. An introduction to the Magento order management system
  14. Magento 2.0 command-line configuration
  15. The command-line utility
  16. Summary
  17. 3. Working with Search Engine Optimization
  18. Store configuration
  19. SEO and searching
  20. SEO catalog configuration
  21. Google Analytics tracking code
  22. Optimizing Magento pages
  23. Summary
  24. 4. Magento 2.0 Theme Development – the Developers' Holy Grail
  25. Magento 2.0 theme structure
  26. The Magento Luma theme
  27. Magento theme inheritance
  28. CMS blocks and pages
  29. Custom variables
  30. Creating a basic Magento 2.0 theme
  31. Summary
  32. 5. Creating a Responsive Magento 2.0 Theme
  33. Composer – the PHP dependency manager
  34. Building the CompStore theme
  35. CSS preprocessing with LESS
  36. Applying new CSS to the CompStore theme
  37. Creating the CompStore logo
  38. Applying the theme
  39. Creating CompStore content
  40. Customizing Magento 2.0 templates
  41. Summary
  42. 6. Write Magento 2.0 Extensions – a Great Place to Go
  43. Using the Zend framework
  44. Magento 2.0 extension structure
  45. Developing your first Magento extension
  46. The Twitter REST API
  47. The TweetsAbout module structure
  48. Using TwitterOAuth to authenticate our extension
  49. Developing the module
  50. Summary
  51. 7. Go Mobile with Magento 2.0!
  52. Adjusting the CompStore theme for mobile devices
  53. The Magento 2.0 responsive design
  54. The Magento UI
  55. Implementing a new CSS mixin media query
  56. Adjusting tweets about extensions for mobile devices
  57. Summary
  58. 8. Speeding up Your Magento 2.0
  59. Indexing and caching Magento
  60. Indexing and re-indexing data
  61. The Magento cron job
  62. Caching
  63. Fine-tuning the Magento hosting server
  64. Selecting the right Magento hosting service
  65. Apache web server deflation
  66. Enabling the expires header
  67. Minifying scripts
  68. Summary
  69. 9. Improving Your Magento Skills
  70. Magento knowledge center
  71. Improving your Magento skills
  72. Summary
  73. 2. Module 2
  74. 1. Magento 2 System Tools
  75. Installing Magento 2 sample data via GUI
  76. Installing Magento 2 sample data via the command line
  77. Managing Magento 2 indexes via the command line
  78. Managing Magento 2 cache via the command line
  79. Managing Magento 2 backup via the command line
  80. Managing Magento 2 set mode (MAGE_MODE)
  81. Transferring your Magento 1 database to Magento 2
  82. 2. Enabling Performance in Magento 2
  83. Configuring Redis for backend cache
  84. Configuring Memcached for session caching
  85. Configuring Varnish as the Full Page Cache
  86. Configuring Magento 2 with CloudFlare
  87. Configuring optimized images in Magento 2
  88. Configuring Magento 2 with HTTP/2
  89. Configuring Magento 2 performance testing
  90. 3. Creating Catalogs and Categories
  91. Create a Root Catalog
  92. Create subcategories
  93. Manage attribute sets
  94. Create products
  95. Manage products in a catalog grid
  96. 4. Managing Your Store
  97. Creating shipping and tax rules
  98. Managing customer groups
  99. Configuring inventories
  100. Configuring currency rates
  101. Managing advanced pricing
  102. 5. Creating Magento 2 Extensions – the Basics
  103. Initializing extension basics
  104. Working with database models
  105. Creating tables using setup scripts
  106. Creating a web route and controller to display data
  107. Creating system configuration fields
  108. Creating a backend data grid
  109. Creating a backend form to add/edit data
  110. 6. Creating Magento 2 Extensions – Advanced
  111. Using dependency injection to pass classes to your own class
  112. Modifying functions with the use of plugins – Interception
  113. Creating your own XML module configuration file
  114. Creating your own product type
  115. Working with service layers/contracts
  116. Creating a Magento CLI command option
  117. 3. Module 3
  118. 1. Planning for Magento
  119. Technical considerations
  120. Global-Website-Store methodology
  121. Planning for multiple stores
  122. Summary
  123. 2. Managing Products
  124. Managing products the customer focused way
  125. Creating products
  126. Managing inventory
  127. Pricing tools
  128. Autosettings
  129. Related products, up-sells, and cross-sells
  130. Importing products
  131. Summary
  132. 3. Designs and Themes
  133. The concept of theme inheritance
  134. Default installation of design packages and themes
  135. Installing third-party themes
  136. Inline translations
  137. Working with theme variants
  138. Customizing themes
  139. Customizing layouts
  140. Summary
  141. 4. Configuring to Sell
  142. Payment methods
  143. Shipping methods
  144. Managing taxes
  145. Transactional e-mails
  146. Summary
  147. 5. Managing Non-Product Content
  148. Summary
  149. 6. Marketing Tools
  150. Promotions
  151. Newsletters
  152. Using sitemaps
  153. Optimizing for search engines
  154. Summary
  155. 7. Extending Magento
  156. The new Magento module architecture
  157. Extending Magento functionality with Magento plugins
  158. Building your own extensions
  159. Summary
  160. 8. Optimizing Magento
  161. Indexing and caching
  162. Caching in Magento 2 – not just FPC
  163. Tuning your server for speed
  164. Summary
  165. 9. Advanced Techniques
  166. Version control
  167. Magento cron
  168. Backing up your database
  169. Upgrading Magento
  170. Summary
  171. 10. Pre-Launch Checklist
  172. System configurations
  173. Design configurations
  174. Search engine optimization
  175. Sales configurations
  176. Product configurations
  177. Maintenance configurations
  178. Summary
  179. Index

Chapter 3. Designs and Themes

Selling online, as with brick-and-mortar retailing, is more than simply having products to offer to customers. Buyers make purchases based on many things apart from the item itself. Customers want to understand the purpose of the retailer and have confidence that the seller is legitimate, safe, and honest. Corporations have spent billions over the years creating this understanding among their active and potential customers, through logos, design, copy, and service. Creating this understanding is called branding.

For an online store, branding is very important. However, unlike the offline shopper who drives to a store, parks, and enters the store to spend several minutes shopping; an online shopper may click to your online store, spend a few seconds to determine if they wish to remain, and leave to visit another website. Therefore, your store's brand—it's graphics, copy and function—must address the following in a matter of seconds:

  • Does this online store have what I'm looking for? Can I easily find what they sell?
  • Do I trust this seller if I've never heard of them before?
  • Does the retailer make it easy for me to shop and purchase?
  • Does it appear that the store owner is interested in helping me buy?

Magento gives you, or your client, the functional tools and systems to provide a powerfully rich shopping experience for your customers. It cannot, however, provide the branding aspects relating to design. You have to craft the outward appearance that will communicate to the potential buyer feelings of convenience, product selection, and security.

In this chapter, we will teach you:

  • The Magento theme structure
  • How to install third-party themes
  • Creative translations
  • Using theme variants
  • How to customize themes to create your own unique look and feel
  • Building theme packages

The Magento theme structure

In Chapter 2, Managing Products, we discussed the Global-Website-Store, or GWS, methodology. As we have learned, Magento allows you to customize many store aspects at some, or all, of the GWS levels.

The same holds true for themes. You can specify the look and feel of your stores at the Global, Website, or Store View levels (themes can be applied for individual Store Views relating to a store) by assigning a specific theme.

In Magento, a group of related themes is referred to as a design package. Design packages contain files that control various functional elements common among the themes within the package. By default, Magento Community installs one design package with two themes.

Themes within a design package contain the various elements that determine the look and feel of the site: layout files, templates, CSS, images, and JavaScript. Each design package must have at least one theme, but can contain other theme variants. You can include any number of theme variants within a design package and use them, for example, for seasonal purposes (such as holidays or back-to-school).

The following graphic shows the relationship between design packages and themes:

The Magento theme structure

A design package and theme can be specified at the Global, Website, or Store levels.

Note

Most Magento users will use the same design package for a website and all descendant stores. Usually, related stores within a website business share very similar functional elements, as well as similar style features. This is not mandatory; you're free to specify a completely different design package and theme for each store view within your website hierarchy.

A design package and theme can also be specified based on a per browser basis at the global and website level, by providing a User-Agent Exception. In the following example, the string for the Firefox browser is provided:

The Magento theme structure

Note

To be certain about the string used in the User-Agent Header, you can check http://whatsmyua.com/ from the browser in question. This site will provide a very specific string you can use for the Search String field.

Magento 2 is a departure from Magento 1.x in that the skin directory used in Magento 1.x is absent, and the structure has been simplified. All files have been consolidated into one location, stored under the /app directory. Additionally, the layout and template directories from Magento 1.x have moved. Now, every module has its own layout and template directories in which you can access all template, layout, JS, and CSS/Less files.

Let's take a closer look at the new structure of a theme for Magento 2.0. The theme directory will typically include the files and directories visible in the following image:

The Magento theme structure

The theme directory

Note

You may notice that in some default Magento 2.x builds, some themes are found in the vendor/ directory. This indicates that a theme has been added via a composer dependency. We'll cover packaging your theme via composer later in the chapter. While Magento does check the vendor/ directory for themes, you should never add a theme directly to this directory. When creating a new theme, always start in the app/design/frontend/ directory.

Theme files and directories

In the new theme structure for Magento 2, all of the files related to design are in the preceding layout, under the VendorTheme directory. To clarify this new layout, we've provided a brief description of the role of each of the files and directories here:

  • /composer.json: This file is not a required file, but you'll use it to describe the dependencies your theme has and metadata for your theme. This file is essentially for use if you intend your theme to be a composer package.
  • /etc/view.xml: This file is required for a theme, but only if it doesn't already exist in a parent theme. We'll review parent themes later in this chapter as well. It includes information about product images and thumbnails.
  • /i18n: This directory includes CSV translation files.
  • /media: The /media directory contains a theme thumbnail, typically a screenshot of the theme that serves as a preview of the theme when it's being installed in the admin. This directory is required.
    • /registration.php: This file is required; it registers your theme within the system.
    • /theme.xml: Also mandatory, the theme.xml file declares the theme as a system component. It contains information about the theme like the theme name, the parent theme name, and so on.
  • /Vendor_Module: This directory is the parent for module specific styles, and the naming convention is important. Magento will use it to determine which module it needs to apply the styles, layouts and templates to. If the module being overridden was the Catalog module, the directory would be Magento_Catalog. It is only required for modules that are being overridden.
    • /Vendor_Module/layout: This directory contains files that extend or establish module layouts. Layout files are XML that determines the position of blocks and containers on any given Magento page. We'll go into additional detail around layout files and the elements in them in the customizing themes section of this chapter.
      • /Vendor_Module/layout/override/base: Files in this directory specifically override the default layouts for the module in question.
      • /Vendor_Module/layout/override/parent_theme: Layout files in this directory specifically override the parent theme layouts for the module specified.
    • /Vendor_Module/templates: This directory contains template files that override either default or parent templates in place for this module. If there are custom templates for this module, they're stored in this directory as well. We'll review template files in greater detail in the customizing themes section.
  • /web: This directory contains static files that can be loaded directly from the frontend. For example, if you wanted to reference a specific image, you could include it here, and you would be able to refer to it in a template file.
    • /web/css/source: This is the location where Less CSS configuration files for the theme are stored. Less is a CSS pre-processor that allows for variables and functions, making CSS for the theme more maintainable and extensible.
      • /web/css/source/lib: This directory contains files that extend or establish module layouts. Layout files are XML that determine the position of blocks and containers on any given Magento page. We'll go into additional detail around layout files and the elements in them in the using themes to create your own look and feel section of this chapter.
    • /web/fonts: This contains fonts specific to this theme. Everything in the web directory is static, so this folder is simply here for organizational purposes.
    • /web/images: This directory stores images specific to this theme.
    • /web/js: This location contains JavaScript specific to this theme. We'll talk more about how to insert JavaScript into a template in the using themes to create your own look and feel section.