2

I am using Magento 2, On the product detail page, I would like to create a new tab next to the description tab named 'downloads'.

I have created a attribute with text area named pdf_download to display what items that come with a product.

I have idea about Magento 1 but on Magento 2, I am totally new. Please guide me.

Thanks in Advance.

0

3 Answers 3

0

Try following code:

  1. app/code/[VendorName]/[ModuleName]/registration.php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '[VendorName]_[ModuleName]',
    __DIR__
);
  1. app/code/[VendorName]/[ModuleName]/etc/module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="[VendorName]_[ModuleName]" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Product"/>
        </sequence>
    </module>
</config>
  1. app/code/[VendorName]/[ModuleName]/view/frontend/layout/catalog_product_view.xml
<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.description">
            <arguments>
                <argument name="priority" xsi:type="string">1</argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="product.attributes">
            <arguments>
                <argument name="priority" xsi:type="string">2</argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="reviews.tab">
            <arguments>
                <argument name="priority" xsi:type="string">4</argument>
            </arguments>
        </referenceBlock>
        <referenceBlock name="product.info.details">
            <block class="Magento\Catalog\Block\Product\View" name="downloads.tab" template="[VendorName]_[ModuleName]::product/view/details/downloads_tab.phtml" group="detailed_info">
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Downloads</argument>
                    <argument name="priority" xsi:type="string">3</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>
  1. app/code/[VendorName]/[ModuleName]/view/frontend/templates/product/view/details/downloads_tab.phtml
<?php echo $block->getProduct()->getData('pdf_download'); ?>
  1. app/design/frontend/[VendorName]/[themename]/Magento_Catalog/templates/product/view/details.phtml
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
    <div class="product info detailed">
        <?php $layout = $block->getLayout(); ?>

        <?php $tabPriority = array(); ?>
        <?php foreach ($detailedInfoGroup as $name): ?>
            <?php $alias = $layout->getElementAlias($name); ?>
            <?php $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '9'; ?>
            <?php array_push($tabPriority, array($name, $priority)); ?>
        <?php endforeach; ?>
        <?php usort($tabPriority, function($a, $b) { return $a['1'] <=> $b['1']; }); ?>

        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
            <?php foreach ($tabPriority as $name): ?>
                <?php
                    $name = $name[0];
                    $html = $layout->renderElement($name);
                    if (!trim($html)) {
                        continue;
                    }
                    $alias = $layout->getElementAlias($name);
                    $label = $block->getChildData($alias, 'title');
                ?>
                <div class="data item title"
                     aria-labeledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title"
                     data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
                    <a class="data switch"
                       tabindex="-1"
                       data-toggle="switch"
                       href="#<?= /* @escapeNotVerified */ $alias ?>"
                       id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
                        <?= /* @escapeNotVerified */ $label ?>
                    </a>
                </div>
                <div class="data item content" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
                    <?= /* @escapeNotVerified */ $html ?>
                </div>
            <?php endforeach;?>
        </div>
    </div>
<?php endif; ?>
2
  • Now it shows first tab Downloads, Can you guide me how i can sort tabs? so Downloads come as 3rd tab e.g Details, Reviews, Downloads Dec 25, 2017 at 10:25
  • Hi @FarhanAziz, try updated code to set tab's priority. Also, you can change tab priority as per your requirement from "catalog_product_view.xml".
    – Pratik Oza
    Dec 25, 2017 at 15:23
1

You can follow this code for magento 2.

For magento 2, add custom code in theme files.

  1. Create new file custom_tab.phtml in

app/code/Vendor/Theme/Magento_Catalog/templates/product/view/

and add this code.

<?php $product = $block->getProduct(); ?>
<?php echo $product->getData('attribute_code'); ?>
  1. Edit the catalog_product_view.xml in

app/code/Vendor/Theme/Magento_Catalog/layout/

if not exist copy form core file

vendor/magento/module-catalog/view/frontend/layout/

Original Code:

<!-- default code .... -->
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.details" template="product/view/details.phtml" after="-">
    <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
        <arguments>
            <argument translate="true" name="title" xsi:type="string">More Information</argument>
        </arguments>
    </block>
    <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
        <arguments>
            <argument name="at_call" xsi:type="string">getDescription</argument>
            <argument name="at_code" xsi:type="string">description</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">Details</argument>
        </arguments>
    </block>
</block>
<!-- default code .... -->

after edit code:

<!-- default code .... -->
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.details" template="product/view/details.phtml" after="-">
    <block class="Magento\Catalog\Block\Product\View" name="custom.tab" template="product/view/custom_tab.phtml" group="detailed_info">
        <arguments>
            <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
        </arguments>
    </block>
    <block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
        <arguments>
            <argument translate="true" name="title" xsi:type="string">More Information</argument>
        </arguments>
    </block>
    <block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
        <arguments>
            <argument name="at_call" xsi:type="string">getDescription</argument>
            <argument name="at_code" xsi:type="string">description</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">Details</argument>
        </arguments>
    </block>
</block>
<!-- default code .... -->
  1. Edit the details.phtml file in

app/code/Vendor/Theme/Magento_Catalog/templates/product/view/

if not exist copy form core file

vendor/magento/module-catalog/view/frontend/templates/product/view/

and replace the code:

<!-- default code .... -->
<?php $detailedInfoGroup = ["product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->

replace with this code

<!-- default code .... -->
<?php $detailedInfoGroup = ["custom.tab", "product.info.description", "product.attributes", "reviews.tab"]; ?>
<!-- default code .... -->

You can change the position according tab name and set manor of tabs.

  1. Finally you can see the result.

custom tab

Thanks. For any query please contact me.

0

I developed a free simple module, it display custom tab if attribute exist. It requires simple code edits: https://github.com/gsw1011/gianlucascoponi-magento-2-custom-attribute-tabs

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.