Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

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.

Link to comment
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.

Link to comment
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
Link to comment
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.

Link to comment
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.

Link to comment
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

Link to comment
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

Link to comment
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
Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
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
Link to comment
Share on other sites

  • 4 months later...

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.

Link to comment
Share on other sites

  • 5 months later...

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?

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...