HubSpot CMS

SUF Algolia Search

It s a new search module which allows you to leverage the powerful Algolia search in HubSpot.

Created by: il-hubspot

Tags:

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

0 Recommendations

View on:

GitHub

HubSpot Marketplace

HTML + HUBL
<section class="content-algolia-search {% if module.use_custom_search_button_outside_the_module %}content-algolia-search--modal is-hidden{% endif %}">
  <button class="close-algolia js-close-algolia">×</button>
	<iframe id="sufAlgoliaIframe" src="{{ module_asset_url("Marketplace-algolia-search-v2.html") }}?key={{ module.your_algolia_key }}" scrolling="no"></iframe>
</section>

          
        
CSS
          
            .content-algolia-search {
	padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 15px;
  padding-right: 15px;
  max-width: 750px;
  margin: 0 auto;
}

.content-algolia-search--modal {
    position: fixed;
  	z-index: 51;
    width: 100%;
    left: 0;
    right: 0;
    top: 80px;
    padding-left: 50px;
    padding-right: 50px;
    -webkit-box-shadow: 0px 0px 71px -15px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 71px -15px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 71px -15px rgba(0,0,0,0.75);
    background-color: #ffffff;
}

@media (max-width: 767px) {
	.content-algolia-search--modal {
  	top: 0;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.content-algolia-search.is-hidden {
	display: none;
}

.content-algolia-search .close-algolia {
  display: none;
}

.content-algolia-search--modal .close-algolia {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  outline: none;
  font-family: Arial,Baskerville,monospace;
  font-style: normal;
  font-size: 32px;
  line-height: 32px;
  color: #000000;
}

.content-algolia-search iframe {
	width: 1px;min-width: 100%;
  border: 0;
}

          
        
JS
          
            iFrameResize({log:false}, '#sufAlgoliaIframe');

jQuery( document ).ready( function($) {
  $( document ).on( 'click', 'a[href="#show-search"]', function( e ) {
    e.preventDefault();

    var $container = $( '.content-algolia-search--modal' );

    if( $( '.content-algolia-search--modal' ).hasClass( 'is-hidden' ) ) {
      $container.removeClass( 'is-hidden' );
    } else {
      $container.addClass( 'is-hidden' );
    }
  } );

  $( document ).mouseup( function(e) {
      var $container = $( '.content-algolia-search--modal' );

      if( !$container.is( e.target ) && $container.has( e.target ).length === 0 ) {
        $container.addClass( 'is-hidden' );
      }
  } );

  $( '.js-close-algolia' ).on( 'click', function() {
    $( '.content-algolia-search--modal' ).addClass( 'is-hidden' );
  } );
} );

          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

Algolia Search SUF Module

It s a new search module which allows you to leverage the powerful Algolia search in HubSpot.

Benefits:

  • No ads

  • Hassle-free import in HubSpot

  • Use of powerful Algolia search

  • Specially built for HubSpot's CMS

Main Features:

  • Hubspot search module that indexes all website, blog and landing pages content

  • Real time search results layer that shows website and blog search results (quite similar to MacOS search)

  • Based on Algolia Search

  • Can be customized according to your needs

FYI: You will need to setup a free Algolia account to use the search module.

+++ How to setup the Algolia search module? +++

  1. Create a free Algolia account: https://www.algolia.com/users/sign_up

  2. Create an app and copy API code

  3. Paste API code into HubSpot module text field "Your Algolia Key"

  4. If you switch on "Use custom search button outside the module" the search box is only visible and triggered if the visitor clicks on an element that is tagged with \


Algolia Search module demo can be visited here:

https://w.inboundlabs.co/algolia-search-suf-demo


Algolia Search module is part of the Startup Framework template which can be found here:

https://marketplace.hubspot.com/products/inboundlabs/startup-framework-marketplace


Have Questions?

If you have questions, please email me at github (at) inboundlabs.co


HubSpot

Not developing on HubSpot CMS yet?

We'd love to have you a part of our developer community!

 
0 Recommendations

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co