Hubspot – personalizar búsqueda

Hubspot – personalizar búsqueda

HTML

<div class="blog-search__wrapper">
    <div class="blog-search">
        <label>Search the Blog <br>
      <input type="search" placeholder="What are you looking for?" class="search__field">
    </label>
    </div>
    <div class="search__results">
        <div class="search__results--list" data-portal="57042">
            <!-- Results Here -->
        </div>
    </div>
</div>

CSS

.hs-search-highlight {
    color: #ff6600;
}
.blog-search__wrapper {
    position: relative;
}
.search__results {
    position: absolute;
  top: 100%;
  width: 100%;
  z-index: 100;
}
.search__results--list {
  margin: 0;
  padding: 0;
  height: auto;
  background: #fff;
  box-shadow: 0 10px 5px -1px rgba(0,0,0,.2);
}
.search__item {
  padding: .5rem;
  list-style: none;
    border-bottom: #efefef;
  margin-bottom: .25rem;
}
    .search__item:hover {
    background-color: #eee;
  }
.search__item h3, .search__item p {
    margin: 0
}
.search__item a {
    font-size: 1rem;
}
.search__item p {
    font-size: .7rem;
}

JS

var waitId = null;
$(".search__field").on("keyup", function(e) {
    var searchTerm = $(".search__field").val(),
        searchList = $(".search__results--list"),
        portalId = searchList.data("portal");

    if (searchTerm) {
        var temp = Date.now();
        waitId = temp;
        searchList.empty();
        setTimeout(function() {
            if (waitId === temp) {
                // send event with search term to hubspot
                if ("_hsq" in window) {
                    _hsq.push([
                        "trackEvent",
                        {
                            id: "Blog Search: " + searchTerm
                        }
                    ]);
                }

                var url = "/_hcms/search?type=BLOG_POST&amp;analytics=true&amp;term=" + searchTerm;
                $.ajax({
                    url: url
                }).done(function(data) {
                    searchList.empty();

                    data.results.forEach(function(item) {
                        if (item.type === "BLOG_POST") {
                            var author = "<br><small>by: " + item.authorFullName + "</small>";
                        } else {
                            var author = "";
                        }

                        var analyticsUrl = _hsq.push(["handleLink", item.url, null, true]);
                        var html =
                            '<div class="' +
                            item.type.toLowerCase() +
                            ' search__item"><b><a href=' +
                            analyticsUrl +
                            ">" +
                            item.title +
                            "</a></b>" +
                            author +
                            "</div>";

                        searchList.append(html);
                    });

                    if (data.results == 0) {
                        var html =
                            '<div class="search__item">No results for <b class="hs-search-highlight">' +
                            searchTerm +
                            "</b></div>";
                        searchList.append(html);
                    }
                    // Send Event To Hubspot
                    if ("_hsq" in window) {
                        _hsq.push(["handleSearchLinks"]);
                    }
                });
            }
        }, 200);
    } else {
        $(".search__results--list").empty();
    }
});

Fuente: bluleadz.com

Deja un comentario

ocho + 14 =

Cerrar menú