On the frontend, I have a custom template with some tabs: when the user switches among tabs, he can load a simple product. Each tab loads a different product. This works fine with normal products but when I try to display a simple product with custom options, the product info (name, attributes, etc) is shown correctly but the custom options are not.

Is there a way to call the options' template inside my custom template?

Edit to add:

Unfortunately I don't have much code to share because what I'm doing is not working. So far, I've customized the grouped product page on the frontend so that, instead of showing the default list of children, my custom tabs are shown:

$firstChild = \array_shift($associatedProducts);

<input type="radio" name="radiotab" id="tab__first" data-content="content-first" class="radio" checked="checked">
<input type="radio" name="radiotab" id="tab__second" data-content="content-second" class="radio">
<input type="radio" name="radiotab" id="tab__third" data-content="content-third" class="radio">

<div class="content content-first">first tab <?php $child = $firstChild; ?></div>
<div class="content content-second">second tab <?php $otherChildren = $associatedProducts; ?></div>
<div class="content content-third">third tab</div>

The first tab is selected by default and displays the first child of the grouped product. If the user chooses the second tab, then all the other children are shown. This part works because it follows magento original code, it just shows the children in a different way.

My problem is the third tab. On this tab, I have to show a simple product with custom options, so a product that is not part of the children products of the grouped product. Because this product shares the same sku prefix with the grouped product, I can fetch this product via a custom block by passing the grouped sku:

class Grouped extends \Magento\GroupedProduct\Block\Product\View\Type\Grouped
  // other code, removed for clarity

  public function getThirdProduct()
    $sku = $this->getThirdProductSkuFromGroupedSku();
    try {
       $product = $this->productRepositoryInterface->get($sku);
       if($product->getId()) return $product;
    } catch (\Exception $e) {
       return $e->getMessage();

This works, if I select the third tab, I can see the third product general information (name, price, etc). I cannot see the custom options though. In order to display them, I tried to add the related xml block to my custom layout:

<block class="Magento\Framework\View\Element\Template" name="product.info.form.options" as="options_container">
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper" as="product_options_wrapper" template="Magento_Catalog::product/view/options/wrapper.phtml">
                            <block class="Magento\Catalog\Block\Product\View\Options" name="product.info.options" as="product_options" template="Magento_Catalog::product/view/options.phtml">
                                <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 class="Magento\Framework\View\Element\Html\Calendar" name="html_calendar" as="html_calendar" template="Magento_Theme::js/calendar.phtml"/>
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="Magento_Catalog::product/view/options/wrapper/bottom.phtml">
                            <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart.additional" as="product.info.addtocart" template="Magento_Catalog::product/view/addtocart.phtml"/>

The insertion itself work because if I temporarily place an echo "some static string" on the template, I can see the string on my page.

Still, the options are not displayed because the two block class mentioned in the xml (Magento\Catalog\Block\Product\View and Magento\Catalog\Block\Product\View\Options) both rely on this->getProduct() and this->getOptions() that fetch the data directly from the registry ($this->_registry->registry('current_product')) which means that always the main product is loaded (the grouped product) and there is not way for me to simply give a different id for the product to load.

I cannot use a plugin or a rewrite on the two methods because I need the main/grouped product to be fetched so I cannot load my third product instead of the main product. I need to load the main product and then, only on the third tab, load an additional product with its custom options.

I guess I could just give a custom class to the two blocks in the xml on my custom layout, something like this:

<block class="Vendor\Module\Block\Product\CustomView" name="product.info.options.wrapper" as="product_options_wrapper" template="Magento_Catalog::product/view/options/wrapper.phtml">
    <block class="Vendor\Module\Block\Product\View\CustomOptions" name="product.info.options" as="product_options" template="Magento_Catalog::product/view/options.phtml">

but I wondered if there were a better way to do it, something that doesn't involve customizing so many classes

  • Share your code, please Commented Nov 22, 2021 at 13:02
  • @MagestyApps code added
    – Lou Nik
    Commented Nov 25, 2021 at 7:33


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.