Search made simple - SearchinGhostEASY

Hi,

After creating the searchinghost library, I felt something was missing for non-developper and non-designer people. I though it would be great to have a solution that any Ghost user could install on its own blog. That’s why I decided to start a brand new project…

SearchinGhostEASY helps you to install a search bar by only using the Ghost administration interface, zero code needed! It is a convinent, real quick and super easy way to install a search bar to your blog. No need to worry about theme design, it comes with everything built-in and works with all Ghost themes (casper, massively, nubia, …).

How to install it ? Follow these 3 steps and you are done!

If you have any question, remark or improvement that comes into your mind, please let me know in the comments :smiley:

10 Likes

Nice work!

Thanks @inoryum! Did you try it on your own ? I made it installed by few friends but I am looking for more feedbacks :slightly_smiling_face:

Thank you, excellent work. I’m not going to installed it any time soon, but I started it for when I need it, that will be my to go search

1 Like

Not yet but i will definitely use it in my upcoming theme…

1 Like

This is awesome! Got search up and running in no time and looks great!
Using Casper theme 3.0.12
Injected a search icon with searchinghost-easy as href in the code injection panel - instead of modifying the hbs.
The only issue is that on mobile the menu stops scrolling (horizontally) - on both Safari and Firefox for mobile. On one instance, scrolling actually became unresponsive across the entire page.

Hi @danhi, thank you for the review! I did not notice for the scrolling issue on mobile, I will check that today or tomorrow.

About the injection of icon (instead of a word), could you explain me how you did that to report this in the README? (please send me a PM so we can talk about it)

The issue found by @danhi is now solved, it was only impacting iOS devices.

To fix it, you can update the version used in the URL with ‘1.0.2’ or simply remove the version reference to always be up to date. Everything is described in the README.

Thank to @danhi, I also added information in the Q&A section to explain how to easily use a search icon using jQuery.

I anyone else found a bug or something to improve, please leave a comment! :smiley:

2 Likes

@gmfmi helped me all the way through the installation process & even made some great improvements. it was soo easy especially if you’re not too techy. :slightly_smiling_face:

1 Like

Dear forum members,

even though the instructions are described in great detail, something is not working for me. I have just set up a Ghost Blog and it works as expected. ( OS: CentOS Linux, v7
Node Version: v10.20.1
Ghost version: 3.22.1
Ghost CLI version: 1.14.1)
I then set up the search function. The sourcecode is also delivered with the page, but no search field is displayed. What is the easiest way to narrow down the error?

If I check source code at Safari browser it says : ReferenceError: Can’t find variable: SearchinGhostEasy

I also have the problem that the Disqus comment function does not work. The source code is also included here, but nothing is displayed.

Thanks for your help.

wait, sorry this does not need Ghost restart.

did you add step 3:

  1. Finally, add a link in the menu that open the search box. To do so, go to the “Design” section and add a new item. It can be in the “navigation” or “secondary navigation”. You can name it with any label (“Search” feels natural) but the link must ends with #searchinghost-easy . Click on “save”.

I have used searchinGhost in my new theme Reditory - http://reditory.gbjsolution.com/
@gmfmi thank you for developing the plugin.

1 Like

Hi,

yes, I did also step 3.

But if you push “Suchen” = search, nothing happened.

See short video

Hi @utz!

I went on your website to find a potential issue. Good news, your SearchinGhostEASY installation is OK and should/will work! I manage to make it work, here is the screenshot:

Your issue comes from another JS script/plugins, probably the “cookie policy checking” thing. If you look carefully at the errors, even the jQuery object (i.e. $) is not defined on your page! (tested on Chrome with a default configuration)

If I were you, first, I would comment/remove that line from your section: <script src="https://cmp.osano.com/AzyvvoS3fxVKu3vwM/56b53a80-b02c-4004-b9eb-dec8f5f15ec3/osano.js"></script>

I hope it can help you solve this :slight_smile:

Thank you so much! You are right, it works without the Cookie Plugin. Also Disqus works now.
I am very happy that SearchinGhostEasy works well, i will check for another GDPR solution regarding cookies.

1 Like

[UPDATE] A new release is available!

If you would like to change the default search bar “Search” placeholder, it is now possible. I added a new “placeholder” option that allows you to set it to what ever you like.

Refer to the documentation for more details: https://github.com/gmfmi/searchinghost-easy#configuration

1 Like

This is highly recommended. If someone need to know how is it work visit https://androidwedakarayo.com and check it. Thanks again @gmfmi

Hi @gmfmi ,
I am trying to integrate your plugin to my upcoming theme but i am getting an error.

My Ghost version is 3.26.1 (Development Env) on an Ubuntu server.

Steps I followed

Added the Below code to site head

<script src="https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-backpack.js"></script>
<script>
    new SearchinGhostEasy({
        contentApiKey: 'mycontent API'
    });
</script>

& then

<a href="#searchinghost-easy">click to search</a>

Its not working & getting the following error

image

TIA!

Hello @inoryum!

I will update the documentation, maybe it wasn’t clear enough: you should NOT use these scripts in the <head> section. You must place them at the end of the <body>. That’s why we inject these lines into the “Ghost footer” instead of the “Ghost header”.

The reason is pretty straightforward: the anchor links must already be defined at launch time because we add them some Javascript event listeners :wink:

Here is a working example (using the default Casper API):

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="#searchinghost-easy">A link to open search</a><br>
    <a href="#searchinghost-easy">A second one that works exactly the same way!</a>

    <script src="https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-backpack.js"></script>
    <script>
        new SearchinGhostEasy({
            contentApiKey: '22444f78447824223cefc48062',
            apiUrl: 'https://demo.ghost.io'
        });
    </script>
</body>
</html>

Let me know if that works on your side :smiley:

1 Like

Hey thanks, its working good now!

Supper easy to integrate

1 Like