Knowledge Base

 When we don't have access to the underlying functionality, code base or layouts and there are no way to catch the event of changes and display of search results natively, we are forced to use javascript mutation observer to catch the event even to just hide an unwanted element

 Shooting sparrows with canons — laser guided scalpels, with mortars.

The resulting code:

<script>
  		//watching for changes to the SiteSearch360 plugin search element layer result
  		
      // Select the node that will be observed for mutations
      const targetNode = document.querySelector('body');

			// Options for the observer (which mutations to observe)
			const config = { attributes: true, childList: true, subtree: true };

			// Callback function to execute when mutations are observed
				const callback = (mutationList, observer) => {
  					for (const mutation of mutationList) {
    						if (mutation.type === "childList") {
      						//console.log("A child node has been added or removed: "+mutation.previousSibling);
                  //console.log(mutation.previousSibling);
                  
                  mutation.addedNodes.forEach(function(added_node) {
											if(added_node.id == 'ss360-layer') {
                        ss360Observer();
												//console.log('#ss360-layer element has been added');
													observer.disconnect();
												}
										});
                  
    						} /*else if (mutation.type === "attributes") {
      						console.log(`The ${mutation.attributeName} attribute was modified.`);
    						}*/
  						}
					};
      
      // Create an observer instance linked to the callback function
				const observer = new MutationObserver(callback);

				// Start observing the target node for configured mutations
				observer.observe(targetNode, config);
      
      function ss360Observer(){
        var ss360_config = { childList: true };
      	var ss360_layer = document.getElementById("ss360-layer");
        
        var ss360_callback = (mutationList, observer) => {
  					for (const mutation of mutationList) {
    						if (mutation.type === "childList") {
      						//console.log("A child node has been added or removed: "+mutation.previousSibling);
                  //console.log(mutation.previousSibling);
                  
                  mutation.addedNodes.forEach(function(added_node) {
											//console.log('node added to the #ss360-layer');
                    	checkBrandpresence();
										});
                  
                  mutation.removedNodes.forEach(function(removed_node){
                    
                  });
                  
    						} 
  						}
					};
        
        // Create an observer instance linked to the callback function
				const observer = new MutationObserver(ss360_callback);

				// Start observing the target node for configured mutations
				observer.observe(ss360_layer, ss360_config);
      }
      
      function checkBrandpresence(){
        $('section#ss360-layer td:contains("Brand")').each(function() {
          remove_brandinformation($(this));
				});
 				
        /*
        if($('section#ss360-layer').find('td:contains("Brand")').length){
          var brand_nameelem = $('section#ss360-layer').find('td:contains("Brand")').next();
        	//console.log('found brand element: '+brand_nameelem);
          remove_brandinformation(brand_nameelem);
        }*/
      }
      
      function remove_brandinformation(brand_elem){
        var brand_nameelem = brand_elem.next();
        if(brand_nameelem.text() == 'Designs for Health'){
          console.log('found brand element in ss360 being equal to Designs for Health and information removed');
          brand_nameelem.parents('article.ss360-suggests__wrap').find('.ss360-dp__price__excl__tax_').remove();
          brand_nameelem.parents('article.ss360-suggests__wrap').find('span:contains("Add to cart")').parents('button').remove();
          brand_nameelem.parents('article.ss360-suggests__wrap').find('.ss360-suggests__image-container').remove();
          //console.log('does the elemnt exist: '+brand_nameelem.parents('article.ss360-suggests__wrap').find('span.no-account-message').length);
          if(brand_nameelem.parents('article.ss360-suggests__wrap').find('span.no-account-message').length == 0){
          brand_nameelem.parents('article.ss360-suggests__wrap').find('.ss360-suggests__content').append('<span class="no-account-message"><a href="https://www.arcanaempothecary.com/account/login/" class="btn btn--lg btn--primary brand-account-login">Sign up / Login </a> to see all product information for this brand</span>');
          }
        }
      }
      
  	</script>