Js-buy-sdk: Checkout LineItems Order

[rizedr]

Currently the order of LineItems in the Checkout seems to be ad-hoc which creates a bad UX.

If user adds Product A, then Product B & then Product C, he would expect to see them in Checkout in that order. However, he sees something like: Product C, Product A, Product B which makes him lose track of what product is what.

Furthermore, in the shopify checkout page, the products seem to be in the order the user would expect. Can we do the same for the SDK?

[minasmart]

This is a factor of the API andnlt the SDK itself. It’s a known issue and we’re tracking it internally.

Thanks!!

[rizedr]

Localstorage workaround solution it is then.

Thank you @minasmart for the prompt reply. Feels bad that there is no AddedAt property for lineItems.

[jordan-sowers]

Hi Mina,

Is there an update to this issue? I'm running in to the same problem.

+1 for the AddedAt property!

[rebeccajfriedman]

I recommend storing the line items locally, and using the replaceLineItems mutation instead. The mutations addLineItems / removeLineItems / updateLineItems are deprecated, and so we are unlikely to update the functionality.

[rizedr]

The way I went around it was to avoid the sdk itself and implement graphQL in my client with my custom queries:

export const QUERY_CHECKOUT = gql`
  query ($id: ID!) {
    node(id: $id) {
      id
      ... on Checkout {
        ...CheckoutFragment
      }
    }
  }
  ${CheckoutFragment}
`;

Where CheckoutFragment is:

const CheckoutFragment = gql`
  fragment CheckoutFragment on Checkout {
    id
    webUrl
    completedAt
    subtotalPrice
    totalTax
    totalPrice
    lineItems (first:250) {
      pageInfo {
        hasNextPage
        hasPreviousPage
      }
      edges {
        node {
          id
          title
          quantity
          variant {
            id
            title
            image {
              id
              src
            }
            price
            product {
              handle
              images(first: 1) {
                pageInfo {
                  hasNextPage
                  hasPreviousPage
                }
                edges {
                  cursor
                  node {
                    id
                    src
                    altText
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`;

More info about graphQL and Shopify can be found here: https://help.shopify.com/en/api/graphql-admin-api

[rebeccajfriedman]

Here's a link to the Storefront API Graphql documentation: https://help.shopify.com/en/api/custom-storefronts/storefront-api

[etabard]

Hi there,
This issue still seems to exist. You said this issue was tracked internally back in 2018. Do you have any news ?

Thanks a lot for your help