All questions

Legacy jQuery site, can I fetch slot content and inject it into the DOM myself?

Asked by garyp on

Ggaryp

I maintain a site that was built in 2009 and it is jQuery all the way down. No bundler, no build step, no npm. Just script tags and a server that serves HTML like God intended.

Marketing wants to personalize the homepage banner. Can I load Croct from a plain script tag, fetch the slot content, and jam it into the page with $('#banner') like it's 2012? Or does this thing assume I have a React app and a webpack config

Asking before I promise anything to anyone.

Was this helpful?

1 answer

DdmccraeAccepted answer

You are in luck, this works fine and is a documented setup. No build step needed.

Load the SDK from the CDN, plug it, fetch the slot, and render however you want:

<script src="https://cdn.croct.io/js/v1/lib/plug.js"></script><script>  croct.plug({appId: 'APPLICATION_ID'});
  croct.fetch('home-banner@1')    .catch(function () {      return {content: {title: 'Welcome back', cta: 'Shop now'}};    })    .then(function (result) {      $('#banner h2').text(result.content.title);      $('#banner .cta').text(result.content.cta);    });</script>

Two things worth doing:

  1. Pin the slot version (home-banner@1) so a schema change in the dashboard cannot break your rendering code later.
  2. Keep that .catch returning a hardcoded default. If the network request fails or gets blocked, the banner falls back to your static content instead of leaving the section empty.

jQuery, vanilla DOM, Mustache templates, whatever you have. The SDK just hands you a content object, rendering is entirely your business.

Was this helpful?
Ggaryp

Beautiful. The catch-with-fallback pattern is exactly the kind of paranoia this site runs on. Thanks, will report back if the 2009 codebase fights me.

Still have questions?