Magento 2 – Add ‘Read More’ Link in Short Description on Product Page

magento2productproduct-attribute

I used below code to limit the short description in product page:

1) it truncates all other attributes with text field in product page not only if ($_product->getData('short_description')). How make the if to check if this attribute is short_description then do the task?

2) what should be in <a href="#">Read More</a> that after clicking on read more it expands the text?

<div class="value" <?php /* @escapeNotVerified */ echo $_attributeAddAttribute;?>>
        <?php  if ($_product->getData('short_description')) {
            $string = strip_tags($_product->getData('short_description'));

            if (strlen($string) > 50) {
                // truncate string
                $stringCut = substr($string, 0, 50);
                $string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... <a href="#">Read More</a>';
            }
            echo $string;
        }else {?>
        <?php /* @escapeNotVerified */ echo $_attributeValue; }?>

    </div>

Best Answer

You have to just overrider attribute.phtml file from module-catalog core module.

Copy file inside your theme,

app/design/frontend/Vendor/luma/Magento_Catalog/templates/product/view/attribute.phtml

<?php
/**
 * Copyright © 2016 Magento. 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();

if ($_attributeLabel && $_attributeLabel == 'default') {
    $_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
}
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($_code === 'short_description') { ?>
        <div class="value more" <?php /* @escapeNotVerified */ echo $_attributeAddAttribute;?> >
        <?php  if ($_product->getData('short_description')) {
            $string = strip_tags($_product->getData('description'));

            if (strlen($string) > 50) {
                // truncate string
                $stringCut = substr($string, 0, 50);
                $string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... <a href="javascript:void(0);" class="readmore">Read More</a>';
            }
            echo $string;
            ?>
        <?php
        }else {?>
            <?php /* @escapeNotVerified */ echo $_attributeValue; 
            }
        ?>
        </div>

        <div class="less" style="display:none">
            <?php echo $_attributeValue; ?>
            <a href="javascript:void(0);" class="readless">Read Less</a>
        </div>
        <script type="text/javascript">
            console.log('test');
            require(["jquery"],function($){
                $('.readmore').on("click",function(){
                    $('.less').show();
                    $('.more').hide();
                });
                $('.readless').on("click",function(){
                    $('.less').hide();
                    $('.more').show();
                });
            });
        </script>
    <?php } else { ?>
        <div class="product attribute <?php /* @escapeNotVerified */ echo $_className?>">
            <?php if ($_attributeLabel != 'none'): ?><strong class="type"><?php /* @escapeNotVerified */ echo $_attributeLabel?></strong><?php endif; ?>
            <div class="value" <?php /* @escapeNotVerified */ echo $_attributeAddAttribute;?>><?php /* @escapeNotVerified */ echo $_attributeValue; ?></div>
        </div>
    <?php } ?>
<?php endif; ?>
Related Topic