Jump to content
dev osCommerce
Forum
  • Checkout
  • Login
  • Contact Us
  • Get in touch

osCommerce

The e-commerce.

New Demo
Our Partners

Also_Purchased Infobox and QScroller

gilo_m

By gilo_m
in General Support

Recommended Posts

gilo_m

gilo_m

Posted
Posted

I am trying to re-write the also_purchased.php module to incorporate this excellent mootools function called QScroller. (Using second example with images and text.)

 

It all looks fairly simple but for some reason I can not get it work properly - perhaps someone here can shed some light on my failings!

 

Within catalog/includes/modules/also_purchased.php is this WHILE statement.

 

<!-- also_purchased_products //-->
  $row = 0;
  $col = 0;
  $info_box_contents = array();
  while ($orders = tep_db_fetch_array($orders_query)) {
	$orders['products_name'] = tep_get_products_name($orders['products_id']);
	$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=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a>');

	$col ++;
	if ($col > 2) {
	  $col = 0;
	  $row ++;
	}
  }

  new contentBox($info_box_contents);

 

I am then trying to wrap the required <div>s around the output. I have editted the 'text' => line to read

 

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

 

and added <div class="hide"> at the top of the module.

 

Once I have put the javascript links in to control the scroller in a table I now have a very smart also_purchased module which scrolls through the products in a standard row height without wasting all of the screen space.

 

However, the problem is I need to get three of them together within the qslide2 class. Basically the html output looks like this

 

<div class="hide">
<tr>
<td>
<div class="qslide2"> IMAGE; PRICE; NAME </div>
<div class="qslide2"> IMAGE; PRICE; NAME </div>
<div class="qslide2"> IMAGE; PRICE; NAME </div>
</td>
</tr>

 

Whereas I need it to look like

 

<div class="hide">
<tr>
<td>
<div class="qslide2"> IMAGE; PRICE; NAME 
IMAGE; PRICE; NAME 
IMAGE; PRICE; NAME </div>
</td>
</tr>

 

Everything I have tried does not work - can anyone help me out?

 

Anyone here got any ideas ???

steve_s

steve_s

Posted
Posted
I am trying to re-write the also_purchased.php module to incorporate this excellent mootools function called QScroller. (Using second example with images and text.)

 

It all looks fairly simple but for some reason I can not get it work properly - perhaps someone here can shed some light on my failings!

 

Within catalog/includes/modules/also_purchased.php is this WHILE statement.

 

<!-- also_purchased_products //-->
  $row = 0;
  $col = 0;
  $info_box_contents = array();
  while ($orders = tep_db_fetch_array($orders_query)) {
	$orders['products_name'] = tep_get_products_name($orders['products_id']);
	$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=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a>');

	$col ++;
	if ($col > 2) {
	  $col = 0;
	  $row ++;
	}
  }

  new contentBox($info_box_contents);

 

I am then trying to wrap the required <div>s around the output. I have editted the 'text' => line to read

 

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

 

and added <div class="hide"> at the top of the module.

 

Once I have put the javascript links in to control the scroller in a table I now have a very smart also_purchased module which scrolls through the products in a standard row height without wasting all of the screen space.

 

However, the problem is I need to get three of them together within the qslide2 class. Basically the html output looks like this

 

<div class="hide">
<tr>
<td>
<div class="qslide2"> IMAGE; PRICE; NAME </div>
<div class="qslide2"> IMAGE; PRICE; NAME </div>
<div class="qslide2"> IMAGE; PRICE; NAME </div>
</td>
</tr>

 

Whereas I need it to look like

 

<div class="hide">
<tr>
<td>
<div class="qslide2"> IMAGE; PRICE; NAME 
IMAGE; PRICE; NAME 
IMAGE; PRICE; NAME </div>
</td>
</tr>

 

Everything I have tried does not work - can anyone help me out?

 

Anyone here got any ideas ???

try this 

<!-- also_purchased_products //-->
  $row = 0;
  $col = 0;

echo '<div class="qslide2">';

  $info_box_contents = array();
  while ($orders = tep_db_fetch_array($orders_query)) {
	$orders['products_name'] = tep_get_products_name($orders['products_id']);
	$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=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a>');

	$col ++;
	if ($col > 2) {
	  $col = 0;
	  $row ++;
	}
  }

  new contentBox($info_box_contents);

echo '</div>';

gilo_m

gilo_m

Posted
  • Author
Posted

Steve,

 

Thanks for your suggestion.

 

Unfortunately, I have tried this code already!

 

I have made a bit of progress ... I have added

 

if ($col > 2) {
	  $info_box_contents[$row][$col] = array('text' => '</div>');
	  $col = 0;
	  $row ++;
	}

 

which closes the </div> statement but I can not work out how to get the <div class="qslide2"> into the start of each ROW rather than every CELL.

 

Thanks again for helping,

 

Regards

 

Giles

steve_s

steve_s

Posted
Posted

lets try this after 

	  $row = 0;
  $col = 0;

add

$info_box_contents[$row][$col] = array('text' => '<div class="qslide2">');

 

after 

		  $row ++;

add

$info_box_contents[$row][$col] = array('text' => '<div class="qslide2">');

gilo_m

gilo_m

Posted
  • Author
Posted

Thanks again for your post Steve - unfortunately that didn't work either!!

 

Although after a lot of fiddling around I have actually got it to work - your idea of putting the code in [$col][$row] bit was the inspiration.

 

Here is the solution in case anyone else wants to do this.

 

<div class="hide">
<?php
  $row = 0;
  $col = 0;

  $info_box_contents = array();

	while ($orders = tep_db_fetch_array($orders_query)) {

	$orders['products_name'] = tep_get_products_name($orders['products_id']);

	  $info_box_contents[$row][0] = array('align' => 'center',
										   'params' => 'class="smallText" width="33%" valign="top"',
										   'text' => '<div class="qslide2"><table border="0" width="100%"><tr><td><center><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a><br><div style=" font-family: Verdana, Arial, sans-serif; font-size:7pt;">' . $products_price . '<br></div><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $orders['products_id'], 'NONSSL') . '">' . tep_image_button('button_buy_now.gif', '' . $orders['products_name'] . '') . '</a></center>');		

	$info_box_contents[$row][$col] = array('align' => 'center',
										   'params' => 'class="smallText" width="33%" valign="top"',
										   'text' => '<center><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a><br>' . $products_price . '<br><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $orders['products_id'], 'NONSSL') . '">' . tep_image_button('button_buy_now.gif', '' . $orders['products_name'] . '') . '</a></center>');

	$info_box_contents[$row][3] = array('text' => '</tr></table></div>');

	$col ++;

	if ($col > 2) {
	  $col = 0;
	  $row ++;
	}
  }

  new contentBox($info_box_contents);
?>
<!-- also_purchased_products_eof //-->
</div>

I have had to hard code some styles in for site due to conflicting styles. So you will need to remove this.

 

Hope this helps someone.

 

Regards,

 

Gilo_m

gilo_m

gilo_m

Posted
  • Author
Posted

Spoke too soon!!

 

Whilst this works if you have also_puchased which is divisible by 3 it doesn't work for all others!!

 

I basically think I need to fill the blank spaces.

 

Back to the drawing board!

 

Gilo_m

gilo_m

gilo_m

Posted
  • Author
Posted

Okay - after a complete rewrite - I think I have it working.

 

Code below for anyone else who wants to do this. I have a couple of other mods in here so keep the db_query the same as the one you have your site.

 

Regards,

 

Gilo

 

  if (isset($HTTP_GET_VARS['products_id'])) {
$orders_query = tep_db_query("select p.products_id, p.products_image, p.products_price from " . TABLE_ORDERS_PRODUCTS . " opa, " . TABLE_ORDERS_PRODUCTS . " opb, " . TABLE_ORDERS . " o, " . TABLE_PRODUCTS . " p where opa.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and opa.orders_id = opb.orders_id and opb.products_id != '" . (int)$HTTP_GET_VARS['products_id'] . "' and opb.products_id = p.products_id and opb.orders_id = o.orders_id and p.products_status = '1' group by p.products_id order by o.date_purchased desc limit " . MAX_DISPLAY_ALSO_PURCHASED);
$num_products_ordered = tep_db_num_rows($orders_query);
$total_products = tep_db_num_rows($orders_query);
$div3 = round($total_products / 3 , 2);
$div3main = floor($div3);
$div3check = $div3 - $div3main;
$div3rows = $div3 - $div3check;
if ($num_products_ordered >= MIN_DISPLAY_ALSO_PURCHASED) {
?>
<!-- also_purchased_products //-->



<?php

echo tep_draw_separator('pixel_trans.gif', '100%', '10');

  $info_box_contents = array();
  $info_box_contents[] = array('text' => TEXT_ALSO_PURCHASED_PRODUCTS);

  new contentBoxHeading($info_box_contents);
?>
<table width="100%" class="productmopics">
<tr>
<td>
<table width="100%" border="0">
<tr>
	<td>
		<?php if ($total_products > 3) { ?>
		<div class="qscroller2-nav">
		<a id="go-prev" href="java script:void(0)"/><img class="qscroller2-nav" src="images/go-prev-off.gif" /></a>
		</div>
		<?php } else { ?>
		<div class="qscroller2-nav-hide">
		<a id="go-prev" href="java script:void(0)"/><img class="qscroller2-nav" src="images/go-prev-off.gif" /></a>
		</div>
		<?php } ?>
	</td>

	<td>
		<div id="qscroller2" class="qscroller"></div>
	</td>

	<td>
		<?php if ($total_products > 3) { ?>
		<div class="qscroller2-nav">
		<a id="go-next" class="go-next" href="java script:void(0)"/><img class="qscroller2-nav" src="images/go-next-off.gif" /></a>
		</div>
		<?php } else { ?>
		<div class="qscroller2-nav-hide">
		<a id="go-next" href="java script:void(0)"/><img class="qscroller2-nav" src="images/go-next-off.gif.gif" /></a>
		</div>
		<?php } ?>
	</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="hide">
<?php
  $row = 0;
  $col = 0;

  $info_box_contents = array();

	while ($orders = tep_db_fetch_array($orders_query)) {

	$orders['products_name'] = tep_get_products_name($orders['products_id']);

	if  (($div3rows <> $row) && ($col == 0)) {

	  $info_box_contents[$row][$col] = array('align' => 'center',
										   'params' => 'class="smallText" width="33%" valign="top"',
										   'text' => '<div class="qslide2"><table border="0" width="100%"><tr><td><center><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a><br><div style=" font-family: Verdana, Arial, sans-serif; font-size:7pt;">' . $products_price . '<br></div><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $orders['products_id'], 'NONSSL') . '">' . tep_image_button('button_buy_now.gif', '' . $orders['products_name'] . '') . '</a></center>');		

	}

	if ($col == 1) {

	$info_box_contents[$row][$col] = array('align' => 'center',
										   'params' => 'class="smallText" width="33%" valign="top"',
										   'text' => '<center><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a><br>' . $products_price  . ';' . $div3check . '<br><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $orders['products_id'], 'NONSSL') . '">' . tep_image_button('button_buy_now.gif', '' . $orders['products_name'] . '') . '</a></center>');

	}

	if ($col == 2) {

	$info_box_contents[$row][$col] = array('align' => 'center',
										   'params' => 'class="smallText" width="33%" valign="top"',
										   'text' => '<center><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a><br>' . $products_price . ';' . $div3check . '<br><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $orders['products_id'], 'NONSSL') . '">' . tep_image_button('button_buy_now.gif', '' . $orders['products_name'] . '') . '</a></center></table></div>');

	}

// Check to seee if this is the final row
	if (($row == $div3rows) && ($div3check <> 0)) 
		{ 
		if ($div3check < 0.5) {
		//This is the last row and needs two spaces
		$info_box_contents[$row][$col] = array('align' => 'center',
										   'params' => 'class="smallText" width="33%" valign="top"',
										   'text' => '<div class="qslide2"><table border="0" width="100%"><tr><td><center><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a><br><div style=" font-family: Verdana, Arial, sans-serif; font-size:7pt;">' . $products_price . ';' . $div3check . '<br></div><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $orders['products_id'], 'NONSSL') . '">' . tep_image_button('button_buy_now.gif', '' . $orders['products_name'] . '') . '</a></center><td width="33%"> </td><td width="33%"> </td></table></div>'); 

		}

		elseif (($div3check > 0.5) && ($col == 0))

		{
		//This is the last row and needs one space
		$info_box_contents[$row][$col] = array('align' => 'center',
										   'params' => 'class="smallText" width="33%" valign="top"',
										   'text' => '<div class="qslide2"><table border="0" width="100%"><tr><td><center><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a><br><div style=" font-family: Verdana, Arial, sans-serif; font-size:7pt;">' . $products_price . ';2;' . $div3check . '<br></div><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $orders['products_id'], 'NONSSL') . '">' . tep_image_button('button_buy_now.gif', '' . $orders['products_name'] . '') . '</a></center>'); 

		}

		elseif (($div3check > 0.5) && ($col == 1))

		{
		//This is the last row and needs one space
		$info_box_contents[$row][$col] = array('align' => 'center',
										   'params' => 'class="smallText" width="33%" valign="top"',
										   'text' => '<center><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . tep_image(DIR_WS_IMAGES . DYNAMIC_MOPICS_THUMBS_DIR . $orders['products_image'], $orders['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $orders['products_id']) . '">' . $orders['products_name'] . '</a><br><div style=" font-family: Verdana, Arial, sans-serif; font-size:7pt;">' . $products_price . ';2;' . $div3check . '<br></div><a href="' . tep_href_link(FILENAME_DEFAULT, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $orders['products_id'], 'NONSSL') . '">' . tep_image_button('button_buy_now.gif', '' . $orders['products_name'] . '') . '</a></center><td width="33%"> </td></tr></table></div>'); 

		}

		}

	$col ++;

	if ($col > 2) {
	  $col = 0;
	  $row ++;
	}
  }
//End of last row checking
}
  new contentBox($info_box_contents);
?>
<!-- also_purchased_products_eof //-->
</div>
<?php
}

?>


<script type="text/javascript">
<!--
window.addEvent('domready', function() {
var opt = {
slides: 'qslide2',
duration: 1500,
buttons: {next:'go-next',prev:'go-prev'},
transition: Fx.Transitions.Quint.easeOut
 }
 var scroller = new QScroller('qscroller2',opt);
 scroller.load();
});
//-->
</script>

Archived

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

Go to topic listing
×
×
  • Create New...