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.
/vendor/magento/module-checkout/view/frontend/templates/cart/item/default.phtml
form line no 46<?php $_formatedOptionValue = $block->getFormatedOptionValue($_option) ?>