feat: Add datalayersource to magento cart

[ZeeLiger]

For: https://coda.io/d/Integrations-Requests_dsKW6gcriTa/Integrations-Request_suwpix28#Integrations-Requests-Board_tu1-uSsT/r336&view=modal

Currently, ILGM has the data going to the window.datalayer and the magento cart only has xhr

Added a data layer source for getting the transaction

[SeanRizarre]

LGTM!!

[SeanRizarre]

Made a script for the code and tested it out on the site, doesn't work. Will be making a revision now

[SeanRizarre]

Perhaps we can use this

<script>
    const isTrackerLoaded = (callback) => {
        if (window.tracker) {
            callback();
        } else {
            let trackerLoaded = false;
            const intervalId = setInterval(() => {
            if (window.tracker && !trackerLoaded) {
                trackerLoaded = true;
                clearInterval(intervalId);
                callback();
            }
            }, 100);
        }
    };

    window.dataLayer = window.dataLayer || [];
    for (let i = 0; i < window.dataLayer.length; i++) {
        const data = window.dataLayer[i];
        console.log(data);

        console.log("Inside dataLayerSource");
        console.log("Events: ", data.event);
        if (data.event === "purchase") {
            console.log("GOTCHA BITCH");
        }

        if(data.event === "purchase") {
            console.log("Inside purchase");
            const ecommerce = data.ecommerce;
            console.log("DATA:", ecommerce);

            isTrackerLoaded(() => {
                window.tracker("addTrans", {
                    orderId: ecommerce.transaction_id.toString(),
                    affiliation: "N/A",
                    total: parseFloat(ecommerce.value),
                    tax: parseFloat(ecommerce.tax) || 0,
                    shipping: parseFloat(ecommerce.shipping) || 0,
                    city: "N/A",
                    state: "N/A",
                    country: "N/A",
                    currency: "USD",
                });
                console.log("Tracker 1 loaded");

                ecommerce.items.forEach((item) => {
                    window.tracker("addItem", {
                        orderId: ecommerce.transaction_id.toString(),
                        sku: item.id.toString(),
                        name: (item.name || "N/A").toString(),
                        category: (item.category || "N/A").toString(),
                        price: parseFloat(item.price || 0),
                        quantity: parseInt(item.quantity || 1),
                        currency: "USD",
                    });
                });
                console.log("Tracker 2 loaded");

                window.tracker("trackTrans");
                console.log("DatalayerSource Tracked Transactions!");
            });
        }
    }
</script>

[SeanRizarre]

Minor improvements: Make xhrResponseSource available before the if statement just after the datalayerSource transaction.