Collapsible Product Description Paragraphs

Developers Frontend
1

Hello everyone,

I need to make three paragraphs collapsible in the product descriptio and I'm trying to use bootstrap to do that.

I want to show the description, ingredients and how to use in collapsible divs.



It works well in the back-end but it doesn't in the user interface.



How to use

here the text I want to show and hide


Any idea ???
Thanks !
2

We've been having almost exactly the same issue.



It looks like the backend includes all the bootstrap js and less files, but the frontend only uses a couple of less files from bootstrap.



If you include the following in your common/scripts.tpl file, you can see that the element gets updated when clicked, but because the bootstrap classes do not exist in the frontend, it does not work correctly.


{script src="js/lib/twitterbootstrap/bootstrap.min.js"}




I've tried including the bootstrap less files, but it breaks the rest of the layout.

3

Hi Iparodi,



A little off-topic, but are you aware that collapsible product descriptions appear to be discounted by Google during indexing?

I came across an interesting article about it.

https://www.seroundtable.com/google-hidden-tab-content-seo-19489.html



Anyways, good luck

Olof

4

Thank you bothe for the advice.



I have to use a collapsible text to obtain a better looking page. Indeed the product description is quite long and must be placed on the right side of the product photo. I'll try to concentrate the SEO in the first part of the description that is always visible.



Hi Matthew in the version 4.3.3 the script you mentioned is already include in the scripts.tpl. I also tried to include the transitions.js that is a dependency for the collapsible content, but I haven't had luck

5

Hello,

I don't know if this is the right approach to the problem, anyway this solution works for me.



By using the my_changes technique (I have the 4.3.3 so I don't know if the folder structure is exactly the same)


  1. Copy bootstrap.min.js in \js\addons\my_changes


  2. Copy component-animations.less from the bootstrap folder to \design\themes\responsive\css\addons\my_changes


  3. In the folder \design\themes\responsive\templates\addons\my_changes\hooks\index create the following tpl files:



    scripts.post.tpl with this content {script src=“js/addons/my_changes/bootstrap.min.js”}



    and



    styles.post.tpl with this content {style src=“addons/my_changes/component-animations.less”}


  4. In the product description



    How to use
here the text I want to show and hide


5) delete the cache folder manually and the collapsible text should work
6

Fantastic. very useful. I'll use this

Only one thing that would be sweet, is to easily assign a Group to each DIV so that only one DIV content within a group is expanded, collapsing others when clicked.

Thanks for providing the instructions.

7

Ok, just a note. Adding this to our website caused a big issue with the Product Options Tooltip. as reported:

http://forum.cs-cart.com/tracker/issue-6056-product-options-tooltip-description-not-showing-correctly/

So we disabled the JS. Now our collapsable product description paragraphs wont work, but honestly, with html5, you shouldnt need JS to do this.

8

This November, Google is now asking webmaster to open up JS and CSS for crawling since they want to see if the site is mobile friendly.