Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

New flow


gregy

Recommended Posts

Adds a iTunes like coverflow of the images in the New Products box. Including reflections, Captions and Prices. The images are still links to the new products information page.

Uses ProtoFlow.js, Prototype and Scriptaculous to do bulk of the work and Reflection.js

 

Contribution download

 

P.s. This is not mine contribution, i just opened support forum and invited a developer ;)

Link to comment
Share on other sites

One more suggestion;

 

- remove border around pictures, cause reflection doesn't make sense because of border

- put words on left and right side of the slider, as we know what this slider means, but there are a lot of different less skilled people on the net, we're trying to make it as simple as it gets to them. They are our customers ;)

Link to comment
Share on other sites

To remove the border open in the js folder reflection.js look for the line:

reflection.style.width = reflectionWidth+'px';

add this line after:

reflection.style.border = "0px";

 

That should do it.

 

 

One more suggestion;

 

- remove border around pictures, cause reflection doesn't make sense because of border

- put words on left and right side of the slider, as we know what this slider means, but there are a lot of different less skilled people on the net, we're trying to make it as simple as it gets to them. They are our customers ;)

Link to comment
Share on other sites

if you set this (in index.php)

 

startIndex: 2, //which image do you want the flow to focus on by default

 

to 1, it will position them in vertical .. bug?

Link to comment
Share on other sites

Hello, this is a great addon! Thanks!

 

I'm trying to integrate this into the featured products addon. Would you consider taking a look at it to suggest how to mod includes/modules/featured.php to integrate this for use with this addon? It would be a great help to the community...

 

Scott

Link to comment
Share on other sites

if you set this (in index.php)

 

startIndex: 2, //which image do you want the flow to focus on by default

 

to 1, it will position them in vertical .. bug?

 

Yes it looks like it might be in the protoFlow.js script once the scroll bar is moved however it does 'jump' to the normal look. I have mine set to 5 this puts it right in the middle of the 9 products being shown and by default lets the user know that they can move to either side. You could also set the autoplay to true and that will do it too.

Link to comment
Share on other sites

Hello, this is a great addon! Thanks!

 

I'm trying to integrate this into the featured products addon. Would you consider taking a look at it to suggest how to mod includes/modules/featured.php to integrate this for use with this addon? It would be a great help to the community...

 

Scott

 

Love and use the Package tracking BTW thanx 4 that. Anyway um, I don't have a includes/modules/featured.php to check. Was this an add on? Never mind I found it. I'll take a look and see, especially since that might fix an issue I had with new products without pictures showing up in the new_products.

Chris

www.fantasyfestival.com

Link to comment
Share on other sites

Love and use the Package tracking BTW thanx 4 that. Anyway um, I don't have a includes/modules/featured.php to check. Was this an add on? Never mind I found it. I'll take a look and see, especially since that might fix an issue I had with new products without pictures showing up in the new_products.

Chris

www.fantasyfestival.com

 

no problem - glad it is helpful. thanks for taking a look at it Chris.

 

Scott

Link to comment
Share on other sites

no problem - glad it is helpful. thanks for taking a look at it Chris.

 

Scott

Well I've hacked together a start, but I still have a stray link at the end take a look and see if you can figure it.

<?php
/*
 osCommerce, Open Source E-Commerce Solutions
 [url="http://www.oscommerce.com"]http://www.oscommerce.com[/url]

 Copyright © 2008 osCommerce

 Released under the GNU General Public License

 Featured Products V1.1
 Displays a list of featured products, selected from admin
 For use as an Infobox instead of the "New Products" Infobox  
*/
?>
<!-- featured_products //-->
<?php
if(FEATURED_PRODUCTS_DISPLAY == 'true')
{
 $featured_products_category_id = $new_products_category_id;
 $cat_name_query = tep_db_query("select categories_name from " . TABLE_CATEGORIES_DESCRIPTION . " where categories_id = '" . $featured_products_category_id . "' limit 1");
 $cat_name_fetch = tep_db_fetch_array($cat_name_query);
 $cat_name = $cat_name_fetch['categories_name'];
 $info_box_contents = array();

 if ( (!isset($featured_products_category_id)) || ($featured_products_category_id == '0') ) {
   $info_box_contents[] = array('align' => 'left', 'text' => '<a class="headerNavigation" href="' . tep_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . TABLE_HEADING_FEATURED_PRODUCTS . '</a>');

 list($usec, $sec) = explode(' ', microtime());
 srand( (float) $sec + ((float) $usec * 100000) );
 $mtm= rand();

   $featured_products_query = tep_db_query("select p.products_id, p.products_image, p.products_tax_class_id, s.status as specstat, s.specials_new_products_price, p.products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id left join " . TABLE_FEATURED . " f on p.products_id = f.products_id where p.products_status = '1' and f.status = '1' order by rand($mtm) DESC limit " . MAX_DISPLAY_FEATURED_PRODUCTS);
 } else {
   $info_box_contents[] = array('align' => 'left', 'text' => sprintf(TABLE_HEADING_FEATURED_PRODUCTS_CATEGORY, $cat_name));
   $subcategories_array = array();
   tep_get_subcategories($subcategories_array, $featured_products_category_id);
   $featured_products_category_id_list = tep_array_values_to_string($subcategories_array);
   if ($featured_products_category_id_list == '') {
     $featured_products_category_id_list .= $featured_products_category_id;
   } else {
     $featured_products_category_id_list .= ',' . $featured_products_category_id;
   }
   $featured_products_query = tep_db_query("select distinct p.products_id, p.products_image, p.products_tax_class_id, s.status as specstat, s.specials_new_products_price, p.products_price 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 where c.parent_id = '" . $featured_products_category_id . "' and p.products_status = '1' and f.status = '1' order by rand() DESC limit " . MAX_DISPLAY_FEATURED_PRODUCTS);
}

 $row = 0;
 $col = 0; 
 $num = 0;
 while ($featured_products = tep_db_fetch_array($featured_products_query)) {
   $num ++; if ($num == 1) { new contentBoxHeading($info_box_contents); }
   $featured_products['products_name'] = tep_get_products_name($featured_products['products_id']);
echo '<div id="protoflow">';
   if($featured_products['specstat']) {
//      $info_box_contents[$row][$col] = array('align' => 'center',
//                                           'params' => 'class="smallText" width="33%" valign="top"',
				        echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $featured_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $featured_products['products_image'], $featured_products['products_name'] ." ". $currencies->display_price($featured_products['products_price'], tep_get_tax_rate($featured_products['products_tax_class_id'])), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';
//                                           $currencies->display_price($featured_products['specials_new_products_price'], tep_get_tax_rate($featured_products['products_tax_class_id'])) . '</span>');
   } else {
//      $info_box_contents[$row][$col] = array('align' => 'center',
//                                           'params' => 'class="smallText" width="33%" valign="top"',
				        echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $featured_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $featured_products['products_image'], $featured_products['products_name'] ." ". $currencies->display_price($featured_products['products_price'], tep_get_tax_rate($featured_products['products_tax_class_id'])), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';
   }    
   $col ++;
   if ($col > 2) {
     $col = 0;
     $row ++;
   }
 }
echo '</div>';
 if($num) {

     new contentBox($info_box_contents);
 }
} else // If it's disabled, then include the original New Products box
{
  // include (DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); // disable for dont show if desactive the feature module
}
?>
<!-- featured_products_eof //-->

Link to comment
Share on other sites

I will take a look at it... what do you mean by "stray link" do you have a demo page I could look at to see what you mean?

 

thanks Chris.

 

Scott

Link to comment
Share on other sites

Chris,

 

in the if, else statement - the 1st one doesn't take into account specials [specstat] - don't know if that is effecting things, the original code had some extra code for specials...

 

also, in the new products file, there was a duplication of:

 

  $info_box_contents = array();

 

right after the first protoflow div - is this necessary in the featured module? if so, i thought it might look something like this:

 

  $info_box_contents = array();

 if ( (!isset($featured_products_category_id)) || ($featured_products_category_id == '0') ) {
$info_box_contents[] = array('align' => 'left', 'text' => '<a class="headerNavigation" href="' . tep_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . TABLE_HEADING_FEATURED_PRODUCTS . '</a>');

echo '<div id="protoflow">';

 $info_box_contents = array();

 if ( (!isset($featured_products_category_id)) || ($featured_products_category_id == '0') ) {
$info_box_contents[] = array('align' => 'left', 'text' => '<a class="headerNavigation" href="' . tep_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . TABLE_HEADING_FEATURED_PRODUCTS . '</a>');

 list($usec, $sec) = explode(' ', microtime());
 srand( (float) $sec + ((float) $usec * 100000) );
 $mtm= rand();

$featured_products_query = tep_db_query("select p.products_id, p.products_image, p.products_tax_class_id, s.status as specstat, s.specials_new_products_price, p.products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id left join " . TABLE_FEATURED . " f on p.products_id = f.products_id where p.products_status = '1' and f.status = '1' order by rand($mtm) DESC limit " . MAX_DISPLAY_FEATURED_PRODUCTS);
 } else {

$info_box_contents[] = array('align' => 'left', 'text' => sprintf(TABLE_HEADING_FEATURED_PRODUCTS_CATEGORY, $cat_name));

echo '<div id="protoflow">';

$info_box_contents = array();

$info_box_contents[] = array('align' => 'left', 'text' => sprintf(TABLE_HEADING_FEATURED_PRODUCTS_CATEGORY, $cat_name));

 

let me know your thoughts on this...

 

Scott

Edited by olsonsp4c
Link to comment
Share on other sites

I started with the features.php found in the Featured Products 159 to be used with STS 453 download. Then added the <div> statements for the protoFlow.js script and commented out the rest of the 'table' building (the two lines above the echo statement) So where ever the specials code comes from it wasn't in the base I started with. That also means the duplicated

  $info_box_contents = array();

was there to begin with.

 

it is a live site but you can see it at http://www.fantasyfestival.com/catalog3/

 

Chris,

 

in the if, else statement - the 1st one doesn't take into account specials [specstat] - don't know if that is effecting things, the original code had some extra code for specials...

 

also, in the new products file, there was a duplication of:

 

  $info_box_contents = array();

 

right after the first protoflow div - is this necessary in the featured module? if so, i thought it might look something like this:

 

  $info_box_contents = array();

 if ( (!isset($featured_products_category_id)) || ($featured_products_category_id == '0') ) {
$info_box_contents[] = array('align' => 'left', 'text' => '<a class="headerNavigation" href="' . tep_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . TABLE_HEADING_FEATURED_PRODUCTS . '</a>');

echo '<div id="protoflow">';

 $info_box_contents = array();

 if ( (!isset($featured_products_category_id)) || ($featured_products_category_id == '0') ) {
$info_box_contents[] = array('align' => 'left', 'text' => '<a class="headerNavigation" href="' . tep_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . TABLE_HEADING_FEATURED_PRODUCTS . '</a>');

 list($usec, $sec) = explode(' ', microtime());
 srand( (float) $sec + ((float) $usec * 100000) );
 $mtm= rand();

$featured_products_query = tep_db_query("select p.products_id, p.products_image, p.products_tax_class_id, s.status as specstat, s.specials_new_products_price, p.products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id left join " . TABLE_FEATURED . " f on p.products_id = f.products_id where p.products_status = '1' and f.status = '1' order by rand($mtm) DESC limit " . MAX_DISPLAY_FEATURED_PRODUCTS);
 } else {

$info_box_contents[] = array('align' => 'left', 'text' => sprintf(TABLE_HEADING_FEATURED_PRODUCTS_CATEGORY, $cat_name));

echo '<div id="protoflow">';

$info_box_contents = array();

$info_box_contents[] = array('align' => 'left', 'text' => sprintf(TABLE_HEADING_FEATURED_PRODUCTS_CATEGORY, $cat_name));

 

let me know your thoughts on this...

 

Scott

Link to comment
Share on other sites

Here's the Featured Products 1.5.9 alternate with specials code:

 

	if($featured_products['specstat']) {
  $info_box_contents[$row][$col] = array('align' => 'center',
									   'params' => 'class="smallText" width="33%" valign="top"',
									   'text' => '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $featured_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $featured_products['products_image'], $featured_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $featured_products['products_id']) . '">' . $featured_products['products_name'] . '</a><br><s>' . $currencies->display_price($featured_products['products_price'], tep_get_tax_rate($featured_products['products_tax_class_id'])) . '</s><br><span class="productSpecialPrice">' . 
									   $currencies->display_price($featured_products['specials_new_products_price'], tep_get_tax_rate($featured_products['products_tax_class_id'])) . '</span>');
} else {
  $info_box_contents[$row][$col] = array('align' => 'center',
									   'params' => 'class="smallText" width="33%" valign="top"',
									   'text' => '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $featured_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $featured_products['products_image'], $featured_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $featured_products['products_id']) . '">' . $featured_products['products_name'] . '</a><br>' . $currencies->display_price($featured_products['products_price'], tep_get_tax_rate($featured_products['products_tax_class_id'])));
}

 

Scott

Link to comment
Share on other sites

Here is a working quick hack of the features.php without the STS stuff, it works, see http://paragonparanaormal.com/catalog/" target="_blank"> http://paragonparanaormal.com/catalog/ the CSS is still screwy color wise I'm working on it but the features flow works.

 

<?php
/*
 osCommerce, Open Source E-Commerce Solutions
 [url="http://www.oscommerce.com"]http://www.oscommerce.com[/url]

 Copyright © 2002 osCommerce

 Released under the GNU General Public License

 Featured Products V1.1
 Displays a list of featured products, selected from admin
 For use as an Infobox instead of the "New Products" Infobox  
*/
?>
<!-- featured_products //-->
<?php
if(FEATURED_PRODUCTS_DISPLAY == 'true')
{
 $featured_products_category_id = $new_products_category_id;
 $cat_name_query = tep_db_query("select categories_name from " . TABLE_CATEGORIES_DESCRIPTION . " where categories_id = '" . $featured_products_category_id . "' limit 1");
 $cat_name_fetch = tep_db_fetch_array($cat_name_query);
 $cat_name = $cat_name_fetch['categories_name'];
 $info_box_contents = array();

 if ( (!isset($featured_products_category_id)) || ($featured_products_category_id == '0') ) {
   $info_box_contents[] = array('align' => 'left', 'text' => '<a class="headerNavigation" href="' . tep_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . TABLE_HEADING_FEATURED_PRODUCTS . '</a>');

 list($usec, $sec) = explode(' ', microtime());
 srand( (float) $sec + ((float) $usec * 100000) );
 $mtm= rand();

   $featured_products_query = tep_db_query("select p.products_id, p.products_image, p.products_tax_class_id, s.status as specstat, s.specials_new_products_price, p.products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s on p.products_id = s.products_id left join " . TABLE_FEATURED . " f on p.products_id = f.products_id where p.products_status = '1' and f.status = '1' order by rand($mtm) DESC limit " . MAX_DISPLAY_FEATURED_PRODUCTS);
 } else {
   $info_box_contents[] = array('align' => 'left', 'text' => sprintf(TABLE_HEADING_FEATURED_PRODUCTS_CATEGORY, $cat_name));
   $subcategories_array = array();
   tep_get_subcategories($subcategories_array, $featured_products_category_id);
   $featured_products_category_id_list = tep_array_values_to_string($subcategories_array);
   if ($featured_products_category_id_list == '') {
     $featured_products_category_id_list .= $featured_products_category_id;
   } else {
     $featured_products_category_id_list .= ',' . $featured_products_category_id;
   }
   $featured_products_query = tep_db_query("select distinct p.products_id, p.products_image, p.products_tax_class_id, s.status as specstat, s.specials_new_products_price, p.products_price 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 where c.parent_id = '" . $featured_products_category_id . "' and p.products_status = '1' and f.status = '1' order by rand() DESC limit " . MAX_DISPLAY_FEATURED_PRODUCTS);
}

 $row = 0;
 $col = 0; 
 $num = 1;
new contentBoxHeading($info_box_contents);
echo '<div id="protoflow">';
 while ($featured_products = tep_db_fetch_array($featured_products_query)) {
   $num ++; 
   $featured_products['products_name'] = tep_get_products_name($featured_products['products_id']);
   if($featured_products['specstat']) {
			echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $featured_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $featured_products['products_image'], $featured_products['products_name'] ." ". $currencies->display_price($featured_products['specials_new_products_price'], tep_get_tax_rate($featured_products['products_tax_class_id'])), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';
   } else {
			echo '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $featured_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $featured_products['products_image'], $featured_products['products_name'] ." ". $currencies->display_price($featured_products['products_price'], tep_get_tax_rate($featured_products['products_tax_class_id'])), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';
   }    
   $col ++;
   if ($col > 2) {
     $col = 0;
     $row ++;
   }
 }
echo '</div>';
 if($num) {

     new contentBox($info_box_contents);
 }
} else // If it's disabled, then include the original New Products box
{
  include (DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); // disable for dont show if desactive the feature module
}
?>
<!-- featured_products_eof //-->

Link to comment
Share on other sites

  • 1 month later...

hello

Here is a working quick hack of the features.php without the STS stuff, it works, see http://paragonparanaormal.com/catalog/" target="_blank"> http://paragonparanaormal.com/catalog/ the CSS is still screwy color wise I'm working on it but the features flow works.

 

it s the code to put for the central modules in catalog\includes\modules\featured.php ?

 

i tried it and only thing i got i under the slider the word undefined

 

with this message :

Notice: Undefined variable: new_products_category_id in v:\easyphp\www\ms2fr\catalog\includes\modules\featured.php on line 17

 

line 17 is :

$featured_products_category_id = $new_products_category_id;

 

does any one got any idea how i can change the original query to have all products not only new one since i got only 12 products in my shop:

 

 $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 where p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" . (int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);

MS2

Link to comment
Share on other sites

  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

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...