Magento 2 Show Product Custom Option in Custom Page

Question

How to get Product custom option and show into custom page.this is a product custom option.

Now when add to cart this product then it's show like this

When click on add to list data store into table with custom option. I want to show custom option like cart page showing.Problem is showing custom options into custom page.

Update I get this type of array when add to list and I store option into database using jsonencode().

Array
(
    [listid] => 18
    [prdid] => 4
    [product] => 4
    [selected_configurable_option] => 
    [related_product] => 
    [item] => 4
    [form_key] => h6EN0ffZOHD3Ta5K
    [options] => Array
        (
            [3] => 7
            [4] => Custom Val
            [5] => Array
                (
                    [0] => 8
                    [1] => 9
                )

            [6] => 10
            [7] => Area Text
            [8] => Array
                (
                    [0] => 12
                    [1] => 13
                )

        )

    [options_10_file_action] => save_new
    [qty] => 1
)

Store into table like this

{"options":{"3":"7","4":"Custom Val","5":["8","9"],"6":"10","7":"Area Text","8":["12","13"]}}

How to do it ?

Please Help me.

Answer 1

First of all, fetch the product id which you want to display a custom page. then after you get any custom option using the below code you can get the all custom option. pass product id in the second line. Paste the below code in your custom page phtml file

    $_objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $_product = $_objectManager->create('Magento\Catalog\Model\Product')->load(4);
    $customOptions = $_objectManager->get('Magento\Catalog\Model\Product\Option')->getProductOptionCollection($_product);
    foreach ($customOptions as $option) {
        //you can get custom option value here.
        print_r($option->getData());
    }

Answer 2

Step-1 : Create registration.php file at app/code/Custom/Blog and add below code.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Custom_Blog',
    __DIR__
);

Step-2 : Create module.xml file at app/code/Custom/Blog/etc and add below code.

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Custom_Blog" setup_version="1.0.0">
    </module>
</config>

Step-3 : Create routes.xml file at app/code/Custom/Blog/etc/frontend and add below code.

<?xml version="1.0" ?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route frontName="blog" id="blog">
            <module name="Custom_Blog"/>
        </route>
    </router>
</config>

Step-4 : Create Index.php file at app/code/Custom/Blog/Controller/Index and add below code.

<?php

namespace Custom\Blog\Controller\Index;

use Magento\Framework\App\Action\Action;

class Index extends \Magento\Framework\App\Action\Action
{
    protected $resultPageFactory;
    protected $customerSession;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->set(__('My Custom Page'));
        return $resultPage;
    }
}

Step-5 : Create CustomBlock.php file at app/code/Custom/Blog/Block and add below code.

<?php

namespace Custom\Blog\Block;

use Magento\Framework\View\Element\Template;

class CustomBlock extends Template
{
    protected $_productloader;
    protected $_imageBuilder;
    protected $_customOptions;

    public function __construct(
        Template\Context $context,
        \Magento\Catalog\Model\ProductFactory $_productloader,
        \Magento\Catalog\Block\Product\ImageBuilder $_imageBuilder,
        \Magento\Catalog\Model\Product\Option $customOptions,
        array $data = []
    ) {
        $this->_productloader = $_productloader;
        $this->_imageBuilder = $_imageBuilder;
        $this->_customOptions = $customOptions;
        parent::__construct($context, $data);
    }

    public function getLoadProduct($id)
    {
        return $this->_productloader->create()->load($id);
    }

    public function getImage($product, $attributes = [])
    {
        $imageId = 'product_base_image';
        return $this->_imageBuilder->setProduct($product)
            ->setImageId($imageId)
            ->setAttributes($attributes)
            ->create();
    }

    public function getCustomOptions($data)
    {
        return $this->_customOptions->getProductOptionCollection($data);
    }

    public function getOptionHtml($prd_data, \Magento\Catalog\Model\Product\Option $option)
    {
        $type = $this->getGroupOfOption($option->getType());
        $renderer = $this->getChildBlock($type);
        $renderer->setProduct($prd_data)->setOption($option);
        return $this->getChildHtml($type, false);
    }

    public function getGroupOfOption($type)
    {
        $group = $this->_customOptions->getGroupByType($type);
        return $group == '' ? 'default' : $group;
    }
}

Step-6 : Create Customfile.phtml file at app/code/Custom/Blog/view/frontend/templates and add below code.

<?php
$id = 4;
// get product collection
$prd_data = $block->getLoadProduct($id);
// get product image
$image = $block->getImage($prd_data);
// get product option data
$prd_custom_op =  $block->getCustomOptions($prd_data);
?>
<div class="product-data-show-main">
    <div class="prd-name"><h2><?php echo $prd_data->getName(); ?></h2></div>
    <div class="product-image-part">
        <?= $image->toHtml() ?>
    </div>
    <div class="product-options-part">
        <?php foreach ($prd_custom_op as $_option): ?>
            <?= $block->getOptionHtml($prd_data, $_option); ?>
        <?php endforeach; ?>
    </div>
</div>

Step-7 : Create blog_index_index.xml file at app/code/Custom/Blog/view/frontend/layout and add below code.

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
    <body>
        <referenceContainer name="content">
             <block class="Custom\Blog\Block\CustomBlock"
                   name="custom_option_show"
                   template="Custom_Blog::Customfile.phtml"
                   cacheable="false"
                   >
                <block class="Magento\Catalog\Block\Product\View\Options\Type\DefaultType"
                       name="product.info.options.default"
                       as="default"
                       template="Magento_Catalog::product/view/options/type/default.phtml"/>

                <block class="Magento\Catalog\Block\Product\View\Options\Type\Text"
                       name="product.info.options.text"
                       as="text"
                       template="Magento_Catalog::product/view/options/type/text.phtml"/>

                <block class="Magento\Catalog\Block\Product\View\Options\Type\File"
                       name="product.info.options.file"
                       as="file"
                       template="Magento_Catalog::product/view/options/type/file.phtml"/>

                <block class="Magento\Catalog\Block\Product\View\Options\Type\Select"
                       name="product.info.options.select"
                       as="select"
                       template="Magento_Catalog::product/view/options/type/select.phtml"/>

                <block class="Magento\Catalog\Block\Product\View\Options\Type\Date"
                       name="product.info.options.date"
                       as="date"
                       template="Magento_Catalog::product/view/options/type/date.phtml"/>
            </block>
        </referenceContainer>
    </body>
</page>

Step-7 : Run Magento upgrade command after creating above file

bin/magento setup:upgrade
bin/magento c:f

Step-8 : Run below URL

http://<yourhostname.com>/blog/index/index/

I Hope This Helps You.