Reading list Switch to dark mode

    How to add custom product option group in Magento 2

    Updated 5 December 2017

    Here, I am going to learn that how to add custom product option group in magento2. There are four option group exist in magento with various option types.If we need to extends some functionality in predefined option type then we need to add another option group.

    For adding new product option group.We have to add following files : –

    1 – Create product_options.xml at this path

    app/code/Test/Module/etc/product_options.xml

    <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/product_options.xsd">
        <option name="Test" label="Test" renderer="Test\Module\Block\Adminhtml\Product\Edit\Tab\Options\Type\Test">
            <inputType name="field" label="Test" />
        </option>
    </config>

     

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    2- Now you have to create Test.php which is define in product_options.xml for rendering option group in product “Customizable Options Tab”.

    app/code/Test/Module/Block/Adminhtml/Product/Edit/Tab/Options/Type/Test.php

    <?php
    /**
    * customers defined options
    *
    * @author     Magento Core Team <[email protected]>
    */
    namespace Test\Module\Block\Adminhtml\Product\Edit\Tab\Options\Type;
    
    class Test extends \Magento\Catalog\Block\Adminhtml\Product\Edit\Tab\Options\Type\AbstractType
    {
        /**
        * @var string
        */
        protected $_template = 'catalog/product/edit/options/type/test.phtml';
    }

     

    3- Create template file at this path app/code/Test/Module/view/adminhtml/templates/catalog/product/edit/options/type/test.phtml

     

    <script id="custom-option-test-type-template" type="text/x-magento-template">
        <div id="product_option_<%- data.option_id %>_type_<%- data.group %>" class="fieldset">
            <table class="data-table">
                <thead>
                <tr>
                    <?php if ($block->getCanReadPrice() !== false) : ?>
                    <th class="type-price"><?php /* @escapeNotVerified */ echo __('Price') ?></th>
                    <th class="type-type"><?php /* @escapeNotVerified */ echo __('Price Type') ?></th>
                    <?php endif; ?>
                    <th class="type-sku"><?php /* @escapeNotVerified */ echo __('SKU') ?></th>
                    <th class="type-qty"><?php /* @escapeNotVerified */ echo __('QTY') ?></th>
                    <th class="type-last last"><?php /* @escapeNotVerified */ echo __('Max Characters') ?></th>
                </tr>
                </thead>
                <tr>
                    <?php if ($block->getCanReadPrice() !== false) : ?>
                    <td class="opt-price">
                        <input id="product_option_<%- data.option_id %>_price"
                               name="product[options][<%- data.option_id %>][price]"
                               class="input-text validate-number product-option-price"
                               type="text" value="<%- data.price %>" data-store-label="<%- data.price %>"
                            <?php if ($block->getCanEditPrice() === false) : ?>
                               disabled="disabled"
                            <?php endif; ?>>
                    </td>
                    <td class="opt-price-type"><?php echo $block->getPriceTypeSelectHtml('data-attr="price-type"') ?><%- data.checkboxScopePrice %></td>
                    <?php else : ?>
                    <input id="product_option_<%- data.option_id %>_price" name="product[options][<%- data.option_id %>][price]" type="hidden">
                    <input id="product_option_<%- data.option_id %>_price_type" name="product[options][<%- data.option_id %>][price_type]" type="hidden">
                    <?php endif; ?>
                    <td>
                        <input name="product[options][<%- data.option_id %>][sku]" class="input-text" type="text" value="<%- data.sku %>">
                    </td>
                    <td>
                        <input name="product[options][<%- data.option_id %>][qty]" class="input-text validate-zero-or-greater" type="text" value="<%- data.qty %>">
                    </td>
                    <td>
                        <input name="product[options][<%- data.option_id %>][max_characters]" class="input-text validate-zero-or-greater" type="text" value="<%- data.max_characters %>">
                    </td>
                </tr>
            </table>
        </div>
    </script>

     

    Now flush your cache and you can check custom product option group in “Customizable Options Tabs”.

    product custom option group

     

    Thank’s for read this.If you have any query please comment below.

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home