Add to Cart button on CTGY Page

I think having a 'picture' of how this works will help. So, and its still early for me, but here's my attempt.

Normally, (as you know--but spelling everything out for everyone else) when you click a 'form button' (or its equivalent), the system sends a request to the system much like just clicking a hyperlink.

This request usually has a bunch of 'variables' including a 'directive' (action) to the system on what to do: in this case, Add Something to the Cart.

It also includes a 'what' and in the Add to Basket case, the product and quantity.

Finally, it has to have a 'where' (like a hyperlink) indicating where the user should be when the process is complete.

What about Ajaxing?

Here's the secrete. Ajax is basically no different than a normal Form post. All of the above still pertains--just that the page doesn't 'reload'.

You still need the Action, the What AND the WHERE. Typically, the where is a miva template with ONLY the code needed to perform the action requested (since its never shown). It also needs to create any information that will be displayed to the user. For example, "yea, you added X to your basket".

The information is returned by the Ajax function itself, but its display has to be controlled at the "document" level using javascript or jQuery. In its simplistic form, You define an empty div like

<div id="ajaxMesssage"></div>

And then have a little jQuery like

$("#ajaxMessage").append(ajaxResponse);

The ajaxResponse is a variable created in the Ajax function itself. The Ajax Response is EVERYTHING that would be seen as if you just called the template. So, if you had that template produce "Hello Miva", the 'ajaxRespons' variable would contain the words "Hello World". It would also contain any HTML markup.

Here's a good place to get even more background. I recommend spending at least 15 minutes playing around as I think it will make your eventual task MUCH easier

HTH

I had started an attempt to build a Multi-Product Add to Cart Button that stayed on the category page and would trigger the mini-basket for a Bootstrap (Base) ReadyTheme. I switched to the Colossus ReadyTheme but had continued to post questions/comments regarding my attempts https://www.miva.com/forums/forum/de...n-reloads-page I was even sent some very nifty AJAX for it, that's when I realized I needed to move my questions/comments to the appropriate Forum. (Note, this is also part of my sub-sub category Alternate Page Template - which is looking very good thanks to the group effort of the Forums)

Matt had said

In Colossus, if you changed the body ID for the category page the page would die a horrible death, many errors would be thrown, and mayhem would ensue. Since I have not released a quick-view or multi-Ajax-add extension for the new ReadyThemes, you would have to develop your own code for controlling the form. Those extensions are in the queue, however they won't be worked on until next year.

The desire to break something got the best of me, so I changed the body ID to js-PROD, changed the Add to Cart button to display per product (instead of a multi-add), clicked save and went to view the page. Everything still looked good. I should note that I reverted back to the per-product add to cart as a starting point. My thinking is that if I can get the single add to cart buttons to work as I want, I might be able to get the multi-add going.

The page didn't break but the Add to Cart went to the BASK screen. I think since this project is behind a wall I should set this up in a public dev site so my futile attempts can be scrutinized.

Announcement