We have been asked to add a functionality that shows the size guide on a product view page. This is to appear as a new tab next to the existing Details, More Information, and Reviews tabs. The content of the size guide tab is to be the same for all products containing the size attribute. We also need it to be editable from Magento admin.

Let's take a moment to think about our approach here:

• To be the same for all products and editable from Magento admin needs the CMS block
• The CMS block needs setup script for creating the size guide block
• To Appear as a new tab next to the existing tabs requires a catalog_product_view.xml layout update

Assuming we have defined registration.php, composer.json, and etc/module.xml as basic module files, we can deal with the more specific details of our Magelicious_Catalog module.

We start by defining <MODULE_DIR>/Setup/InstallData.php with content, as follows:

namespace Magelicious\Catalog\Setup;
class InstallData implements \Magento\Framework\Setup\InstallDataInterface {
  protected $searchCriteriaBuilder;
  protected $blockRepository;
  protected $blockFactory;

  public function __construct(
    \Magento\Framework\Api\SearchCriteriaBuilder $searchCriteriaBuilder,
    \Magento\Cms\Api\BlockRepositoryInterface $blockRepository,
    \Magento\Cms\Api\Data\BlockInterfaceFactory $blockFactory
  ) {
    $this->searchCriteriaBuilder = $searchCriteriaBuilder;
    $this->blockRepository = $blockRepository;
    $this->blockFactory = $blockFactory;
  }

  public function install(
    \Magento\Framework\Setup\ModuleDataSetupInterface $setup,
    \Magento\Framework\Setup\ModuleContextInterface $context
  ) {
    $setup->startSetup();
    $searchCriteria = $this->searchCriteriaBuilder
      ->addFilter('identifier', 'size-guide', 'eq')
      ->create();
    $blocks = $this->blockRepository->getList($searchCriteria)->getItems();
    if (empty($blocks)) {
      /* @var \Magento\Cms\Api\Data\BlockInterface $block */
      $block = $this->blockFactory->create();
      $block->setIdentifier('size-guide');
      $block->setTitle('Size Guide');
      $block->setContent('Size guide!');
      $this->blockRepository->save($block);
    }
    $setup->endSetup();
  }
}

The InstallData script ensures that the size-guide CMS block is created during module installation if it does not already exist. With this in place, we can already run the setup:upgrade command. This should install our module and create the size-guide CMS block.

We then define <MODULE_DIR>/Block/SizeGuide.php with content, as follows:

namespace Magelicious\Catalog\Block;
class SizeGuide extends \Magento\Cms\Block\Block implements \Magento\Framework\DataObject\IdentityInterface {
  protected $product;
  protected $coreRegistry;

  public function __construct(
    \Magento\Framework\View\Element\Context $context,
    \Magento\Cms\Model\Template\FilterProvider $filterProvider,
    \Magento\Store\Model\StoreManagerInterface $storeManager,
    \Magento\Cms\Model\BlockFactory $blockFactory,
    \Magento\Framework\Registry $coreRegistry,
    array $data = []
  ) {
    $this->coreRegistry = $coreRegistry;
    parent::__construct($context, $filterProvider, $storeManager, $blockFactory, $data);
  }
  public function _toHtml() { /* ... */ }
  public function getProduct() {
    if (!$this->product) {
      $this->product = $this->coreRegistry->registry('product');
    }
    return $this->product;
  }
}

This is the actual block class that we will output on the product view page. The registry's object product key is already set by the parent class up the layout tree. This allows us to easily fetch the instance of the current product.

The _toHtml method is further implemented, as follows:

protected function _toHtml()
{
  if ($this->getProduct()->getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE) {
    $configurableAttributes = $this->getProduct()->getTypeInstance()->getConfigurableAttributesAsArray($this->getProduct());
    foreach ($configurableAttributes as $attribute) {
      if (isset($attribute['attribute_code']) && $attribute['attribute_code'] == 'size') {
        return parent::_toHtml();
      }
    }
  }
  return '';
}

This is the gist of our size guide functionality. The configurable type and size attribute code checks ensure that the output of _toHtml renders the size-guide block only for certain groups of products.

We finally define <MODULE_DIR>/view/frontend/layout/catalog_product_view.xml with content, as follows:

<page>
  <body>
    <referenceBlock name="product.info.details">
      <block class="Magelicious\Catalog\Block\SizeGuide" name="size-guide" after="-" group="detailed_info">
        <arguments>
          <argument name="block_id" xsi:type="string">size-guide</argument>
          <argument name="css_class" xsi:type="string">description</argument>
          <argument name="at_label" xsi:type="string">none</argument>
          <argument name="title" translate="true" xsi:type="string">Size Guide</argument>
        </arguments>
      </block>

    </referenceBlock>
  </body>
</page>

This is the glue that binds our SizeGuide block to a product view page, and, more specifically, the product.info.details block that neatly contains the Details, More Information, and Reviews tabs.

The final product view page result should look like this: