# \[PAID\] Cache busting for custom scripts defined in theme component

**URL:** <https://meta.discourse.org/t/paid-cache-busting-for-custom-scripts-defined-in-theme-component/244367>\
**Category:** Marketplace\
**Created:** [November 4, 2022, 2:12pm UTC](https://meta.discourse.org/t/paid-cache-busting-for-custom-scripts-defined-in-theme-component/244367 "2022-11-04T14:12:12Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [November 4, 2022, 2:12pm UTC](https://meta.discourse.org/t/paid-cache-busting-for-custom-scripts-defined-in-theme-component/244367/1 "2022-11-04T14:12:13Z")

</div>

### What would you like done?

In [this topic](https://meta.discourse.org/t/how-to-use-api-onpagechange-with-api-createwidget/242744/4) I explained that I was trying to add some simple javascript to rotate between a few random images with `api.createWidget` , and I received some help with correctly using `api.onPageChange` . I also am planning on doing something similar based on `api.decorateWidget` using the solution [here](https://meta.discourse.org/t/how-to-add-customer-html-after-post-1/123068/2). This is the final code that I ended up using for the `above-main-container` location:

> **Custom HTML/CSS in theme component**
>
> #### Head
> 
> ```plaintext
> <script type="text/discourse-plugin" version="0.8">
> const h = require("virtual-dom").h;
> api.createWidget("top-banner-widget", {
> tagName: "div.top-banner",
> html() {
> let banners = new Array();
> let goTo = new Array();
>         
> ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
> let bannerCount = 2;
> banners[0]="https://example.com/0.jpg";
> banners[1]="https://example.com/1.jpg";
> goTo[0]="https://google.com";
> goTo[1]="https://brave.com";
> ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
>         
> bannerCount-=1;
> let randPick = Math.round(bannerCount * Math.random());
> let theLink = goTo[randPick];
> let theImage = banners[randPick];
>         
> api.onPageChange(() => {
> this.scheduleRerender();
> });
>   
> return h("div#top-banner", [
> h(
> "a.custom-ad-link",
> { href: theLink },
> h("img", { src: theImage})
> )
> ]);
> }
> });
> </script>
> 
> <script type="text/x-handlebars" data-template-name="/connectors/above-main-container/inject-widget">
> {{mount-widget widget="top-banner-widget"}}
> </script>
> 
> ```
> 
> #### CSS
> 
> ```plaintext
> .top-banner {
> padding-bottom: 1em;
> display: flex;
> clear: both;
> max-width: 100%;
> background-color: #FFFFFF;
> border: none;
> box-sizing: border-box;
> img {
> max-width: 100%;
> &.desktop {
> display: block;
> }
> &.mobile {
> display: none;
> }
> }
> }
> 
> ```

The problem I’m having with these methods is that it requires users to do a hard page reload when the image source URL and/or `href` URL are changed, since the entire script gets cached in the Discourse SPA code. So I would like to learn a flexible method to do cache busting for this sort of script, to make it get the latest version of the custom Javascript on the user’s next page load. I prefer to implement it as I’m currently doing via a theme component that I create and add CSS and Javascript with the **Edit CSS/HTML** button (and _not_ via an `app.yml` defined plugin or Ember component or external GIT repo). I wonder if the official Discourse Ad plugin would contain any reusable code to accomplish this, as changes to the admin-defined HTML of House Ads gets immediately reflected on the next page that the user navigates to.

### When do you need it done?

Very flexible.

### What is your budget, in $ USD that you can offer for this task?

$150 or less.

---

_[View the full topic](https://meta.discourse.org/t/paid-cache-busting-for-custom-scripts-defined-in-theme-component/244367)._