Magento 2 – How to Display Attribute Data on Product Page

attributesmagento2

I made an attribute using

Store->attribute->product

and its text type and its name is

add_text_area

It's showing on the admin side and I can upload an image using WYSIWYG. And it's showing like this enter image description here In this add_text_area there is image uploaded . Now I want to show it on my product description page. I'm using this line to do that 

<?php echo $_product->getAddTextArea()?>

into my details.phtml file but nothing is appearing ? what should I have to post images on page now ?

detail.phtml file code is 

<?php
// @codingStandardsIgnoreFile
?>
<?php
    $theme = $this->helper('Infortis\Base\Helper\Data');

    $showTabs = $theme->getCfg('product_page/tabs'); //$block->getData('show_tabs');
    //$mode = $theme->getCfg('product_page/tabs_mode');
    //$threshold = intval($theme->getCfg('product_page/tabs_threshold'));
    //$initCollapsed = $theme->getCfg('product_page/tabs_collapsed');
    //$reviewsInCollateral = $theme->getCfg('product_page/collateral_reviews');

    $containerClasses = '';
    $tabsClasses = '';
    if ($showTabs)
    {
        $containerClasses .= ' collateral-tabs';
        $tabsClasses .= ' ' . $theme->getCfg('product_page/tabs_style');
        // $tabsStyle = $theme->getCfg('product_page/tabs_style');
        // switch ($tabsStyle)
        // {
        //     case 'style-luma':
        //         $tabsClasses .= ' style-luma';
        //         break;
        //     case 'style1':
        //         $tabsClasses .= ' style1';
        //         break;
        //     case 'style1-small':
        //         $tabsClasses .= ' style1 style1-small';
        //         break;
        // }
    }
    else
    {
        $containerClasses .= ' collateral-stacked';
    }

?>
<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>



    <div class="product info detailed box-collateral<?php echo $containerClasses; ?>">
         <?php $layout = $block->getLayout(); ?>
        <div class="product data items<?php echo $tabsClasses; ?>" <?php if ($showTabs): ?>data-mage-init='{"tabs":{"openedState":"active"}}'<?php endif; ?>>
            <?php foreach ($detailedInfoGroup as $name):?>
                <?php
                    $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-<?php /* @escapeNotVerified */ echo $alias;?>-title"
                     data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>">
                    <a class="data switch"
                       tabindex="-1"
                       data-toggle="switch"
                       href="#<?php /* @escapeNotVerified */ echo $alias; ?>"
                       id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title">
                        <?php /* @escapeNotVerified */ echo $label; ?>
                    </a>
                </div>
                <div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>" data-role="content">
                    <?php /* @escapeNotVerified */ echo $html; ?>
                </div>
            <?php endforeach;?>


        </div>
    </div>

<?php endif; ?>


<div id="review_container">
<button type="button" id="review_id">Write Review</button>
</div>


<script>

require(['jquery'],function($){
jQuery('#review_id').on('click', function() {


if(!jQuery('form#review-form').is(':visible'))

{

        jQuery('form#review-form').show();
    }
else{

jQuery('form#review-form').hide();

}

});
});
</script>

Best Answer

You can try like this:

$_customAttribute = $_product->getResource()->getAttribute('add_text_area');

// Get Value
$_customAttributeValue = $_customAttribute->getFrontend()->getValue($_product);

You can add this code to the product page by creating a new block and adding this to your layout for the product page.

Create a new template file in your theme e.g.

Magneto_Catalog/templates/product/view/topattributes.phtml

<?php
$_product = $block->getProduct();
$_customAttribute = $_product->getResource()->getAttribute('add_text_area');
$_customAttributeValue = $_customAttribute->getFrontend()->getValue($_product);
?>
<p>Add Text Area: <?php echo $_customAttributeValue; ?></p>

Then add this template file to your product page at appropriate location by adding new layout file within theme. Layout file will be: Magento_Catalog/layout/catalog_product_view.xml

e.g.

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
   <referenceContainer name="content">
    <block class="Magento\Catalog\Block\Product\View\Attributes" template="Magento_Catalog::product/view/topattributes.phtml" name="product.info.topattribute" after="product.info.media">
    </block>
  </referenceContainer>
 </body>
</page>

Not sure if this is exactly the location you want but can move it around with the after argument.

Related Topic