shopify-ajaxcart-toggle.md

This tutorial walks you through the steps to implement a custom checkout flow that displays the login ship inside the cart drawer when an anonymous user clicks on the checkout button.

You can find an example of a similar flow here :

https://www.mvmtwatches.com/

Install the login ship and enable the "Show inline" option.

• Enable the login ship from Hull's app page on your Shopify admin
• Open the Hull dashboard to change the ship's default configuration
• Set the inject location to #hull-login-inline
• Enable the "Show inline" option in the Ship's settings

Integrate in your theme

Add the following element in your theme inside the cart drawer template.

<div id='hull-login-inline' style='display:none;'></div>

It will be the container where the inline login ship will be injected. We set the style to 'display:none' so that it's hidden until the user clicks on the "Checkout" button.

To display it when your users click on the checkout button :

<script>
jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) {
  // Toggle between cart and login 
  function toggleCartLogin(display) {
    var $cartContainer = $('#CartContainer');
    var $loginContainer = $('#hull-login-inline');
    if (!$loginContainer || $loginContainer.find('[data-hull-ship]').length == 0) {
      return ;
    }

    if (display === 'login') {
      $cartContainer.hide();
      $loginContainer.show();
    } else {
      $cartContainer.show();
      $loginContainer.hide();
    }
    return true;
  }

  // Intercept form submit event to display login
  $('form.ajaxcart').on('submit', function(evt) {
    // Make sure Hull is loaded
    if (!window.Hull) return false;
    // Make sure the user is not logged in 
    if (Hull.currentUser()) return false;
    // Make sure the ship is in the page
    if (toggleCartLogin('login')) {
      Hull.on('hull.user.login', toggleCartLogin);
      evt.preventDefault();
    }
  });

  // Make sure the cart is displayed when the drawer opens
  toggleCartLogin('cart');
});
</script>

This code is based on the standard cart drawer implementation found in Shopify Timber.

Your might have to adapt it for your particular theme.

You will find the source code and documentation of that login ship here :

https://github.com/hull-ships/hull-login https://github.com/hull-ships/hull-login/blob/master/src/readme.md

Enjoy