In this article by Ray Bogman and Vladimir Kerkhoff, the authors of the book, Magento 2 Cookbook, we will cover the basic tasks related to creating a catalog and products in Magento 2. You will learn the following recipes:
Creating a root catalog
Creating subcategories
Managing an attribute set
(For more resources related to this topic, see here.)
Introduction
This article explains how to set up a vanilla Magento 2 store. If Magento 2 is totally new for you, then lots of new basic whereabouts are pointed out. If you are currently working with Magento 1, then not a lot has changed since.
The new backend of Magento 2 is the biggest improvement of them all. The design is built responsively and has a great user experience. Compared to Magento 1, this is a great improvement. The menu is located vertically on the left of the screen and works great on desktop and mobile environments:
In this article, we will see how to set up a website with multiple domains using different catalogs. Depending on the website, store, and store view setup, we can create different subcategories, URLs, and product per domain name.
There are a number of different ways customers can browse your store, but one of the most effective one is layered navigation. Layered navigation is located in your catalog and holds product features to sort or filter.
Every website benefits from great Search Engine Optimization (SEO). You will learn how to define catalog URLs per catalog.
Throughout this article, we will cover the basics on how to set up a multidomain setup. Additional tasks required to complete a production-like setup are out of the scope of this article.
Creating a root catalog
The first thing that we need to start with when setting up a vanilla Magento 2 website is defining our website, store, and store view structure.
So what is the difference between website, store, and store view, and why is it important:
A website is the top-level container and most important of the three. It is the parent level of the entire store and used, for example, to define domain names, different shipping methods, payment options, customers, orders, and so on.
Stores can be used to define, for example, different store views with the same information. A store is always connected to a root catalog that holds all the categories and subcategories. One website can manage multiple stores, and every store has a different root catalog. When using multiple stores, it is not possible to share one basket. The main reason for this has to do with the configuration setup where shipping, catalog, customer, inventory, taxes, and payment settings are not sharable between different sites.
Store views is the lowest level and mostly used to handle different localizations. Every store view can be set with a different language. Besides using store views just for localizations, it can also be used for Business to Business (B2B), hidden private sales pages (with noindex and nofollow), and so on. The option where we use the base link URL, for example, (yourdomain.com/myhiddenpage) is easy to set up.
The website, store, and store view structure is shown in the following image:
Getting ready
For this recipe, we will use a Droplet created at DigitalOcean, https://www.digitalocean.com/. We will be using NGINX, PHP-FPM, and a Composer-based setup including Magento 2 preinstalled. No other prerequisites are required.
How to do it...
For the purpose of this recipe, let's assume that we need to create a multi-website setup including three domains (yourdomain.com, yourdomain.de, and yourdomain.fr) and separate root catalogs. The following steps will guide you through this:
First, we need to update our NGINX. We need to configure the additional domains before we can connect them to Magento. Make sure that all domain names are connected to your server and DNS is configured correctly.
Go to /etc/nginx/conf.d, open the default.conf file, and include the following content at the top of your file:
map $http_host $magecode {
hostnames;
default base;
yourdomain.de de;
yourdomain.fr fr;
}
Your configuration should look like this now:
map $http_host $magecode {
hostnames;
default base;
yourdomain.de de;
yourdomain.fr fr;
}
upstream fastcgi_backend {
server 127.0.0.1:9000;
}
server {
listen 80;
listen 443 ssl http2;
server_name yourdomain.com;
set $MAGE_ROOT /var/www/html;
set $MAGE_MODE developer;
ssl_certificate /etc/ssl/yourdomain-com.cert;
ssl_certificate_key /etc/ssl/yourdomain-com.key;
include /var/www/html/nginx.conf.sample;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
location ~ /\.ht {
deny all;
}
}
Now let's go to the Magento 2 configuration file in /var/www/html/ and open the nginx.conf.sample file. Go to the bottom and look for the following:
location ~ (index|get|static|report|404|503)\.php$
Now we add the following lines to the file under fastcgi_pass fastcgi_backend;:
fastcgi_param MAGE_RUN_TYPE website;
fastcgi_param MAGE_RUN_CODE $magecode;
Your configuration should look like this now (this is only a small section of the bottom section):
location ~ (index|get|static|report|404|503)\.php$ {
try_files $uri =404;
fastcgi_pass fastcgi_backend;
fastcgi_param MAGE_RUN_TYPE website;
fastcgi_param MAGE_RUN_CODE $magecode;
fastcgi_param PHP_FLAG "session.auto_start=off \n
suhosin.session.cryptua=off";
fastcgi_param PHP_VALUE "memory_limit=256M \n
max_execution_time=600";
fastcgi_read_timeout 600s;
fastcgi_connect_timeout 600s;
fastcgi_param MAGE_MODE $MAGE_MODE;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME
$document_root$fastcgi_script_name;
include fastcgi_params;
}
The current setup is using the MAGE_RUN_TYPE website variable. You may change website to store depending on your setup preferences. When changing the variable, you need your default.conf mapping codes as well.
Now, all you have to do is restart NGINX and PHP-FPM to use your new settings. Run the following command:
service nginx restart && service php-fpm restart
Before we continue we need to check whether our web server is serving the correct codes. Run the following command in the Magento 2 web directory:
var/www/html/pub
echo "<?php header("Content-type: text/plain"); print_r($_SERVER); ?>" > magecode.php
Don't forget to update your nginx.conf.sample file with the new magecode code. It's located at the bottom of your file and should look like this:
location ~ (index|get|static|report|404|503|magecode)\.php$ {
Restart NGINX and open the file in your browser. The output should look as follows. As you can see, the created MAGE_RUN variables are available.
Congratulations, you just finished configuring NGINX including additional domains. Now let's continue connecting them in Magento 2.
Now log in to the backend and navigate to Stores | All Stores. By default, Magento 2 has one Website, Store, and Store View setup. Now click on Create Website and commit the following details:
Name
My German Website
Code
de
Next, click on Create Store and commit the following details:
Web site
My German Website
Name
My German Website
Root Category
Default Category (we will change this later)
Next, click on Create Store View and commit the following details:
Store
My German Website
Name
German
Code
de
Status
Enabled
Continue the same step for the French domain. Make sure that the Code in Website and Store View is fr.
The next important step is connecting the websites with the domain name. Navigate to Stores | Configuration | Web | Base URLs. Change the Store View scope at the top to My German Website. You will be prompted when switching; press ok to continue. Now, unset the checkbox called Use Default from Base URL and Base Link URL and commit your domain name. Save and continue the same procedure for the other website. The output should look like this:
Save your entire configuration and clear your cache. Now go to Products | Categories and click on Add Root Category with the following data:
Name
Root German
Is Active
Yes
Page Title
My German Website
Continue the same step for the French domain. You may add additional information here but it is not needed. Changing the current Root Category called Default Category to Root English is also optional but advised.
Save your configuration, go to Stores | All Stores, and change all of the stores to the appropriate Root Catalog that we just created. Every Root Category should now have a dedicated Root Catalog.
Congratulations, you just finished configuring Magento 2 including additional domains and dedicated Root Categories. Now let's open a browser and surf to your created domain names: yourdomain.com, yourdomain.de, and yourdomain.fr.
How it works…
Let's recap and find out what we did throughout this recipe. In steps 1 through 11, we created a multistore setup for .com, .de, and .fr domains using a separate Root Catalog.
In steps 1 through 4, we configured the domain mapping in the NGINX default.conf file. Then, we added the fastcgi_param MAGE_RUN code to the nginx.conf.sample file, which will manage what website or store view to request within Magento.
In step 6, we used an easy test method to check whether all domains run the correct MAGE_RUN code.
In steps 7 through 9, we configured the website, store, and store view name and code for the given domain names.
In step 10, we created additional Root Catalogs for the remaining German and French stores. They are then connected to the previously created store configuration. All stores have their own Root Catalog now.
There's more…
Are you able to buy additional domain names but like to try setting up a multistore? Here are some tips to create one. Depending on whether you are using Windows, Mac OS, or Linux, the following options apply:
Windows: Go to C:\Windows\System32\drivers\etc, open up the hosts file as an administrator, and add the following: (Change the IP and domain name accordingly.)
123.456.789.0 yourdomain.de
123.456.789.0 yourdomain.fr
123.456.789.0 www.yourdomain.de
123.456.789.0 www.yourdomain.fr
Save the file and click on the Start button; then search for cmd.exe and commit the following:
ipconfig /flushdns
Mac OS: Go to the /etc/ directory, open the hosts file as a super user, and add the following: (Change the IP and domain name accordingly.)
123.456.789.0 yourdomain.de
123.456.789.0 yourdomain.fr
123.456.789.0 www.yourdomain.de
123.456.789.0 www.yourdomain.fr
Save the file and run the following command on the shell:
dscacheutil -flushcache
Depending on your Mac version, check out the different commands here:
http://www.hongkiat.com/blog/how-to-clear-flush-dns-cache-in-os-x-yosemite/
Linux: Go to the /etc/ directory, open the hosts file as a root user, and add the following: (Change the IP and domain name accordingly.)
123.456.789.0 yourdomain.de
123.456.789.0 yourdomain.fr
123.456.789.0 www.yourdomain.de
123.456.789.0 www.yourdomain.fr
Save the file and run the following command on the shell:
service nscd restart
Depending on your Linux version, check out the different commands here:
http://www.cyberciti.biz/faq/rhel-debian-ubuntu-flush-clear-dns-cache/
Open your browser and surf to the custom-made domains.
These domains work only on your PC. You can copy these IP and domain names on as many PCs as you prefer. This method also works great when you are developing or testing and your production domain is not available on your development environment.
Creating subcategories
After creating the foundation of the website, we need to set up a catalog structure. Setting up a catalog structure is not difficult, but needs to be thought out well.
Some websites have an easy setup using two levels, while others sometimes use five or more subcategories. Always keep in mind the user experience; your customer needs to crawl the pages easily. Keep it simple!
Getting ready
For this recipe, we will use a Droplet created at DigitalOcean, https://www.digitalocean.com/. We will be using NGINX, PHP-FPM, and a Composer-based setup including Magento 2 preinstalled. No other prerequisites are required.
How to do it...
For the purpose of this recipe, let's assume that we need to set up a catalog including subcategories. The following steps will guide you through this:
First, log in to the backend of Magento 2 and go to Products | Categories.
As we have already created Root Catalogs, we start with using the Root English catalog first.
Click on the Root English catalog on the left and then select the Add Subcategory button above the menu. Now commit the following and repeat all steps again for the other Root Catalogs:
Name
Shoes (Schuhe) (Chaussures)
Is Active
Yes
Page Title
Shoes (Schuhe) (Chaussures)
Name
Clothes (Kleider) (Vêtements)
Is Active
Yes
Page Title
Clothes (Kleider) (Vêtements)
As we have created the first level of our catalog, we can continue with the second level. Now click on the first level that you need to extend with a subcategory and select the Add Subcategory button. Now commit the following and repeat all steps again for the other Root Catalogs:
Name
Men (Männer) (Hommes)
Is Active
Yes
Page Title
Men (Männer) (Hommes)
Name
Women (Frau) (Femmes)
Is Active
Yes
Page Title
Women (Frau) (Femmes)
Congratulations, you just finished configuring subcategories in Magento 2. Now let's open a browser and surf to your created domain names: yourdomain.com, yourdomain.de, and yourdomain.fr. Your categories should now look as follows:
How it works…
Let's recap and find out what we did throughout this recipe. In steps 1 through 4, we created subcategories for the English, German, and French stores. In this recipe, we created a dedicated Root Catalog for every website. This way, every store can be configured using their own tax and shipping rules.
There's more…
In our example, we only submitted Name, Is Active, and Page Title. You may continue to commit the Description, Image, Meta Keywords, and Meta Description fields. By default, the URL key is the same as the Name field; you can change this depending on your SEO needs.
Every category or subcategory has a default page layout defined by the theme. You may need to override this. Go to the Custom Design tab and click the drop-down menu of Page Layout. We can choose from the following options: 1 column, 2 columns with left bar, 2 columns with right bar, 3 columns, or Empty.
Managing an attribute set
Every product has a unique DNA; some products such as shoes could have different colors, brands, and sizes, while a snowboard could have weight, length, torsion, manufacture, and style.
Setting up a website with all the attributes does not make sense. Depending on the products that you sell, you should create attributes that apply per website.
When creating products for your website, attributes are the key elements and need to be thought through. What and how many attributes do I need? How many values does one need? All types of questions that could have a great impact on your website and, not to forget, the performance of it. Creating an attribute such as color and having 100 K of different key values stored is not improving your overall speed and user experience. Always think things through.
After creating the attributes, we combine them in attribute sets that can be picked when starting to create a product. Some attributes can be used more than once, while others are unique to one product of an attribute set.
Getting ready
For this recipe, we will use a Droplet created at DigitalOcean, https://www.digitalocean.com/. We will be using NGINX, PHP-FPM, and a Composer-based setup including Magento 2 preinstalled. No other prerequisites are required.
How to do it...
For the purpose of this recipe, let's assume that we need to create product attributes and sets. The following steps will guide you through this:
First, log in to the backend of Magento 2 and go to Stores | Products.
As we are using a vanilla setup, only system attributes and one attribute set is installed. Now click on Add New Attribute and commit the following data in the Properties tab:
Attribute Properties
Default label
shoe_size
Catalog Input Type for Store Owners
Dropdown
Values Required
No
Manage Options (values of your attribute)
English
Admin
French
German
4
4
35
35
4.5
4.5
35
35
5
5
35-36
35-36
5.5
5.5
36
36
6
6
36-37
36-37
6.5
6.5
37
37
7
7
37-38
37-38
7.5
7.5
38
38
8
8
38-39
38-39
8.5
8.5
39
39
Advanced Attribute Properties
Scope
Global
Unique Value
No
Add to Column Options
Yes
Use in Filer Options
Yes
As we have already set up a multi-website that sells shoes and clothes, we stick with this. The attributes that we need to sell shoes are: shoe_size, shoe_type, width, color, gender, and occasion.
Continue with the rest of the chart accordingly (http://www.shoesizingcharts.com).
Click on Save and Continue Edit now and continue on the Manage Labels tab with the following information:
Manage Titles (Size, Color, etc.)
English
French
German
Size
Taille
Größe
Click on Save and Continue Edit now and continue on the Storefront Properties tab with the following information:
Storefront Properties
Use in Search
No
Comparable in Storefront
No
Use in Layered Navigation
Filterable (with result)
Use in Search Result Layered Navigation
No
Position
0
Use for Promo Rule Conditions
No
Allow HTML Tags on Storefront
Yes
Visible on Catalog Pages on Storefront
Yes
Used in Product Listing
No
Used for Sorting in Product Listing
No
Click on Save Attribute now and clear the cache. Depending on whether you have set up the index management accordingly through the Magento 2 cronjob, it will automatically update the newly created attribute.
The additional shoe_type, width, color, gender, and occasion attributes configuration can be downloaded at https://github.com/mage2cookbook/chapter4.
After creating all of the attributes, we combine them in an attribute set called Shoes. Go to Stores | Attribute Set, click on Add Attribute Set, and commit the following data:
Edit Attribute Set Name
Name
Shoes
Based On
Default
Now click on the Add New button in the Groups section and commit the group name called Shoes.
The newly created group is now located at the bottom of the list. You may need to scroll down before you see it. It is possible to drag and drop the group higher up in the list.
Now drag and drop the created attributes, shoe_size, shoe_type, width, color, gender, and occasion to the group and save the configuration. The notice of the cron job is automatically updated depending on your settings.
Congratulations, you just finished creating attributes and attribute sets in Magento 2. This can be seen in the following screenshot:
How it works…
Let's recap and find out what we did throughout this recipe. In steps 1 through 10, we created attributes that will be used in an attribute set. The attributes and sets are the fundamentals for every website.
In steps 1 through 5, we created multiple attributes to define all details about the shoes and clothes that we would like to sell. Some attributes are later used as configurable values on the frontend while others only indicate the gender or occasion.
In steps 6 through 9, we connected the attributes to the related attribute set so that when creating a product, all correct elements are available.
There's more…
After creating the attribute set for Shoes, we continue to create an attribute set for Clothes.
Use the following attributes to create the set: color, occasion, apparel_type, sleeve_length, fit, size, length, and gender.
Follow the same steps as we did before to create a new attribute set. You may reuse the attributes, color, occasion, and gender. All detailed attributes can be found at https://github.com/mage2cookbook/chapter4#clothes-set.
The following is the screenshot of the Clothes attribute set:
Summary
In this article, you learned how to create a Root Catalog, subcategories, and manage attribute sets.
For more information on Magento 2, Refer the following books by Packt Publishing:
Magento 2 Development Cookbook (https://www.packtpub.com/web-development/magento-2-development-cookbook)
Magento 2 Developer's Guide (https://www.packtpub.com/web-development/magento-2-developers-guide)
Resources for Article:
Further resources on this subject:
Social Media in Magento [article]
Upgrading from Magneto 1 [article]
Social Media and Magento [article]
Read more
United States
Great Britain
India
Germany
France
Canada
Russia
Spain
Brazil
Australia
Singapore
Canary Islands
Hungary
Ukraine
Luxembourg
Estonia
Lithuania
South Korea
Turkey
Switzerland
Colombia
Taiwan
Chile
Norway
Ecuador
Indonesia
New Zealand
Cyprus
Denmark
Finland
Poland
Malta
Czechia
Austria
Sweden
Italy
Egypt
Belgium
Portugal
Slovenia
Ireland
Romania
Greece
Argentina
Netherlands
Bulgaria
Latvia
South Africa
Malaysia
Japan
Slovakia
Philippines
Mexico
Thailand
