Jump to content

Remove element from all but shop pages with javascript

Go to solution Solved by Polivantage,

Recommended Posts

Posted (edited)

Hi, I need some help with javascript. I want to remove a search bar (in mobile view especially) from my footer.


- I (successfully) identify whether the url has shop in it.
- then i have an "if" statement that should remove the whole search bar if shop is NOT mentioned in the url.
- beforehand i am doing a function to move my search bar into another element on the page. This works well

My problem is removing the search bar.

<!--SEARCH BAR-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
   var getURL = window.location.href;
   var subString = 'shop';
 
     $(function(){
 let searchBlock = $('#block-yui_3_17_2_1_1717927882701_20949').attr('id','').addClass('header-search-bar');
 $(searchBlock).insertAfter($('.nested-category-title'));
 $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content'));
 })

     if (getURL.includes(subString)) {
          console.log('The URL contains the string "' + subString + '".');
       
     }
     else {
          console.log('The URL does not contain the string "' + subString + '".');
           $('#block-yui_3_17_2_1_1717927882701_20949').remove();
      }      
</script>



Please help!

polivantage.com/shop

 

1.jpg

2.jpg

3.jpg

4.jpg

Edited by Polivantage
Link to comment
Posted (edited)

I suggest breaking this into two issues. When to display the search block and how to move the search block. For the display issue I think you can get this done with CSS alone.

/* only display search block on shop page */

body:not( #collection-6655dc8acb0c260693796438 ) .fe-block-yui_3_17_2_1_1717927882701_20949 {

  display : none;
  
  }

You can target the Fluid Engine class or id for the block.

Then your JavaScript code can deal with only moving the block where needed.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • Solution

I solved it. Here is the solution:

 

<!--SEARCH BAR-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
    $(function(){
   var getURL = window.location.href;
   var subString = 'shop';
   let searchBlock = $('#block-yui_3_17_2_1_1717927882701_20949').attr('id','').addClass('header-search-bar');
   if (getURL.includes(subString)) {
 $(searchBlock).insertAfter($('.nested-category-title'));
 $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content'));
      }   
   else {
     	  searchBlock.remove();
      }     
    })
</script>

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.