Magento 2 Custom Options Extention by Itoris Inc.

1. ITORIS INC. WEB DEVELOPMENT COMPANY Dynamic Product Options extension for Magento2 User Guide version 1.0 Website: http://www.itoris.com Email: sales@itoris.com Page | 1

2. ITORIS INC. WEB DEVELOPMENT COMPANY Contents 1. Introduction .................................................................................................................................................. 3 2. Installation .................................................................................................................................................... 3 2.1. System Requirements ............................................................................................................................ 3 2.2. Installation.............................................................................................................................................. 3 2.3. License .................................................................................................................................................... 3 3. How to Use .................................................................................................................................................... 4 3.1. Enable/Disable Extension ....................................................................................................................... 4 3.2. Configuring Product Option.................................................................................................................... 4 3.2.1. Field Type ........................................................................................................................................ 5 3.2.2 General Settings ............................................................................................................................... 6 3.2.3 Properties of Input Box..................................................................................................................... 7 3.2.4 Properties of Textarea ...................................................................................................................... 7 3.2.5 Properties of File .............................................................................................................................. 7 3.2.6 Properties of Dropdown ................................................................................................................... 8 3.2.7 Properties of Radio Buttons ............................................................................................................. 9 3.2.8 Properties of Check Boxes .............................................................................................................. 10 3.2.9 Properties of Multiple Select .......................................................................................................... 11 3.2.10 Properties of Date ........................................................................................................................ 12 3.2.11 Properties of Date & Time ............................................................................................................ 12 3.2.12 Properties of Time ........................................................................................................................ 12 3.2.13 Properties of Image ...................................................................................................................... 13 3.2.14 Properties of DIV/HTML Text........................................................................................................ 13 3.2.15 CSS Adjustment (for advanced use only) ...................................................................................... 13 3.2.16 Extra JavaScript (for advanced use only) ...................................................................................... 14 3.3 Product Options Templates ................................................................................................................... 14 3.4 Mass Actions ......................................................................................................................................... 15 3.4.1 Copy Custom Options ..................................................................................................................... 15 3.4.2 Load Options .................................................................................................................................. 16 3.5 Product Options on Frontend ................................................................................................................ 16 3.5.1 Dependent Options on Product View ............................................................................................. 16 3.5.2 Product Options in Popup .............................................................................................................. 18 3.5.3 A Chain of Dependent Options ....................................................................................................... 18 3.5.4 Associated Options to Other Products ........................................................................................... 19 Website: http://www.itoris.com Email: sales@itoris.com Page | 2

3. ITORIS INC. WEB DEVELOPMENT COMPANY 1. Introduction The document is a User Guide for extension Dynamic Product Options created for Magento2 websites. It describes the extension functionality and provides some tips for a quick start. The purpose of the Dynamic Product Options extension for Magento 2 (https://www.itoris.com/magento-2- custom-options.html) is to allow to create complex option-based products. You can also design product options the way you need it. By defaults Magento 2 allows creating only one option per row. With Dynamic Product Options you can create multiple options in the same row making a table of options. What is more, now you can configure options for different store views separately and translate options or change prices for your stores. The extension offers different form styles which can be displayed directly on the product view. Also you can associate options to other products, thus creating a bundle offer. Using Dynamic Product Options you can create dependent fields, when one option depends on other option. Now each option may have its own price, thus for options having individual quantity you can set up the tier prices. The extension provides additional tools for advanced use. Moreover, you can add your custom CSS styles and JavaScript associated with the options. Dynamic Product Options extension is the ultimate solution to manage products' custom options in Magento2. 2. Installation 2.1. System Requirements The extension requires Magento 2.x 2.2. Installation The extension is provided as a .zip archive with the source code and the installation instructions. Unpack the source code into /app/code/Itoris/DynamicProductOptions/ folder on your server. And run the following commands in the SSH console: php bin/magento module:enable --clear-static-content Itoris_DynamicProductOptions php bin/magento setup:upgrade Then log into Magento backend and flush cache in System -> Cache Management -> Flush Magento Cache If you experience any issues with the extension installation please contact us here - https://www.itoris.com/contact-us.html 2.3. License The extension has full open source code. One license/purchase can be used on a single production Magento2 website and its development instances. The extension can be customized for the license owner needs. Redistribution of the extension or its parts is not allowed. Please read more details here - https://www.itoris.com/magento-extensions-license.html Website: http://www.itoris.com Email: sales@itoris.com Page | 3

4. ITORIS INC. WEB DEVELOPMENT COMPANY 3. How to Use 3.1. Enable/Disable Extension You can enable or disable the extension following STORES -> Settings -> Configuration -> ITORIS EXTENSIONS-> Dynamic Product Options ->Extension Enabled - Yes/No 3.2. Configuring Product Option Dynamic Product Options' settings are located following PRODUCTS -> Inventory -> Catalog -> Add Product -> Dynamic Product Options -> Product Options Templates In the "Product Options Templates" settings the extension allows to load an existing template by selecting dropdown "Please select a template" and then clicking the "Load" button. The template with all its created options will be loaded. The options will appear on the same page below. You can also "Create New Template" by entering a name in the field. You can also select a template’s name in "Create or Update Existing Template" dropdown and click the "Update" button. The template will be changed to have the current product’s options. You can also "Delete" an existing template. Website: http://www.itoris.com Email: sales@itoris.com Page | 4

5. ITORIS INC. WEB DEVELOPMENT COMPANY Using Dynamic Product Options you can change the form style and appearance. There are 3 Form Styles available: Table-based with sections – table structure. Options are divided into sections, each having its own options’ table and title. List DIV-based – simple structure. Options go one per row. Table-based – table structure. Options can go in several rows and columns. The extension provides the following appearances: In a Popup after clicking "Configure" – button "Configure" will appear on the products’ pages. After clicking it the options will open up in a modal window. On Product View – the options will be displayed on the product pages, below the main product details. In a Popup after clicking "Add to Cart" – the options will be displayed in a modal window when the product is added to the cart. 3.2.1. Field Type You can manage Options' Configuration following PRODUCTS -> Inventory -> Catalog -> Add Product -> Dynamic Product Options -> Options Configuration By default there is one section that has a table with 3 columns and 3 rows. You can add more sections by clicking the "Add New Section" button. Each section will have its own table with a set of options. Section Label – this is the section’s title your customers will see. To remove the section, click link "Remove". There is ability to create conditional branching for the options – make options’ behavior depend on what has been selected previously. Each option provides this ability with "Visibility", "Make it" and "If" settings. There are 3 types of "Visibility": Visible Hidden Disabled Also choose setting "Make it": Hidden Website: http://www.itoris.com Email: sales@itoris.com Page | 5

6. ITORIS INC. WEB DEVELOPMENT COMPANY Disabled If – press the "edit" icon next to the field to create a condition. There are 2 dropdowns above each section – Columns and Rows. You can select the number of columns and/or rows for the table. To create a new option, please, choose the "edit" icon in one cell. Click it to see the available option’s configuration. To remove all product’s options and sections click the "Remove All" button. 3.2.2 General Settings All options share a number of settings while the rest are unique for each of them. Copy Configuration From – you can copy the option's configuration from an existing one. Title – this is the option’s name or label your customers will see. Field ID – this ID is for information purposes and for dependent fields' rules. Required – select if the option is required or not. Price – if the option’s selection implies increased price, then set it here. Price Type – select if the additional charge should be fixed or percentage from the default price. Sku – enter the option’s Sku if needed. Customer Group – options can be set to be available for selection of customer groups only. For example, you want additional information to be entered by wholesale customers only. Select which customer group(s) will see the option. Visibility, Make it – this setting is for conditional branching. You can make the field visible by default and make it invisible if a condition is met (and create the condition), and vice versa. Comment – enter your comments here. CSS Class – if you want to apply your customer CSS class enter it here. HTML Argument – add your own arguments to HTML tag of the field. Click button "Apply" to add the option to a product, "Cancel" to go back without changing the option or "Remove" to delete the option. You can also translate or configure options for different store views separately. Click "All Store Views" and select a store view at the top of the page. Website: http://www.itoris.com Email: sales@itoris.com Page | 6

7. ITORIS INC. WEB DEVELOPMENT COMPANY 3.2.3 Properties of Input Box To create an input box select "Input Box" from the dropdown. The following additional settings will be available (for general settings please see chapter 3.2.2): Validation – choose the validation rule. The following validation rules are available: - - - - - Max Len – the maximum number of characters are allowed to be entered. Default Value – the text to be displayed in the field by default. Hide on focus – the default text will disappear as soon as the field is on focus, when this checkbox is selected. Email Number Money Phone Zip Code 3.2.4 Properties of Textarea To create a textarea select "Textarea" from the dropdown. The following additional settings will be available (for general settings please see chapter 3.2.2): Default Value – the text to be displayed in the field by default. Hide on focus – the default text will disappear as soon as the field is on focus, when this checkbox is selected. 3.2.5 Properties of File To add a file to the options select "File" from the dropdown. The following additional settings will be available (for general settings please see chapter 3.2.2): Website: http://www.itoris.com Email: sales@itoris.com Page | 7

8. ITORIS INC. WEB DEVELOPMENT COMPANY Allowed File Extensions – enter which types of files are allowed for uploading. For instance, png, jpg, jpeg, gif, etc. Add allowed file extensions separated by comma. Maximum Image Size - if images are planned to be uploaded, you can set the maximum width and height of the images in px. 3.2.6 Properties of Dropdown To add a dropdown to the options select "Dropdown" from the dropdown. For general settings please see chapter 3.2.2. After choosing "Dropdown" you can add more options. Click link "+ Add Option". Each option will have the following settings separately: Title – option’s name. Price – this is the additional charge to be set when this dropdown’s option is selected. Price Type – type of the charge (fixed/percent). Tier – you can set up the tier prices if you want to provide a lower price for a bulk purchase. Click the "edit" icon. Then choose "+ Add Tier Price". In field "Min QTY" enter the minimum quantity of the option. Next, enter in "Price" the price of the product. In dropdown "Price Type" select if the additional charge should be fixed or percentage from the default price. Then choose button "Apply" to apply the option or button "Cancel" to go back. You can also click link "Remove" to delete the "Price Type" dropdown. Sku/Product Id – using the extension you can now associate options to other products. Add Sku of the option or click "Link" to find a product(s) and then click "Select". Website: http://www.itoris.com Email: sales@itoris.com Page | 8

9. ITORIS INC. WEB DEVELOPMENT COMPANY Weight – the extension allows to add weight for a tangible product. You can also override the option's weight to calculate the proper shipping weight and price on checkout. Qty – using the extension you can enable the quantity for options, i.e. let customers to choose how many products they need to order along with the main product. Def – the option is selected in the dropdown by default. Visibility, Make it… If… – ability to create conditional branching, so that the option is shown or hidden, depending on the selected conditions. User Groups – the dropdown option will be visible for selected customer group(s) only. CSS Class – if you want to apply your custom CSS class enter it here. Order – choose the order of your options. Del – you can delete this option. 3.2.7 Properties of Radio Buttons To add radio buttons select "Radio Buttons" from the dropdown. For general settings please see chapter 3.2.2: After choosing "Radio Buttons" you can add more options. Click link "+ Add Option". Each option will have the following settings separately: Title – option’s name. Image SRC – if you want to display an image next to the radio button you can upload the image here. Price – this is the additional charge to be set when this dropdown’s option is selected. Price Type – type of the charge (fixed/percent). Tier – you can set up the tier prices if you want to provide a lower price for a bulk purchase. Click the "edit" icon. Then choose "+ Add Tier Price". In field "Min QTY" enter the minimum quantity of a product. Next, enter in "Price" the price of the product. In dropdown "Price Type" select if the additional charge should be fixed or percentage from the default price. Then choose button "Apply" to apply the option or button "Cancel" to go back. You can also click link "Remove" to delete the "Price Type" dropdown. Sku/Product Id – using the extension you can now associate options to other products. Add Sku of the option or click "Link" to find a product(s) and then click "Select". Website: http://www.itoris.com Email: sales@itoris.com Page | 9

10. ITORIS INC. WEB DEVELOPMENT COMPANY Weight – the extension allows to add weight for a tangible product. You can also override the option's weight to calculate the proper shipping weight and price on checkout. Qty – using the extension you can enable the quantity for options, i.e. let customers to choose how many products they need to order along with the main product. Def – the option is selected in the dropdown by default. Visibility, Make it… If… – ability to create conditional branching, so that the option is shown or hidden, depending on the selected conditions. User Groups – the dropdown option will be visible for selected customer group(s) only. Carriage return – this setting allows organizing radio buttons in rows. If you want them to go in one line, do not check it. But if you want them to go in rows, two radio buttons in each, select each check box. CSS Class – if you want to apply your custom CSS class enter it here. Order – choose the order of your options. Del – you can delete this option. 3.2.8 Properties of Check Boxes To add check boxes to the options select "Check Boxes" from the dropdown. For general settings please see chapter 3.2.2: The Check Boxes have the following options: Title – option’s name. Image SRC – if you want to display an image next to the radio button you can upload the image here. Price – this is the additional charge to be set when this dropdown’s option is selected. Price Type – type of the charge (fixed/percent). Tier – you can set up the tier prices if you want to provide a lower price for a bulk purchase. Click the "edit" icon. Then choose "+ Add Tier Price". In field "Min QTY" enter the minimum quantity of a product. Next, enter in "Price" the price of the product. In dropdown "Price Type" select if the additional charge should be fixed or percentage from the default price. Then choose button "Apply" to apply the option or button "Cancel" to go back. You can also click link "Remove" to delete the "Price Type" dropdown. Website: http://www.itoris.com Email: sales@itoris.com Page | 10

11. ITORIS INC. WEB DEVELOPMENT COMPANY Sku/Product Id – using the extension you can now associate options to other products. Add Sku of the option or click "Link" to find a product(s) and then click "Select". Weight – the extension allows to add weight for a tangible product. You can also override the option's weight to calculate the proper shipping weight and price on checkout. Qty – using the extension you can enable the quantity for options, i.e. let customers to choose how many products they need to order along with the main product. Def – the option is selected in the dropdown by default. Visibility, Make it… If… – ability to create conditional branching, so that the option is shown or hidden, depending on the selected conditions. User Groups – the dropdown option will be visible for selected customer group(s) only. Carriage return – this setting allows organizing check boxes in rows. If you want them to go in one line, do not check it. But if you want them to go in rows, two check boxes in each, select each check box. CSS Class – if you want to apply your custom CSS class enter it here. Order – choose the order of your options. Del – you can delete this option. 3.2.9 Properties of Multiple Select To add a multiple select to the options choose "Multiple Select" from the dropdown. For general settings please see chapter 3.2.2: After choosing "Multiple Select" you can add more options. Click link "+ Add Option". Each option will have the following settings separately: Title – option’s name. Price – this is the additional charge to be set when this dropdown’s option is selected. Price Type – type of the charge (fixed/percent). Tier – you can set up the tier prices if you want to provide a lower price for a bulk purchase. Click the "edit" icon. Then choose "+ Add Tier Price". In field "Min QTY" enter the minimum quantity of a product. Next, enter in "Price" the price of the product. In dropdown "Price Type" select if the additional charge should be fixed or percentage from the default price. Then choose button "Apply" to apply the option or button "Cancel" to go back. You can also click link "Remove" to delete the "Price Type" dropdown. Website: http://www.itoris.com Email: sales@itoris.com Page | 11

12. ITORIS INC. WEB DEVELOPMENT COMPANY Sku/Product Id – using the extension you can now associate options to other products. Add Sku od the option or click "Link" to find a product(s) and then click "Select". Weight – the extension allows to add weight for a tangible product. You can also override the option's weight to calculate the proper shipping weight and price on checkout. Def – if the option is selected in the dropdown by default. Visibility, Make it… If… – ability to create conditional branching, so that the option is shown or hidden, depending on the selected conditions. User Groups – the dropdown option will be visible for selected customer group(s) only. CSS Class – if you want to apply your custom CSS class enter it here. Order – choose the order of your options. Del – you can delete this option. 3.2.10 Properties of Date To add a date selection option choose "Date" from the dropdown. For general settings please see chapter 3.2.2. This option adds an input box and date selector (calendar). 3.2.11 Properties of Date & Time To add a date and time selection option choose "Date and Time" from the dropdown. For general settings please see chapter 3.2.2. This option adds an input box, date and time selector (calendar). 3.2.12 Properties of Time To add time selection option choose "Time" from the dropdown. For general settings please see chapter 3.2.2. This option adds an input box and time selector (calendar). Website: http://www.itoris.com Email: sales@itoris.com Page | 12

13. ITORIS INC. WEB DEVELOPMENT COMPANY 3.2.13 Properties of Image You can add an image to the options by choosing "Image" from the dropdown. The following additional settings will be available (for general settings please see chapter 3.2.2): Upload Image – select the image to be uploaded. Image ALT – add alternate text for an image. Image Title – enter the title of your image. 3.2.14 Properties of DIV/HTML Text With this element you can embed a video to the options, or insert a tracking code, etc. Its main area allows inserting raw HTML. 3.2.15 CSS Adjustment (for advanced use only) The CSS Adjustment textarea will allow you to add your own CSS styles on page. This way you can modify the look of options: colors, font size, margins, etc. Website: http://www.itoris.com Email: sales@itoris.com Page | 13

14. ITORIS INC. WEB DEVELOPMENT COMPANY 3.2.16 Extra JavaScript (for advanced use only) The Extra JavaScript textarea is used to embed custom JS functionality to form, like 3rd-party widgets, AJAX, custom validation, etc. You need to have the experience in JavaScript to use it. 3.3 Product Options Templates In case if the same or similar set of options should be applied to several products, you can create an options' template. It can be created separately or inside a product. After that it can be uploaded to the appropriate products and adjusted for them individually. To create a template separately choose PRODUCTS -> Inventory -> Product Options Templates You can create new templates or edit existing ones. To create a new template click the "Add New Template" button. To edit a template choose link "Edit". For general settings please see chapter 3.2.1. Also now you can drag'n'drop and reorder options and sections as you wish. Website: http://www.itoris.com Email: sales@itoris.com Page | 14

15. ITORIS INC. WEB DEVELOPMENT COMPANY After the template has been added or selected click "Save" or "Save and Continue Edit". Now the template can be used in the products. 3.4 Mass Actions 3.4.1 Copy Custom Options You can copy custom options and apply to a product or multiple products in bulk. Choose PRODUCTS -> Inventory -> Catalog -> Actions. In dropdown choose "Copy Custom Options 1 to Many". After a modal window appears, enter the product ID you wish to copy options from. Then click "OK" to apply the options. Website: http://www.itoris.com Email: sales@itoris.com Page | 15

16. ITORIS INC. WEB DEVELOPMENT COMPANY 3.4.2 Load Options To apply options template to a product or multiple products in bulk select the dropdown. Then click "OK" to apply the options. 3.5 Product Options on Frontend 3.5.1 Dependent Options on Product View Using the extension you can create dependent options. You can also manage visibility of a section, i.e. the whole section with all fields in it is visible based on the previous selection. In the backend you can hide option or make it visible. For instance, you need to make "File" visible only if a specific choice is selected in the previous dropdown. Choose "File" to make it visible in case, when you want to connect it with the "Your pattern" option. Click the "edit" icon and select the necessary section. Website: http://www.itoris.com Email: sales@itoris.com Page | 16

17. ITORIS INC. WEB DEVELOPMENT COMPANY Choose link "is" to select the option: Finally click "Apply" and save changes. On the Frontend it will be as follows: Website: http://www.itoris.com Email: sales@itoris.com Page | 17

18. ITORIS INC. WEB DEVELOPMENT COMPANY 3.5.2 Product Options in Popup The extension also allows to show all options in a modal window thus saving the space for product details. Choose in the backend in dropdown "Appearance" – In a Popup after clicking "Configure". On the frontend click button "Configure" and you will see the following: 3.5.3 A Chain of Dependent Options There is ability to create conditional branching for the options – make options’ behavior depend on what has been selected previously. Each option provides this ability with Visibility, Make it and If settings. For example, you have a radio button "Have you ever tried these products?" with options Yes/No. When the "Yes" option is selected, dropdown "Please select the product you have tried" appears. If "No" is selected, this dropdown is not visible. To create this functionality first add the radio button. Website: http://www.itoris.com Email: sales@itoris.com Page | 18

19. ITORIS INC. WEB DEVELOPMENT COMPANY Then set Visibility = hidden, make it = visible. If – press the "edit" icon near the field to create a condition. Select that the radio button should be "Yes". Then click the "Apply" button. Save the changes. Now on the frontend there will be the following: 3.5.4 Associated Options to Other Products Having Dynamic Product Options you can now associate options to other products, thus creating a bundle offer. Let's say you sell furniture and want to offer 2 armchairs, loveseat and a side table as additional options for the sofa. Add 4 checkboxes and associate them with existing products in your store. Website: http://www.itoris.com Email: sales@itoris.com Page | 19

20. ITORIS INC. WEB DEVELOPMENT COMPANY Customer will see the additional options on the same product view. If an option is out of stock it will be grayed out and disabled on the frontend. Customer won't be able to select it. If the option has been selected the associated product's inventory will be deducted on checkout. So you get the full inventory support on the options' level. In addition, you can enable the quantity for options, i.e. let customers choose how many armchairs they want to order along with the sofa. The option price will be multiplied by the quantity selected {option qty} x {option price}. Website: http://www.itoris.com Email: sales@itoris.com Page | 20