How To Allow Certain HTML tags in Customization

Support
1

I’m trying to add the google custom search engine to the header of our discourse forum. I put in the javascript to the head tag and then in the body there is something like <gcse:search linkTarget="_self"></gcse:search> - which will show the google custom search engine.

When I put this in and save it however, it doesn’t show up on the site. I imagine it is being removed by some sort of html filter? (and I should add that by “doesn’t show up” I mean the code itself, not just that the javascript isn’t loading somehow - when I surround it with <!-- -->, the code passes through, but obviously doesn’t work).

Is there a way to get this to pass through?

Thanks!

2

Looking at this it apparently strips gcse - so I get:

<search linktarget=\"_self\"><\/search>

Which doesn’t load anything

Instead of <gcse:search linkTarget="_self"></gcse:search> it strips out the : and the /gcse

I tried <gcse\:search><\/gcse\:search> but then I get <gcse search> (no : ) and </gcse> (no : or search)

Is there another way to get a variable to pass through the customization editor so that I can get it to show up?

3

This is just a proof of concept, so you’ll have to play around with it to see how/if it can work for your needs. Try adding this to the </head> tab of a theme:

<script type="text/discourse-plugin" version="0.8.18">
    api.decorateWidget('header-contents:after', helper => {
        return helper.rawHtml(`<gcse:search linkTarget="_self"></gcse:search>`);
    });
</script>

(Edit: improved the answer a little after having more time to look at it :slightly_smiling_face:)

5 Likes
4

That’s awesome - Thanks! Works perfectly. Both versions seemed to work the same, but I went with your current edit.

5

Actually I may have spoke a little too soon… It’s fairly intermittent when it will show up. I had both versions of your script in so I thought this newer one was working (and it did once - minus putting the search bar on top of the menu, etc. - lower half of the header).

The first script appears to work on the front page only if I put in at the body close section - then it shows up at the top of the page oddly.

I’d like to try to get it right below the header bar on top on every page.

Instead of ‘header-contents:after’ - is there a ‘body-contents:before’? that I could try. I went through the api docs, but couldn’t find anything that showed such a declaration…

1 Like
6

Sure, if you change it from header-contents:after to just header:after, that should do the trick. You will need to style it with CSS to get it exactly how you want it, but that should get you on track :slightly_smiling_face:

3 Likes
8

Hi @tshenry,

Could you please help me with the code on how you were able to build GCSE in discourse.

Thank You

9

Hi @yyhmsg,

Could you please help me with GCSE implementation.

10

Unfortunately I can’t offer much help as I’m no longer using gcse. I did have it working for awhile, but ended moving away from google generally and removed it quite a few discourse versions ago. What was posted above worked but I had to play quite a bit with it between infinite scroll issues and between discourse changes.

What have you tried? and what errors/issues?

A cleaner/easier option that shouldn’t need much management might be to simply include a button on the top that goes to a google hosted search page or something of your own somewhere.

1 Like
11

@yyhmsg,

I have implemented the code. Made some css changes to create a search box. But, when I click on the search option. It is taking me by default to discourse search, but not Google Search. This is where I got stuck.

12

If you’ve got it setup but it is going to the wrong search utility, it is like the querysearchparameter needs to be changed so they are both not q=

queryParameterName String The query parameter name—for example, q (default) or query . This will be embedded in the URL (for example, Example Domain).

So your gcse would have to setup to use a different queryParameterName such as qr= - then when you submit search only gcse will answer as discourse is expecting q=

13

Hi @yyhmsg,

I am using Overlay Theme for GCSE, I want to display the search results on the same page, and not on a different page, as I cannot use two page format with discourse. But, still the search button is appending the query string “?search=search+term”
This is not resulting in any search results as says “No Latest Topics”.
Is there something I am missing out.
Thanks in Advance.

14

It would be the most helpful if you were to show the code you are using and, if available, a link to the site that you are working on.

15

Hi @yyhmsg,

The website I am working on is: mpl.co
Can we connect on a Google Meet or something to share the screen. Please let me know, your comfortable time.

Thank You.

16

I cannot unfortunately, I’m a healthcare provider with a busy schedule, I only have a few minutes at a time between patients to work on stuff like this.

Might I suggest something like this plugin - https://github.com/sylque/discpage - where you could potentially put the entire inpage gcse code and then just put a button on the header that links to that page. That seems like it would be fairly clean…

17

Thank You @yyhmsg, will try from my end. Thanks for your suggestions.