1

I don't know how to implement this task. I have used in smart wave and Porto theme. I want to add read more in the category description. Can you please help me?

4

2 Answers 2

3

I just created it and its working for me.

Overrider description.phtml file from module-catalog core module.

Copy below the file inside your theme.

vendor/magento/module-catalog/view/frontend/templates/category/description.phtml

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

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Category view template
 *
 * @var $block \Magento\Catalog\Block\Category\View
 */
?>
<?php if ($_description = $block->getCurrentCategory()->getDescription()): ?>
    <div class="category-description more">
        <?php
        $string = strip_tags($this->helper('Magento\Catalog\Helper\Output')->categoryAttribute($block->getCurrentCategory(), $_description, 'description'));

        if (strlen($string) > 100) {
            $stringCut = substr($string, 0, 100);
            $string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... <a href="javascript:void(0);" class="readmore">Read More</a>';
        }

        echo $string;
        ?>
    </div>
    <div class="less" style="display:none">
        <?php echo $this->helper('Magento\Catalog\Helper\Output')->categoryAttribute($block->getCurrentCategory(), $_description, 'description'); ?>
        <a href="javascript:void(0);" class="readless">Read Less</a>
    </div>
    <script type="text/javascript">
        require(["jquery"],function($){
            //console.log('testte');
            //alert('test');
            $('.readmore').on("click",function(){
                $('.less').show();
                $('.more').hide();
            });
            $('.readless').on("click",function(){
                $('.less').hide();
                $('.more').show();
            });
        });
    </script>
<?php endif; ?>

You can modify as you needed.

0

Im trying to use following script

https://codepen.io/maxds/pen/jgeoA

I have altered the .more to .category-description but i dont know how to put it into the "Magento2" requirement.. with that require jquery and so on. could someone help?

$(document).ready(function() { // Configure/customize these variables. var showChar = 100; // How many characters are shown by default var ellipsestext = "..."; var moretext = "Show more >"; var lesstext = "Show less";

$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});

});

AND FOR CSS:

.morecontent span { display: none; } .morelink { display: block; }

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.