Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Ajax Buy Now


azer

Recommended Posts

The author is working on a revised version now from what I hear. I think we just need to be patient.

 

I understand that. As the author of Recover Carts (and originally scarts). I also understand that when you release something to the community that initially you have to plan to do a lot of hand holding and support so that people can get it installed and operational.

 

For example, I have added a small piece to my osc that allows you to handle shipping selection at a finer level. In this case the mod supports a check to see if the zip code entered is in a table, and if so it changes the shipping module (this is useful for those of us who use UPS or FedEx for shipping in the lower-48, but use USPS for International, Alaska, Hawaii, PR and APO/FPO). Now before I release the code I have to make sure it works across multiple versions of modded stores (done) that it's transportable across OSC, oscMAX, CRELoaded (POS!), etc. (done) that the directions are clear and concise (working on it) and that I have the time to support the support thread for the first 30 days after it's release (the hardest part). Now, if I'm willing to do that, I don't feel it's too much to ask that others provide that level of support as well.

 

Not to rant, but I set my expections based on what I do. If you think my expectations are a bit high, well aren't you glad that I set my goals high when I add a mod? :-)

Link to comment
Share on other sites

Hello all...

I have this contribution working on a modded OSC site, using a custom theme, no problems.

I have made a minor modification to the contribution that might be useful...

NOTE: I do NOT have the "zoom" effect... can't help you with that one....

 

Follow all instructions from original readme EXCEPT: #3. Edit includes/column_right.php (etc)

then,

similar to author's previous suggestion, but no need to rename or modify shopping cart.php:

and works with modified shopping carts:

 

in your TEMPLATE, main_page.tpl.php

just before where your shopping cart goes add:

<!-- AJAX Addto shopping_cart - Begin-->

<script language="JavaScript" src="includes/ajax_sc.js"></script>

<!-- AJAX Addto shopping_cart - End-->

 

FINALLY: the part that almost got me :)

make sure your checkout has: Display Cart After Adding Product=FALSE

or it will not really work.

 

works great and I love it, minimizes page loads

thanks for the contribution

Edited by wheeloftime
Link to comment
Share on other sites

I have instaled the mod and its working. But I'm using another layout/template than the orginal OsCommerce theme. How do I mod the ajax buy now mod to fit with this? So I dont get the frame around the shopingcart when I click buy now.

Link to comment
Share on other sites

2.0 seems to be working. I take it the transition (flying image of the product) effect from the demo site is NOT included in the mod as all that shows when loading the cart is a "loading clock" and then a "check mark" when completed (both associated to the cursor position).

Link to comment
Share on other sites

on the reference site (http://www.netso.ru) the /includes/woutreload.js contains:

 

function Dump(d,l) {
if (l == null) l = 1;
var s = '';
if (typeof(d) == "object") {
	s += typeof(d) + " {\n";
	for (var k in d) {
		for (var i=0; i<l; i++) s += "  ";
		s += k+": " + Dump(d[k],l+1);
	}
	for (var i=0; i<l-1; i++) s += "  ";
	s += "}\n"
} else {
	s += "" + d + "\n";
}
return s;
}

function getBounds(element) {
 var left = element.offsetLeft;
 var top = element.offsetTop;
 for (var parent = element.offsetParent; parent; parent = parent.offsetParent) {
left += parent.offsetLeft;
top += parent.offsetTop;
 }
 return {left: left, top: top, width: element.offsetWidth, height: element.offsetHeight};
}

array_Obj=[];

function fly (obj) { // ?????? "??? ?????"
 with (this) {
center_target_left = center_target_top = 0;
finish_fly = null;

fly_div = document.getElementById('flyDiv');
fly_div.style.display = 'none';
fly_div.innerHTML = obj.innerHTML;
bounds_FLY = getBounds(obj);
fly_div.style.width = bounds_FLY.width + 'px';
fly_div.style.height = bounds_FLY.height + 'px';
 }
}

fly.prototype.target = function (obj_targ) { // ?????? "???? ??????"
 var bounds_target = getBounds(obj_targ);
 this.center_target_left = bounds_target.left + bounds_target.width/2;
 this.center_target_top  = bounds_target.top + bounds_target.height/2;
}

fly.prototype.calc_way = function ( num_step, time_fly ) {  //???-?? ?????, ????? ????????
 this.num_step = num_step;
 this.period = Math.ceil( time_fly / num_step );
}

fly.prototype.fly_now = function () {  //????? ????
 if (!this.step) {
this.step = 1;
this.id = array_Obj.length;
array_Obj[this.id]=this;
 }

 with (this) {
if ( step > num_step ) {
  with (fly_div.style) {
	display = 'none';
	top = left = 0;
  }
  if (finish_fly) finish_fly();
  step = 0;
  delete array_Obj[id];
  return;
}
fly_div.style.top = bounds_FLY.top - Math.ceil ( ( bounds_FLY.top - (center_target_top - bounds_FLY.height/2))/num_step * step ); + 'px';
fly_div.style.left = bounds_FLY.left + Math.ceil ( ((center_target_left - bounds_FLY.width/2) - bounds_FLY.left)/num_step * step ) + 'px';

if( step == 1 ) {
  fly_div.style.display = '';
}
step++;
 }
 timerID = setTimeout( "array_Obj[" + this.id + "].fly_now()", this.period);
}

 

This is the absolutly cool flying image code verses the "loading" code that is included in the code in the contribution.

 

Note the difference in the doBuyGetNow

 

Cool code:

function doBuyNowGet(param, pId) {
 document.getElementById('loading_'+pId).style.visibility = "visible";
 var reqAddCart = new Subsys_JsHttpRequest_Js();
 reqAddCart.onreadystatechange = function() {
if (reqAddCart.readyState == 4) {
  var BuyNowFly = new fly( document.getElementById('fly_'+pId) );
  BuyNowFly.target( document.getElementById('divShoppingCard') );
  BuyNowFly.calc_way( 15, 50 );
  BuyNowFly.finish_fly = function() {
	document.getElementById('divShoppingCard').innerHTML = '<table width="100%">'+(reqAddCart.responseText||'')+'</table>';
  }
  document.getElementById('loading_'+pId).style.visibility = "hidden";
  BuyNowFly.fly_now();
}
 }
 reqAddCart.caching = false;
 reqAddCart.open('GET', 'ajax_shopping_cart.php?'+param, true);
 reqAddCart.send(null);
}

 

contrib code

function doBuyNowGet( link ) {
 showLoading();
 var reqAddCart = new Subsys_JsHttpRequest_Js();
 reqAddCart.onreadystatechange = function() {
if (reqAddCart.readyState == 4) {
  if (reqAddCart.responseJS) {
	document.location.href = reqAddCart.responseJS.ajax_redirect;
	return;
  }
  else {
	document.getElementById('divShoppingCard').innerHTML = '<table border="0" width="100%" cellspacing="0" cellpadding="2">'+(reqAddCart.responseText||'')+'</table>';
	hideLoading();
	if ( SHOW_ADDED ) {
	  showOk();
	  timerID = setTimeout( "addHandler(document, \'mousemove\', hideOk)", 500);
	}
  }
}
 }
 reqAddCart.caching = false;
 reqAddCart.open('GET', link, true);
 reqAddCart.send(null);
}

 

I have attempted to swap the two functions out, but you can see that when calling the functions there are different parameters passed in. This can be seen in the difference in the calls to the function as well

 

cool call

	<td align="right" class="productListing-data" style="white-space: nowrap;"><a href="http://www.netso.ru/product_info.php?cPath=1_68&sort=3a&action=buy_now&products_id=1186" onclick="doBuyNowGet('cPath=1_68&sort=3a&action=buy_now&products_id=1186', 1186); return false;"><img src="images/loading.gif" border="0" alt="" width="16" height="22" align="absmiddle" id="loading_1186" style="visibility: hidden;"><b>положить в корзину Alpine CDE-9846R</b></a> </td>

 

contrib call

	<td align="center" class="productListing-data"> <a href="http://osctb.biasolutions.com/product_info.php?cPath=1&products_id=1"><img src="imagemagic.php?img=images/CTU3030_big.gif&w=100&h=195&page=" width="100" height="195" border="0" alt="Yacker Tracker - on BIA" title="Yacker Tracker - on BIA"></a> <br> <a href="http://osctb.biasolutions.com/product_info.php?cPath=1&products_id=1">Yacker Tracker - on BIA</a> <br> $34.99 <br><a href="http://osctb.biasolutions.com/index.php?cPath=1&sort=2a&action=buy_now&products_id=1" onclick="doBuyNowGet('http://osctb.biasolutions.com/ajax_shopping_cart.php?cPath=1&sort=2a&action=buy_now&products_id=1'); return false;"><img src="includes/languages/english/images/buttons/button_buy_now.gif" border="0" alt="Buy Now" title="Buy Now"></a> </td>

 

Okay, I am not a javascript programmer in any way shape or form, so I'm looking for a little help here in integrating the "cool" image transfer over to the contrib as it is one heck of a nice way to indicate the product is placed in the cart. When I have attempted to hack at the contrib code to implement the "cool code" I break the application so that it pushes the page to the shopping cart display rather than just moving the item to the shopping cart.

Link to comment
Share on other sites

2 Tveitan:

As I have already told you previousely in our private mailing the reason of your problem is template Algozone. CSS for body can be defineded in the header.php. It is necessary to deliver these definitions into ajax_shopping_card.php. I'll try to help you in this problem very soon.

 

2 Met00:

The differences in cool code :) and code mod are only in the several of the visual confirmations that the product was put into the shopping cart.

Some idears of another visual confirmations: it can be done smthg like this: to move the shopping cart to the centre of the window, to change the style of the cart at the momemt of buing and so on. The function of the mod at that momemt is not changed.

If you like to make the "coo"l visual you need to solve the next questions:

 

1. To choose the item that will be moved into the shopping cart and to mark it with the unique ID

2. To deliver into doBuyNowGet() not only url but also this ID

3. In case of the positive answer from the server to organize the fly of this item into the cart. The prototype fly ( you have told me about it in your post) will help you in this.

Injoy!

 

P.S. Thanks for my wife for her help in writing the posts. :-"

Link to comment
Share on other sites

  • 2 weeks later...

1) the latest version works well.

2) changing the check after adding to a nice large visual is a good idea.

3) the latest version does NOT degrade well. ie: anyone using an earlier version of NS (7.2 or earlier) the buy now is disabled. Now that may only be 5% of your users, but that's still a large number of potential lost sales. I will most likely be writting a wrapper to decided which buy now button to post based in client version. If I do I'll post the changes and instructions here.

 

overall, it is a very nice piece of work.

Link to comment
Share on other sites

  • 2 weeks later...

Great contribution, Medreces.

 

It works very nice...except that I have a strange problem.

 

If I click in "Click to enlarge", I do not get the pop up window. Instead, the product gets added to the cart!

 

This problem only happens when I use IE.

This does *not* happen when I use Firefox (If I click in "Click to enlarge", I get the pop up window...)

 

Apart from that, everything seems ok, no matter if I use IE or Firefox. Adding to the cart works pretty well.

 

Thanks in advance.

 

PD I have also installed UltraPics, PWA, login ala amazon and CSS buttons.

Link to comment
Share on other sites

Lemot, thank you for your message!

 

Unfortunately I can't get the same problem on my sites.

Could you please show the HTML- code of the page with the problem or give me please the URL on the site with this problem.

 

Waiting for your answer

Edited by Medreces
Link to comment
Share on other sites

Lemot, thank you for your message!

 

Unfortunately I can't get the same problem on my sites.

Could you please show the HTML- code of the page with the problem or give me please the URL on the site with this problem.

 

Waiting for your answer

 

Thanks for your help, Medreces.

 

I did test with your page, using both IE and Firefox, and it worked very well (btw, I love the flying product!!)

 

My test site is:

 

www.lemot.es/catalog

 

I?ve been trying to troubleshoot, and I think that for whatever reason the problem is here:

 

1) UltraPics makes this changes in catalog/product_info.php that affects the pop-up

 

<!-- // BOF MaxiDVD: Modified For Ultimate Images Pack! //-->

<?php

if ($product_info['products_image_med']!='') {

$new_image = $product_info['products_image_med'];

$image_width = MEDIUM_IMAGE_WIDTH;

$image_height = MEDIUM_IMAGE_HEIGHT;

} else {

$new_image = $product_info['products_image'];

$image_width = SMALL_IMAGE_WIDTH;

$image_height = SMALL_IMAGE_HEIGHT;}?>

<script language="javascript"><!--

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id'] . 'ℑ=0') . '\\\')">' . tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');

//--></script>

<noscript>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image_med']) . '">' . tep_image(DIR_WS_IMAGES . $new_image . 'ℑ=0', addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>

</noscript>

<!-- // EOF MaxiDVD: Modified For Ultimate Images Pack! //-->

 

 

2) "CSS Buttons" makes some changes in catalog/includes/functions/html_output.php, specifically tep_image_button

 

 

////

// Output a function button in the selected language

/* CSS Button changes

function tep_image_button($image, $alt = '', $parameters = '') {

global $language;

 

return tep_image(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image, $alt, '', '', $parameters);

}

*/

 

function tep_image_button($image, $alt = '', $parameters = '') {

global $language;

 

$image = '<div> <input type="submit" value="' .$alt . '" ></div>';

 

return $image;

 

}

 

The combined action of 1) + 2) + Ajax screws things up. If you click in "Click to enlarge" using IE, it adds the product to the cart instead of popping up the larger image. However, works ok in firefox

 

So far, I have been able to debug that if I do not use tep_image_button in the javascript part of the product_info.php code that I cited, it turns to work Ok again... (but I loose the "CSS button")

 

That is:

 

Instead of:

 

<script language="javascript"><!--

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id'] . 'ℑ=0') . '\\\')">' . tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');

//--></script>

 

Use:

 

<script language="javascript"><!--

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id'] . 'ℑ=0') . '\\\')">' . tep_image(DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE . '</a>'; ?>');

//--></script>

 

 

Although I feel comfortable with C, I am very new to PHP and javascript :-(

 

Thanks for any help!

 

Juan.

Link to comment
Share on other sites

lemot, contrib CSS Button creates not valid html-code. Because tag "input" is an element of form. Specifying the type of this element as "submit" you get as a result the button after pushing wich submit a form follows.

 

imho, dont use cotribut wich are not correspond standarts.

 

regards

Link to comment
Share on other sites

I?ve made a quick check, and the CSS Button original code is different, so I think it has to be my fault (my HTML knowledge is very limited). I guess I forgot I made those changes. Sorry.

 

The original CSS Button code is:

 

function tep_image_button($image, $alt = '', $parameters = '') {

global $language;

 

$image = '<div class="cssbutton"> ' . $alt . ' </div>';

 

return $image;

 

}

 

I?ll try with that and let you know.

Link to comment
Share on other sites

I?ve made a quick check, and the CSS Button original code is different, so I think it has to be my fault (my HTML knowledge is very limited). I guess I forgot I made those changes. Sorry.

 

The original CSS Button code is:

 

function tep_image_button($image, $alt = '', $parameters = '') {

global $language;

 

$image = '<div class="cssbutton"> ' . $alt . ' </div>';

 

return $image;

 

}

 

I?ll try with that and let you know.

 

Medreces, you are absolutelty right.

MY FAULT.

THE ORIGINAL CSS BUTTON + AJAX BUY NOW WORK PERFECTLY OK.

 

Sorry again for the wasted time, thank you again and regards,

 

Juan.

Edited by lemot
Link to comment
Share on other sites

  • 2 weeks later...
Roomeat and pixclinic,

which contributes do you use or plan to use?

 

if you want the full llist, more than 50 MODs are implemented on this site :-)

 

my only issue is the add to cart AJAX mod not working with a quantity filed in front of the add to cart button (the very simple hack provided in the official OSCOM users manual) +$quantity instaed of +1,m and just a hard coded input field in the product info page

Link to comment
Share on other sites

pixclinic,

which contributes do you use or plan to use?

 

among other things:

AJAX advanced search

SEO URLs

Randelia Metatags

CVV number

Commercial/residential address

Extra fields

checkout without account

product listing in columns

order edit

Xsell

HTML email invoice

batch print center

private messages

who's online enhancement

image magic

MO 6 pics

UPS USPS shipping preview

review approval system

EP

Products history

Link to comment
Share on other sites

All is simple! Being based on it contrib it is done following changes:

 

1) in catalog/includes/modules/product_listing.php

find:

case 'PRODUCT_LIST_BUY_NOW':
$lc_align = 'center';
$lc_text = '<a href="' . tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']) . '">' . tep_image_button('button_buy_now.gif', IMAGE_BUTTON_BUY_NOW) . '</a>';
break;
}

replace with:

case 'PRODUCT_LIST_BUY_NOW':
		$lc_align = 'center';
		if ( tep_has_product_attributes($listing['products_id']) ) {
		  $lc_text = '<a href="';
		  if (isset($HTTP_GET_VARS['manufacturers_id'])) {
			$lc_text .= tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']);
		  } else {
			$lc_text .= tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']);
		  }
		  $lc_text .= '">more info...</a> ';
		} else {
		  $lc_text = tep_draw_form( 'cart_quantity_' . $listing['products_id'], tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params(array('action')) . 'action=add_product&products_id=' . $listing['products_id']) ) . '<input type="hidden" name="products_id" value="' . $listing['products_id'] . '"><input type="text" name="quantity" value="1" maxlength="5" size="5"><br>' . tep_image_submit('button_in_cart.gif', IMAGE_BUTTON_IN_CART) . '</form>';
		}
		break;
	}

 

 

2) in catalog/includes/application_top.php

find:

$HTTP_POST_VARS['id']))+1

 

replace with:

$HTTP_POST_VARS['id']))+($HTTP_POST_VARS['quantity']>0?$HTTP_POST_VARS['quantity']:1)

 

Thanks brecz.

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.

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