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 7. Go Mobile with Magento 2.0!

Nowadays e-commerce stores must be responsive and mobile friendly to increase sales according to the huge number of people using mobile devices to buy products and services. It's very important to know the right tools to provide a mobile-friendly Magento theme for your project. Let's go mobile with Magento!

The following topics will be covered in this chapter:

  • Why mobile and responsive?
  • Testing the website on different devices
  • The Google Chrome DevTools device mode
  • Responsive web designer tester extension
  • Adjusting the CompStore theme for mobile devices
  • Adjusting tweets for mobile devices

According to a research called State of Mobile Commerce Growing like a weed Q1 2015 conducted by Criteo (http://www.criteo.com/), a digital marketing company, mobile accounts for 29% of e-commerce transactions in the US and 34% globally. By the end of 2015, mobile share is forecast to reach 33% in the US and 40% globally. This research is available at http://www.criteo.com/media/1894/criteo-state-of-mobile-commerce-q1-2015-ppt.pdf.

This is one of the main reasons for which all Magento developers must create responsive designs. We started this process indirectly by creating a new theme with Webcomm Magento Boilerplate. Despite its basic mobile support, we have to make some adjustments to create a completely responsive Magento theme. Let's return to work!

Testing the website on different devices

In order to test your website in different devices and, consequently, different screen sizes, it is recommended to use a specific software or service to simulate the screen sizes of devices. If you perform a search on the web, you may find a great number of online test tools, but these tools work only with published websites. Our Magento site works, for now, on our local development environment.

To take advantage of our local development environment, let's work with the Google Chrome DevTools Device Mode and the Responsive Web Designer Tester extensions. In this book, we'll have two options to work with mobile theme development. You choose both of them!

If you don't have Google Chrome installed, download it from the URL https://www.google.com/intl/en/chrome/browser/desktop/ to install it on your operating system.

The Google Chrome DevTools device mode

Google Chrome DevTools is a native tool of Google Chrome that provides a bunch of tools for web developers. By working with DevTools, you can optimize your frontend code, including HTML, CSS, and JavaScript.

Before accessing the DevTools extensions, access your Magento CompStore website at the http://localhost/packt URL.

To access DevTools, in the Google Chrome browser, follow these steps:

  1. Click on the Google Chrome menu.
  2. Click on the More Tools option.
  3. Click on the Developer Tools option.
    The Google Chrome DevTools device mode

Now, you can see the DevTools window, as in the preceding screenshot.

To activate Device Mode, click on the smartphone icon next to the Elements menu item. Now, you can see the page rendering with different options, as in the following screenshot:

The Google Chrome DevTools device mode

According to the Google DevTools official page available at https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/, you can use the DevTools device mode to do the following:

  • Test your responsive designs
  • Visualize and inspect CSS queries
  • Use a network emulator to evaluate site performance
  • Enhance your debugging workflow

The DevTools extension has the following options to enhance developer experience:

  • Device preset
  • Network connectivity
  • Inspecting media queries
  • View CSS
  • Add custom devices

Changing the device preset

To change the device preset, click on the Device options:

Changing the device preset

You can choose from among iPhone, Google Nexus, Samsung Galaxy, and Blackberry, and you can create custom devices to test the screen size.

Changing the device preset

Network connectivity

This option emulates various network conditions of your website access.

Network connectivity

Inspecting media queries

The media queries are responsible for defining the CSS rule for each screen size. You can access all of these using DevTools. To access media queries, click on the icon in the upper-left corner:

Inspecting media queries

Viewing CSS

Right-click on a bar to view the CSS media query rule. You can make adjustments in the CSS code:

Viewing CSS

Adding custom devices

To create custom devices, follow these steps:

  1. In the Developer Tools topmost menu, click on Settings.
  2. Click on the Devices tab.
  3. Then, click on the Add Custom Device button.
  4. Fill the form according your need.
  5. Next, click on the Add Device button.
    Adding custom devices

Now, you have your own device to test your code.

Responsive Web Designer tester

Now, open the Google Chrome browser and navigate to the address https://chrome.google.com/webstore/category/apps to access Chrome Web Store. Conduct a search to find the Responsive Web Designer Tester extension and then add the extension to Google Chrome, as follows:

Responsive Web Designer tester

Great work! Now, let's take a look at how this extension works. On your browser, go to your Magento local site, also known as CompStore, by accessing http://localhost/packt. Remember that you have to turn on Apache Service in XAMMP to test the local website.

Click on the button of the Responsive Web Designer Tester extension shown on the right-hand side of your screen (generally near the end of the browser address bar) and select the iPhone 5—Portrait option for the first test:

Responsive Web Designer tester

After you select the device, you will see a pop-up window having the size of iPhone 5 screen. Navigating on the page, you will see also that the layout is not fully responsive. We have some issues in the home page presentation:

Responsive Web Designer tester

Now we have a tool to test site behavior between the different devices. It is time to make our CompStore theme 100% compatible with multiple devices!