How to use api.onPageChange with api.createWidget?

[rahim123]

Hi again, I’m trying to figure out the best way to only make the widget show on a specific URL, such as the homepage.

The easy way is simply to use a plugin outlet that only exists on the homepage, which works for what I need for now (specifically, the discovery-navigation-bar-above). But I’m still curious about how to do this programmatically in a way that is sensitive to the specific page URL.

I found this very helpful topic, also by @awesomerobot :

Add custom content that only appears on your homepage

A very common situation you’ll find yourself in as a theme developer is the need to create a customization that only shows on the homepage of your community. You might add some HTML to the “After Header” section of your theme, which will then appear on every page. You can jump through some hoops in CSS to hide this everywhere except the homepage… but instead let’s utilize the Plugin API so your content is only loaded on the homepage to begin with. All of this can be added to the </head> (head_…

I tried to adapt this into the solution from earlier in this post:

        api.onPageChange((url) => {
            if (url === "/" || url === homeRoute ){
               this.scheduleRerender();
            }
        });

But this still makes the image appear on all pages. I also tried to put my variables and random selection code inside the if clause, but that doesn’t work at all.

There’s also the <script type="text/x-handlebars" ... section of the example, but it seems to only allow for HTML, and I don’t know how to get the variables into it from the previous script.