Read more option on the category page

Hi all,

I am working in version 4.5 and I want to add a read more button on the category page.
now I have a lot of text for google search but the customer need to scroll a lot before they are seeing the products they need to buy.
Is there an easy way to implement this?

thank you

you can wrap category page content

<div class="text-container">
    <p class="text">
        <!-- Your text content here -->
    </p>
    <button class="read-more">Read More</button>
</div>

give fixed height to the div

<style>
.text {
    overflow: hidden;
    max-height: 5 * 1.2em; /* 5 lines at 1.2em (line height) per line */
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>

write jquery code to view more

<script>
    $(document).ready(function () {
        $(".read-more").click(function () {
            var textContainer = $(this).closest(".text-container");
            var text = textContainer.find(".text");

            // Toggle the "read more" and "read less" text
            if (text.hasClass("expanded")) {
                text.removeClass("expanded");
                text.css("max-height", "5 * 1.2em");
                $(this).text("Read More");
            } else {
                text.addClass("expanded");
                text.css("max-height", "none");
                $(this).text("Read Less");
            }
        });
    });
</script>

//Rashed

Hi,
That looks pretty easy but as I am not an expert with nopcommerce, which files do I need to adapt?

for the category page I think I need the Views/Category/CategoryTemplate.cshtml file.

after that in the regular styles.css I need to add the <style> code.

and I don't know where to add the script code? hopefully you can point me into the right direction.

thank you.

add this code to CategoryTemplate.ProductsInGridOrLines.cshtml

 <style>
     .text {
        overflow: hidden;
        max-height: 80px;
        white-space: nowrap;
        text-overflow: ellipsis;
     }

    .read-more{
        color: #4ab2f1;
        border: 0px;
        background: none;
    }
</style>
<script>
    $(document).ready(function () {
        $(".read-more").click(function () {
            var textContainer = $(this).closest(".text-container");
            var text = textContainer.find(".text");

            // Toggle the "read more" and "read less" text
            if (text.hasClass("expanded")) {
                text.removeClass("expanded");
                text.css("max-height", "80px");
                $(this).text("Read More");
            } else {
                text.addClass("expanded");
                text.css("max-height", "none");
                $(this).text("Read Less");
            }
        });
    });
</script>
<div class="page category-page">
    <div class="page-title">
        <h1>@Model.Name</h1>
    </div>
    <div class="page-body">
        @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CategoryDetailsTop, additionalData = Model })
        @*description*@
        @if (!string.IsNullOrWhiteSpace(Model.Description))
        {
            <div class="category-description text-container">

                <div class="text">
                    @Html.Raw(Model.Description)
                </div>
                <button class="read-more">Read More</button>
            </div>
        }

//Rashed

Hi,

I have added the code at the end of this file, but then the category is getting an error:
We're sorry, an internal error occurred.

Our supporting staff has been notified of this error and will address the issue shortly.

We apologize for the inconvenience.

Please try clicking your browsers 'back' button or try reloading the home page.

If you continue to receive this message, please try again in a little while.

Thank you for your patience.

does it matter where I place the code in the file?
I am using the emporium theme and not the default.  I am not sure if this matters?

hopefully you can help me.

thank you.

rbrons wrote:
I have indicated in bold where you should make changes and insert the code. Why did you place it at the end of the file?

//Rashed

Hi,

thank you for getting back to me.

I have changed it now as you said and it is working perfectly now.

thank you.

Hi,

One other question regarding this topic, do I need to change this anywhere else to get it working on mobile as well. I see the read more and read less, but when I toggle read more the extra text does not coming up. it keep the same.

thank you in advance.

rbrons wrote:
It looks good on my mobile view.
Are you currently utilizing the default nopCommerce theme?




//Rashed

Hi,

I don't know what you mean with: Are you currently utilizing the default nopCommerce theme?

this is the page I am testing on: https://www.kassaplan.nl.vloeipapier-comingsoon

on the desktop it is working fine, but on the phone is doesn't do anything.

hopefully you have an idea.

thank you.