ADVANCED PRODUCT OPTIONS GUIDE - marketplace.magento.com · Magento 2 Advanced Product Options...

2 ADVANCED PRODUCT OPTIONS GUIDE

Important Notice

MageWorx reserves the right to make corrections, modifications, enhancements, improvements, and

other changes to its products and services at any time and to discontinue any product or service without

notice. Customers should obtain the latest information before placing an order and should verify that

such information is current and complete. All products are subject to the MageWorx terms and

conditions of sale supplied at the time of order acknowledgment.

MageWorx warrants performance of its products to the specifications applicable at the time of sale in

accordance with the company’s standard warranty. Testing and other quality control techniques are

used to the extent MageWorx deems necessary to support this warranty. Except where mandated by

government requirements, testing of all parameters of each product is not necessarily performed.

MageWorx assumes no liability for applications assistance or customer product design. Customers are

responsible for their products and applications using MageWorx components. To minimize the risks

associated with customer products and applications, customers should provide adequate design and

operating safeguards.

MageWorx does not warrant or represent that any license, either express or implied, is granted under

any MageWorx patent right, copyright, mask work right, or other MageWorx intellectual property rights

relating to any combination, machine, or process in which MageWorx products or services are used.

Information published by MageWorx regarding third-party products or services does not constitute a

license from MageWorx to use such products or services or a warranty or endorsement thereof. Use of

such information may require a license from a third party under the patents or other intellectual property

of the third party, or a license from MageWorx under the patents or other intellectual property of

MageWorx.

Resale of MageWorx products or services with statements different from or beyond the parameters

stated by MageWorx for that product or service voids all express and any implied warranties for the

associated MageWorx product or service and is an unfair and deceptive business practice. MageWorx

is not responsible or liable for any such statements.

All company and brand products and service names are trademarks or registered trademarks of their

respective holders.

Copyright © 2018 MageWorx


Table of Contents

1. Introduction ..................................................................................................................................... 4

2. Requirements ................................................................................................................................. 6

3. Extension Configuration ................................................................................................................. 7

3.1 Custom Options Templates ......................................................................................................... 7

3.1.1 Options Template Settings .................................................................................................... 8

3.1.2 Products Relations ................................................................................................................ 8

3.1.3 Customizable Options ......................................................................................................... 10

3.2 Custom Option Images .............................................................................................................. 18

3.2.1 Roles Example .................................................................................................................... 24

3.3 Dependent Custom Options ...................................................................................................... 26

3.4 Stock Management .................................................................................................................... 29

3.4.1 Custom Option Inventory Report ......................................................................................... 32

3.5 Individual Product Custom Options ............................................................................................ 33

4. Option Features Configuration ..................................................................................................... 34


1. Introduction

Out of the box, Magento Custom Options allow users to create dozens of products variants. This is

how the default product options grid looks like.

Yet, this default functionality lacks some key features, thus making the user manage the product

options by means of the Configurable Products, which may be a rather time-consuming task.

Magento 2 Advanced Product Options extension takes the best from both configurable products and

custom features extending and enhancing them. Below is a side-by-side comparison of the default

platform’s functionality and the advanced product options added by MageWorx extension.

http://docs.magento.com/m2/ce/user_guide/catalog/settings-advanced-custom-options.html

https://www.mageworx.com/magento-2-advanced-product-options-suite.html


2. Requirements

Advanced Product Options supports both Community and Enterprise edition of Magento starting from

version 2.1. The current version of the Magento installed on your website can be found in the lower

right corner of any backend page.


3. Extension Configuration

3.1 Custom Options Templates

Advanced Product Options extension allows the store owner to apply a set of custom options to any

number of products. This set can be as sophisticated as needed and include an unlimited amount of

product custom options.

Log into the Magento Admin panel and go to STORES ⟶ MageWorx Option Templates ⟶

Manage Option Templates.

Please note that during the initial setup this grid will be empty.

Here, you can see the list of all the created templates and the number of products each template is

assigned to. The Show in the Frontend column provides the possibility to view the enabled/disabled

templates.

The columns can be sorted alphabetically by clicking the column title.

To create a new product custom option template, click the Add New Option Template button.

The initial setup of the template consists of the 3 tabs


3.1.1 Options Template Settings

Title. A name of the template. Will be visible on the Manage Option Templates and on the Product

Edit page.

Show in the Frontend. The toggle that allows the store owner to temporary disable the template.

3.1.2 Products Relations


Here, the store owner can select the products that should use this template. The Product Grid option

is the default one. Here, one can see the default products grid with the possibility to use the standard

Magento filters functionality to easily find the necessary products.

You can also assign templates to products by entering their Product IDs or Product SKUs. Each

individual ID/SKU should be comma-separated.


3.1.3 Customizable Options

The customizable options is the main place for managing the template. For better understanding, we'll

specify the configuration settings one by one, according to the initial logic.


The first settings block is designed for the possibility to use the absolute values for the customizable

options instead of the default relative ones.

Absolute Cost. If enabled, the custom option's cost fully replaces the initial product's cost. This may

be important as it allows calculating the net profit correctly.

Absolute Weight. If enabled, the custom option's weight fully replaces the initial product's weight.

This may be important for the correct shipping calculation.

Absolute Price. If enabled, the custom option's price fully replaces the initial product's price.

The same product can't have options with normal and absolute values at the same time. If you enable

any of these toggles, all the options will behave as options with absolute values for this selected

option.

To create the new customizable option, click the Add Option button.

Once you specify the Option Title, the name of the tab will be automatically set up.

These tabs are collapsible allowing more handy and comfortable navigation. They are draggable as

well: to change the position of the options, you need to press the eight-dots rectangle to grab the tab

and change the position of the tab. The recycle bin icon deletes the tab. Note that this operation

cannot be undone.


Once the name of the option tab is specified, you need to choose the Option Type.

All the types are divided into 4 separate groups:

1. Text

2. File

3. Select

4. Date

1. TEXT

This section can be useful in case the store owner wishes the client to put some text to personalize

the product (e.g. the name to engrave on the cup). This section provides 2 option types to select

from.

https://support.mageworx.com/manuals/apo/#1-text

https://support.mageworx.com/manuals/apo/#2-file

https://support.mageworx.com/manuals/apo/#3-select

https://support.mageworx.com/manuals/apo/#4-date

https://support.mageworx.com/manuals/apo/#option-type


The Field is for one-string texts.

The Area is for multiple strings.

If you select either Field or Area, you can specify the Max Characters for limitations matters.

This information will be visible on the frontend.

2. FILE

Another option type for product option personalization. Allows users to upload files. In the backend,

you can specify the file extension to load and the maximum width and height (if images are used).

These extra fields are informing the client on the frontend. Extension uses the default Magento

validation so in case the file extension or resolution doesn't match the requirements, the default error

message will be shown.



3. SELECT

This one allows to visualize the customizable options. They cover all visualisation tools available in

Magento.

On the left screenshot, you can see the dropdown and radio-buttons while on the right screenshot,

the options types that were changed to checkbox and multiple select option typesrespectively.

4. DATE

This group of customizable options may be quite useful in case the store owner wants to allow the

user to specify some time (e.g., for the pick-up at store or such).

It is possible to specify date, the exact time and both date and time in the same row as separate option

types.

http://devdocs.magento.com/guides/v2.1/pattern-library/getting-user-input/select_from_list/select_from_list.html





To the right of the Option Type field, there are 2 checkboxes: Required and One Time.

If the Required is selected, the customer will need to select the custom option before adding a

product to cart. On the frontend, this option is shown with the red asterisk.

If the One Time option is selected, the custom price will be added only once despite the quantity of

the products added to cart, e.g., the custom price is +$4 and 10 products are added to the cart. The

surcharge will be just $4 or $40 with this option unchecked.

To add the custom option, click the Add Value button.

The customizable options differ greatly depending on their type and the Option Features

Configuration. The most basic setup is:

The Title field adds the name of the customizable option.

The Price specifies the surcharge of the option, it's value depends on Price Type: if Fixed is

selected, the numbers represent the exact sum of money, Per Cent stands for the percentage

changes. If the product option doesn't change the price, the field can be left empty.

The recycle bin icon deletes the tab. Note that this operation cannot be undone.

https://support.mageworx.com/manuals/apo/#option-features-configuration

https://support.mageworx.com/manuals/apo/#option-features-configuration


Quantity and Manage Stock specify the Advanced Product Options Inventory.

The Is Default setting provides the possibility to specify the default value for the custom option. If

selected, this will be chosen as the pre-defined one.

The Dependency button introduces the possibility to show the values in case some particular option

is selected. The configuration of the dependency is provided below in this documentation.

Current extension's implementation provides the basic SKU modification: if any information is

provided, it will be added to the initial SKU with the hyphen like SKU-option name. Separate custom

SKUs are added in the same way (SKU-optionname1-optionname2).

SKU Linking

If the store owners need to associate some pre-existing product to the custom option, they can put

the SKU of this product to this box.

Suppose you need to associate the product option with some particular product like this one. The

SKU of the product is 24-MG01.

https://support.mageworx.com/manuals/apo/#stock-management

https://support.mageworx.com/manuals/apo/#dependent-custom-options


If we put 24-MG01 in the SKU box of the product option, the name, value and the price will be

automatically populated from this product.

We will observe these changes on the frontend as well. Deleting the 24-MG01 value will bring back

the original value for this product option that has been provided before adding the SKU.

If the settings in the Option Features Configuration are enabled, several more options are added:

The ability to specify the weight and cost of the custom options provides more precise fine-tuning of

the customizable options.

Weight is important for the correct calculation of the shipping costs right in the shopping cart. In case

the product with custom options has an absolutely different weight, it will lead to the incorrect shipping

costs.


Specifying the Cost allows calculating the net profit correctly. It is important for the reports.

The Description option provides the ability to add description of the option that is shown on the

frontend.

3.2 Custom Option Images

Custom option images implementation allows you to create a visual presentation of a product’s

custom options. Thus, with this feature you can:

display images instead of custom options on the front-end;

upload multiple images to a custom option’s value;

assign the uploaded image to the custom options block or as the thumbnail;

replace a product’s image with a custom option’s one.

The images setup is available only for the select group of the custom options.

https://support.mageworx.com/manuals/apo/#3-select


Option Gallery Display Mode provides the way how the images are shown.

If Disabled is selected, no images will be shown.


Beside Option displays images as thumbnails near the option.

Once selected hides all the images and show it only if some option is selected.


It is possible to display the image swatches by means of our extension. Swatch is actually the box

with the image that is shown instead of the text. To enable the swatches view, select the Drop-

down Option Type and click the Is Swatch checkbox.

Note that if no images are uploaded, the corresponding options name will be shown instead.


To upload the image for some custom option, click the Images button. The option gallery popup will

appear.

To upload the image, drag the image to the Brouse to find or drag image here (alternatively, you

can click).

Once the image is uploaded, you can delete it by clicking the empty bin icon or change its settings by

clicking it.


From here, you can specify the Text (that is actually the HTML alt tag) or temporary hide it.

The way how the hidden image is shown in the option galley popup.

https://html.com/attributes/img-alt/


The most important setting is the Role multiselect field. This is important if you wish to distinguish

several images for one custom option:

the Base role is the default image. This is the image that will be shown as swatch if swatches are

enabled;

the Thumbnail is the image that is shown in the thumbnail popup. (currently works only if the

swatches are enabled);

the Replace Main Gallery Image hides the default image for this product and shows this image

instead.

To be able to replace the default product image, the Image Mode setting should be modified to

Replace option.

3.2.1 Roles Example

For instance, we've uploaded 3 images and selected separate roles for them.


After the changes in the option gallery popup are done, click the Continue Edit button.

On the frontend, we observe the product with the swatches, the image is the Base image and, on

hover, we can observe the thumbnail image.

Clicking the red swatch will replace the base image of the product.


3.3 Dependent Custom Options

With Advanced Custom Options extension, you can create dependent custom options.

For this, on the color options click the Dependency button.

The dependency setup appears with the possibility to specify conditions.

The Dependency Type setting defines the conditions to display the current option value on the

frontend. AND provides the functionality when all parent options values should be selected to display

this option value. OR - if any of parent option values might be selected to display the current option

value.


The Parent Options field allows choosing the option values that should be selected to display the

current option value on the front-end. It supports the multiselect and the tree of options for the easy

navigation though option features.

Sometimes, the value of the separate options or even the option names can be the same. To

distinguish them, the special setting adds the possibility to add the suffix to the name.

If such a situation occurs, go to STORES ⟶ Configuration ⟶ MAGEWORX ⟶ Option

Dependency.

Enabling Title Identifier setting allows specifying it in the Product Options configuration. The ID can

be managed for both option and option value.


On the dependencies setup, it will be shown in the brackets in both option and value dropdowns.


3.4 Stock Management

Advanced Product Options extension allows you to specify the available stock quantity for each

custom option's value.

To start using the inventory for custom options, the Manage Stock toggle should be enabled and

the Quantity set up.


To change the way how the custom options inventory is shown for the clients on the frontend, go

to STORES ⟶ Configuration ⟶ MAGEWORX ⟶ Option Inventory.

1. Display Option Inventory on Front-end allows showing the quantity of the custom option values

on the frontend.

On the left screenshot, the frontend view with the option enabled, on the right the option is disabled.


2. Out-Of-Stock options. The products that are currently out-of-stock can be hidden or disabled on

the frontend. This happens automatically when the quantity of the custom option reaches zero as

well. If the setting is setup to Disable, the option will be visible on the frontend but not clickable. In

case it is Hidden, it won't show at all.

On the left screenshot, the frontend view with the option Disable selected (option visible but grayed

out), on the right the option is Hidden.

3. Display Out-Of-Stock message. If the Out-Of-Stock option is set to Disable, this configuration

appears. It allows the store owner to hide the Out-Of-Stock message.

On the left screenshot, the Out-Of-Stock message is Enabled. On the right the option is Disabled.


3.4.1 Custom Option Inventory Report

Advanced Product Options extension has a detailed built-in stock report for custom options. There

may be hundreds of such options and to have a quick view on all of them go to STORES ⟶ Other

Settings ⟶ Option Inventory Report.

The grid allows to sort the custom options. It may be useful to check the out-of stock or low-in-stock

products.

The default Magento functionality to update several values from the grid in bulk is provided here as

well. For this, mark the checkbox of the desired custom options and click the Actions Dropdown.

Click the Edit option:


This option mass-updates of the Quantity and the Manage stock toggle. Check Stock

Management for the reference. To apply the changes, click the Apply button and the Save Edits.

You can modify any particular custom option by clicking the Edit button.

3.5 Individual Product Custom Options

With the extension, you can create custom options for individual products. This provides the fine-

tuning for the template in case some modifications are needed individually or the possibility to assign

the templates to any product.

To modify the products individually, go to CATALOG ⟶ Products and select

the desired product or click the Edit button on the Custom Option Inventory Report.

To assign the pre-created template, select it via the MageWorx Option Templates (1). Note that you

can select several templates by Ctrl+Click. After that click the Save button.

The Import Option (2) allows to select some other product with the custom options to transfer their

values to this product.

The Add Option (3) button adds the same blocks as described in the templates section of this

manual.

The same SKU linking rules can be used here as well.



https://support.mageworx.com/manuals/apo/#ustom-option-inventory-report

https://support.mageworx.com/manuals/apo/#3-customizable-options

https://support.mageworx.com/manuals/apo/#4-date


4. Option Features Configuration

Extension's configuration can be found in STORES ⟶ Configuration ⟶ MAGEWORX ⟶ Option

Features.

These settings handle the appearance of the weight and cost fields for the custom options and the

toggle for the absolute values of the weight and cost.

In case you do not need some of these fields, you can disable them in these settings.


These settings allow disabling the absolute price toggle and one-time price feature if not needed.


GOT QUESTIONS?

MageWorx offers FREE lifetime support and updates for any extension developed for Magento.

If you need support related to MageWorx extension usage, feel free submit a ticket from http://

support.mageworx.com

GETTING HELP WITH MAGENTO

MageWorx offers outstanding services developing custom tailored solutions for Magento platform to

attain your eCommerce objectives.

Our professional impassioned team provides profound and custom oriented development of your

project in a short timeframe. You are most welcome to contact us at [email protected] or submit

a ticket from http://www.mageworx.com/support/.

Copyright © 2018 MageWorx

mailto:[email protected]

http://www.mageworx.com/support/

ADVANCED PRODUCT OPTIONS GUIDE - marketplace.magento.com · Magento 2 Advanced Product Options...

Documents

Transcript of ADVANCED PRODUCT OPTIONS GUIDE - marketplace.magento.com · Magento 2 Advanced Product Options...