AJAX

• AJAX Overview
• AJAX Product

FLEX Documentation

• Introduction
• Code Overview
• Back Office
• Loops
• Global Output Tags
• Files
• AJAX
• Navigation
• Products
• Categories
• Pages
• Pagination
• Forms
• Checkout
• Search

An AJAX product call allows for a dynamic integration with the database about a product.

Output Tag	Description
{ajax_product}	Returns json output of price changes and information about the sku
{ajax_inventory_filter}	Returns json output if item is out of stock and hides the appropriate fields

Below is working code written for jQuery. This will inform the user about inventory changes and dynamic price changes in json data.

$(document).on("change","#add-to-cart .form_input",function()
{
    var vals;
    var set =  "";
    var temp;
    if ($(this).hasClass( "input_radio" ))
    {
   	 vals = $(this).parent().find( "input:radio:checked").val();
    }
    else if ($(this).hasClass( "input_dropdown" ))
    {
   	 vals = $(this).parent().find( "select option:selected").val();
    }
    else
    {
   	 vals = $(this).val();
    }
    
    set += encodeURIComponent($(this).attr("name"))+"="+encodeURIComponent(vals)+"&";
    $.ajax({
   	url: "/ajax/field.ajax",
   	data: "pitem="+$("#add-to-cart").find("#pitem").val()+"&"+set,
   	type: "post",
   	success: function(data)
   	{
   	 //replace html
   	 $.each(data.field, function(i, item) {
   		 if ($(".variation_"+i).hasClass( "input_radio" ))
   		 {
   			 temp = $(".variation_"+i+":radio:checked").val();
   			 $(".variation_"+i).closest("li").find(".fields").html(item);
   			 console.log(temp);
   			 $(".variation_"+i+":radio[value='"+temp+"']").attr('checked',true);
   		 }
   		 else if ($(".variation_"+i).hasClass( "input_dropdown" ))
   		 {
   			 temp = $(".variation_"+i+" option:selected").val();
   			 $(".variation_"+i).closest("li").find(".fields").html(item);
   			 $(".variation_"+i).val(temp);
   		 }
   	 });
   	 priceChange();
   	}
    });
});

function priceChange()
{
    var myData = $('#add-to-cart').serializeArray();
    // remove items from myData
    $.ajax({
   	url: "/ajax/check.ajax",
   	data: $.param(myData), // "inp1=val1&inp2=val2"
   	type: "post",
   	success: function(html)
   	{
   	 if (html.status != "error") {
   		 $("span#prodoprice b").html(html.price);
   		 if (html.available == "false") {
   			 $("#add-cart-button").hide();
   			 $("#system_message").html(html.message);
   		 }
   		 else
   		 {
   			 $("#add-cart-button").show();
   			 $("#system_message").html("");
   		 }
   	 }
   	 else
   	 {
   		 $("#add-cart-button").show();
   		 $("#system_message").html("");
   	 }
   	}
    });
}