<\/p>\n
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.<\/p>\n
Before we get started, I have created a custom theme (Sushil\/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.<\/span><\/p>\n First of all, we need to create several files:<\/p>\n Let\u2019s go over these files and explain for each one what code will be placed inside of them:<\/p>\n Use this file to register your own JavaScript component:<\/p>\n This is main layout file for product page, I believe there is no need to explain its purpose. Inside of the content<\/em>\u00a0 container, new block is created with specified template file that is going to used:<\/p>\n This file contains basic configuration of the more\/less functionality. Given the fact that Magento utilizes the same\u00a0template file for each tab, it is advisable to separate the JavaScript initialization part into a different file.<\/p>\n Let me explain briefly what are the elements and what is their purpose:<\/p>\n Place all of your JavaScript logic in this file. Skeleton of such a JavaScript component should be like this:<\/p>\n Here comes the most important part \u2013 the passing of parameters from .phtml<\/em> file and sending back some output:<\/p>\n Inside of the anonymous function, I\u00a0have 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.<\/p>\n The snippet utilizes the function parameters which makes it possible to resolve the more\/less state of the target element.<\/span><\/p>\ntouch<\/span> app\/<\/span>design\/<\/span>frontend\/<\/span>Sushil\/<\/span>MoreLess\/<\/span>Magento_Catalog\/<\/span>layout\/<\/span>catalog_product_view.xml\r\ntouch<\/span> app\/<\/span>design\/<\/span>frontend\/Sushil<\/span>\/<\/span>MoreLess\/<\/span>requirejs-config.js\r\ntouch<\/span> app\/<\/span>design\/<\/span>frontend\/Sushil<\/span>\/<\/span>MoreLess\/<\/span>web\/<\/span>js\/<\/span>toggle-product-description.js\r\ntouch<\/span> app\/<\/span>design\/<\/span>frontend\/Sushil<\/span>\/<\/span>MoreLess\/<\/span>Magento_Catalog\/<\/span>templates\/<\/span>more-less.phtml\r\ntouch<\/span> app\/<\/span>design\/<\/span>frontend\/Sushil<\/span>\/<\/span>MoreLess\/<\/span>web\/<\/span>css\/<\/span>source\/<\/span>_theme.less<\/code><\/pre>\nrequirejs-config.js<\/h2>\n
var<\/span> config =<\/span> {<\/span> map:<\/span> {<\/span> \"*\"<\/span>:<\/span> {<\/span> \/\/ alias: path-to-corresponding-js-file<\/span> toggleProductDescription:<\/span> 'js\/toggle-product-description'<\/span> }<\/span> }<\/span>\r\n}<\/span>;<\/span><\/code><\/pre>\n\n
catalog_product_view.xml<\/h2>\n
<?xml<\/span> version<\/span>=\"1.0\"<\/span>?><\/span><\/span>\r\n<page<\/span> xmlns:xsi<\/span>=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"<\/span> xsi:noNamespaceSchemaLocation<\/span>=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\"<\/span>><\/span><\/span> <body><\/span><\/span><\/span> <referenceContainer<\/span> name<\/span>=\"content\"<\/span>><\/span><\/span> <block<\/span> class<\/span>=\"Magento\\Framework\\View\\Element\\Template\"<\/span> name<\/span>=\"more-less-js\"<\/span> template<\/span>=\"Magento_Catalog::more-less.phtml\"<\/span> \/><\/span><\/span> <\/referenceContainer><\/span><\/span><\/span> <\/body><\/span><\/span><\/span>\r\n<\/page><\/span><\/span><\/span><\/code><\/pre>\nmore-less.phtml<\/h2>\n
<<\/span>script type=<\/span>\"text\/x-magento-init\"<\/span>><\/span>\r\n{<\/span> \".product.data.items .product.attribute.description .value\"<\/span>:<\/span>{<\/span> \"toggleProductDescription\"<\/span>:<\/span>{<\/span> \"contentMaxHeight\"<\/span>:<\/span> 200<\/span> }<\/span> }<\/span>\r\n}<\/span>\r\n<\/<\/span>script><\/span><\/code><\/pre>\n\n
toggle-product-description.js<\/h2>\n
define(<\/span>[<\/span> \"jquery\"<\/span>,<\/span> \/\/ declare your libraries, if you are using them<\/span>\r\n]<\/span>,<\/span> function<\/span> (<\/span>$)<\/span> {<\/span> \/\/ delare library aliases<\/span> 'use strict'<\/span>;<\/span>\r\n\u00a0 return<\/span> function<\/span> (<\/span>config,<\/span> node)<\/span> {<\/span> \/\/ paste snippet #1 here<\/span> \/\/ paste snippet #2 here<\/span> }<\/span>\r\n}<\/span>)<\/span>;<\/span><\/code><\/pre>\n\n
\/\/ snippet #1<\/span>\r\n\u00a0\r\nvar<\/span> moreLess =<\/span> {<\/span> button:<\/span> {<\/span> el:<\/span> $(<\/span>\"<a>\"<\/span>,<\/span> {<\/span> id:<\/span> \"toggle-description\"<\/span>,<\/span> href:<\/span> \"#\"<\/span> }<\/span>)<\/span>,<\/span> expanded_text:<\/span> \"Show less\"<\/span>,<\/span> collapsed_text:<\/span> \"Show more\"<\/span> }<\/span>,<\/span> target:<\/span> {<\/span> el:<\/span> $(<\/span>node)<\/span>,<\/span> height:<\/span> $(<\/span>node)<\/span>.height<\/span>(<\/span>)<\/span>,<\/span> maxHeight:<\/span> config.contentMaxHeight<\/span>,<\/span> collapsedClassName:<\/span> \"collapsed\"<\/span>,<\/span> }<\/span>\r\n}<\/span>;<\/span><\/code><\/pre>\n\/\/ snippet #2<\/span>\r\n\u00a0\r\nif<\/span> (<\/span>moreLess.target<\/span>.height<\/span> ><\/span> moreLess.target<\/span>.maxHeight<\/span>)<\/span> {<\/span> \/\/ update button text value<\/span> moreLess.button<\/span>.el<\/span>.text<\/span>(<\/span>moreLess.