Jump to content

(SOLVED) How to add new "More details" button?


Recommended Posts

Hello,

i need to add a new "More details" button on the product's page.
Here's my situation:
I have no short descriptions written on the product's page, BUT i need the "More details" button to appear.

I took a look inside the product.tpl file and i found the code for the button and pasted it somewhere after the "Add to cart" button.

{l s='More details'}



Although the button is displayed, the link does not work: i cannot get the initial effect of the button --> the page is not scrolled down to the full description of the product.

How can i make the button work?

Link to comment
Share on other sites

You must change the following code in js/product.js in your theme's directory:

//catch the click on the "more infos" button at the top of the page
$('div#short_description_block p a.button').click(function(){
   $('#more_info_tab_more_info').click();
   $.scrollTo( '#more_info_tabs', 1200 );
});



It's specifically looking for the button in the short description block. You should change the div#short_description_block to a div that contains only the more details buttons, otherwise all buttons will have the effect applied.

  • Like 2
Link to comment
Share on other sites

I copied the lines of code you said i should modify and i changed the

div#short_description_block

to

div#my_id

and now it works like a charm.

So now i have this piece of code:

//catch the click on the "more infos" button at the top of the page
   $('div#my_id p a.button').click(function(){
       $('#more_info_tab_more_info').click();
       $.scrollTo( '#more_info_tabs', 1200 );
   });



I did this because i didn't want to affect the buttons by mistake (or in the future).

As always, your solutions work perfectly. Thank you for your help!
SOLVED!

  • Like 1
Link to comment
Share on other sites

  • 6 months later...

I copied the lines of code you said i should modify and i changed the

div#short_description_block

to

div#my_id

and now it works like a charm.<br/><br/>So now i have this piece of code:<br/><br/>

//catch the click on the "more infos" button at the top of the page<br/>    $('div#my_id p a.button').click(function(){<br/>        $('#more_info_tab_more_info').click();<br/>        $.scrollTo( '#more_info_tabs', 1200 );<br/>    });

<br/><br/>I did this because i didn't want to affect the buttons by mistake (or in the future).<br/><br/>As always, your solutions work perfectly. Thank you for your help!<br/>SOLVED!

 

Hi I was wondering did you add any additional code in product.tpl to make this effect work?

Thanks in advance

 

Sorry my mistake - I found it ;D for those who were wondering:

 

        
<div id="my_id">
<p class="buttons_bottom_block"><a href="javascript:{ldelim}{rdelim}" class="button if_more_details">{l s='More Details'}</a></p></div>

Edited by fcmdiana (see edit history)
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...