Utilizing AJAX with Microformats in Venddor IO

Introduction

In the dynamic ecosystem of Venddor IO, AJAX plays a pivotal role, especially when paired with microformats, offering a streamlined mechanism to update content seamlessly. The integration of the cm-ajax microformat into links and forms empowers AJAX to work efficiently.

AJAX Interactions with Forms

When you equip a form with the cm-ajax class, it signals the form to transmit its contents as an AJAX request to the designated URL in its action attribute. A crucial component of such a form is a hidden input field named result_ids. This field lists the IDs of the elements slated for AJAX-driven updates.

An illustrative AJAX-enhanced form might look like:

<form class="cm-ajax" action="index.php" method="post" name="product_form_817">
    <input type="hidden" name="result_ids" value="my_id" />
    ...
    <input id="button_cart_817" type="submit" name="dispatch[checkout.add..817]" value="Add to cart" />
    ...
</form>

AJAX Interactions with Links

For hyperlinks, appending the cm-ajax class ensures that any click event sends an AJAX request to the URL mentioned in its href attribute. The data-ca-target-id attribute is pivotal as it defines the IDs of the elements targeted for updates.

A typical AJAX-driven link might resemble:

<a class="cm-ajax" data-ca-target-id="cart_items,checkout_totals,cart_status*,checkout_steps,checkout_cart" href="{""|fn_url}"><i class="icon-cancel-circle"></i></a>

Deep Dive into Supplementary Microformats

Though the cm-ajax microformat is indispensable for ensuring smooth AJAX operations in Venddor IO, the platform also boasts a myriad of supplementary microformats. These enrich the toolkit available to developers, allowing for nuanced control over AJAX functionalities within modules and extensions.