Forum Moderators: open

Message Too Old, No Replies

Bootstrap, JS and Bootstrap - basic pointers required.

         

topr8

9:55 am on Jun 15, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Inspired by incrediBill's work on modernising WebmasterWorld, i've realised i should update my sites, which previously had no javascript (except for form validation).

I'm very happy with my new bootstrap site ... but am really stuck on the ajax/js
fyi i'm not expecting/wanting a cut and paste solution, i'm wanting to learn how to do it - pretty much from a standing start.
i'm very proficient with mysql and proficient with php, so all the server side processing and db stuff is not an issue.

i would like to add the following functionality.
there are multiple products on the page with add to cart buttons. ... when clicked, stay on the page, connect to the server (presumably with ajax), show an alert with a waiting graphic, get the response, then show 'added to cart' (or error message - depending on what the server returns) message and to update the cart summary which is in the header, that shows number of items, value of cart - both in spans already with specific #id's.

could someone just briefly outline the steps (like in idiotproof style!) i need to take to accomplish this.

it seems an absurd question but i feel like i'm right back in a staring position with this js stuff, it hasn't clicked in my head yet.

incrediBILL

5:16 am on Aug 5, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I see it's been awhile since you posted this but to identify items on a page is the same as how I identified threads on the VOTE button here.

You would identify each product using "data-<name>=value" int he HTML and Bootstrap or jQuery has scripts that pass it to javascript.

For instance, I identify your WebmasterWorld message above as follows in the HTML:

data-msg="4752569" data-forum="91" data-post="4752567"

When you click on the VOTE button, the click gets those fields as follows:

forum = $this.data("forum"),
thread = $this.data("post"),
msg = $this.data("msg"),

Make any sense?

$this.data("msg") returns the value data-msg="4752569" from the HTML for that vote icon, which in your case would be a "BUY NOW" product button.

Instead of voting, you would call an add to cart routine.