Skip to content

Display individual product video descriptions for multiple videos

I am trying to provide video transcripts for each product video in a magento 2 site. I want to pull the transcript from the “video description” field in the admin area, and I have been somewhat successful, but only for a single video. Here is my code:

Transcript.php

<?php
namespace MyNamespaceVideoTranscriptBlock;

use MagentoFrameworkAppResourceConnection;
use MagentoFrameworkViewElementTemplateContext;
use MagentoStoreModelStoreManagerInterface;
use MagentoFrameworkViewElementTemplate;

class Transcript extends Template
{
    protected $resource;
    protected $product;
    protected $storeManager;
    protected $registry;

    public function __construct(
        Context $context,
        $data = [],
        MagentoStoreModelStoreManagerInterface $storeManager,
        MagentoFrameworkRegistry $registry,
        ResourceConnection $resource
    ) {
        parent::__construct($context, $data);
        $this->resource = $resource;
        $this->storeManager = $storeManager;
        $this->registry = $registry;
        $objectManager = MagentoFrameworkAppObjectManager::getInstance();
        $this->product = $objectManager->get('MagentoFrameworkRegistry')->registry('current_product');
    }

    public function getVideoDescription()
    {
        $connection = $this->resource->getConnection();
        $tableName = $this->resource->getTableName('catalog_product_entity_media_gallery_value_video');
        $storeId = $this->storeManager->getStore()->getId();
        $productId = $this->product->getId();
        $select = $connection->select()
            ->from($tableName, ['description'])
            ->joinLeft('catalog_product_entity_media_gallery_value_to_entity', 'catalog_product_entity_media_gallery_value_video.value_id = catalog_product_entity_media_gallery_value_to_entity.value_id')
            ->where('catalog_product_entity_media_gallery_value_to_entity.entity_id = ?', $productId)
            ->limit(1);

        $description = $connection->fetchOne($select);
        return $description;
    }
}

video_description.phtml

<?php if ($block->getVideoDescription()): ?>

<script type="text/javascript">
function createTranscript() {
    const transcript = document.createElement('article');
    transcript.innerHTML = `
        <a style="margin: 0.5em; text-decoration: none;" class="video-description__toggle button btn btn-warning">Show Transcript</a>
        <p style="display: none;"><?php echo($block->getVideoDescription()); ?></p>
    `;
    jQuery('.product.media').append(transcript);
    jQuery('.video-description__toggle').click(function() {
        jQuery(this).next().slideToggle();
    });
    console.log('Transcript generated')
}

require(["jquery"], function ($) {
    jQuery(document).ready(function() {
        setTimeout(() => {
            createTranscript();
        }, 3500);
    });
});
</script>

<?php endif; ?>

I realize that the “limit 1” argument in my query in getVideoDescription(), within Transcript.php is going to have to change, but I’ve sort of gotten lost/confused at this point. Am I overthinking this, can I just pull the video descriptions in from a frontend only solution?

Thank you in advance for your help and insight.