Ajax/Jquery Add To Trolley Code

JavaScript
1

Hi

I am looking for some ajax/jquery code/examples/tutorials to do the following :

A list of items will be generated from a database/listed on a page and the user can add these items to a trolley on the fly by clicking an add to trolley icon, without a page refresh. Pretty simple I am sure but I’ve never done it before.

Any guidance would be appreciated.

Thanks

2

I’ll elaborate a bit more.

The items displayed will be wedding photographers. So users will click their favourite photographers from what they find in a list. After adding, then can then send an email out to all the selections they have made so the id’s will be stored in cookies or session variables…

3

There tends to be a lot of security troubles with shopping carts, so best results seem to be achieved by employing someone (not me) who knows what they’re doing in that regard.
See for example the video presentation of Principles of Security

4

Hi

Thanks for the response. I think you’ve confused what I am looking for.

A list of photographers will display, every photographer that shows will have a ‘Add To My Shortlist’ icon.

I want users to be able to click this icon, the state of the icon changes e.g colour or graphic and the ID of the photographer profile is then added to a cookie/session or array for later when the user wishes to email ever photographer selected

I am very new to this but I think it is basic jquery/ajax functionality. I am getting closer in my search but it’s knowing what to search for…

Thanks

5

It goes a little like this but I don’t have back-end stuff

$(“img.contact-checkbox”).click(function () {
var id = $(this).attr(“id”);
$.post(“/scripts/ajax/contact_ids_create_session.php”,{id_to_add:id, page: “results”, selectedDate: “10th of April, 2012”},function(data) {
$(‘.result’).html(data);
});
$(“#”+id+“added”).fadeIn(400);
});
$(“img.contact-checkbox-checked”).click(function () {
var id = $(this).attr(“id”).replace(‘added’, ‘’);
$.post(“/scripts/ajax/contact_ids_delete.php”,{idsToDelete:id});
$(“#”+id+“added”).fadeOut(400);
$(“#”+id+“shortlist”).fadeOut(700);
});

<img src=“/images/mini-icons/add-tog.jpg” class=“contact-checkbox” id=“100” alt=“Add Photographer To List”/>

6

The way this is normally developed is to get the backend side of things working first, using form fields and buttons to provide a basic interface. That helps to remove the front-end complexity so that the backend can be properly focused on.

Then once the backend is working correctly, ajax is used on the frontend to help improve the user experience. That’s only viable though once the backend is in place and working correctly.

7

The way this is normally developed is to get the backend side of things working first, using form fields and buttons to provide a basic interface. That helps to remove the front-end complexity so that the backend can be properly focused on.

Then once the backend is working correctly, ajax is used on the frontend to help improve the user experience. That’s only viable though once the backend is in place and working correctly.

It also ensures that your shopping process is more secure, and that those who don’t run javascript will be able to properly order things too.

8

Thanks

It’s all sorted now…