Jump to content
Sign in to follow this  
harrynotpotter

HORIZONTAL PRODUCT SCROLLER

Recommended Posts

HORIZONTAL PRODUCT SCROLLER

 

http://addons.oscommerce.com/info/7938

 

Basic function of this addon: scrolling a set of product with image horizontally with left and right buttons, a page counter shows current position and a start over button to reset the scroller. (A screenshot is included in the download file.)

 

Shouldn't too hard to adapt this to CSS and/or template based versions, I may add one later.

Share this post


Link to post
Share on other sites

Hi!

Hopefully a great contrib, but my problem is that i can´t scroll to next page

any idea how to fix the problem?

 

HORIZONTAL PRODUCT SCROLLER

 

http://addons.oscommerce.com/info/7938

 

Basic function of this addon: scrolling a set of product with image horizontally with left and right buttons, a page counter shows current position and a start over button to reset the scroller. (A screenshot is included in the download file.)

 

Shouldn't too hard to adapt this to CSS and/or template based versions, I may add one later.

Share this post


Link to post
Share on other sites

Hi!

Hopefully a great contrib, but my problem is that i can´t scroll to next page

any idea how to fix the problem?

 

Seems like you don't have the jQuery running? If you are in your local testing machine, make sure you have internet turned on, otherwise downloand and run your local copy of jQuery. If you have jQuery loaded before this add-on, you don't need to load it again.

 

Also don't alter the table structure in new_products.php file unless you modify the js file accordingly.

 

Hope this helps.

Edited by harrynotpotter

Share this post


Link to post
Share on other sites

is it possible to allow more than 1 row of products to show? i.e. 4 rows, then croll to next page another 4 rows, etc.

Share this post


Link to post
Share on other sites

is it possible to allow more than 1 row of products to show? i.e. 4 rows, then croll to next page another 4 rows, etc.

 

No, but I guess that can be done. The easy way is to put the original osC layout in a container DIV tag, use CSS Overflow property to show scrollbar(s). This add-on is designed to be a space saver, one row only.

Share this post


Link to post
Share on other sites

Hi!

i have tryed to even download but dont work.

 

Maybe i have done something bad :-)

can you see if i missed something in my try to alter the new products:

 

<!-- new_products //-->

<?php

$new_products_query = tep_db_query("SELECT distinct p.products_id, p.products_image, p.products_tax_class_id, IF (s.status, s.specials_new_products_price, NULL) AS specials_new_products_price, p.products_price, pd.products_name

FROM " . TABLE_PRODUCTS . " p LEFT JOIN " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c using(products_id)

LEFT JOIN " . TABLE_CATEGORIES . " c USING (categories_id)

LEFT JOIN " . TABLE_FEATURED . " f ON p.products_id = f.products_id

LEFT JOIN " . TABLE_SPECIALS . " s ON p.products_id = s.products_id

LEFT JOIN " . TABLE_PRODUCTS_DESCRIPTION . " pd ON p.products_id = pd.products_id AND pd.language_id = '" . (int)$languages_id . "'

where p.products_status = '1' AND f.status = '1' ");

 

 

$no_of_new_products = tep_db_num_rows($new_products_query);

 

$pblock_html = '';

while ($new_products = tep_db_fetch_array($new_products_query)) {

$pblock_html .= '<div class="scrollblock"><div><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a></div>'.

'<div class="scrollblock_img"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></div>'.

'<div class="scrollblock_price">'. $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])) . '</div></div>';

}

 

 

?>

<table class="scroller" border="0" width="100%" cellspacing="0" cellpadding="0">

<tr><td width="100%" align="right">

<span class="scrollcnter">Page <span class="txt_pn">1</span> of <span class="txt_maxpn"><?php echo ceil($no_of_new_products/5); ?></span>

<a href="#" onclick="return false;" class="scrollrestart"> (start over) </a></span>

</td></tr>

<tr><td width="100%">

<table><tr>

<td width="5%" align="right"><img src="images/icons/button_scroll_left_up.gif" class="gol"></td>

<td width="90%" class="smallText">

<span class="scrollcontainer"><span class="scrollbox">

<?php echo $pblock_html; ?>

</span></span>

</td>

<td width="5%" align="left"><img src="images/icons/button_scroll_right_up.gif" class="gor"></td>

</tr></table>

</td></tr>

</table>

<!-- new_products_eof //-->

 

Regards Tony

 

Seems like you don't have the jQuery running? If you are in your local testing machine, make sure you have internet turned on, otherwise downloand and run your local copy of jQuery. If you have jQuery loaded before this add-on, you don't need to load it again.

 

Also don't alter the table structure in new_products.php file unless you modify the js file accordingly.

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hi again!

everything works in my code as well, i missed to put the .js under includes directory

Great contrib

Regards Tony :thumbsup:

 

Hi!

i have tryed to even download but dont work.

 

Maybe i have done something bad :-)

can you see if i missed something in my try to alter the new products:

 

<!-- new_products //-->

<?php

$new_products_query = tep_db_query("SELECT distinct p.products_id, p.products_image, p.products_tax_class_id, IF (s.status, s.specials_new_products_price, NULL) AS specials_new_products_price, p.products_price, pd.products_name

FROM " . TABLE_PRODUCTS . " p LEFT JOIN " . TABLE_PRODUCTS_TO_CATEGORIES . " p2c using(products_id)

LEFT JOIN " . TABLE_CATEGORIES . " c USING (categories_id)

LEFT JOIN " . TABLE_FEATURED . " f ON p.products_id = f.products_id

LEFT JOIN " . TABLE_SPECIALS . " s ON p.products_id = s.products_id

LEFT JOIN " . TABLE_PRODUCTS_DESCRIPTION . " pd ON p.products_id = pd.products_id AND pd.language_id = '" . (int)$languages_id . "'

where p.products_status = '1' AND f.status = '1' ");

 

 

$no_of_new_products = tep_db_num_rows($new_products_query);

 

$pblock_html = '';

while ($new_products = tep_db_fetch_array($new_products_query)) {

$pblock_html .= '<div class="scrollblock"><div><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a></div>'.

'<div class="scrollblock_img"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></div>'.

'<div class="scrollblock_price">'. $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])) . '</div></div>';

}

 

 

?>

<table class="scroller" border="0" width="100%" cellspacing="0" cellpadding="0">

<tr><td width="100%" align="right">

<span class="scrollcnter">Page <span class="txt_pn">1</span> of <span class="txt_maxpn"><?php echo ceil($no_of_new_products/5); ?></span>

<a href="#" onclick="return false;" class="scrollrestart"> (start over) </a></span>

</td></tr>

<tr><td width="100%">

<table><tr>

<td width="5%" align="right"><img src="images/icons/button_scroll_left_up.gif" class="gol"></td>

<td width="90%" class="smallText">

<span class="scrollcontainer"><span class="scrollbox">

<?php echo $pblock_html; ?>

</span></span>

</td>

<td width="5%" align="left"><img src="images/icons/button_scroll_right_up.gif" class="gor"></td>

</tr></table>

</td></tr>

</table>

<!-- new_products_eof //-->

 

Regards Tony

Share this post


Link to post
Share on other sites

No, but I guess that can be done. The easy way is to put the original osC layout in a container DIV tag, use CSS Overflow property to show scrollbar(s). This add-on is designed to be a space saver, one row only.

 

I came across this site helidirect.com which uses similar scroll feature, the row can bet set to more than 1, can you give me more details on how its done? I don't know much about PHP or CSS. thanks

 

That site is using this plugin: http://sorgalla.com/projects/jcarousel/examples/static_simple.html

Share this post


Link to post
Share on other sites

try this solution:

http://www.phpfreaks.com/forums/index.php?topic=299238.0

 

I came across this site helidirect.com which uses similar scroll feature, the row can bet set to more than 1, can you give me more details on how its done? I don't know much about PHP or CSS. thanks

 

That site is using this plugin: http://sorgalla.com/projects/jcarousel/examples/static_simple.html

Edited by El_Heso

Share this post


Link to post
Share on other sites

Excellent mod!! Thank you so much, I have also modified it for best sellers which was easy, but the question is how would you get this scroller to periodically scroll by itself automatically either 1 product block at a time or by pages?

 

Kindest Regards

 

Chris

Share this post


Link to post
Share on other sites

Excellent mod!! Thank you so much, I have also modified it for best sellers which was easy, but the question is how would you get this scroller to periodically scroll by itself automatically either 1 product block at a time or by pages?

 

Kindest Regards

 

Chris

 

Hello Chris, it can be done by using JavaScript Timing Events and loop, there is good basic exacmple in this page: [ http://www.w3schools.com/js/js_timing.asp ] I am sorry I have no plan to code this feature. Hope someone can help here.

Edited by harrynotpotter

Share this post


Link to post
Share on other sites

This is exactly what I am looking for, only for the manufacturer's box. Has someone done this, or can this code be modified for use in manufacturer? If anyone can help with this, I would appreciate it very much.

Share this post


Link to post
Share on other sites

This is exactly what I am looking for, only for the manufacturer's box. Has someone done this, or can this code be modified for use in manufacturer? If anyone can help with this, I would appreciate it very much.

 

As long as you keep the table structure intact, you can feed it with different data sets.

 

Your query would be something like:

 

$new_products_query = tep_db_query("SELECT manufacturers_id, manufacturers_name, manufacturers_image FROM " . TABLE_MANUFACTURES);

 

and then you modify the product block html codes:

 

$pblock_html .= '<div class="scrollblock"><div><a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $new_products['manufacturers_id']) . '">' . $new_products['manufacturers_name'] . '</a></div>'.
  '<div class="scrollblock_img"><a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturess_id=' . $new_products['manufacturers_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['manufacturers_image'], $new_products['manufacturers_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><</div>/div>';

 

Note: I did not test this code, so you will have to try and make corrections.

Share this post


Link to post
Share on other sites

is there a way to make the slider display a select list of products. I made a new page with serveral of these product sliders on it, and would like each individual one to show a different sub-category.

 

how would i go about telling the 'new_products' page which set of 'product_id=' i want to include?

Share this post


Link to post
Share on other sites

Think I got everything working:

 

if ( (!isset($new_products_category_id)) || ($new_products_category_id == '0') ) {
 $new_products_query = tep_db_query("select p.products_id, p.products_image, p.products_tax_class_id, pd.products_name,
	  if(s.status, s.specials_new_products_price, p.products_price)
	  as products_price from " .
	  TABLE_PRODUCTS . " p left join " .
	  TABLE_SPECIALS . " s on p.products_id = s.products_id, " .
	  TABLE_PRODUCTS_DESCRIPTION . " pd, " .
	  TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " .
	  TABLE_CATEGORIES_DESCRIPTION . " cd " .
	  "where p.products_status = '1'
	  and p.products_id = p2c.products_id and p2c.categories_id = cd.categories_id
	  and p.products_id = pd.products_id
	  and cd.categories_name = 'EXAMPLE CATEGORIE NAME HERE'
	  and pd.language_id = '" .

	  (int)$languages_id . "' order by p.products_id asc limit " . 50 );

 

By replacing first $new_products_query in new_products.php, this script displays only items from a particular caregory.

I used several sliders each with a different category to create a page of specialized items. A way to highlight key products in a very large store.

Share this post


Link to post
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
Sign in to follow this  

×