CMS Developers

<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>

          
        

          
            .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;
}

          
        

          
            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' );
  } );
} );