The "slide out" cart isn't displayed after adding a gift card to the cart

Govalo works right out-of-the-box with most Shopify themes. Sometimes, however, a few adjustments may be required, so the customer experience when purchasing a gift card is consistent with what you offer for other products.

The slide out cart, sometimes also called cart drawer or slider cart, is an element often present on Shopify themes, being also implemented by a few 3rd party apps, as shown below:

We have identified a few instances in which some extra custom work is required to have the slide out cart displayed after a gift card is added to the cart. One of them is when you're using the Smart Cart feature, implemented by the app Rebuy Engine. Below you'll find the steps to fix it in this case.

Rebuy Engine's Smart Cart

We need to find the event that makes the slide out cart to be displayed for other products, and then attach an event listener to Govalo’s “Add to Cart” button to have it displayed the same way for gift cards. This requires some investigation, so we will go through a few ways of looking into it.

You'll start by accessing the page of a regular product, for which the slide out cart is displayed, then using the browser's Developer Tools, inspect the "Add to Cart" button. There are two ways of inspecting the event listeners attached to the button.

Option 1:

Through the Console in the Developer Tools:

1. Start by query selecting the button's class/id (in the example below, the class used is ".add-to-cart", so you need to change it according to the classes in your "Add to Cart" button):

const button = document.querySelector(".add-to-cart");<br>

2. Retrieve the event listeners for the button

const listeners = getEventListeners(button);<br>

3. Step through the debugger until you find the function/event that's causing the cart to open:

debug(listeners.click[0].listener);<br>

Option 2:

1. Inspect the button, then go to the Event Listeners tab in the Developer Tools.
2. Look through the button's events (we suggest that you start with the click events) and remove them one by one until you notice which one stops the smart cart from opening.

Once you find that event, attach it to Govalo's event and "Add to Cart" button:

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

{% if template contains 'product' %} 
	{% if product.metafields.govalo.recharge %}
		<script>
			(function anonymous(smartcart) {
				window.addEventListener("govalo:toggleModal", (e) => {
      				const addBtns = document.querySelectorAll(".gvlo-button");
      				addBtns.forEach((btn) => {
        				btn.addEventListener("click", (e) => {
						Rebuy.SmartCart.show();
						});
					});
				});
			})();
   		</script>
	{% endif %}
{% endif %}<br>

3. 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>