That looks a bit better! In this section, we will add a billing address to a checkout, create a consignment, and update a consignment to add a shipping option directly from the storefront. ... Add items to a shopper’s cart from the storefront, retrieve and display customer order information, update billing addresses, and clear current carts. Next create a file inside the bulk-order-form directory named bulk-order-form.jsx. Check the product for order_quantity_minimum and order_quantity_maximum for the correct amount to add to the cart. The bulk order form we’re going to build uses the free BigCommerce Cornerstone theme, the BigCommerce Storefront API, and React. Pass your cartId and itemId to the deleteCartItem() helper function to delete the line item. Instead of simply logging the result of the cart API request, we’ll take the results and determine whether to invoke either function. Create the createConsignment()helper function to test this functionality. The card ID was returned as part of the “Create a cart” POST request. Options and modifiers refer to a list of choices on a product. The required modifier on the storefront is missing. It does not contain customer-related data. Leave us a comment or reach out by tweeting us @BigCommerceDevs! Let’s get some products loaded in. While there isn’t currently a public-facing Storefront API available to access Metafields for the app we’re creating today, using Metafields is the recommended long-term strategy for fields like this.
When a cart doesn’t exist, this API request returns an empty array. Each Product component returns another bulk-form-row that will appear below the headers. ID of the customer to which the cart belongs. Let’s swap back to the layout file. It does not contain customer-related data. In the Product component, we need to pass the updateQuantity function and product_id props. Within multi-view.html you’ll first see two inject Handlebars Helpers and an empty array called “arr” ☠️ keep this in mind for later since we aren’t ready to load any products yet. Use the Get Product endpoint to check for min/max purchase restrictions. Tutorial: Using the Starter Plugin. If you haven’t tried applying your React skills to a Stencil template yet, Patrick Puente’s article, “Create Custom BigCommerce React Templates with Stencil” is another great resource to check out.