AJAXify new theme engine

[JustinSainton]

A new 4.0 requirement.

[JustinSainton]

Since we're getting all AJAXy, it's probably worth looking into fortifying some of our conventions for animation.

I dig this --> http://tympanus.net/Tutorials/CircularProgressButton/ These are also cool, some of them - http://tympanus.net/Development/ProgressButtonStyles/

[benhuson]

AJAX will be required for #2007

[jtsternberg]

related: https://github.com/wp-e-commerce/WP-e-Commerce/issues/516

[JustinSainton]

It's a lot of code (1,400 lines), but I'd like to audit https://github.com/wp-e-commerce/WP-e-Commerce/blob/master/wpsc-core/js/wp-e-commerce.js and make sure we have some level of parity with the parts of that which provide some level of helpful functionality. Will audit and outline below:

• [ ] L1-317 - These are all essentially helper functions for creating the customer cookies and setting customer meta. I'm not totally sure that we still need these.
• [ ] L318-354 - Determines whether or not a shipping quote needs to be refreshed. This would generally be based on the existence of a regionally-based shipping calculator (which is most of them) and regional data being changed (ZIP, State/Province, Country).
• [ ] L356-401 - Updates checkout info with dynamic information. This is architected in a less than optimal way, in my opinion, but obviously, we need a JavaScript API for refreshing fragments.
• [ ] L402-550 - All of these functions are additional functions that are intended to act as an API for modifying a customer's metadata with checkout form values. I don't love it, as it creates an AJAX request every time a checkout form field is changed. I think we can re-think this and do better.
• [ ] L551-612 - This function ensures that the shipping country list on the checkout page is only populated by the countries that we are allowed to ship to. It also ensures that if "shipping same as billing" is checked, both the "billing country list" and "shipping country list" are dynamically set to only allow those countries. I think some of this may be overkill - as the shipping country list should always be set this way, and we can likely quite easily adjust the billing country list if needed. See 5e18b8611b2f0edf8e3b71438a009a05030d36d3.
• [ ] L613-697 - Adjusts the label for "State", based on the country selected. Also adjusts the options available in the "states" dropdown, based on country.
• [ ] L698-702 - A helper function. Not sure if still necessary.
• [ ] L704-744 - More helper/wrapper functions for modifying state/country dropdowns
• [ ] L745-768 - Not sure if needed - a helper function that isn't used anywhere in file.
• [ ] L769-783 - Not sure if needed, a function to determine whether or not to show shipping fields. Pretty sure we already have this in TEv2.
• [ ] L784-1049 - A significant number of functions, all related to the metadata and fields that surround the countries and regions being adjusted dynamically. I don't know that this specific functionality is NOT needed (it is nice to have) - but I think we can craft a more thoughtful API around these types of things.

document.ready

This next part of the code is highly procedural code that runs on document.ready.

• [ ] L1057-1074 - Backwards compatibility code, not needed
• [ ] L1076-1093 - More code surrounding meta, region, and country changes.
• [ ] L1094 - No need to reproduce. JS to adjust form visibility based on "shipping same as billing".
• [ ] L1096-1103 - Do not reproduce. Gravatar implementation for emails.
• [ ] L1104-1112 - This fixes a bug in the checkout form implementation that results in numeric values for checkout region fields. We should remove this and fix the actual bug.
• [ ] L1114-1159 - AJAX Add to Cart Form Submission Handler. Specific functionalities here to reproduce:
  • [ ] Either find a way to submit file uploads via AJAX, or don't submit files via AJAX
  • [ ] Implement animation
  • [ ] Return filterable output (already done via @jtsternberg's work on fancy notifications)
  • [ ] Update any widget cart counts as well
  • [ ] Trigger custom events
• [ ] L1161-1167 - I don't believe this is needed. Code to show/hide sub-category lists in category widget.
• [ ] L1069-1174 - I don't believe this is needed. Code to show/hide additional descriptions for products. Should be handled at a theme level, most likely.
• [ ] L1176-1254 - AJAX Variation Select Change Handler. Specific functionalities here to reproduce (hint: most of it):
  • [ ] Ensure that it is not possible to select a variation combination that doesn't exist (See #1373)
  • [ ] Trigger custom event
  • [ ] If a variation is found, handle situations where it is out of stock, or in stock.
  • [ ] If it is not found, handle this as well.
  • [ ] Modify price (including sales price) as needed.
  • [ ] Ensure that any quantity fields are made aware of any stock limitations for this specific variation combo.
  • [ ] L1256-1265 - Not sure this is necessary. It appears to have been relevant for premium plugins that have not existed for years.
• [ ] L1266-1292 - Handles loading the cart widget fragment. Would like to see this replaced by a proper cache fragment loading API. WooCommerce does a fine job of this.
• [ ] L1294 - 1304 - Handles emptying cart via AJAX. Triggers custom event.
• [ ] L1307-1338 - Handles updating totals when shipping methods are changed.
• [ ] L1344 - 1384 - Deprecated functions, no need to reproduce.
• [ ] L1385-1403 - Used to change profile country - maybe only on my account page? Not sure if needed.
  • [ ] L1404-1430 - Animation for variations form fields. Again, not sure if needed? Open to suggestion here. It's intended to be a UI cue, ensuring people cannot add an item to cart without selection all necessary variations.
• [ ] L1431-1441 - Gold Cart related functionality - not necessary. MD5 function for Gravatar, not necessary.

To consider:

Contrary to years previous, we have good prior art now from our competitors like WooCommerce. Things like fragment caching, UI-blocking, custom endpoints, etc. should be considered as part of this revamp.

[JustinSainton]

Full audit complete 👍