Skip to content

Methods

mrbrett edited this page Sep 28, 2020 · 2 revisions

Products module

  • product queries use graphql / storefront api

  • Collection products should be queried using getCollection and the handle because it will check to see if it is already populated. The collection products are batched, loading 6 products first, and then batching in the rest in 20 product batches.

state

collections: (Object - keys are collection handle - value is the collection w/ title, handle, description, image and products) - when getCollection is run it checks here first to see if it is loaded, otherwise it will load it in. allProducts (Object - keys are product handle - value is product) - object of all the products loaded in memory. When a Product is queried it checks this first to see if it is already in memory and when it is queried, swatch products and similar products are loaded into here automatically as well. Populated from collection queries. isLoading (Boolean) - whether a query is running or not

Action Methods

  • getCollection(handle) - Use this to check if collection via handle is loaded and if not load it and it's associated products in
  • getProduct(handle) - Use this method to load in a product if it is not already loaded into the datastore (also auto loads pdp_swatch_products and pdp_similar_products that aren't in memory in a second single request).
  • getProductsByHandle(handlesArray) - Mostly a private method but can be used to load in an array of products via an array of handles in a single graphql request




Cart Module

  • Uses the shopify buy client

state

  • cartIsBusy - Cart loading state,
  • checkout - checkout obj,
  • itemCount: - item count in cart,
  • drawerIsOpen: drawer toggle state

Action Methods

  • getCheckout(checkoutId) - fetches an existing customer checkout or creates a new one

  • addLineItemToCheckout -

    • params
      • lineItem
      • quantity - default is 1
      • noteObj - optional and looks like {key: "", value: ""}
      • checkoutObj-optional, will create new if null, looks like {customAttributes: [{key: '', value: ''}]}
  • UpdateLineItems: modifies line items (array) in the checkout

    • params: lineItmes = [{id: "graphqlId", quantity: 2}, etc]
  • updateAttributes: modifies attributes on the checkout object

    • params: lineItmes = [{id: "graphqlId", quantity: 2}, etc]
  • UpdateLineItem: modify the quantity of (one line item) line item in checkout

  • removeLineItem: Remove a lineitem via id

  • autoOpenDrawer

mutations

toggleDrawer - no params, toggles boolean for state.drawerIsOpen setDrawerState - Boolean param - manually sets drawerIsOpen to value e.g. setDrawerState(true) opens drawer