Mobile menu and new ajax cart drawer

[cshold]

Demo - https://carson-dev-shop.myshopify.com/

Issues addressed

Adding a mobile menu fixes #292
Ajax cart callback fixes #244

Code details

Drawers

• Minimized replaceUrlParam function, added prepareTransition
• timber.drawersInit sets up multiple drawers (in this case menu and cart)
• use Drawers module from Shopify's Marketing Assets (private repo, sorry public folk)
  • JS slightly trimmed down because of the original module using other asset properties/variables
  • Added support for opening drawers with JS rather than click
    • evt detected
    • call timber.RightDrawer.open() after a product is added to the page
  • Pulled in the CSS and animations from there too

Ajax Cart

• Removed ajaxify.scss.liquid and moved simplified styles into timber.scss.liquid. JS remains in a separate file
• Cart layout in drawer comes from snippets/ajax-cart-template.liquid instead of using .load() for templates/cart.liquid. This gives us more flexibility in the different layouts given their use.
• Updated event delegation for cart quantity elements

Other changes

• Base <button> reset styles
• Added transform mixin
• Moved search bar into header above navigation
• Standardized some icon font weights and sizes

Cart callback

A few issues were tracked because the ajax cart's callback ran before the DOM was actually updated. This PR fixes that and lets you define a callback function when initializing the cart plugin the same way the Shopify option_selection.js does on the product page.

Updated docs PR - #352

@stevebosworth @mpiotrowicz @pauldpritchard

[pauldpritchard]

The price isn't quite right-aligned with everything else

Any particular reason for not having an indicator while the add to cart request is running? If its a matter of keeping assets trim, you could just retitle the button during the request to "Adding..."

Otherwise, all good on my end.

[cshold]

@pauldpritchard Fixed the cart alignment.

As for a load indicator, there are is-adding and is-added classes added to the "Add to cart" button, so designers/devs have the freedom to do what they want there. If they'd rather the cart drawer doesn't open immediately, they can remove that from the afterCartLoad callback at the bottom of layout/index.liquid and come up with a custom notification.

[stevebosworth]

Can you change to use .on('submit', function(evt) to stay current with the styleguide?

[cshold]

For sure. This was pre-stylguide so thanks for catching.

[cshold]

Would be great to get another set of eyes from @Shopify/fed on this.

For context, this PR drastically simplifies the ajax cart plugin in Timber, along with adding slide out drawers (from marketing assets) and a mobile navigation. More comments at the top.

[cshold]

@carolineschnapp are you able to take a look at this too?

[stevebosworth]

@cshold thanks for explaining the marketing assets stuff. Took another look and looks good to me. I have some questions about the JS but nothing that needs fixing necessarily. 👍

[cshold]

See my last commit @carolineschnapp @stevebosworth

Instead of that function being used, you can now bind with:

jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) {
  // Bind to 'ajaxCart.afterCartLoad' to run any javascript after the cart has loaded in the DOM
});

I hadn't thought of the straight copy/paste of a snippet, but with that in mind this is definitely the better way to go. What do you think of the implementation?

[carolineschnapp]

I think app developers needed the custom event. Good-citizen apps that perform actions on the cart “page” — and there are many of those — are encouraged to use the script_tag API. This means when the app is installed, an externally-hosted JavaScript file is loaded, and when same app is removed, that JS file is no longer loaded. Based on the need to run JavaScript independently from a theme's files — without modifying a theme's files, the custom event thing gets a +1. Otherwise you need a lot of code to behave responsibly in your own JavaScript — you cannot undermine what other people may be doing:

if (typeof afterCartLoad === 'undefined') {
  var afterCartLoad = function(data) {
    /* Do something */
  }
}
else {
  var original_afterCartLoad = window.afterCartLoad;
  var afterCartLoad = function(data) {
    original_afterCartLoad(data);
    /* Do something */
  };
}

There are also my own “selfish” reasons: a dozen tutorials in our docs that will be easily revamped to work with all of our newer themes.

I am scared I may have swayed you in a wrong direction, though @cshold , I am no JavaScript developer, so I am curious what others may think of this.

CC @Shopify/design-gurus

[carolineschnapp]

.... and that fixed it. I am able to implement multiples currencies the same way I always have, except I add this code to my code, and voilà:

jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) {
  Currency.convertAll(shopCurrency, jQuery('[name=currencies]').val());
}); 

[carolineschnapp]

Really happy with this! 💱 🍰 ❕ 🎆

[mpiotrowicz]

so is ajaxify now ajax-cart.js? Why the rename? (out of curiosity)

[cshold]

Clean cut away from the old version. If bugs pop up around the ajax cart, we'll instantly know if it's v1 or v2.

[cshold]

See https://github.com/cshold/Timber/commit/f9c046f83b1572ec4160815c66a5fa43cdddfda3 for the changes between ajax-cart.js and ajaxify.js.

[mpiotrowicz]

General note on the size of this PR - the description was super valuable to see what's been updated, but this both touches a lot of files and a lot of functionality was rolled into this single PR. Can these be split up in the future? Will really help with reviews

[mpiotrowicz]

this seems like a pretty big change for .grid, if it affects all grids inside of .site-header, what about creating a variant class for the grid in this case? Reading the markup, if there aren't any other clues that the grid changes, I'd be surprised by this behavior. Why is it necessary within the site-header?

[cshold]

This just removes the media query around the styles so that elements always use the table layout. Agreed though, will use variation class.