New Way For adding wishlist collection icon in app embed

<script> 
   // ===============================
	// CONFIGURATION PER THEME
	// To use to get when a card is added - This has to be specific to product cards, note we can have mutlpile cards in site
	var _whc_cardSelector = ".card-wrapper.product-card-wrapper";
	// to get the link from within this card 
	var _whc_linkInCardSelector = "a[href*='/products/']";
	// Leave empty to use same card selector
	var _whc_iconPlacementInCardSelector=""; 
	// I: First Child below it  (default ) , B: before the selector, A: After the selector
	var _whc_iconPlacementInCardMode="I";   
	// THIS IS NOT TO BE USED NORMALLY, only left in place here to be used if needed by CS Agent for some themes
	var _whc_productHandleExtractor= null;
 
	// ===============================
 
	var _wh_addIconsToCollectionViewCard = (_p_card)=>{
			// 1. Detect cards, this one may need something like arrive js or similar plain js, using regular document ready alt in plain js fr now
			try{
				// 2. Card detcted , lets extract link to get handle of product
				var _p_linkFoundHandle;
				if( _whc_productHandleExtractor){
					try{
						_p_linkFoundHandle = _whc_productHandleExtractor(_p_card);
					}catch(exErr){
						console.log("[WH-Coll-Error] Error in the external product handle extractor", exErr, _p_card);
					}
				}
				// Default and failover for custom handlers
				if(!_p_linkFoundHandle){
					var _p_linkFound = _p_card.querySelector(_whc_linkInCardSelector);
					if(_p_linkFound && _p_linkFound.href){
						var _p_linkPath = new URL(_p_linkFound.href).pathname;
						_p_linkFoundHandle = _p_linkPath.substring(_p_linkPath.indexOf("/products/")+10);
					}
				}
				if(_p_linkFoundHandle){
					 // 2.1 Confirm button is not already added
					 var _iconContainerElementOnPage = _whc_iconPlacementInCardSelector ? _p_card.querySelector(_whc_iconPlacementInCardSelector) :_p_card ;
					 //if(_iconContainerElementOnPage && ! _iconContainerElementOnPage.querySelector(".wishlist-hero-custom-button[data-wlh-handle='"+_p_linkFoundHandle+"']") ){
					 if(_iconContainerElementOnPage && ! _iconContainerElementOnPage.querySelector(".wishlist-hero-custom-button")){
						console.log("call 10")
						// 3. Now lets Prepare the div ( similar to quick view )
						 var buttonDiv = document.createElement("div");
						  buttonDiv.classList.add("wishlisthero-floating");
						  buttonDiv.classList.add("wishlist-hero-custom-button");
						  buttonDiv.setAttribute("data-wlh-handle", _p_linkFoundHandle);
						  // TODO: have the two modes below configurable
						  buttonDiv.setAttribute("data-wlh-mode", "icon_only");
						  buttonDiv.setAttribute("data-wlh-view","Collection");
 
						// 4. lets place the button in place			
						switch(_whc_iconPlacementInCardMode){ 
							 case "A":
								 _iconContainerElementOnPage.parentNode.insertBefore(
									 buttonDiv,
									 _iconContainerElementOnPage.nextSibling
								);
								break;
							 case "B":
								 _iconContainerElementOnPage.parentNode.insertBefore(
									 buttonDiv,
									 _iconContainerElementOnPage
								);
								break;							
							 case "I":
							 default:
								_iconContainerElementOnPage.insertBefore(
									buttonDiv,
									_iconContainerElementOnPage.firstChild
								);
								break;
						}
						// 5. Finally, trigger the JS event to prepare the buttons
						var ev = new CustomEvent("wishlist-hero-add-to-custom-element", {
							detail: buttonDiv,
						});
						document.dispatchEvent(ev);			
					}
				}
			}catch(err){
				console.log("[WH-Coll-Error] error adding element in place", err, _p_card);
			}
		// });
 
	}
 
 
	function wh_loadScript(scriptUrl) {
		const script = document.createElement('script');
		script.src = scriptUrl;
		document.body.appendChild(script);
		return new Promise((res, rej) => {
			script.onload = function() {
			res();
			}
			script.onerror = function () {
			rej();
			}
		});   
	}
	document.addEventListener("DOMContentLoaded",()=>{
		document.querySelectorAll(_whc_cardSelector).forEach((elem)=>{
				_wh_addIconsToCollectionViewCard(elem);
			})
		wh_loadScript('https://cdn.jsdelivr.net/npm/arrive@2.4.1/src/arrive.min.js').then(function(){
			document.arrive(_whc_cardSelector, function (elem) {
				_wh_addIconsToCollectionViewCard(elem)
			});
		});
	});
</script>