index.html

<!--https://experienceleague.adobe.com/docs/target/using/implement-target/client-side/at-js-implementation/deploy-at-js/implementing-target-without-a-tag-manager.html?lang=en#task_E85D2F64FEB84201A594F2288FABF053-->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Experience AEM XF Target Offer</title>

    <!--Preconnect and DNS-Prefetch to improve page load time-->
    <link rel="preconnect" href="//ags959.tt.omtrdc.net?lang=en">
    <link rel="dns-prefetch" href="//ags959.tt.omtrdc.net?lang=en">
    <!--/Preconnect and DNS-Prefetch-->

    <!--jQuery or other helper libraries should be implemented before at.js if you would like to use their methods in Target-->
    <script src="./js/jquery-3.6.0.min.js"></script>
    <!--/jQuery-->

    <!--Target's JavaScript SDK, at.js-->
    <script src="./js/at.js"></script>
    <!--/at.js-->
</head>

<body>
<div style="text-align: center; margin-top: 20px">
    This pages loads AEM Experience Fragment Offers (authored as JSON and rendered as HTML)
</div>

<div id="aem-offer" style="text-align: center; margin-top: 30px">
    Default content before HTML; Loading the XF offer...
</div>

<script>
    function loadXF() {
        var $aemOffer = $("#aem-offer");

        alert("loading directly from publish....")

        $.ajax("https://publish-p10961-e90064.adobeaemcloud.com/content/experience-fragments/eaem-cs-at-json-offer/us/en/site/eaem-cs-one/master.html").done(function (html) {
            $aemOffer.html(html);
        }).fail(function () {
            $aemOffer.html("Error loading Publish CS offer");
        });
    }

    loadXF();

    /*function loadOffer() {
        var $aemOffer = $("#aem-offer");

        adobe.target.getOffer({
            mbox: 'eaem-test-1',
            success: function (offer) {
                var offerJSON = JSON.parse(offer[0].content);

                if (!offerJSON.xfHtmlPath) {
                    $aemOffer.html("Error loading offer");
                    return;
                }

                $.ajax(offerJSON.xfHtmlPath).done(function (html) {
                    $aemOffer.html(html);
                });

            }, error: function () {
                $aemOffer.html("Target Error loading offer");
            }
        })
    }

    setTimeout(loadOffer, 3000);*/
</script>
</body>

</html>