With custom options, it’s added some additional features for simple, configurable, downloadable and virtual products in Magento 2. This enable the creation of product variations. Bundle product and grouped product not support custom options. when we are adding custom options to the product then we get the more opportunity to make our product more flexible. Product with custom options are not configurable product. Product with custom options not change product type.
When we add custom option to the product then that product has show different options with different price also. To add custom option into product click here.
Custom option require less effort from the admin and provide more flexibility for future data editing. Custom options can be found by customers on a product detail page. We need to set up custom option per-product in Magento 2. SEO tools cannot track product’s custom options.
Today we will learn how to show product custom option into custom page in Magento 2.
Step-1 : Create registration.php file at app/code/Dolphin/Blog and add below code.
| 1 2 3 4 5 6 | <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Dolphin_Blog', __DIR__ ); |
Step-2 : Create module.xml file at app/code/Dolphin/Blog/etc and add below code.
| 1 2 3 4 5 6 | <?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="Dolphin_Blog" setup_version="1.0.0"> </module> </config> |
Step-3 : Create routes.xml file at app/code/Dolphin/Blog/etc/frontend and add below code.
| 1 2 3 4 5 6 7 8 9 | <?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="Dolphin_Blog"/> </route> </router> </config> |
Step-4 : Create Index.php file at app/code/Dolphin/Blog/Controller/Index and add below code.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <?php namespace Dolphin\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/Dolphin/Blog/Block and add below code.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <?php namespace Dolphin\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/Dolphin/Blog/view/frontend/templates and add below code.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?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/Dolphin/Blog/view/frontend/layout and add below code.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <?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="Dolphin\Blog\Block\CustomBlock" name="custom_option_show" template="Dolphin_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
| 1 2 | bin/magento setup:upgrade bin/magento c:f |
Step-8 : Run below URL
| 1 | http://<yourhostname.com>/blog/index/index/ |
Output looks like this :
I hope this helps you. For any doubts regarding this topic, please write your doubts in below comments section.
