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

marketplace
1

What would you like done?

In this topic 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. This is the final code that I ended up using for the above-main-container location:

Custom HTML/CSS in theme component

Head

<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

.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.

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.