Forums

Help with a script for show more show less [SOLVED]

Permalink
Ok so here is the deal, I am running the ecommerce addon on my concrete5 site. I want to be able to truncate product descriptions to x characters and have a show more button to show the full description (I have 21 products per page). I have tried several jquery scripts with none working 100%. From what I gather, there are three parts to the script: 1: adding the plugin to your header content, which I did by going to the page properties and adding it under the additional header content box. 2: Giving the div content a class and 3: including the script to be run (which I did in an HTML block on my page). Here is the link to the jquery I was trying to usehttp://viralpatel.net/blogs/2010/12/dynamically-shortened-text-show... All that gave me was a show more clickable link that changed to show less when I clicked it and back again when clicked again. It did not change any of my description. Can anyone help out with this? Am I putting the info in the wrong place?
 
citytech2 replied on at Permalink Reply
citytech2
I think there must be a conflict occur in jquery. Concrete5 has an jquery library itself. So if you are trying to put an additional library, it will clash.
Please Remove 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

Or
<script src="http://viralpatel.net/blogs/demo/jquery/jquery.shorten.1.0.js" type="text/javascript"></script>


if inserted.

I THINK IT WILL WORK

Citytech
yunotakemymoney replied on at Permalink Reply
ok, so I have tried that script to no avail. Now I am trying the script located athttp://papermashup.com/truncate-text-with-the-jtruncate-jquery-plug... I have classified my product description text as the correct class (in this case, class="text"). I have put this part
<script type="text/javascript">
$().ready(function() {
    $('.text').jTruncate({
        length: 200,
        minTrail: 0,
        moreText: "Read More",
        lessText: "Read Less",
        ellipsisText: " (Click below to continue reading)"
    });
});
</script>

in several different places, including the themes header.php file, the extra header content tab in the page properties, and in an html block at the bottom of my page. None of these work. The description still reads normally and it makes my edit bar all white at the top of the page. Clearly there is some sort of conflict with concrete5 itself. Can anyone help me?
JohntheFish replied on at Permalink Reply
JohntheFish
The symptoms you describe are typical of a JavaScript error. Have a look at the developer console or JavaScript errors and also look for network errors in case a resource is not loading.

I think I will add some of these scripts to the jQuicky resources bundle. May come in useful for someone.
yunotakemymoney replied on at Permalink Reply
I finally got this figured out. I ended up putting the script source, the script, and the additional css in the extra header content for the page in which the product lists are displayed, then I had to make the product description the correct div class. The final piece of the puzzle is when I took a <span> formatting tag out of my description. This solution works great because it will automatically show the full description on the product detail page since the call to the script isn't on those pages. So if anyone runs in to this problem in the future, let me know so I can give you more accurate details.