0

I want to add a read more and read less button in the description on the product page.

I do not want to cut the entire text and onclick of the read more show another div with the entire content.

I want to check the height of the content and add a read more button when the description content is higher than 100px. This should be done by given the specific <div class="value"> always a height of 100px. When clicking on the read more button, it should change the css to heigh 100%.

How can I achieve this?

I want to add this into:

app/design/frontend/custom/custom/Magento_Catalog/templates/product/view/attribute.phtml

  • While waiting for someone to actually answer your question. I will just exercise the process of how such a thing could be achieved. - Add a Read More button (text etc) - Get the identifier of the description Div -Assign desired initial height via LESS - Assign desired initial Read More visibility - Use JS to write code that will achieve this functionality OR do it using CSS via Magento LESS. Check this out for CSS solution (no JS): codepen.io/ojbravo/pen/YPJpXe – Mohammed Joraid Feb 4 at 19:32
1

Try This Below Code..

    <?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; ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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