Quick Order Form bug fixes and improvements

[brettflorio]

Consistency in naming

There are a few inconsistencies with the "quick order form" currently. Let's tidy them up with the following:

• The element should be foxy-items-form. (We like foxy-products-form better but for consistency with the API, let's keep items or @brettflorio will hate it.)
• The products property on the component should change to items.

Consistency in Data?

Currently, items added as <foxy-item /> elements don't show up in the .products property of the element (which we'll rename to .items, per above). Can we make this work? I realize they might be technically different, but I'd "expect" for <foxy-item /> elements to be in the items property, as well as vice versa. Though I realize perhaps that might not actually make sense from a DOM + JS perspective, as they aren't the same things.

QuickOrder#submit fails due to CORS

We can't (currently) do a POST to the /cart endpoint, as we don't support CORS. For now, just make this do a normal POST to /cart.

Default cart=checkout parameter

Add cart="checkout" as a default parameter. Valid options are checkout, empty/null, and add (which is the same as empty/null). By default, this page should send the customer to the checkout.

Default Subscription Parameters

Add sub_modify="replace" and sub_restart="auto" to the output. Allow them to be overridden with empty values or as here: https://wiki.foxycart.com/v/2.0/products/subscriptions#subscription-related_product_options.

Default target parameter

Same as #6. This component may be used inside an iframe (like in Wix), and it should work by default there.

Default to quantity=0

I think we discussed this before, but it looks like it was lost. Two issues:

1. Need to default to quantity 0, not 1, if not specified.
2. Apparently a quantity 0 throws an error? "Invalid product". See it like this:

   const foxyQuickOrderForm = document.querySelector('foxy-quick-form');
   const foxyQuickOrderFormItems = document.querySelectorAll('foxy-quick-form foxy-item');
   for (let i = 0; i < foxyQuickOrderFormItems.length; i++) {
     const item = foxyQuickOrderFormItems[i];
     item.quantity = 0;
   }

Thumbnail Display Options

The goal here would be to allow people to more directly style the thumbnail. For instance:

1. cover and dropshadowed
2. contain and no dropshadow
3. either (cover/contain) and border, not shadow

The best way to do this may be with a CSS shadow part. TBD.

[ndvo]

Thumbnail Display Options: @dantothefuture implemented this feature. at d946ddf.

Adding a checklist to ease keeping track of this.

• Consistency in naming
• Consistency in Data
• ItemsForm#submit fails due to CORS
• Default cart=checkout parameter
• Default Subscription Parameters
• Default to quantity=0
• Thumbnail Display Options

[github-actions]

🎉 This issue has been resolved in version 1.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀