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 2. Managing Products

After successfully installing Magento, you can now take on the task of creating and configuring your store. You could begin by crafting the design that reflects your store's brand, or you could start configuring the many settings that will direct how your customers will interact with your online store.

However, selling online really boils down to the products you are selling. Additionally, many of Magento's configurations are dependent on the products you're offering and how they are arranged into categories.

Therefore, when we create a new Magento-powered store, we begin at the root, so to speak: the products.

In this chapter, we will tackle:

  • Creating categories
  • Managing products and attributes to help your customers shop more easily
  • Setting up reviews, tags, and feeds to help promote your products
  • Importing products en masse

Catalogs and categories

The use of the terms catalogs and categories in Magento used to be a bit confusing, as Magento tended to use these terms with some inconsistency. In Magento 2, the distinction is better defined.

In Magento, the catalog is the full collection of products within your Magento installation. Looking under Products | Catalog in the backend, you can view all your products regardless of to which Website or categories they may be assigned.

Categories in Magento 2 are just that: categories of products. Let us delve a bit deeper into this.

Creating categories

Categories needed for our new stores. Now, we need to learn how to create sub-categories that will allow us to assign products and display them in logical groups on our store.

For our furniture store, we want to create a new subcategory for sofas:

  1. Go to Products | Categories in your Magento backend.
  2. Click on Furniture in the list of categories on the left.

    Tip

    You must first click on the parent category before creating a subcategory (although you can always drag and drop categories to re-position them if you need to later).

  3. Click on Add Subcategory.
  4. For Name, enter Sofas.
  5. Set Is Active to Yes.
  6. Click on Save Category.

This is how the additional subcategory would then appear:

Creating categories

You can, of course, add additional subcategories, as well as subcategories of subcategories. But, before you go to too much trouble building a huge category hierarchy, be sure to read through the section on Attributes and Attribute Sets later in this chapter.

Let's now explore the other panels and fields in the category detail screen.

Tip

Don't be afraid to experiment! While this book provides a considerable amount of detail and helpful advice, the power of Magento can only truly be appreciated the more you work with it. Test various setting combinations. You may well come up with a particular configuration that helps you better connect with your shoppers.

General information tab

As you will noticed, there are only two required fields when creating a category (Name and Is Active). But others, as shown below, on this tab are important as well.

  • URL Key: Once you create a category, Magento will automatically create a unique URL Key. This becomes the path for your category, such as www.acmefurniture.com/sofas.html. The sofas part is the URL Key. If you create more than one category with the same name, Magento will create unique keys by adding an incremental number, such as "sofas-1," "sofas-2." You can rename this to any value you wish, and in some cases, it may have more SEO value for you to enter a key such as "cheap-sofas" or "living-room-sofas." If you change the key of an existing category, you can select Create Permanent Redirect for old URL and Magento will create the necessary URL rewrites so that anyone still trying to view your category with the old URL Key will be automatically re-routed to the new path.
  • Description: In the front end of your store, the Description tab will appear at the top of the category page, giving you the ability to describe the category to shoppers, as well as adding more SEO rich content. The field has a very basic WYSIWYG editor. However, you can access a WYSIWYG editor with considerably more features by clicking on WYSIWYG Editor. A panel will slide from the right with the enhanced field.
    General information tab
  • Image: You can upload an image to appear at the top of the category. Your theme design may dictate how and where this image is displayed.
  • Page Title: The page title shown at the top of a web browser window — this is also displayed as the title of your category in Google search results — is automatically created according to how you configure your store settings. However, you can override your default settings by entering a value here.

    Note

    Page title defaults are configured under Stores | Configuration | General | Design | HTML Head.

  • Meta Keywords: Modern search engines don't use meta keywords for determining page rankings or content. However, if you want to enter keywords here, you may enter them inserting a comma between each keyword or phrase.
  • Meta Description: In Magento, the meta description that is added to the header of your page for search engines to use is automatically taken from the Description field. However, Google only displays approximately the first 160 characters of a description. You may want to compose a different description here for that purpose.
  • Include in Navigation Menu: You will most likely want a category displayed in your main navigation menu. However, there are instances where you may not want the category listed. For example, as discussed later under the section, Special Categories, you may want to create a Featured category that displays products in a special location on your site, but is not listed in the main menu.

Display Settings tab

As you build out your category schema, you may decide that you don't want products displayed on all category pages. For example, a top-level "Furniture" category might display graphics for each subcategory (for example, "Sofas", "Chairs", "Tables"). However, within those subcategories, you probably do want to display the list of products available. Let us have a look at the various attributes within this tab:

  • Display Mode: In Chapter 5, Managing Non-Product Content, we'll explain about static blocks — content that can be used as desired within your site. You can elect to show products, a static block, or both products and a static block.

    Note

    Unless your theme is configured otherwise, the description and image you add in the General Information tab will still show even if you choose Products only for Display Mode.

    Why use a static block if you can simply add a category description? Good question, and one we're often asked. Static blocks are very useful for displaying the same content in many places. For instance, you may want to use a static block to regularly display a new product announcement or discount. By using a static block, you can update this information in one place and have it instantly appear throughout your site wherever it is referenced.

  • CMS Block: If you do choose to display a static block, you can choose the block to show within this drop-down menu.
  • Is Anchor: Later in this chapter, we will explore attributes and how you can use them in filtered navigation. If you want your category page to show layered navigation for the products within the category (if products are shown), set this to Yes, as shown in the following screenshot:
    Display Settings tab
  • Available Product Listing Sort By: By default, Magento allows products to be sorted by position, name, and price. Position is managed within the Category Products tab (this will be explained a bit later). You can choose which of these sorts to include.
  • Default Product Listing Sort By: You can also choose which sort you wish to use by default when a customer first views a category page.
  • Layered Navigation Price Step: Based on your configurations, Magento will automatically calculate the price steps shown in the layered navigation sidebar. You can override this by entering the steps you wish to show by entering the amounts separated by commas (for example, "0,50,100,500").

    Note

    Default price step configurations are in Stores | Configuration | Catalog | Catalog | Layered Navigation.

Custom Design tab

In this tab, you can control specific display configurations for your category.

  • Use Parent Category Settings: You can choose to have any subcategory use the same display settings as its parent category.
  • Apply To Products: Setting it to Yes will apply any applicable design settings to products shown within the category.
  • Custom Theme: If you have another theme you wish to apply to a category — perhaps a holiday-focused theme — you can choose that theme in this field.
  • Active From/Active To: These date fields, if filled in, allow you to control the dates on which any custom theme will be applied.
  • Page Layout: Depending on the capabilities of your theme, you can choose an alternative layout scheme for the category. Your choices include one column, two columns with either left or right sidebar, three columns, or empty (this requires the definition of your own page layout using XML).
  • Custom Layout Update: You can enter custom XML code to alter the display of your category page.

    Note

    For more on themes, see Chapter 3, Designs and Themes.

Category Products tab

When you create products in your Magento store, you can assign the product to a category. Alternatively, you can assign multiple products to a category within this tab. Use the search features to find your products.

  • Selection Column: The first field at the top of the column allows you to search for products that are (Yes), are not (No), or either (Any) assigned already to your category. For example, if you want to identify products not already assigned to your category, select No.
  • Search Fields: The empty fields at the top of the other columns allow you to enter a search criteria for further filtering your search results.

Once you have identified the products you wish to add, select the ones you wish to add. Be sure to click Save Category in order to complete your assignments.

Re-ordering categories

We mentioned it earlier, but it deserves repeating: you can re-arrange the order of your categories — and how they will appear in navigation menus — by dragging and dropping your categories in the sidebar display. The order in which they appear can be set differently for each website or store view.

Note

Re-arranging categories is a very intensive computing operation owing to the work that Magento has to perform in order to update its data tables and re-index. If you intend to make several changes, you may want to disable caching until you complete your work, although each change may still take some time. Be patient. After each re-arrangement, make sure Magento has completed its work before making the next change. Otherwise, your data tables may become "confused."

Special categories

Magento provides some inherent tools for grouping products for special display purposes. For example, by designating New From and New To dates in the Advanced Settings | Autosetting panel of a product detail screen, as shown in the following screenshot, Magento will display a product within a New Products block if today's date falls within the range of these dates.

Special categories

However, in some cases, you may want to display groups of products for other reasons. It's not uncommon to show Featured products on an e-commerce website. You might even want to show products grouped by family or purpose.

Let's take the case of creating a Featured products section for our homepage. Let's also assume that you don't want Featured as a category in your navigation bar just as a "special" category.

  1. Go to Products | Categories in your Magento backend.
  2. Click on the root category under which you wish to create your special category.
  3. Click on Add Subcategory.
  4. In the center part of the screen, enter the following values:
    • Name: Featured
    • Is Active: Yes
    • Include in Navigation Menu: No
  5. Click on the tab at the top labeled Category Products.
  6. Find the product you wish to add to this category and check the box in the left-most column.
  7. Click on Save Category.
  8. After the screen refreshes, note the ID number of the category at the top of the screen, as shown in the following screenshot (in this example, the category ID is 43):
    Special categories

You've now created a new category called Featured and added some products. Now we need to add a block to the homepage that will display your Featured Products.

  1. Go to Content | Pages.
  2. Select to edit the home page for the store you wish to update.
  3. Click the side tab labeled Content.
  4. If the WYSIWYG editor is showing, click on Show/Hide Editor to reveal the HTML code.
  5. Find in the code where you want to put your Featured Products section and position the cursor there.
  6. Click the Insert Widget button.
  7. For Widget Type, select Catalog Product List.
  8. Add a custom title.
  9. Once this is done you should see something similar to the following block notation in the content pane:
    {{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Featured" products_count="10" template="product/widget/content/grid.phtml"}}
  10. Click Save Page (or Save and Continue Edit).

When you view the homepage, you should see a section displaying the featured items you assigned to this special category:

Special categories

Furthermore, you can access this category and its products by appending the name of your special category to your store URL. For example, to see the entire Featured product category, you can go to http://www.yourstoredomain.com/featured.html.

In Chapter 5, Managing Non-Product Content, we'll go into more detail about blocks and how to use them in creative ways, giving your online store more features and functionality.