Building Shopify Product Bundler, Implementing Multiple Add to Cart on Single Product Page

AppBuilder
Tourist
14 1 0
  1. How does Shopify Add to Cart Work?
    1. I am looking at example theme with add to cart form.
      • Attributes
        • Action = "/cart"
        • Method= "post"
      • Do these values on the form attributes alone submit the values of input elements of that form?
    2. If so, when adding multiple products to cart (through Shopify Ajax API with fetch), do I have to disable the the default behavior of submit?

Building a Product Bundler in Theme

  1. I created a new product template for this.
  2. I have listed all the products I want on this template to be added together.
  3. Single Quantity Selector and Add to Cart Button
  4. I am essentially using separate products as variants (this is so I can have unlimited variants) Products are the variants in this case since it is a product bundler.
  5. I believe I am going to have to create a function for each product option (Updating product image, updating price when product option changes)
  6. Would this just be getting the value of all the input elements of that form. (variant id of each product option variant)
  7. Adding an object to an empty array for each variant. properties are variant id and quantity. If available.
  8. Submitting that array of object through a fetch (POST request).

Notes:

  1. I am dealing with existing theme that was built for production (minified) and that probably used Babel so looking at older Javascript, hard to pick apart...
  2. Not looking for any Shopify App just because lack of flexibility and thinking long term to reduce operating costs
0 Likes