The JavaScript file for updating the individual sections of the MyCashflow single-page checkout by using AJAX requests.

This page applies to the old MyCashflow default theme. The new default theme uses the checkout.js plugin, which takes care of updating individual sections of the single-page checkout.

You can load the plugin for your own theme from Github.

Using the plugin in the MyCashflow default theme

The plugin sends the form in the following situations:

  1. After the user has modified something in the form and the focus moves away from that section (for example, the customer information has been edited and the user moves to edit the shipping address or clicks outside the form).
  2. When the user has not edited the form for a while.
  3. When the shipping country has been changed in customer information or delivery address.
  4. When the shipping or payment method is changed.

If the information check does not return any errors, the information is saved in the customer's shopping cart.

Parameters

You can use the following parameters to define how the plugin should work:

tagname: string

Defines the name of the submitted tag that is used as a basis for defining other default settings (e.g. dependencies).

Allowed values:

  • 'auto': The tag's name is read from a hidden input. Usually, auto is the best option.
  • Tagin nimi: Alternatively, you can define the name of the sending tag yourself.
dependencies: string / array

Defines which other checkout tags are dependent on the data to be sent and should be updated.

Allowed values:

  • 'auto': The sections to be updated are defined automatically based on the updated tag.
  • Yksittäisen tagin nimi: An individual tag dependency can be defined by supplying the tag name as a string: "CheckoutShippingMethods"
  • Useamman tagin nimi: If you want to define multiple dependencies, indicate tag names as an array: ["CheckoutShippingMethods", "CheckoutPaymentMethods"]
return_self: string / boolean

Defines whether HTML should be returned from the POST call to the sending element.

Allowed values:

  • 'auto': Basing on the updated data, a decision whether HTML contents should be returned is made automatically.
  • true/false: It is recommended to set the parameter value to false, e.g. when payment and shipping methods are sent, as there is rarely any need to return errors to the form.
response_type: string

Defines whether AJAX request notifications should be returned with HTML markup or as JSON objects without ready markup.

Allowed values:

  • 'json': The syntax of the returned JSON object is as follows:
    {
        "content": MARKUP,
        "notifications": NOTIFICATIONS
    }
  • 'html': This is often the easiest option as the notifications do not need to be written separately anywhere else.
post_start:function(el, from_event, verbose, jqXHR, settings)

Defines the callback function called before the form is sent.

At this point, you can still prevent the form from being sent if the function returns the value false. At this point, you may want to display a progress indicator.

The function has the following parameters:

el:

The jQuery element to which the plugin instance is linked

from_event:
The event that triggers the sending of the form. Allowed values:
  • 'keyup'
  • 'change'
  • 'focusout'
verbose:

Defines whether HTML should be returned to the element after the POST call. The decision is based on the fact whether the focus is inside the form as well as the value of the plugin's return_self parameter.

Allowed values: true/false

textStatus, jqXHR:

The events of the jQuery AJAX event: http://api.jquery.com/jQuery.ajax/

post_success: function(el, response, verbose, textStatus, jqXHR)

A function that is called after the form data has been sent.

The function has the following parameters:

el:

The jQuery element to which the plugin instance is linked

response: json / html

The JSON object or the HTML markup returned by the POST request.

verbose:

Defines whether HTML should be returned to the element after the POST call. The decision is based on the fact whether the focus is inside the form as well as the value of the plugin's return_self parameter.

Allowed values: true/false

textStatus, jqXHR:

The events of the jQuery AJAX event: http://api.jquery.com/jQuery.ajax/

get_start: function(el, jqXHR, settings)

A function that is called when the retrieval of an element dependent on a single POST request begins.

The function has the following parameters:

el:

The jQuery element to which the plugin instance is linked

jqXHR, settings:

The events of the jQuery AJAX event: http://api.jquery.com/jQuery.ajax/

get_success: function(el, response, textStatus, jqXHR)

A function that is called once the retrieval of a single element dependent on a single POST request has been completed.

el:

The jQuery element to which the plugin instance is linked

response:

The JSON object or the HTML markup returned by the POST request.

textStatus, jqXHR:

The events of the jQuery AJAX event: http://api.jquery.com/jQuery.ajax/

complete: function(el)

A function that is called when all checkout AJAX requests have been completed. At this stage, you may want to hide the potential progress indicators.

el:

The jQuery element to which the plugin instance is linked