Using lightbox to produce a Product Added to Cart Message

[MiggyB]

Hello,
I recently discovered Lightbox on this forum and am extremely pleased with the result. Since I don't use the bounce pages after clicking "Add to cart" I was wondering if it was possible to use the Lightbox to produce a message saying "Product Added to Cart" - in order to make it really really really clear to anyone using the web site!
Anyone tried this?

Mig

[TraceyG]

Hi,

I'm afraid that this is a bit out of the scope of Actinic to help with but maybe there is someone out there who uses lightbox who could help.

[fergusw]

This has been done on a couple of sites.

Gabriel, a forum member, implemented something like this as a demo - have a search for a thread about AJAX/Play.com

Another Actinic site and forum member also implements this succesfully:
www.stinkyinkshop.co.uk
I think their implementation is possibly what you are after.

[MiggyB]

Thanks for your suggestions. I had seen the thread and looked at both play and stinkyinkshop and neither is really what I am looking for.

The shopping cart summary does not seem to be enough for our customers which is why we are looking for something more "in-your-face!".

I saw a solution on yoox.com which I liked the look of and I am pretty sure it is lightbox based. So I figured out how to "lightbox" the add to cart button and it did produce a message saying it had added the product to the cart, but then didn't actually add the product! So I had a look to see if there was some way of delaying the lightbox code it until the shopping cart script had done its bit, but my skills stopped short of that code, which is why I posted.

Again any help appreciated!

[completerookie]

think you need to post the code that you've already tried with, then we can start to help with that

[MiggyB]

OK here it is from my addtocartlightbox layout:

<a href="productaddedimage.jpg" rel="lightbox">
<input type="submit" value="<Actinic:Variable Name="CartButtonText"/>" name="_<actinic:variable Name="ProductID"/>" class="form_button_add_to_cart" /></a>

I am actually using a modified lightbox script but for the purposes of figuring it out the basic lightbox script will do.

Hope this helps sheds some light!

[jont]

As you have wrapped the <input> with an hyperlink this will surely turn the button into a link to display lightbox only (as you 0have discovered) ... you really need to assign any code to the <input> tag although not sure if simply adding the rel= will work.

How about giving the <input> an id= and using some onClick javascript to perform what you are after.

[MiggyB]

Thanks John for your advice. This is definitely taking me to new areas of exploration, so just to make sure I am on the right track this is now what I am looking at.


<a href="productaddedimage.jpg" rel="lightbox" onClick="action.value='<Actinic:Variable Name="CartButtonText"/>';submit();name='_<actinic:variable Name="ProductID"/>'" />Add to cart</a>

It does not assign an ID... but is this necessary? Also with this code do I need to assign a name to the form?

[MiggyB]

OK, tested that and again it displays the lightbox but does not add to shopping cart... anyone with any ideas as to why? Anyone else tried to incorporate a submit action in an href link?

[fergusw]

If you are submitting a form using Javascript then you need to reference the form in the DOM that you wish to submit.

In your example you simply have Submit();

Try something like

document.form1.submit();

where your form has a name of form1 i.e. <form name="form1" ...>

[MiggyB]

Thanks for that Fergus. So I am trying to get the code to work without the rel="lightbox" for now and have the following code:

<a href="productaddedimage.jpg" onClick="document.atc.action.value='<Actinic:Variable Name="CartButtonText"/>';document.atc.name.value='_<actinic:variable Name="ProductID"/>;document.atc.submit()'" />add to cart</a>

And it goes to the image file but again does not add to the cart.


Are there other actinic variables which need to be listed? Is there something wrong with the above code? Is there an order to listing the variables?

[jont]

And I repeat......

As you have wrapped the <input> with an hyperlink this will surely turn the button into a link to display lightbox only (as you have discovered) ... you really need to assign any code to the <input> tag although not sure if simply adding the rel= will work.

[MiggyB]

Sorry John you are just being a tad too cryptic for me.

Do you mean assigning an id to the input tag and inserting this id in the hyperlink? Or forget the hyperlink and try to work it all in to an input tag?

[jont]

Sorry Mig,

by adding a basic <a> ... </a> around the input you are removing the normal input behaviour to turn it into a link .. hence as you are finding out the lightbox part is working (from the <a> ) but the add to cart function is not (from the input).

Remove the <a> ... </a> tags and code the <input> tag accordingly... I only dabble with scripting so no expert in how this would be done. I have done similar using CSS to hide and show elements on a webpage once the button is clicked and that was from coding the <input> tag (again with an id as Fergus points out) ... don't forget that each add to cart on the page requires a unique id (which is what may be causing issues with the code Fergus has supplied if you have more than one cart button using the same id)