Clicking "Send a gift card" adds the item immediately to the cart, without details

Note: implementing the solutions proposed in this document require advanced programming skills, therefore we suggest obtaining assistance from a theme developer. You may also contact us at support@govalo.com - our team will be happy to assist with the solution.

Rather than an "Add to Cart" button, the gift cards configured through Govalo have a button that says "Send a gift card" which, when clicked, brings up our modal through which customers can fill out the recipient details:

We've found some instances in which clicking "Send a gift card" ends up adding the gift card product to the cart before our modal comes up, causing our properties to be missing. One of these cases is when you're using the Sticky Add to Cart app. See below the steps to resolve this issue.

Not using Sticky Add to Cart, but still having this issue? Reach out to us at support@govalo.com so we can help you looking for a solution.

Sticky Add to Cart

Create a new file in your Shopify theme (you may name it "govalo").
Add the following code to it:

{% if template contains 'product' %} 
	{% if product.metafields.govalo.giftCard == true %}
		<script>
			//triggers the cart to open once we press Add to Cart in our modal
  			window.addEventListener('govalo:productAddedToCart', () => {
        		SATCB.Widgets.CartSlider.openSlider()
    		});
			// Add event listener to dom and remove the event that adds our product to the cart immediately
			window.addEventListener("load", () => {
				function handleGovalo() {
					$('.gvlo-trigger').unbind("click");
				}
				// Prep ovserver
				let observer = new MutationObserver((mutation, me) => {

					const gvlo = document.querySelector("#gvloApp");
					if (gvlo) {
 						handleGovalo();
					}
				});
				observer.observe(document, { childList: true, subtree: true });
			});
		</script>
	{% endif %}
{% endif %}

Render the newly created file by adding the following line to the theme.liquid file (make sure to do it before the closing </body> tag):

{% render 'govalo' %}<br>