Monday, April 13, 2020

Add custom tab to product page in maagento 2

Hello

Today I saw you how to add custom tab to product view page in magento 2.


Now create attribute from admin side.
Admin-> Store-> Attribute -> Product
Create a new attribute like this.
Now save it and assign to Attribute set.
Go to product add/edit page and give some value or text to that input box.

Go to your product override path like this :
/public_html/app/design/frontend/Companyname/Themename/Magento_Catalog/layout/catalog_product_view.xml

Write this :

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Magento_Catalog::js/slick/slick-theme.css"/>
        <css src="Magento_Catalog::js/slick/slick.css"/>
</head>
    <body>
<referenceBlock name="page.main.title">
            <arguments>
                <argument name="css_class" xsi:type="string">product</argument>
                <argument name="add_base_attribute" xsi:type="string">itemprop="name"</argument>
            </arguments>
        </referenceBlock>
<referenceContainer name="product.info.stock.sku">
<container name="product.info.type" before="-"/>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="Magento_Catalog::product/view/attribute.phtml" after="product.info.type">
<arguments>
<argument name="at_call" xsi:type="string">getSku</argument>
<argument name="at_code" xsi:type="string">sku</argument>
<argument name="css_class" xsi:type="string">sku</argument>
<argument name="at_label" xsi:type="string">default</argument>
<argument name="add_attribute" xsi:type="string">itemprop="sku"</argument>
</arguments>
</block>
</referenceContainer>
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" as="description" template="Magento_Catalog::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">Product Information</argument>
                        <argument name="sort_order" xsi:type="string">10</argument>
<argument name="add_attribute" xsi:type="string">itemprop="description"</argument>
                    </arguments>
                </block>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.video" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.description">
<arguments>
<argument name="at_call" xsi:type="string">getVideoScript</argument>
<argument name="at_code" xsi:type="string">video_script</argument>
<argument name="css_class" xsi:type="string">videoscript</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Video</argument>
<argument name="sort_order" xsi:type="string">20</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.pump" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.video">
<arguments>
<argument name="at_call" xsi:type="string">getPumpDesc</argument>
<argument name="at_code" xsi:type="string">pump_desc</argument>
<argument name="css_class" xsi:type="string">pumpdesc</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Pump Kit Requirements</argument>
<argument name="sort_order" xsi:type="string">30</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.cover" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.pump">
<arguments>
<argument name="at_call" xsi:type="string">getCoverDesc</argument>
<argument name="at_code" xsi:type="string">cover_desc</argument>
<argument name="css_class" xsi:type="string">coverdesc</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Cover Information</argument>
<argument name="sort_order" xsi:type="string">40</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.care" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.cover">
<arguments>
<argument name="at_call" xsi:type="string">getCareDesc</argument>
<argument name="at_code" xsi:type="string">care_desc</argument>
<argument name="css_class" xsi:type="string">caredesc</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Care Kit Information</argument>
<argument name="sort_order" xsi:type="string">50</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.other" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info" after="product.info.care">
<arguments>
<argument name="at_call" xsi:type="string">getOtherDesc</argument>
<argument name="at_code" xsi:type="string">other_desc</argument>
<argument name="css_class" xsi:type="string">otherdesc</argument>
<argument name="at_label" xsi:type="string">none</argument>
<argument name="title" translate="true" xsi:type="string">Additional Information</argument>
<argument name="sort_order" xsi:type="string">60</argument>
</arguments>
</block>
</referenceBlock>
<referenceContainer name="content">
<container name="upsell-products-popup" htmlTag="div" htmlClass="upsell_popup" after="product.info.details">
<block class="Magento\Catalog\Block\Product\ProductList\Upsell" name="product.info.upsell" template="Magento_Catalog::product/list/upsell.phtml">
<arguments>
<argument name="type" xsi:type="string">upsell</argument>
</arguments>
</block>
</container>
</referenceContainer>
<referenceContainer name="product.info.price">
<container name="product.prices" label="Product prices" htmlTag="div" htmlClass="product-msrp-price">
<container name="product.msrp" label="Product msrp" htmlTag="div" htmlClass="product-msrp" before="-">
<block class="Magento\Catalog\Pricing\Render" name="product.price.msrp">
<arguments>
<argument name="price_render" xsi:type="string">product.price.render.default</argument>
<argument name="price_type_code" xsi:type="string">msrp_price</argument>
<argument name="zone" xsi:type="string">item_view</argument>
</arguments>
</block>
</container>
<block class="Magento\Catalog\Pricing\Render" name="product.price.final">
<arguments>
<argument name="price_render" xsi:type="string">product.price.render.default</argument>
<argument name="price_type_code" xsi:type="string">final_price</argument>
<argument name="zone" xsi:type="string">item_view</argument>
</arguments>
</block>
</container>
</referenceContainer>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="image_carousel" template="Magento_Catalog::product/view/image_reviews_carousel.phtml" before="product.info.details" />
</referenceContainer>
<move element="upsell-products-popup" destination="content" after="product.info.details"/>
<move element="image_carousel" destination="content" before="product.info.details"/>
<move element="product.info.stock.sku" destination="product.info.price" before="-"/>
<move element="product.info.type" destination="product.info.stock.sku" after="-"/>
<move element="product.info.video" destination="product.info.details" after="product.info.description"/>
<move element="product.info.pump" destination="product.info.details" after="product.info.video"/>
<move element="product.info.cover" destination="product.info.details" after="product.info.pump"/>
<move element="product.info.care" destination="product.info.details" after="product.info.cover"/>
<move element="product.info.other" destination="product.info.details" after="product.info.care"/>
<referenceContainer name="product.info.review" remove="true" />
<referenceContainer name="reviews.tab" remove="true" />
<referenceContainer name="sidebar.main">
<block class="Magento\Catalog\Block\Product\ProductList\Related" name="product.related" template="Magento_Catalog::product/list/related.phtml"/>
<block class="Magento\Catalog\Block\Product\ProductList\Related" name="product.recommended" template="Magento_Catalog::product/list/recommended.phtml"/>
</referenceContainer>
<referenceContainer name="sidebar.additional" remove="true" />
<referenceContainer name="product.info.social" remove="true" />
<referenceContainer name="product.info.overview" remove="true" />
<referenceBlock name="catalog.product.related" remove="true" />
    </body>
</page>


Make changes in phtml file. : /public_html/app/design/frontend/Companyname/Themename/Magento_Catalog/templates/product/view/attribute.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * Product view template
 *
 * @see \Magento\Catalog\Block\Product\View\Description
 */
?>
<?php
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
$_call = $block->getAtCall();
$_code = $block->getAtCode();
$_className = $block->getCssClass();
$_attributeLabel = $block->getAtLabel();
$_attributeType = $block->getAtType();
$_attributeAddAttribute = $block->getAddAttribute();

$renderLabel = true;
// if defined as 'none' in layout, do not render
if ($_attributeLabel == 'none') {
    $renderLabel = false;
}

if ($_attributeLabel && $_attributeLabel == 'default') {
    $_attributeLabel = $_product->getResource()->getAttribute($_code)->getStoreLabel();
}
if ($_attributeType && $_attributeType == 'text') {
    $_attributeValue = ($_helper->productAttribute($_product, $_product->$_call(), $_code)) ? $_product->getAttributeText($_code) : '';
} else {
    $_attributeValue = $_helper->productAttribute($_product, $_product->$_call(), $_code);
}
?>
<?php if ($_attributeValue): ?>
<?php if($_className == "sku") { ?>
<div class="product attribute <?= /* @escapeNotVerified */ $_className ?>">
    <p class="product-code"><?php echo "Product Code:" ; ?>
    <span class="value" <?= /* @escapeNotVerified */ $_attributeAddAttribute ?>><?= /* @escapeNotVerified */ $_attributeValue ?></span></p>
</div>
<?php } elseif($_className == "description") { ?>
<div class="product attribute <?= /* @escapeNotVerified */ $_className ?>">                                    
<div class="box-des"> 
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 right-left-bordaer">
<div class="des-in-left value"  <?= /* @escapeNotVerified */ $_attributeAddAttribute ?>>
<?= $_product->getDescription(); ?>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 right-col ">
<div class="des-in-right">
<p class="specilation">Specification</p>
<p class="dimonion">Dimensions:</p>
<ul class="height-weght">
<li>Height:<span><?= (!empty($_product->getResource()->getAttribute('height')->getFrontend()->getValue($_product))) ? $_product->getResource()->getAttribute('height')->getFrontend()->getValue($_product) . " cm" : "n/a" ?> </span></li>
<li>Width:<span>
<?= (!empty($_product->getResource()->getAttribute('width')->getFrontend()->getValue($_product))) ? $_product->getResource()->getAttribute('width')->getFrontend()->getValue($_product) . " cm" : "n/a" ?>
</span></li>
<li>Depth:<span>
<?= (!empty($_product->getResource()->getAttribute('spec_depth')->getFrontend()->getValue($_product))) ? $_product->getResource()->getAttribute('spec_depth')->getFrontend()->getValue($_product) . " cm" : "n/a" ?>

</span></li>

<li>Brands:<span> <?php echo $_product->getResource()->getAttribute('brandp')->getFrontend()->getValue($_product); ?></span></li>
<li>Other:<span> <?php echo $_product->getResource()->getAttribute('spec_other')->getFrontend()->getValue($_product); ?></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<?php } elseif($_className == "videoscript") { ?>
<?php if(!empty($_product->getResource()->getAttribute('video_script')->getFrontend()->getValue($_product))) {?>
<div role="tabpanel" class="tab-pane" id="vd1">
<?= $_product->getResource()->getAttribute('video_script')->getFrontend()->getValue($_product) ?> 
</div>
<?php } ?>
<?php } elseif($_className == "pumpdesc") { echo "<div style='display:none'>pump:".$_product->getResource()->getAttribute('pump_desc')->getFrontend()->getValue($_product)."</div>"; ?>
<?php if(!empty($_product->getResource()->getAttribute('pump_desc')->getFrontend()->getValue($_product))) {?>
<div role="tabpanel" class="tab-pane" id="ppm">
<?= $_product->getResource()->getAttribute('pump_desc')->getFrontend()->getValue($_product) ?> 
</div>
<?php } ?>
<?php } elseif($_className == "coverdesc") { echo "<div style='display:none'>cover:".$_product->getResource()->getAttribute('cover_desc')->getFrontend()->getValue($_product)."</div>"; ?>
<?php if(!empty($_product->getResource()->getAttribute('cover_desc')->getFrontend()->getValue($_product))) {?>
<div role="tabpanel" class="tab-pane" id="cvr">
<?= $_product->getResource()->getAttribute('cover_desc')->getFrontend()->getValue($_product) ?> 
</div>
<?php } ?>
<?php } elseif($_className == "caredesc") { echo "<div style='display:none'>care:".$_product->getResource()->getAttribute('care_desc')->getFrontend()->getValue($_product)."</div>"; ?>
<?php if(!empty($_product->getResource()->getAttribute('care_desc')->getFrontend()->getValue($_product))) {?>
<div role="tabpanel" class="tab-pane" id="car">
<?= $_product->getResource()->getAttribute('care_desc')->getFrontend()->getValue($_product) ?> 
</div>
<?php } ?>
<?php } elseif($_className == "otherdesc") { ?>
<?php if(!empty($_product->getResource()->getAttribute('other_desc')->getFrontend()->getValue($_product))) {?>
<div role="tabpanel" class="tab-pane" id="othr">
<?= $_product->getResource()->getAttribute('other_desc')->getFrontend()->getValue($_product) ?> 
</div>
<?php } ?>
<?php } else { ?>
<div class="product attribute <?= /* @escapeNotVerified */ $_className ?>">
    <?php if ($renderLabel): ?><strong class="type"><?= /* @escapeNotVerified */ $_attributeLabel ?></strong><?php endif; ?>
    <div class="value" <?= /* @escapeNotVerified */ $_attributeAddAttribute ?>><?= /* @escapeNotVerified */ $_attributeValue ?></div>
</div>
<?php } ?>
<?php endif; ?>


Now save it and flush it. You will get custom tabs in product view page
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)