Note: This feature is in beta currently. Please contact us if you notice any bugs.

Drawer cart allows your customers to add, remove, and update items from their Cartfunnel shopping cart without leaving your website.

The regular flow

With Cartfunnel’s standard installation, a customer adds an item to his or her shopping cart either by clicking on a link or by sending a POST request within a form.

After the request is made, the customer is redirected to the shopping cart, which is hosted at https://yoursubdomain.cartfunnel.net or your customized domain.

The Drawer Cart flow

When you use a drawer cart flow, Cartfunnel will display allow you to embed a shopping cart within an iframe — which you can then show using some custom coded modal or using our default example template.

The iframe’s template is saved in Cartfunnel and is in the same HTML Liquid format as all the other templates. You’ll be able to customize how the cart looks while letting customers remain on your site throughout the entire process.

To get started

In your admin dashboard, head to Themes and Drawer Cart:

Once you’re there, you’ll need to enable the drawer cart functionality, so that the iframe accessible endpoint at https://yoursubdomain.cartfunnel.net allows access:

The second step involves editing the custom code which will be displayed within the src of an iframe (eg. <iframe src=”https://yoursubdomain.cartfunnel.net/drawer”></iframe>). This is called the drawer cart template.

Shopify installation

If you’re on Shopify, follow the instructions below to install drawer cart.

First of all, ensure that you’ve followed the Shopify installation guide. You’ll also need to create a separate snippet. Here, we’ll call it “cf_custom.liquid”. This will go into the snippet folder, and you’ll include it along with “cf_core” like so:

<!-- Cartfunnel -->
{% include 'cf_core' %}
{% include 'cf_custom' %}
<!-- Cartfunnel -->

In cf_custom, you’ll need to create the code that will do the following:

  • Show the cart
  • Hide the cart
  • Refresh the cart
  • Override the default add to cart button
  • Handle any styling of the modal or drawer
  • Handle redirecting the customer to your Cartfunnel checkout when they click on Checkout

Because we’re working with iframes, there are certain restrictions that browsers impose for security reasons. As a result, cross domain iframes (such as what we’re using here) require these extra steps.

For a complete basic code, please take a look at this Shopify-specific integration gist code to paste into your cf_custom snippet file.

In the snippet, we’ve required jQuery for use as a utility function. We’ve also added some custom parent-child iframe event listeners so that the parent window (ie. your website) will be able to tell when a user clicks on the close button or continue to checkout button, as well as when a window resizing event occurs.

To trigger the showing of the cart, you can call Cartfunnel.showDrawerCart(true); with Javascript.

Example:
<a href="#" onclick="Cartfunnel.showDrawerCart(true);return false;" >
Cart
</a>

Note: In our example code, the parameter true in Cartfunnel.showDrawerCart(parameter); will refresh the content of the iframe. False will not.

The following are the events that are sent from the child window to the parent window that you can listen to. The event can be accessed by the parameter at event_id, and the value (if any) at value.

event_id value Description
closeCFModal none When the close modal link is clicked
redirectToCartfunnel none When the customer clicks on a link to redirect to Cartfunnel for checking out
redirectToCartfunnelAndSkipCartPage none Same as redirectToCartfunnel except will skip the Cartfunnel cart page
modalHeight height in pixels When the content of the iframe changes height
cartToken Cart token ID Due to some browsers (eg. Safari) not allowing cross domain cookies within an iframe, Cartfunnel utilizes a unique token ID to persist cart sessions across page refreshes and domains. In the sample code, we attach this token to all outgoing requests to persist the cart session.

Due to the advance nature of this integration, please contact support if you need help. Note – We cannot offer customization for the display of your modal, but may be able to offer suggestions. Our example code does not use any external libraries (other than jQuery) in order to keep things simple. The example code is also mobile responsive.