Are you a starter Developer or newbies in Magento? Magento knowledge is extremely tremendous. That will become a mess and you are confused and don't . There are some concepts and tools you need to learn to be a successful designer data, for example), in areas predefined by the designer/developer, to pages in . tutorials on theming do not account for it, so it is important that you not follow. Most extension developers make their changes and additions in this code pool because their Certification website to learn more about Magento Developer Certification and ayofoto.info • How to Package Magento Connect Extensions.
|Language:||English, Spanish, Arabic|
|ePub File Size:||27.45 MB|
|PDF File Size:||20.15 MB|
|Distribution:||Free* [*Regsitration Required]|
Hi Magento blog readers, the Magento Tutorial for beginners step by step is really guide to Magento Setup and Development, created by Magestore Certified Developer Team. Most importantly, you can download this pdf ebook for free. This tutorial will teach you the basics of Magento using which you can create websites with ease. in this tutorial, please notify us at [email protected] com. Developers will learn how to write custom modules for Magento for redistribution or for simply deploying on a corporate installation of. Magento. Store Owners.
How can i validate customer new password in admin? These tools have defined their default rulesets for common usage. Adding extra files to the theme In the previous recipe, we learned how we can make structural changes to the HTML output. When Magento 2 is installed without modules, the following themes are available: Make sure you have a cleanly installed Magento 1 shop with some test data products, orders, and so on in it. The following code snippet shows you how this works. The configurable product is a parent wrapper that is used to display in the frontend.
Using the Dependency Injection Chapter 6: Plugins Chapter 7: Backend Development Chapter 8: Frontend Development Chapter 9: Testing Chapter Building a Module From Scratch. Daniel is a Magento developer with 5 years of experience with customizing Magento extensions, Magento templates.
Pankaj is a quick, curious learner who received various recognized certifications in the IT field in a very short span of time, namely Magento Developer , Magento Solution Specialist , and Zend Certified Engineer I would like to express my gratitude toward my loving grandmother, family, colleagues, and the almighty god. David Parloir has been a freelance Magento developer since the first version was released in , and through this, he has also been the lead developer for several large global projects.
Prior to this, David worked for several companies that focused on the development of e-commerce websites and even worked as a teacher of Magento for a short period. He is a self-taught developer who sees web development as more than a job —he sees it as a passion.
David considers himself a craftsman, keeping up to date with the latest trends in this area while balancing the new skills he develops, with a desire for his code to be efficient, simple, and elegant.
Marius Strajeru is 32 years old and finished as a faculty of computer science in Iasi, Romania, in Since then, he has worked as a PHP developer for various software companies.
He started looking at Magento 2 as soon as he heard that the source code is available in a dev version. You can upgrade to the eBook version at www. At www.
Why subscribe? Simply use your login credentials for immediate access. Preface Magento is one of the most popular e-commerce platforms on the market. It contains a lot of e-commerce functionality, it is stable, and it is free. This means that a lot of people choose Magento for their online business.
The first stable version of Magento was released in The later releases were based on the first version of Magento. Technology changes quickly and Magento needed a big update—a big release Magento 2 is now ready.
Developing in Magento is not as easy as you would expect. Even if you have knowledge of Magento 1, a good guide with practical examples that shows you the best practice is a must have, and this is exactly what this book will do. With Magento 2 Development Cookbook, we will cover the most important topics that will help you become a good Magento 2 developer.
We will start with the basics and we will end with the more advanced topics. This book is divided into several recipes, which show you which steps to take to complete a specific action. In each recipe, we have a section that explains how everything works. We will start this book with the creation of a good development environment. For a good development environment, we need the right tools. We will install Magento and we will discuss how we can migrate data from a Magento 1 to a Magento 2 shop.
Next, we will see some functional stuff. You will learn how the catalog system works, which product types are available, and a lot more. After this, you will learn how we can create a Magento theme to change the look and feel of the Magento shop. But the main focus of this book will be the development part. We will create a custom module that we will extend with a lot of common features that are used in Magento projects, such as extra controller pages, database integrations, custom shipping methods, and extra backend interfaces.
At the end of this book, we will see how we can improve the performance of a Magento shop. Finally, we will see some debugging techniques, such as Xdebug and creating unit tests using the Magento test framework. What this book covers Chapter 1, Upgrading from Magento 1, provides an introduction to how you can install and migrate the data from a Magento 1 to a Magento 2 shop.
We will also prepare our development environment in this chapter. Chapter 2, Working with Products, gives you a more functional information about the possibilities of displaying products in your Magento shop. Chapter 3, Theming, explains how you can customize the look and feel of your webshop using a custom Magento theme.
Chapter 4, Creating a Module, describes how to create a basic Magento module; how to extend that module with custom configurations, such as a custom page, translations, and blocks; and how to change behavior of standard Magento classes. Chapter 5, Databases and Modules, demonstrates how you can extend a Magento module with database interactions, such as install and upgrade scripts, a custom entity that represents a database table.
Chapter 6, Magento Backend, shows you how to integrate a Magento module with the backend, such as adding configuration pages, creating overview pages, and extending the admin menu.
Chapter 7, Event Handlers and Cronjobs, describes how the event-driven architecture is implemented in Magento and how to integrate this in your module. Later in this chapter, you will learn how to create cronjobs and how to test them.
Chapter 8, Creating a Shipping Module, shows you how to create a module with the configurations that are required for a new shipping method. Chapter 9, Creating a Product Slider Widget, will cover how to create a module with a custom widget, how to build the backend interface, and how to provide a good UI in the frontend of that widget. Chapter 10, Performance Optimization, describes how to benchmark a site to explore the limits and how to improve the performance using different techniques such as Redis and Memcached.
Chapter 11, Debugging and Unit Testing, shows you how to use the PHP debugger Xdebug and how we can create automated tests using the Magento 2 testing framework. What you need for this book Magento 2 source code A virtual Linux server Ubuntu Apache 2.
This book is also for Magento 1 developers who want to know how everything works in Magento 2.
This book will start with the basics of Magento 2 development and will end with the more advanced topics. Even if you knowledge about Magento development, this book is a good reference if you want to more about a particular topic in Magento. To give clear instructions on how to complete a recipe, we use these sections as follows: Getting ready This section tells you what to expect in the recipe, and describes how to set up any software or any preliminary settings required for the recipe.
How to do it… This section contains the steps required to follow the recipe. How it works… This section usually consists of a detailed explanation of what happened in the previous section. See also This section provides helpful links to other useful information for the recipe. Conventions In this book, you will find a number of text styles that distinguish between different kinds of information.
Here are some examples of these styles and an explanation of their meaning. Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: Tip Tips and tricks appear like this.
Reader feedback Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www. Customer support Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code You can download the example code files from your account at http: If you purchased this book elsewhere, you can visit http: The color images will help you better understand the changes in the output.
You can download this file from http: Errata Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http: Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https: The required information will appear under the Errata section. Piracy Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously.
If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy. We appreciate your help in protecting our authors and our ability to bring you valuable content. Chapter 1. Upgrading from Magento 1 In this chapter, we will cover: With a default Magento installation, all the common e-commerce features, such as catalog navigation, promotion rules, tax settings, online payments, and so on are available.
The first version of Magento was released in after one year of development. Magento was initially designed as an e-commerce system that could be used for a wide range of uses. In later years, Magento became very popular as an out-of-the-box e- commerce system and a lot of minor versions of the 1. To be future proof, Magento started the development of a major upgrade of the system, also known as Magento 2. Magento 2 is a big improvement on every part of Magento. Every aspect is analyzed and rewritten with up-to-date technologies to be ready for the future.
Everything, including the developer experience, maintainability, performance, and technologies will be improved. In this chapter, we will upgrade the data of a Magento 1 installation to a Magento 2 installation. We will also prepare some tools that we can use in the following chapters of this book. Creating a Magento 1 website with sample data To start a Magento 2 upgrade, we need a Magento 1 webshop with some data.
In this recipe, we will install the latest Magento version, 1. Getting ready To install a Magento 1 website, we need the following stuff: The following stuff is recommended for the installation: Command-line access A virtual host domain name that is going to be your web root Note We recommend that you use a test server that is on your development machine.
If you use a Linux or a Mac operating system, you can install the webserver on your local machine. If you have a Windows machine, you can use a virtual Linux server for your development. How to do it… 1. Extract the Magento code archive in your webroot the directory of the virtualhost. An ls -la command should give you the following output: Extract the sample data archive to a different folder from the webroot.
Copy the contents of the media and skin folders to the media and skin folders in your webroot. We can do this by using the following cp command: Create a database for the Magento 1 installation and name it magento1. We can do this by running the following commands: Import the sql file that is in the sample data directory.
This file contains a database that we will import into the magento1 database. We can do this by running the following command: For security reasons, it is recommended that all files have just enough permissions so that only the right users can access the right files. More information about file permissions can be found at http: When the files are in the right place and the database is imported, we can run the Magento installer.
Open your browser and go to the domain that is configured for your website. You should see the installer as in the following screenshot: Continue with the installation process by accepting the terms and conditions. On the next screen, choose the correct language, locale, and currency for your store. On the configuration page, fill in the form with the right data: Database Type: Enter the hostname or IP address of your database server localhost if it is on the same machine.
Database name: Enter magento1 in this field or another name if you have a different name for your database. User name: Enter your database username.
User password: Enter your database password. Tables prefix: Leave this field empty the string in this field will be used to prefix all tables of your database. Base URL: Enter the URL of your website in this field. Admin path: Enter admin in this field. This will be the path of the backend. Enable charts: For development, it is recommended that this be unchecked.
Use Web Server Apache rewrites: Submit this form and we will be forwarded to the next step. In this step, you can configure the administrator account. Fill in the right data and remember the username and password because this is required to manage the store.
Leave the encryption key field empty.
After submitting this form, the installation is complete. Optionally, you can submit the Magento survey.
At the bottom of the page, there are buttons to navigate to the frontend and backend. When going to the frontend, you can see a demo shop with sample data as in the following screenshot: The layout is responsive.
When scaling your browser to a smaller width, the website will switch to the mobile layout like in the following screenshot: How it works… We have just created a fully functional Magento 1 store. The webshop is fully configured and filled with data about products, customers, and orders, just the data we need to migrate to Magento 2 in the upcoming recipes.
When installing a new shop, you have to follow the installer. If the file is there, Magento will run the shop. With a valid local. These are actions that you have to do manually when choosing for this method. Creating a Magento 2 website In the previous recipe, we created a Magento 1 website with sample data that we will use for an upgrade.
In this recipe, we will do the same, but we will create a Magento 2 website with the sample data for Magento 2. Getting ready To install Magento 2, we need the newest tools to run that application. Make sure your webserver has the following stuff installed: PHP 5. In this recipe, we will install Magento 2 using Composer.
The advantage of this is that we can use GIT to add version control to our custom development. We will install Magento 2 with Composer. For this, we need authentication keys. With an account on the magento. On this page, you can generate public and private keys that will be your username and password in the next step.
To install Magento 2 with composer, we have to run the following command: You will be prompted for a username and password. The username is the public key and the password is the private key that we generated in the previous step. When the command has run, the installation directory will have the following structure: One recommendation is to execute all the commands as your apache user.
We have installed the codebase with composer. Now we can run the installation wizard. Open your browser and enter the URL of your site. You should see the following welcome screen: Hit the Agree and Setup Magento button and start the environment check. Click on Next and enter your database information as follows: Database Server Host: The username of the database account Database Server Password: The password for the account Database Name: The name of the database Table Prefix: Optionally, you can give a prefix for each table 7.
Go to the next step and check if the right information is filled for the URL part. In the advanced section, you can optionally configure HTTPS, apache rewrites, and your encryption key.
For our test environment, we can leave these settings as they are configured. When not enabled, the URL rewrites will not work correctly. In the next step, you can configure your time zone, currency, and default language.
In the last step, you can configure your administration account. After clicking on the Next button, you are ready to install.
Click on the Install Now button and the installer will start. This will take some time because the installer will add the sample data during the installation.
You can open the Console Log to see what is currently happening. When the installer is ready, you will see the following success message: Run the following commands in your Magento installation directory to configure the sample data: The preceding commands will download and install the sample data packages. Because they contain a lot of images, this could take some time. The setup: The installation of the webshop is now complete.
You now have an up-and-running Magento 2 webshop. When you navigate to the category Gear Bags, you should see something like in the following screenshot: How it works… We have now installed a Magento 2 website.
Like we did in the previous recipe for Magento 1. For Magento 2, we used composer to download the codebase. Composer is a PHP dependency manager. All the dependencies are set in the composer. For this recipe, there are the Magento and the magento-sample-data dependencies in the composer. There is also a composer. In that file, the versions of the installed dependencies are stored.
Note When working with GIT, we only have to commit the composer. The sample data for Magento 2 is now a script that will be executed after the installation of Magento. That script will add products, customers, orders, CMS data, and more configurations to populate the shop. This could be caused by an Apache timeout. If this occurs, you can maybe try the command-line installation. This works as follows: We have to add the following required parameters to the command to configure the installation: The base URL, for example http: The database host or IP address db-user: The database username db-name: The database name db-password: The database password admin-firstname: The first name of the administrator user admin-lastname: The last name of the admin user admin-email: The e-mail address of the admin user admin-user: The username login name of the admin user admin-password: The password for the admin user language: The language of the shop currency: The currency code of the shop timezone: The time zone of the shop use-rewrites: Whether to use the apache rewrites or not use-sample-data: Install the sample data optional Look at the following code for a working example of the install command: The code has a whole new structure with a lot of improvements but there is one big disadvantage.
What do I do if I want to upgrade my Magento 1 shop to a Magento 2 shop? Magento created an upgrade tool that migrates the data from a Magento 1 database to the right structure for a Magento 2 database. The custom modules in your Magento 1 shop will not work in Magento 2. It is possible that some of your modules will have a Magento 2 version, and depending on the module, the module author will have a migration tool to migrate the data that is in the module.
Getting ready Before we get started, make sure you have an empty without sample data Magento 2 installation with the same version as the Migration tool that is available at: In your Magento 2 version with the same version as the migration tool , run the following commands: Install Magento 2 with an empty database by running the installer. Make sure you configure it with the right time zone and currencies.
When these steps are done, you can test the tool by running the following command: The next thing is creating the configuration files. We can create a copy of this folder where we can set our custom configuration values.
For a Magento 1. Change the values of these database settings to your database settings like in the following code: Rename that file to config. This migration tool is a Magento console command that will handle the migration steps from a Magento 1 shop.
In the etc folder of the migration module, there is a sample configuration of an empty Magento 1. If you want to migrate an existing Magento 1 shop, you have to customize these configuration files so it matches your preferred state.
In the next recipe, we will learn how we can use the script to start the migration. Upgrading the database In the previous recipe, we configured the database migration tool.
In this recipe, we will run the migration tool so that we can migrate parts from a Magento 1 shop to a Magento 2 shop. Getting ready You need a Magento 1 website and a Magento 2 website. The Magento 2 website needs to have the database migration tool installed and configured as described in the previous recipe. In this recipe, we will do a migration from a clean Magento 1 site, to a Magento 2 site without sample data.
We did a migration from a clean Magento 1 database with some test products. Make sure you have a cleanly installed Magento 1 shop with some test data products, orders, and so on in it. Open that file and check that the database credentials are correct.
We created this file in the previous recipe: Tip Test the migration first with a clean Magento 1. The mapping that we will use in this recipe is for a clean Magento 1.
With an existing shop, you will have custom attributes and entities that need more configuration to make the migration work. If these settings are correct, we can run the upgrade tool.
Run the following command: This gives us the following output: To start or test a migration, we have to run the following command: The migration will start and will give the following output: The migration is now complete. If you check your database for the Magento 2 website, you will see that the data products, categories, and so on is migrated from Magento 1.
We can also migrate the settings from the Magento 1 website. To do this, you have to replace the data parameter in the command using settings.
To check if the upgrade works, you have to look at the data of the Magento 2 installation. We can check the following things in the backend: You can also check in the database if you look at the following tables: If there are more things available in the Magento 1 database than the things that are configured, the migration tool will give a notification and stop the migration. Each entity, attribute, and so on needs to be declared in the configuration files.
It is on you to decide what to ignore and what to migrate. If the configuration files are valid, the migration will start and the data will come into the Magento 2 database. The same principle applies when migrating the settings, but you have to think about whether you want it. Note With the migration tool, it is only possible to migrate data and settings. The code of Magento 1 modules will not work in Magento 2. However almost every running Magento 1 shop is not clean.
It contains custom attributes, custom modules, and a custom configuration. When migrating such a shop to a new shop, the migration is a bit more complex. The first question is: What needs to be migrated? With the tool, you can migrate every entity, from products, customers, and orders to reviews, settings, and more.
If you want to skip data that must be migrated, you can use the map. Tip If you want to change something in the map. This file is configured in the config. To solve errors such as Source fields not mapped you have to add configuration in the map-eav. See also Migrating configuration files is the most time consuming part of a data migration.
If you want more information on the migration tool, you can have a look at the Magento Migration Whitepaper, available at http: Using an IDE Writing good code starts with a good development environment.
In this recipe, we will set up a Magento 2 project in NetBeans. You can download it from the following URL: A window like the one in the following screenshot will appear on your screen. Click on Next and configure the following settings: Source Folder: This field is set to PHP 5. This field is set to UTF-8 4. In the next screenshot, you can see how everything is configured: Tip When you are working with a version control system like GIT, it is recommended that you check the checkbox.
Put NetBeans metadata into a separate directory. If not checked, a. Another possibility is to add the. Click on Next and configure the final settings: Run as: The URL of your website Index file: Set this to index.
Click on the Finish button and your NetBeans project is ready. You can now start developing. It goes a bit further than the syntax check in your IDE. Make sure you have command-line access to your development environment. Especially if you are developing on a remote server, it could be that PHP is not installed. Depending on your OS, the protocol could be different. You can find instructions at: You can find the installation instructions at: Filename or directory The format of the report The ruleset 5.
It gives us the following output: Else is never necessary and you can simplify the code to work without else. To run a test with these rules, we can run the following command: This command gives empty output, which means that this file is valid.
This test gives us the following output: When we specify the ruleset of Magento 2, we have the following command: This command gives us the following output: These tools have defined their default rulesets for common usage. These plugins will run a test when saving a file. For more details visit the following URL: If it is configured, there is a color indicator that says how clean your code is. More information can be found at https: Chapter 2. Working with Products In this chapter, we will cover the following recipes: Convincing the visitors to buy something from the shop is the main target of every shop owner.
Products need to be set in such a way that a visitor can quickly find what he is looking for. With good product content, a shop looks reliable, due to which a visitor is more likely to buy something.
In this chapter, we will explain what you can do to display products in your shop, and we will see some extra things, such as a video and add to cart links, to raise conversion from a prospective buyer to an actual buyer. The goal of this chapter is to make your shop more user-friendly with just a little development.
Configuring the catalog defaults One of the first things is to configure some default catalog settings to the preferred values. We will cover all the configuration values that are possible in a Magento 2 installation. We will go through the available configurations and change some values to the recommended settings. Getting ready Open your frontend and log into the backend in a separate browser tab.
We will modify some configuration values to the recommended settings. When changing a configuration value, we can check what happens in the frontend. How to do it In the next steps, we will take a look at the catalog settings: In the backend, navigate to Stores Settings Configuration.
Open the Catalog menu, as we can see in the following screenshot: Open the Product Fields Auto-Generation section. In this section, we can configure the behavior of the generation of SKU and metadata. Open the Storefront section and set the following values: List mode: Otherwise, the last row of products will not be complete.
Products per page on List allowed values: No Note When you have a large number of products, it is not recommended to set the Allow all products per page option to Yes. When you have products and you want to show all the products on a single page, you will generate an enormous HTML output that can cause memory issues. Product listing Sort by: No Use Flat Catalog Product: Yes 4.
Enable the product reviews for guests. This allows everyone to write a review about a product. When this is enabled, a review form will appear on the product review page. Open the Product Alerts section to configure product alert e-mails that will be sent when the price or stock changes. We will configure a stock alert with the following settings: Allow alert when product price changes: No Allow alert when product comes back in stock: Yes Note The previous configurations will send stock alert e-mails a stock alert is triggered when a product becomes available in stock to the subscribed e-mail addresses.
We can set the values for Product Alerts Run settings in the next section. We will configure a daily task at Daily Start time: Leave the Product Image Placeholders options as they are. If we want, we can set a default image that will be shown when a product has no image or the image is not found. The best way is to set the placeholder images in the theme.
Show for current: Website Note This will show the recent products you viewed over all stores and store views in the website. Default recently viewed count: When Price Scope is set to Global, we can only configure one global price for a product, which will be the same in all store views. In the Layered Navigation section, we will modify some settings to customize the left navigation for the category pages: Display product count: Yes Price navigation step calculation: Automatic this will equalize price ranges By making these settings, the price steps will always have the same increment.
This means that the navigation will be shown with a maximum of three levels. Configure the Catalog Search section as follows: Minimal Query Length: With this setting, you can disable the layered navigation if the results count is higher than the configured value.
How it works All these settings are saved in the configuration table of Magento. The frontend files for the catalog pages will pick up these settings and render the output based on these settings. When you add extra functionality to the category page, you can easily extend the configuration with extra parameters. More information about extending the configurations is given in the Extending the system configuration recipe of Chapter 6, Magento Backend.
Working with attribute sets Magento has a flexible system to work with products. When you sell, for example, a board game or a computer, the specifications of each product are different. For a board game, information such as age and duration is relevant.
For a computer, a lot of technical specifications are relevant, such as the CPU power, disc size, and so on. To cover this, Magento 2 comes with a system called product templates, which can be compared with attribute sets in Magento 1. A product template is a specification of product attributes that you can assign to products. We will create a newproduct attribute and a new product template such as an attribute set that we can use in new products.
How to do it In the following steps, we will create an extra product attribute that we can use in a product template: Populate the form with the following instructions: Default label: Date this is the type of the attribute 3. Click on Save and Continue Edit and the attribute will be saved.
You will see that the Attribute Code field is prepopulated with a code that is generated from the label. Additionally, we can set the following values: Values required: No Scope: Store View with this setting, we create the possibility to specify separate values for each store view Default value: Leave this field empty Unique value: In the Manage Labels tab, we can set the label that will be displayed on the product detail page.
If left empty, the attribute label will be used. In the Storefront Properties tab, we can set the following properties: Use in search: No Comparable on Storefront: No Use for Promo Rule Conditions: No Visible on Catalog Pages on Storefront: No Used in Product Listing: No Used for Sorting in Product Listing: Click on Save Attribute; this will save the attribute.
The next step is to create an Attribute Set to which will assign a product to. In the backend, navigate to Stores Attributes Attribute Set. Click on the Add Attribute Set button and fill in the form, as follows: Clicking on Save will open the overview page.
The overview will look as follows: Save the Attribute Set. Navigate to Product Catalog and create a new product by clicking on the New Product button. Select the right Attribute Set in the form, as shown in the following screenshot: When selecting the product template, you will see that the Game specific data tab appears in the product tab, as shown in the following screenshot: How it works Product attributes and Attribute Sets are used when you work with multiple families of products.
In the sample data of our shop, there are more attribute sets available for bags, clothing, and more. With Attribute Sets, you can make groups of attributes for every product family. When creating a product attribute, you have to choose the type of the attribute, which can be one of the following: Working with product types In Magento 2, it is still possible to work with different types of products.
The standard product is a simple product, which is used to sell basic products, but there are more types available, such as products, where you can choose a size and other options, or download products, virtual products such as a license , and product combinations.
Getting ready In this recipe, we will create a configurable product, for example, you want to buy a pair of shoes where you can choose their size and color. Open the Magento backend and navigate to Products Catalog. How to do it In the following steps, we will create a product where we can specify a size on the product detail page: Navigate to Products Catalog, click on the arrow near the Add Product button, and choose Configurable Product as shown in the following screenshot: Choose a name, SKU, and price for the product.
The next step is to decide the attribute on which we want to configure our product. Scroll down through the New Products page, and click on the Create Configurations button. In the grid, select the Size attribute and click on Next. Select the sizes for your products and click on Next. On the next screen, you can add images, prices, and quantities for the products, or you can do this later.
When you click on Next, you will get an overview. When you click on Generate Products, the products will be displayed as shown in the following screenshot: Click on the Save button and a popup will show up to create a specific attribute set for this configuration. Select the Add configurable attributes to the new set based on current option and select a Size for the name. Click on Confirm to save the products in the database. On the Product Edit page, select the category where you want to add the product, click on Save, and search for the product in the right category in the frontend.
The product detail page will look as follows: How it works… A configurable product is a product where you can select one or more options on the product detail page. Each combination of selections leads to a simple product in the database. The customer chooses the options, and when adding the configurable product to the cart, a simple product is also added in the background.
This is the reason why we have generated simple products to be shown as options in our configurable product. The configurable product is a parent wrapper that is used to display in the frontend.
The simple products are hidden in the frontend by the Visibility attribute. When a product is sold, the SKU of the selected child product will be used to process the order.
The following overview gives a short description of what is possible with the different product types. A simple product A simple product is just a product that you can sell in your web shop. A configurable product In this recipe, we created a configurable product. This product has child products that you can configure on the product page for example, to configure the size. The child products are simple products.
A bundle product A bundled product is like a configurable product, but with this one, you can optionally specify more options. Note Every option of a bundle represents another product in the shop. When you add a bundle product to the cart, the products of the chosen configuration will also be added to the cart in the background.
A grouped product A grouped product is a product that represents a set in which you can specify the number of child products. In a grouped product, you assign simple products. When adding a grouped product to the cart, the child products will be added as separate products with the configured quantity. A virtual product A virtual product is like a simple product but it is not physical. A good example of a virtual product is a software license. A downloadable product A downloadable product is a product that is not physical.
When a customer buys a downloadable product, a download link will be sent to the customer so that they can download their product, which is in the form of a PDF, MP3, ZIP file, or any other type of file.
Adding social media buttons These days, an increasing number of people are sharing their minds through different social media, such as Facebook, Twitter, and many more. Every social media platform has the option to share pages on their platform. The most famous examples of this are the share buttons, such as the Like button of Facebook, the Tweet button, the Google Plus button, and many more. Getting ready In this recipe, we will add share buttons for the following platforms. You can take a look at the developer documentation of each platform as a preparatory step: Facebook https: Ensure that you have access to the code with your IDE.
How to do it The following steps show you how to add social media buttons to the description of your product: Open the page of the product where you want to add the social media buttons. We will start with the Like button of Facebook. Visit https: When clicking the Get Code button, you will see the code of the button. Place this code in the product description field. Save the product and open the Product Detail page of that product in the frontend. You will see a Like button in the description field of the product.
We can also add buttons for sharing on other social media using the same principle. For Twitter, we can get the code of a button at https: From here, copy the code and paste it after the code of the Facebook Like button. Similarly, for Google Plus, we can get a button at https: When reloading the frontend, we can see the buttons on the detail page of that product.
If we want to show it on every page, we will have to make a change in the code of the product detail template. In that recipe, all the steps are explained on how to do this. Add the code of the social media buttons at the end of the file. You generate the product URL with the following code: Use this code to generate the URL for the button. The code for the Facebook Like button code will look as follows: Save the file, clean the cache, and you will see the Like button on every page.
How it works A social media button is mostly a piece of external HTML that will render in your website. With this button, a page can be shared.