# How to add extra Product tab and preselect it on page load

Recently I was tasked with extending product tabs with extra one, that will show embeded video and make it expandable on page load. So I decided to make a module for this purpose.

Requrements where simple:

add additional custom attribut for youtube video id
show video tab if attribute is set on product
expand tab on page load

I will not go in details of creating module I will instead add link to github repository (opens new window) but just explain steps how it was created.

# Linking .phtml block and adding it to product Tabs

Under module crate XML to mix in catalog_product_view: app/code/Pixel/ProductTabs/view/frontend/layout/catalog_product_view

Now we will link youtube_video.phtml and place it into magento tab block

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>

        <referenceBlock name="product.info.details">
            <block class="Magento\Catalog\Block\Product\View\Description" name="youtube.video.code"
                   template="Pixel_ProductTabs::product/view/attribute/youtube_video.phtml" group="detailed_info">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">Video</argument>
                    <argument name="sort_order" xsi:type="string">50</argument>
                </arguments>
            </block>
        </referenceBlock>

    </body>
</page>

Just a few explanation here:

to place it inside of tabs we use group="detailed_info"
we are using class="Magento\Catalog\Block\Product\View\Description" to have access to product attrbutes in template file
with arguments we are setting name for tab, and position on the tab list

In module we create our template file for display

app/code/Pixel/ProductTabs/view/frontend/templates/product/view/attribute/youtube_video.phtml

<?php

/** @var Magento\Catalog\Block\Product\View $block */

$_product =  $block->getProduct();
$youTubeVideoCode = $_product->getData('youtube_video');
?>

<?php if ( $youTubeVideoCode) : ?>

    <iframe data-mage-init='{"Pixel_ProductTabs/js/youtube-video-tab":{}}' style="aspect-ratio: 16/9;"  width="100%" height="auto" src="https://www.youtube.com/embed/<?= $youTubeVideoCode ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<?php endif; ?>

Few things here to explain:

since user is adding just a video code, in custom attribute, I'm adding full embed code, abd replacing just the video ID part in URL
to get data and check if attributes exist I'm using $_product->getData('youtube_video');
for opening Video tab on page load I'm calling JS with data-mage-init='{"Pixel_ProductTabs/js/youtube-video-tab":{ } }'

And finaly logic for opening Video tab on page load Pixel/ProductTabs/view/frontend/web/js/youtube-video-tab.js

Here I'm just reusing magento's tabs widget, and setting for Video tab to be active

define(["jquery", "tabs"], function ($, tabs) {
  "use strict";

  return function () {
    $(".product.data.items").tabs("activate", 3);
  };
});

# How to add extra Product tab and preselect it on page load

# Linking .phtml block and adding it to product Tabs

Related articles