59312

How to add jquery readmore function (expand/collapse) to magento CMS pages

Question:

I need a read more button link in my Magento CMS pages.

I got some long cms texts. I need a Read More link to collapse them.

The Read More link has to be always after the first paragraph or ofter 250 character or any other limitation. But it is better when I can place the link myself in the magento backend by adding some kind of shortcode. like [readmore] or something. Doesn't matter what.

this is an example what im trying to do. <a href="http://www.feestding.nl/themakleding/beste-thema-s/halloween-kostuums/" rel="nofollow">http://www.feestding.nl/themakleding/beste-thema-s/halloween-kostuums/</a>

example of the feature <a href="http://jedfoster.com/Readmore.js/" rel="nofollow">http://jedfoster.com/Readmore.js/</a>

how can i do it?

Answer1:

Download <em>readmore.js</em> and add it into your <em>page.xml</em> of your template. Make sure your path is correct and you have proper jquery already in use, if not then link the jquery file as well.

<action method="addJs"><script>readmore.js</script></action>

In backend, always put your contents inside a div with a specific class like below to make the read more link appear

<div class="readmore">.......</div>

Depending on where you want the read more to display either in cms pages, category pages or product pages, you have to add the following readmore script accordingly in those pages. You can also add the script in your CMS pages from the editor in backend.

<script type="text/javascript"> jQuery('.readmore').readmore({maxHeight:40}); </script>

There are couple of options that we can use with <em>readmore.js</em>, follow the documentation <a href="http://jedfoster.com/Readmore.js/" rel="nofollow">here</a>

Beware of jQuery conflicts, you might need to use noConflict() to make this readmore script work. Hope you can make this work.

Answer2:

You can achieve this functionality by implementing a custom extension. I will show you the steps that we need to take to achieve this. So our extension should have a name Programmerrkt_AdvancedCms.

First step is activating our module. For this add this file in etc/modules

Location : app/etc/modules/Programmerrkt_AdvancedCms.xml

<config> <modules> <Programmerrkt_AdvancedCms> <active>true</active> <codePool>local</codePool> </Programmerrkt_AdvancedCms> </modules> </config>

Next step is to define configuration of our module. Let us do that.

Location : app/code/local/Programmerrkt/AdvancedCms/etc/config.xml

<config> <modules> <Programmerrkt_AdvancedCms> <version>1.0.0</version> </Programmerrkt_AdvancedCms> </modules> <frontend> <layout> <updates> <programmerrkt_advancedcms> <file>programmerrkt_advancedcms.xml</file> </programmerrkt_advancedcms> </updates> </layout> </frontend> </config>

This file tells to Magento that our module has a layout file for frontend section. That's it. Our layout file is the heart of our module. It is going to hold the important parts of our module. Let us define our layout file.

Location : app/design/frontend/<your_package>/<your_theme>/layout/programmerrkt_advancedcms.xml

<layout> <cms_page> <reference name="head"> <action method="addItem"> <type>skin_css</type> <name>css/customcss/readmore.css</name> </action> <action method="addItem"> <type>skin_js</type> <name>js/jquery1.js</name> </action> <action method="addItem"> <type>skin_js</type> <name>js/customjs/readmore.js</name> </action> </reference> <reference name="before_body_end"> <block type="core/template" name="readmore.script.template" template="programmerrkt/advancedcms/readmore/script.phtml" /> </reference> </cms_page> </layout>

So here we defined layout for cms_page handler. Magento will look for this layout handler whenever a request for CMS page is made. So this handler would be a perfect handler for us. Next we added jquery and readmore.js in header section. Then at last we defined a template file script.phtml for holding our custom javascript code. Note that we included this template at the bottom of page. This will ensure that, our custom code will invoked perfectly.

Now our script.phtml should look like this.

Location : app/design/frontend/<yourpackag>/<your_theme>/template/programmerrkt/advancedcms/readmore/script.phtml

<script type="text/javascript"> //<![CDATA[ $j('#readomore-demo').readmore({ moreLink: '<a href="#">More examples and options</a>', maxHeight: 100, afterToggle: function(trigger, element, expanded) { if(! expanded) { // The "Close" link was clicked $j('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } ); } } }); //]]> </script>

As you can see readmore() method is called on an element with an id readomore-demo. So it is required that, you need to enclose all the content your cms page inside this id. Demo is shown here.

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/EmK7D.png" data-original="https://i.stack.imgur.com/EmK7D.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

We are done. Our output will look like this.

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/Hy5Me.png" data-original="https://i.stack.imgur.com/Hy5Me.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/PLzVa.png" data-original="https://i.stack.imgur.com/PLzVa.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

So only thing you need to change is edit script.phtml file according to your needs.

<strong>Note:</strong> Remember you need to add jquery for proper working of this module. If you have jquery installed, then remove the code that add jquery in layout file. Also you need to download readmore.js and has to include it in skin/frontend/<your_package/<your_theme>/js/customjs/readmore.js. Similarly add css file in skin/frontend/<your_package/<your_theme>/css/customcss/readmore.css. You can use this css file to decorate links appear in your cms page.

<strong>Additional Note:</strong> readmore.js requires jquery greater than 1.7.0

Hope it helps.

Recommend

  • How do I embed a custom user-control in MS Word?
  • gulp.watch running same task multiple times when saving many files
  • Scrolling News Ticker Jquery - Issues
  • Using extern @class in order to add a category?
  • “A GKScore must specify a leaderboard.”
  • CKeditor stripping font tags instead of converting to span
  • How can I add div content to a new page in jspdf?
  • C++ Single function pointer for all template instances
  • Can I have a variable number of URI parameters or key-value pairs in Laravel 4?
  • Magento get URL before current
  • Test if a set exists before trying to drop it
  • Django: Count of Group Elements
  • MongoDB in PHP using aggregate to group by _id is null not working
  • Email format validation in mvc3 view
  • Deleting and Updating values from a cusrsor adapter
  • HTML download movie download link
  • Java applet as stand-alone Windows application?
  • Updating server-side rendering client-side
  • Modifying destination and filename of gulp-svg-sprite
  • MySQL WHERE-condition in procedure ignored
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • jQuery tmpl and DataLink beta
  • Web-crawler for facebook in python
  • Jquery - Jquery Wysiwyg return html as a string
  • XCode can't find symbols for a specific iOS library/framework project
  • How to disable jQuery.jplayer autoplay?
  • SQL merge duplicate rows and join values that are different
  • KeystoneJS: Relationships in Admin UI not updating
  • trying to dynamically update Highchart column chart but series undefined
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • Getting Messege Twice Using IMvxMessenger
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal