{CampaignCode}

Sending the discount code form to the server by using JavaScript

With the {CampaignCode} tag's ajax attribute, you can set the tag to return only the content it produces, which is useful when the tag is called with an AJAX request . This makes it possible to send the discount code form to the server without the need to reload the page.

You can use the Interface markup below to create a basis for implementing an asynchronous discount code form:

<div id="CampaignCodeFormContainer">
{CampaignCode(
    ajax: true
)}
</div>

By leaving the mode attribute with the default value 'auto', the tag is set to print either the code input form or the preview of the entered code, depending on the situation.

The following JavaScript code sends the entered code to the online store's server. The example makes use of the jQuery ajax() function:

function submitCampaignCode() {
  $.ajax({
    type: "POST",
    url: "/cart",
    data: $("#CampaignCodeFormContainer>form").serialize(),
    success: function(response) {
      reloadCampaignCodeForm();
    }
  });
}

The function is tied to the campaign code form's submit button on(), and by using the preventDefault() function, you prevent the form from being automatically submitted when the button is pressed:

$("#CampaignCodeFormContainer>form button").on("click", function(event) {
  event.preventDefault();
  submitCampaignCode();
});

Upon a successful call, the reloadCampaignCodeForm() function will reload the input form:

function reloadCampaignCodeForm() {
  $("#CampaignCodeFormContainer").empty();
  $.ajax({
    type: "GET",
    url: "/interface/CampaignCode?mode=auto&ajax=true",
    success: function(response) {
      $("#CampaignCodeFormContainer").html(response);
    }
  });
}

Once the customer has entered the discount code, it is not advisable to show an open input form anymore, as it is not possible to enter multiple discount codes at once. By reloading the form immediately after the submission using the attribute mode: 'auto', you can display a preview of the entered code to ensure that the customer is clearly aware that the code is in use.

If there is a product list on the same page as the input form, you can also reload the list with an AJAX call:

function getCampaignProducts(targetElement) {
  $.ajax({
    type: "GET",
    url: "/interface/Products?campaign=n",
    success: function(response) {
      $(targetElement).html(response);
    }
  });
}

In the example, setting the campaign is done with the {Products} tag's campaign attribute. The retrieved products are printed to the element specified by selector targetElement.