How to add Map in Taskhive on top of the search result like Rentalhive

• Author
  Posts
• 

  fsimoni 1 year, 2 months ago

  Hi Team,
  Is there a way to add Map on top of the search results page like appear on Rentalhive theme?

  Tnx
  Federico

  

  Stivi 1 year, 2 months ago

  use this and adjust the order/

  add_filter(
  	'hivepress/v1/templates/listings_view_page',
  	function( $template ) {
  		return hivepress()->helper->merge_trees(
  			$template,
  			[
  				'blocks' => [
  					'listing_map' => [
  						'type' => 'content',
  					],
  					'page_content' => [
  						'blocks' => [
  							'listing_map3' => [
  								'type'   => 'listing_map',
  								'_order' => 1,
  							],
  						],
  					],
  				],
  			]
  		);
  	},
  	1000
  );

  

  Stivi 1 year, 2 months ago

  Dream Home

  

  fsimoni 1 year, 2 months ago

  ???
  Where is the Map???

  
  @ihor please help me!

  Federico

  

  Stivi 1 year, 2 months ago

  In my page it is in the end, because i wanted it to be in the end, but you need to adjust the order.

  

  fsimoni 1 year, 2 months ago

  @stivi
  ah ok, I see now.
  But if I want insert an icon (Hide/show Map) like Rentalhive?

  Tnx
  Federico

  

  Stivi 1 year, 2 months ago

  add_filter(
  	'hivepress/v1/templates/listings_view_page',
  	function( $template ) {
  		return hivepress()->helper->merge_trees(
  			$template,
  			[
  				'blocks' => [
  					'listing_map' => [
  						'type' => 'content',
  					],
  					'page_content' => [
  						'blocks' => [
  							'listing_map3' => [
  								'type'   => 'listing_map',
  								'attributes' => [
  								'id' => [ 'map' ],
  							],
  								'_order' => 1,
  							],
  						],
  					],
  					
  					'page_topbar'         => [
  						'blocks' => [
  							'custommaps' => [
  								'type'   => 'content',
  								'content' => '<a href="#"><i class="hp-icon fas fa-map"></i><span>Show Map</span></a>								 
  <script>
  function myFunction() {
    var x = document.getElementById("map");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }
  </script>',
  								'_order' => 15,
  							],
  						],
  					],
  					
  				],
  			]
  		);
  	},
  	100
  );

  

  Stivi 1 year, 2 months ago

  this is the code

  

  Stivi 1 year, 2 months ago

  you must add this css also in customize:

  #map{
  	display:none;
  }

  

  fsimoni 1 year, 2 months ago

  @Stivi
  Tnx for the snippet, work very well, but the CSS above it doesn’t work.

  Federico

  

  Stivi 1 year, 2 months ago

  Well it must work:
  Try this:

  #map{
  	display:none!important;
  }

  This code hides the map in order for the toggle to be hidden, and on click to activate.

  

  fsimoni 1 year, 2 months ago

  @Stivi,
  sorry I mean the JS script doesn’t work

  Federico

  

  Stivi 1 year, 2 months ago

  Soyy, didnt copy the hole code:

  add_filter(
  	'hivepress/v1/templates/listings_view_page',
  	function( $template ) {
  		return hivepress()->helper->merge_trees(
  			$template,
  			[
  				'blocks' => [
  					'listing_map' => [
  						'type' => 'content',
  					],
  					'page_content' => [
  						'blocks' => [
  							'listing_map3' => [
  								'type'   => 'listing_map',
  								'attributes' => [
  								'id' => [ 'map' ],
  							],
  								'_order' => 1,
  							],
  						],
  					],
  					
  					'page_topbar'         => [
  						'blocks' => [
  							'custommaps' => [
  								'type'   => 'content',
  								'content' => '<a href="#"><i class="hp-icon fas fa-map"></i><span>Show Map</span></a>								 
  <script>
  function myFunction() {
    var x = document.getElementById("map");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }
  </script>',
  								'_order' => 15,
  							],
  						],
  					],
  					
  				],
  			]
  		);
  	},
  	100
  );

  

  Stivi 1 year, 2 months ago

  add_filter(
  	'hivepress/v1/templates/listings_view_page',
  	function( $template ) {
  		return hivepress()->helper->merge_trees(
  			$template,
  			[
  				'blocks' => [
  					'listing_map' => [
  						'type' => 'content',
  					],
  					'page_content' => [
  						'blocks' => [
  							'listing_map3' => [
  								'type'   => 'listing_map',
  								'attributes' => [
  								'id' => [ 'map' ],
  							],
  								'_order' => 1,
  							],
  						],
  					],
  					
  					'page_topbar'         => [
  						'blocks' => [
  							'custommaps' => [
  								'type'   => 'content',
  								'content' => '<a onclick="myFunction()" class="hp-link--hide-map hp-link" data-toggle="map" href="#" data-component="toggle" data-url="" data-icon="map" data-caption="Mbyll Harten" data-state=""><i class="hp-icon fas fa-map"></i><span>Shfaq Harten</span></a>								 
  <script>
  function myFunction() {
    var x = document.getElementById("map");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }
  </script>',
  								'_order' => 15,
  							],
  						],
  					],
  					
  				],
  			]
  		);
  	},
  	100
  );
  
  

  

  fsimoni 1 year, 2 months ago

  @Stivi

  Ok, work very well
  Tnx again

  SOLVED

  

  ihor 1 year, 2 months ago developer

  Thanks @Stivi

• Author
  Posts

New Reply

This forum has been archived and is no longer accepting new posts or replies. Please join our new community forum for support & discussion.