Page 1 of 2 12 LastLast
Results 1 to 10 of 13
  1. #1
    Join Date
    Jun 2012
    Posts
    410
    Plugin Contributions
    0

    Default Show More, Show Less Button Code in Product Info Page

    I've been trying to add a Show More and Show Less capability to a product info page product description without success. I'd like the product description to be brief, but if the customer wants additional information, they can click the Show More link or button, and the additional text would come up, along with a Show Less link or button which when clicked would dismiss the extra text. I've tried both an html-CSS approach, and an html-javascript method. In each case, the extra text is hidden okay with the Show More link present. But when the link is clicked, either the home page is displayed, or the product is added to the cart and the shopping cart page is displayed. I've tried using ezpages, but a hack to the template is required to not display the link in the header, footer or sidebox. I've tried the zen cart truncate text string approach, but don't know where to put the file with the extra text or how to configure the link in the call to the truncate function.

    Is there an easy way to accomplish what I want within the product description itself with no other files involved?

    Dave
    zc155f, php7.3

  2. #2
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,415
    Plugin Contributions
    89

    Default Re: Show More, Show Less Button Code in Product Info Page

    Quote Originally Posted by Dave224 View Post
    I've been trying to add a Show More and Show Less capability to a product info page product description without success. I'd like the product description to be brief, but if the customer wants additional information, they can click the Show More link or button, and the additional text would come up, along with a Show Less link or button which when clicked would dismiss the extra text. I've tried both an html-CSS approach, and an html-javascript method. In each case, the extra text is hidden okay with the Show More link present. But when the link is clicked, either the home page is displayed, or the product is added to the cart and the shopping cart page is displayed. I've tried using ezpages, but a hack to the template is required to not display the link in the header, footer or sidebox. I've tried the zen cart truncate text string approach, but don't know where to put the file with the extra text or how to configure the link in the call to the truncate function.

    Is there an easy way to accomplish what I want within the product description itself with no other files involved?

    Dave
    zc155f, php7.3
    I just finished similar processing for a site running zc157c with the Bootstrap-4 template. For that site, it was the categories_description that was taking up too much space.

    I added a bootstrap toggle-button to view/hide that information. Assuming that your template includes a jQuery load, a simple jQuery onclick handler to show() or hide() that area will work, too.

  3. #3
    Join Date
    Jun 2012
    Posts
    410
    Plugin Contributions
    0

    Default Re: Show More, Show Less Button Code in Product Info Page

    Quote Originally Posted by lat9 View Post
    I just finished similar processing for a site running zc157c with the Bootstrap-4 template. For that site, it was the categories_description that was taking up too much space.

    I added a bootstrap toggle-button to view/hide that information. Assuming that your template includes a jQuery load, a simple jQuery onclick handler to show() or hide() that area will work, too.
    Like this? All in product description? No CSS?

    Code:
    <button class="switch">Click me</button>
    
    <div class="text-block collapsed pressed">some text</div>
    
    <script>    
        $('.switch').on('click', function(e) {
          $('.text-block').toggleClass("collapsed pressed"); //you can list several class names 
          e.preventDefault();
        });
    </script>

  4. #4
    Join Date
    Feb 2006
    Location
    Tampa Bay, Florida
    Posts
    9,632
    Plugin Contributions
    321

    Default Re: Show More, Show Less Button Code in Product Info Page

    I did something similar for order status history on the order details page. I modeled it after
    https://stackoverflow.com/questions/...ing-javascript
    That Software Guy. My Store: Zen Cart Modifications
    Available for hire - See my ad in Services
    Plugin Moderator, Documentation Curator, Chief Cook and Bottle-Washer.
    Do you benefit from Zen Cart? Then please support the project.

  5. #5
    Join Date
    Feb 2009
    Location
    UK
    Posts
    1,225
    Plugin Contributions
    1

    Default Re: Show More, Show Less Button Code in Product Info Page

    I tend to use the HTML5 <summary> and <details> tags

    https://www.w3schools.com/tags/tag_summary.asp
    Simon

  6. #6
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,415
    Plugin Contributions
    89

    Default Re: Show More, Show Less Button Code in Product Info Page

    Quote Originally Posted by simon1066 View Post
    I tend to use the HTML5 <summary> and <details> tags

    https://www.w3schools.com/tags/tag_summary.asp
    Nice one, @simon1066; I really need to read up on the HTML5 tags!

  7. #7
    Join Date
    Feb 2009
    Location
    UK
    Posts
    1,225
    Plugin Contributions
    1

    Default Re: Show More, Show Less Button Code in Product Info Page

    Quote Originally Posted by lat9 View Post
    Nice one, @simon1066; I really need to read up on the HTML5 tags!
    Thanks @lat9, yes it's so simple and things like the '+' or 'arrow' can easily be rotated onclick with css
    Simon

  8. #8
    Join Date
    Feb 2009
    Location
    UK
    Posts
    1,225
    Plugin Contributions
    1

    Default Re: Show More, Show Less Button Code in Product Info Page

    Quote Originally Posted by simon1066 View Post
    Thanks @lat9, yes it's so simple and things like the '+' or 'arrow' can easily be rotated onclick with css
    Just noticed that the 'arrow' seems to rotate without css, I use css to rotate a '+' by 45 degs.
    Simon

  9. #9
    Join Date
    Jun 2012
    Posts
    410
    Plugin Contributions
    0

    Default Re: Show More, Show Less Button Code in Product Info Page

    Thank you so much Simon! So easy!
    Dave

  10. #10
    Join Date
    Feb 2006
    Location
    Tampa Bay, Florida
    Posts
    9,632
    Plugin Contributions
    321

    Default Re: Show More, Show Less Button Code in Product Info Page

    Simon, if you'd like to write a little article about this for the help, it would be great. You can create a PR or just send me a writeup.
    That Software Guy. My Store: Zen Cart Modifications
    Available for hire - See my ad in Services
    Plugin Moderator, Documentation Curator, Chief Cook and Bottle-Washer.
    Do you benefit from Zen Cart? Then please support the project.

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v155 Missing Show All Button And Show Page View Button
    By Saintsteven in forum Templates, Stylesheets, Page Layout
    Replies: 10
    Last Post: 24 Mar 2016, 07:50 PM
  2. How to show more than 2 images in product info page?
    By dreamwheel in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 19 Jun 2009, 06:05 AM
  3. Show Less on Main Page
    By olen1009 in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 19 Mar 2009, 05:12 AM
  4. Product listing show/hide more info by category
    By bobede in forum Templates, Stylesheets, Page Layout
    Replies: 10
    Last Post: 15 Jan 2009, 10:40 AM
  5. category page- make images bigger and show less text
    By thepixellator in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 6 Dec 2007, 05:54 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR