Using a Drawer or Popup Cart with Giftship’s Features

If you like want to use Giftship with a drawer or modal style cart window, this can be accomplished by triggering an initialization function once the drawer style, or modal window style cart is opened.

Before proceeding, please note that this is an advanced tutorial which requires the ability to edit your theme’s javascript files. For a simple solution, you can always opt to utilize the “full page” style cart, where all of Giftship’s features load out of the box.

The first step to implementing Giftship’s features in a drawer style cart is to find the function which controls opening the cart. This can often be found in a file under the Assets directory called theme.js, or similar. Since all themes are different, you will need to find the unique lines of code which open your cart. In the example below, we’re using the free “Narrative” theme from Shopify.

  1. Open your theme.js file under the Assets directory in your theme editor.

2. Find the line of code that opens your cart, and insert the below javascript code somewhere in the callback function, after the cart form has been inserted into the page:

// The below code initializes Giftship's features on the drawer style cart
    
if (typeof(Gs) == 'object' && typeof(Gs.initializeDrawer) == 'function') {
      Gs.initializeDrawer();
}

Now that the code is inserted, when your drawer, or modal style cart is opened, Giftship will initialize, and insert the apps features, just as if you were on the regular cart page.

If the location of the features does not fit with your drawer, or modal style cart, you may need to follow the tutorial to change the location of the ship to multiple address toggle. The snippets of code from these tutorials can be used to edit your drawer or modal carts template.

Can't find the answer in our documentation?
Contact Support