{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 allows the discount code form to be submitted to the server without needing to reload the page.

With the following Interface markup, you can create a starting point for an asynchronous discount code form creation:

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

By setting the mode attribute to the default value 'auto', the tag is configured to display either the code input form or a preview of the entered code, depending on the situation.

The following JavaScript code sends the entered code to the online store's server. An example of using jQuery's 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 with the on() function, and by using the preventDefault() function, you can prevent the form from being automatically submitted when the button is pressed:

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

Kutsun onnistuessa reloadCampaignCodeForm()-funktio saa syöttölomakkeen latautumaan uudelleen:

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. By reloading the form immediately after the submission using the mode: 'auto' attribute, you can display a preview of the entered code to ensure that the customer is 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/ProductSet?campaign=n",
    success: function(response) {
      $(targetElement).html(response);
    }
  });
}

In the example, setting the campaign is done using the campaign attribute of the {ProductSet} tag. The retrieved products are printed to the element specified by selector targetElement.