Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Trying to create a collapsable product description


PupStar

Recommended Posts

Because of the design of my product_info page I need the ability to limit the amount of the product description that is shown.

 

I thought the way forward maybe a collapsable <div> so I did a bit of googling and came up with this:-

 

First I modified the query like so

 

$product_info_query = tep_db_query("select p.products_id, pd.products_name, substring(pd.products_description, 1, 450) as products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");

 

basically I just replace the pd.products_description with substring(pd.products_description, 1, 450) as products_description

 

I then replaced

<?php echo stripslashes($product_info['products_description']); ?>

with

<div><a href="javascript://" onclick="showHide('eventbody');">read more ....</a></div>
<div id="eventbody" style="display:none;"><?php echo stripslashes($product_info['products_description']); ?></div>

 

Then in includes/template_top.php I added

<script language="javascript" type="text/javascript">
function showHide(div){
if(document.getElementById(div).style.display == 'none'){
document.getElementById(div).style.display = 'block';
}else{
document.getElementById(div).style.display = 'none';
}
}
</script>

 

Now the collapsable <div> works a treat and only shows the required amount of characters from the product_description. What I am not sure about is how to get the code to show the first 450 characters and then display the 'read more.....' link at the bottom and when clicked to display from character 451 onwards.

 

Regards

 

Mark

Link to comment
Share on other sites

A way to do it;

 

You can get the short bit, and the usual description

 

 

LEFT(pd.products_description, 450) as products_precis, pd.products_description

 

 

now you put the them both in div's

 

<div class="precis">
<?php echo $product_info['products_precis']; ?>
<br>
<a href="#" class="read_more">read more</a>
</div>
<div class="description">
<?php echo $product_info['products_precis']; ?>
</div>

 

and then

 

<script>
$(".description").hide();
$("a.read_more").click(function ( event ) {
event.preventDefault();
$(".precis").hide();
$(".description").show();
});
</script>

 

 

That can be cleaned up a lot, and it is untested.

Link to comment
Share on other sites

A way to do it;

 

You can get the short bit, and the usual description

 

 

LEFT(pd.products_description, 450) as products_precis, pd.products_description

 

 

now you put the them both in div's

 

<div class="precis">
<?php echo $product_info['products_precis']; ?>
<br>
<a href="#" class="read_more">read more</a>
</div>
<div class="description">
<?php echo $product_info['products_precis']; ?>
</div>

 

and then

 

<script>
$(".description").hide();
$("a.read_more").click(function ( event ) {
event.preventDefault();
$(".precis").hide();
$(".description").show();
});
</script>

 

 

That can be cleaned up a lot, and it is untested.

 

Thanks Gary,

 

It did not work until I changed:

 

<div class="description">
<?php echo $product_info['products_precis']; ?>
</div>

 

to

 

<div class="description">
<?php echo $product_info['products_description']; ?>
</div>

 

and it works like a charm.

 

now can I be cheeky and ask how I would incorporate a link at the end of the full product description to collapse it back to the short description :blush:

 

Thanks

 

Mark

Link to comment
Share on other sites

<div class="precis">
<?php echo $product_info['products_precis']; ?>
<br>
<a href="#" class="read_more">read more</a>
</div>
<div class="description">
<?php echo $product_info['products_description']; ?>
<br />
<a href="#" class="read_less">read less</a>
</div>

 

<script>
$(".description").hide();

$(function(){

$(".read_more").click(function () {
$(".precis").hide();
$(".description").show();
return false;
});

$(".read_less").click(function () {
$(".description").hide();
$(".precis").show();
return false;
});

});
</script>

 

@@PupStar

Matt

Link to comment
Share on other sites

@@PupStar

 

Doh, my mistake. Yes to the precis to description change...well noticed.

 

Also, you can strip the description of tags as so (do same for precis);

 

<?php echo strip_tags($product_info['products_description']); ?>

 

You can read more about strip_tags...

 

@@burt,

 

If I run into trouble with any html tags.

 

Thanks

 

Mark

Link to comment
Share on other sites

LEFT(pd.products_description, 450) as products_precis,
SUBSTRING(pd.products_description FROM 450) as products_more,

 

and

 

 

<div>
<?php echo $product_info['products_precis']; ?>
<span class="description">
 <?php echo $product_info['products_more']; ?>
</span>
<p class="readmore">More</p>
</div>

<script>
 $('span.description').hide();
 $('.readmore').click(function () {
   $(this).text(function (i, thetext) {
     return thetext == "Less" ? "More" : "Less";
   });
   $('span.description').toggle();
 });
</script>

 

could be better. Untested.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...