How to Add Additional Options in Magento 2

Magento 2 is a feature-rich platform that helps improve the shopping experience. However, many times it lacks in fulfilling the business requirements now that various types of business have its online presence. Luckily, the developers can offer customization to implement out of box functionalities.

As a part of such customization, you may want to add additional options in Magento 2 product page, cart page, etc. For example, you want to display a text box to allow customers to add comment box in the product page or to show installments selected by the customers on the cart page.

Also, it is important that you implement the customizations without affecting the core functionalities as it is not a good practice. The below method allows to add additional options in Magento 2 considering it.

Steps to Add Additional Options in Magento 2:

1. Create events.xml at app\code\Vendor\Extension\etc\

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="checkout_cart_product_add_after">
        <observer name="extension_checkout_cart_product_add_after" instance="Vendor\Extension\Observer\CheckoutCartAddObserver" />
    </event>
     <event name="sales_model_service_quote_submit_before">
        <observer name="extesnionadd" instance="Vendor\Extension\Observer\AddOptionToOrderObserver" />
    </event>
</config>

2. Create CheckoutCartAddObserver.php  at app\code\Vendor\Extension\Observer\

namespace Vendor\Extension\Observer;

use Magento\Framework\Event\Observer as EventObserver;
use Magento\Framework\Event\ObserverInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Framework\View\LayoutInterface;
use Magento\Framework\App\RequestInterface;
use Magento\Framework\Serialize\SerializerInterface;

class CheckoutCartAddObserver implements ObserverInterface
{
    protected $layout;
    protected $storeManager;
    protected $request;
    private $serializer;

    public function __construct(
        StoreManagerInterface $storeManager,
        LayoutInterface $layout,
        RequestInterface $request,
        SerializerInterface $serializer
    )
    {
        $this->layout = $layout;
        $this->storeManager = $storeManager;
        $this->request = $request;
        $this->serializer = $serializer;
    }

    public function execute(EventObserver $observer)
    {

        $item = $observer->getQuoteItem();
        $post = $this->request->getPost();


        $additionalOptions = array();
        if ($additionalOption = $item->getOptionByCode('additional_options')) {
            $additionalOptions = $this->serializer->unserialize($additionalOption->getValue());
        }

        $additionalOptions[] = [
            'label' => 'Size',
            'value' => 'XL'
        ];

        if (count($additionalOptions) > 0) {
            $item->addOption(array(
                'product_id' => $item->getProductId(),
                'code' => 'additional_options',
                'value' => $this->serializer->serialize($additionalOptions)
            ));
        }

    }
}

3. Create AddOptionToOrderObserver.php  at app\code\Vendor\Extension\Observer\

<?php

namespace Vendor\Extension\Observer;

use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\Serialize\SerializerInterface;

class AddOptionToOrderObserver implements ObserverInterface
{
    private $serializer;

    public function __construct(
        SerializerInterface $serializer
    )
    {
        $this->serializer = $serializer;
    }

    public function execute(\Magento\Framework\Event\Observer $observer)
    {
            $quote = $observer->getQuote();
            $order = $observer->getOrder();
            foreach ($quote->getAllVisibleItems() as $quoteItem) {
                $quoteItems[$quoteItem->getId()] = $quoteItem;
            }

            foreach ($order->getAllVisibleItems() as $orderItem) {
                $quoteItemId = $orderItem->getQuoteItemId();
                $quoteItem = $quoteItems[$quoteItemId];
                $additionalOptions = $quoteItem->getOptionByCode('additional_options');
                if (count($additionalOptions) > 0) {
                    $options = $orderItem->getProductOptions();
                    $options['additional_options'] = $this->serializer->unserialize($additionalOptions->getValue());
                    $orderItem->setProductOptions($options);
                }

            return $this;
        }
    }
}

That’s it. Adding options in Magento 2 was never this easy, isn’t it? Likewise you can also improve the user experience by adding sticky add to cart button in your Magento store.

The below image shows how I implemented this method to show the number of installments:

For a similar solution in Magento, check add additonal options in Magento.

Thank You.