Adding a search bar to an article

[mbory]

Hi, here's a little addition to the article view. If, like me, you have very long articles, sometimes it's useful to reload by word to find a precise place in the article.
You're going to tell me "yes, but there's CTRL + F on the browser!" Yes, but not everyone knows this combination. So I wanted to simplify it for users.

Here's how to do it:

Go to theme/hesk3/customer/knowledgebase/view-article.php

Immediately after the "help-search" div:

Code: Select all

<div class="help-search">
	<?php displayKbSearch(); ?>
</div>

You'll add this code (feel free to change the text in the placeholder):

Code: Select all

<div id="searchBarArticle">
  <div class="inputContainer">
    <svg class="icon icon-search-article">
      <use
        xlink:href="<?php echo TEMPLATE_PATH; ?>customer/img/sprite.svg#icon-search"
      ></use>
    </svg>
    <input
      type="text"
      id="searchArticleInput"
      placeholder="Rechercher dans l'article"
    />
  </div>
  <div id="navButtonsContainer">
    <button class="navButton" id="prev">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 24 24"
      >
        <path
          fill="#ffffff"
          d="m10.8 12l3.9 3.9q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425 12q0-.2.063-.375T8.7 11.3l4.6-4.6q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7z"
        />
      </svg>
    </button>
    <button class="navButton" id="next">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 24 24"
      >
        <path
          fill="#ffffff"
          d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375q0 .2-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7z"
        />
      </svg>
    </button>
  </div>
</div>

Next, go to the bottom of the file to add the following script, following the others (just before the closing </body> tag):

Code: Select all

<script>
    var instance = new Mark(document.querySelector("body"));
    $(document).ready(function() {
        $("#searchArticleInput").on("keyup", function() {
            var word = $(this).val();
            instance.unmark();
            if (word) {
                instance.mark(word);
            }
        });

        var currentIndex = 0;
        $("#next").on("click", function() {
            var marks = $("mark");
            if (marks.length > 0) {
                currentIndex = (currentIndex + 1) % marks.length;
                var currentMark = marks[currentIndex];
                currentMark.scrollIntoView({
                    behavior: "smooth",
                    block: "center"
                });
            }
        });

        $("#prev").on("click", function() {
            var marks = $("mark");
            if (marks.length > 0) {
                currentIndex = (currentIndex - 1 + marks.length) % marks.length;
                var currentMark = marks[currentIndex];
                currentMark.scrollIntoView({
                    behavior: "smooth",
                    block: "center"
                });
            }
        });
    });
</script>

Then now, in theme/hesk3/customer/css/app.css, go to the very bottom to add this code (feel free to change the colors):

Code: Select all

#searchArticleInput {
  width: 100%;
  height: 56px;
  max-width: 752px;
  font-size: 14px;
  padding: 17px 16px 17px 56px;
  margin: 8px 0;
  border-color: transparent;
}

#searchBarArticle {
  position: sticky;
  top: 1px;
  left: 0;
  width: 100%;
  background-color: #222f3e;
  color: white;
  padding: 10px;
  margin-top: 5px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

#navButtonsContainer {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.navButton {
  background-color: #10ac84;
  border: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  /* Ajout de transition pour une animation fluide */
}

.navButton:hover {
  background-color: #0e8a6b;
  /* Nouvelle couleur au survol */
}


.inputContainer {
  position: relative;
  width: 100%;
  max-width: 752px;
}

.icon-search-article {
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  width: 20px;
  fill: #222f3e;
}

input::placeholder {
  color: #6b7480;;
  /* Couleur du texte du placeholder */
}

The special thing about this search is that as soon as you type a letter or a word, all corresponding occurrences will be highlighted, and you can switch from one to the other using the buttons. And as an added bonus, this bar is sticky, meaning it will follow the scrolling of your page.

It's probably not very optimized code, and it could be much cleaner if I had all the skills for it, but it's functional

Don't hesitate if you need any help!

Result :


Thanks