CODEWITHSUNDEEP
javascriptjsonajaxbusiness-catalyst
JHair
JHair

Reputation: 304

Call module_data information via AJAX after page load

On a particular layout I want to use Poplets, but they are not available. Currently I pull them in using module_data, but it is slowing down the website far too much. I only need the first 2 Poplet images (in case one image is the same as the largeImage).

{module_data resource="products" resourceId="{{id}}" version="v3" fields="id,poplets" skip="0" limit="5" collection="prodPoplets"}
{% assign popletUrls = prodPoplets.poplets | split: ";" -%}
{% capture BackPopletUrl -%}
{% if popletUrls[0] != "" -%}
{% if largeImageUrl == popletUrls[0] -%}{{popletUrls[1]}}{% else -%}{{popletUrls[0]}}{% endif -%}
{% endif -%}
{% endcapture -%}

I want to load the first 2 popletUrls AFTER the page is loaded as it is shown on a hover state anyway.

I will be using this for other thing to speed the website in question up, just looking to get to grips with this.

I am using Business Catalyst - I have found this in the docs, but am still not sure what I should be doing - https://docs.worldsecuresystems.com/developers/liquid/consuming-apis-in-the-front-end-using-module_data#TheResourceparameter

Upvotes: 0

Views: 60

Answers (2)

Alex Steinberg
Alex Steinberg

Reputation: 1466

You can specify to pull only the first two poplets. Your module_data tag would be {module_data resource="products" resourceId="{{id}}" version="v3" fields="id, popletImage1, popletImage2" skip="0" limit="5" collection="prodPoplets"}

Upvotes: 0

Daut
Daut

Reputation: 2625

Instead of calling module_data, you can do ajax request like so:

    var request = $.ajax({
        url: "/webresources/api/v3/sites/current/products?fields=id,poplets&skip=0&limit=10&order=id",
        type: "GET",
        contentType: "application/json",
        headers: {
            "Authorization": BCAPI.Helper.Site.getAccessToken()
        }
    });
    request.done(function(data) {
        console.log(data);
    //here you access all your data

    })
    request.fail(function(jqXHR) {
        console.log("Request failed.");
        console.log("Error code: " + jqXHR.status);
        console.log("Error text: " + jqXHR.statusText);
        console.log("Response text: " + jqXHR.responseText);
    })

Make sure you have authorised your API calls, as shown in the Business Catalyst documentation here - https://docs.worldsecuresystems.com/developers/api/authorize-your-api-calls

Upvotes: 0

Related Questions