More/Less functionality in Magento2

More/Less functionality in Magento2

While working on a Magento 2 project for our client, I was supposed to create more/less button, which is not part of neither Blank or Luma themes. The button should be on product page, but only inside of Details tab on desktop (accordion on mobile), which displays product description field in Admin.

Before we get started, I have created a custom theme (Inchoo/MoreLess that is extending Blank theme), make sure to update the correct path for your theme as we go along. The code was written on latest (2.1.6) installation with sample data.

First of all, we need to create several files:

touch app/design/frontend/Inchoo/MoreLess/Magento_Catalog/layout/catalog_product_view.xml
touch app/design/frontend/Inchoo/MoreLess/requirejs-config.js
touch app/design/frontend/Inchoo/MoreLess/web/js/toggle-product-description.js
touch app/design/frontend/Inchoo/MoreLess/Magento_Catalog/templates/more-less.phtml
touch app/design/frontend/Inchoo/MoreLess/web/css/source/_theme.less

Let’s go over these files and explain for each one what code will be placed inside of them:

requirejs-config.js

Use this file to register your own JavaScript component:

var config = {
map: {
"*": {
// alias: path-to-corresponding-js-file
toggleProductDescription: 'js/toggle-product-description'
}
}
};
  • toggleProductDescription is arbitrary component alias that points to arbitrary location of a Javascript file (Magento will automatically append .js extension to the filename).

catalog_product_view.xml

This is main layout file for product page, I believe there is no need to explain its purpose. Inside of the content  container, new block is created with specified template file that is going to used:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="more-less-js" template="Magento_Catalog::more-less.phtml" />
</referenceContainer>
</body>
</page>

more-less.phtml

This file contains basic configuration of the more/less functionality. Given the fact that Magento utilizes the same template file for each tab, it is advisable to separate the JavaScript initialization part into a different file.

<script type="text/x-magento-init">
{
".product.data.items .product.attribute.description .value":{
"toggleProductDescription":{
"contentMaxHeight": 200
}
}
}
</script>

Let me explain briefly what are the elements and what is their purpose:

  • .product.data.items .product.attribute.description .valuestring (but in fact, CSS selector) that is used as a container for further JavaScript processing
  • toggleProductDescription – alias of the JavaScript file registered in RequireJS config file
  • contentMaxHeight – declaration of a variable that is going to be used inside of main JavaScript file
  • 200 – arbitrary value of a variable

toggle-product-description.js

Place all of your JavaScript logic in this file. Skeleton of such a JavaScript component should be like this:

define([
"jquery", // declare your libraries, if you are using them
], function ($) { // delare library aliases
'use strict';
 
return function (config, node) {
// paste snippet #1 here
// paste snippet #2 here
}
});

Here comes the most important part – the passing of parameters from .phtml file and sending back some output:

  • config – global variable that contains all of your custom variables. In this case, you are supposed to use config.contentMaxHeight to get the value of the variable
  • node – selector that can be used for initialising jQuery objects

Inside of the anonymous function, I have created a simple JSON object that holds all of the parameters for the more/less functionality: a link that triggers the change and a target element that the change gets applied to.

// snippet #1
 
var moreLess = {
button: {
el: $("<a>", {
id: "toggle-description",
href: "#"
}),
expanded_text: "Show less",
collapsed_text: "Show more"
},
target: {
el: $(node),
height: $(node).height(),
maxHeight: config.contentMaxHeight,
collapsedClassName: "collapsed",
}
};

 The snippet utilizes the function parameters which makes it possible to resolve the more/less state of the target element.

// snippet #2
 
if (moreLess.target.height > moreLess.target.maxHeight) {
// update button text value
moreLess.button.el.text(moreLess.button.collapsed_text);
 
moreLess.target.el
// add css class to apply some styling
.addClass(moreLess.target.collapsedClassName)
// append link to product description
.parent().append(moreLess.button.el);
}
 
moreLess.button.el.on("click", function (e) {
e.preventDefault();
 
if (moreLess.target.el.hasClass(moreLess.target.collapsedClassName)) {
moreLess.target.el.removeClass(moreLess.target.collapsedClassName);
moreLess.button.el.text(moreLess.button.expanded_text);
} else {
moreLess.target.el.addClass(moreLess.target.collapsedClassName);
moreLess.button.el.text(moreLess.button.collapsed_text);
}
});

 When the component gets loaded, it is making a check to see if the height of the content is greater than the threshold defined and if so, append the more/less button and assign an event listener to it.

_theme.less

This is optional file for you to create, I have created some minimal styling (transparent-to-solid background) as a nice effect towards the the more/less button.

.product.attribute.description .value{
max-height: none;
position: relative;
max-height: none;
border-bottom: 1px solid #d1d1d1;
 
&.collapsed {
max-height: 200px;
overflow: hidden;
 
&:after {
content: "";
position: absolute;
width: 100%;
height: 160px;
z-index: 1;
display: block;
bottom: 0;
 
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
}
}
 
#toggle-description {
margin-top: 20px;
display: inline-block;
}

Here is how it looks like on the frontend:

Leave a comment below if you have a question or if this blog post helped you out in your project.
Until next time, keep calm and code on! =)

Related Inchoo Services

You made it all the way down here so you must have enjoyed this post! You may also like:

Reorder input fields on Shipping and Billing step in Magento 2 Mladen Ristic
, | 14

Reorder input fields on Shipping and Billing step in Magento 2

How to improve usability for Magento 2 add to cart process Filip Svetlicic
Filip Svetlicic, | 2

How to improve usability for Magento 2 add to cart process

Working with CSS in your first Magento 2 project Nenad Andrakovic
Nenad Andrakovic, | 20

Working with CSS in your first Magento 2 project

6 comments

    1. Hi, Erik,

      yes, it is possible, you need to find the appropriate XML file and the reference of category description to which the link will be appended, as well as the CSS selector of the container to which the styling will be applied. 🙂

  1. A lot of stores would appreciate having more/less buttons in long descriptions. Is there an extension that provides this specific functionality?

    That was very helpful. Thanks for sharing!

    1. Hi, Vernard, you are welcome! =) The more/less button is dynamically appended to the Long description from Product page in Admin and is displayed within the “Details” tab. I am not aware of an such an extension, let me know if you come across one!

  2. can this be applied to other themes beside Luma? and also where is the full source code of this functionality? all I can see is snippet only.

    1. Hi, Jacobian, I was using Blank theme as fallback theme, so it should work on any other Magento2 custom theme. Also, I have updated the JS code blocks (and “named” them snippet #1 and #2), all you have to do is copz and paste them into correct place. If you need any additional help, let me know.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.