I have copied the code from here https://www.nopcommerce.com/en/boards/topic/98063/read-more-option-on-the-category-page and I posted on there also but had no response.
I can get the button to display - act like its active but when clicking the button the text doesnt drop down. I assume its a conflict between cypherclean and the code or something dumb i have done.. but i'm struggling with my limited skill level.
Anyone want to point me in the right direction? I can beleive this isnt standard part of nop or a plugin!
example page here https://fullworksfiresafety.com.au/fire-extinguishers-dry-powder
code from CategoryTemplate.ProductsInGridOrLines.cshtml in the theme folder
@model CategoryModel
@using Nop.Core.Domain.Common
@using Nop.Core.Domain.Seo
@inject Nop.Core.IWebHelper webHelper
@inject SeoSettings seoSettings
@inject CommonSettings commonSettings
@{
Layout = "_ColumnsTwo";
//title
Html.AddTitleParts(!string.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
//meta
Html.AddMetaDescriptionParts(Model.MetaDescription);
Html.AddMetaKeywordParts(Model.MetaKeywords);
//page class
Html.AppendPageCssClassParts("html-category-page");
if (seoSettings.CanonicalUrlsEnabled)
{
var categoryUrl = Url.RouteUrl("Category", new { SeName = Model.SeName }, webHelper.GetCurrentRequestProtocol()).ToLowerInvariant();
Html.AddCanonicalUrlParts(categoryUrl, seoSettings.QueryStringInCanonicalUrlsEnabled);
}
var breadcrumbDelimiter = commonSettings.BreadcrumbDelimiter;
}
@*category breadcrumb*@
@section Breadcrumb
{
@if (Model.DisplayCategoryBreadcrumb)
{
<div class="breadcrumb">
<ul itemscope itemtype="http://schema.org/BreadcrumbList">
<li>
<a href="@Url.RouteUrl("Homepage")" title="@T("Categories.Breadcrumb.Top")">@T("Categories.Breadcrumb.Top")</a>
<span class="delimiter">@breadcrumbDelimiter</span>
</li>
@{ int position = 1; }
@foreach (var cat in Model.CategoryBreadcrumb)
{
var isLastCategory = cat.Id == Model.Id;
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
@if (isLastCategory)
{
<strong class="current-item" itemprop="name">@cat.Name</strong>
<span itemprop="item" itemscope itemtype="http://schema.org/Thing"
id="@Url.RouteUrl("Category", new {SeName = cat.SeName})">
</span>
}
else
{
<a href="@Url.RouteUrl("Category", new { SeName = cat.SeName })" title="@cat.Name" itemprop="item">
<span itemprop="name">@cat.Name</span>
</a>
<span class="delimiter">@breadcrumbDelimiter</span>
}
<meta itemprop="position" content="@position" />
</li>
position++;
}
</ul>
</div>
@await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.CategoryDetailsAfterBreadcrumb, additionalData = Model })
}
}
@section CatalogFilters {
@await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeFilters, additionalData = Model })
@await Html.PartialAsync("_CatalogFilters", Model.CatalogProductsModel)
}
<style>
.text {
overflow: hidden;
max-height: 200px;
white-space: nowrap;
text-overflow: ellipsis;
}
.read-more {
color: #4ab2f1;
border: 0px;
background: none;
}
.text-container .text {
white-space: normal;
}
</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", "200px");
$(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("Widget", 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>
}
@await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeSubcategories, additionalData = Model })
@*subcategories*@
@if (Model.SubCategories.Count > 0)
{
<div class="category-grid sub-category-grid">
<div class="item-grid">
@foreach (var item in Model.SubCategories)
{
<div class="item-box">
<div class="sub-category-item">
<h2 class="title">
<a href="@Url.RouteUrl("Category", new { SeName = item.SeName })" title="@item.PictureModel.Title">
@item.Name
</a>
</h2>
<div class="picture">
<a href="@Url.RouteUrl("Category", new { SeName = item.SeName })" title="@item.PictureModel.Title">
<img alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl" title="@item.PictureModel.Title" />
</a>
</div>
</div>
</div>
}
</div>
</div>
}
@await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeFeaturedProducts, additionalData = Model })
@*featured products*@
@if (Model.FeaturedProducts.Count > 0)
{
<div class="product-grid featured-product-grid">
<div class="title">
<strong>@T("Products.FeaturedProducts")</strong>
</div>
<div class="item-grid">
@foreach (var item in Model.FeaturedProducts)
{
<div class="item-box">
@await Html.PartialAsync("_ProductBox", item)
</div>
}
</div>
</div>
}
@await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.CategoryDetailsAfterFeaturedProducts, additionalData = Model })
@await Html.PartialAsync("_CatalogSelectors", Model.CatalogProductsModel)
@await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.CategoryDetailsBeforeProductList, additionalData = Model })
@{
var catalogProductsViewData = new ViewDataDictionary(ViewData);
catalogProductsViewData["fetchUrl"] = Html.Raw(Url.Action("GetCategoryProducts", "Catalog", new { categoryId = Model.Id }));
}
@await Html.PartialAsync("_CatalogProducts", Model.CatalogProductsModel, catalogProductsViewData)
@await Component.InvokeAsync("Widget", new { widgetZone = PublicWidgetZones.CategoryDetailsBottom, additionalData = Model })
</div>
</div>