Basic Implementation of Cart

1. Create cart using mutation 

mutation CreateCart {
  cartCreate {
    cart {
      id
      createdAt
      updatedAt
    }
    userErrors {
      field
      message
    }
  }
}

response: 

{
  "data": {
    "cartCreate": {
      "cart": {
        "id": "gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz?key=6979c8734cf8208ce9021ba5947673d7",
        "createdAt": "2024-12-19T06:36:30Z",
        "updatedAt": "2024-12-19T06:36:30Z"
      },
      "userErrors": []
    }
  }
}

2. Add a line item to the cart

mutation AddItemToCart($cartId: ID!, $lines: [CartLineInput!]!) {
  cartLinesAdd(cartId: $cartId, lines: $lines) {
    cart {
      id
      lines(first: 10) {
        edges {
          node {
            id
            quantity
            merchandise {
              ... on ProductVariant {
                id
                title
              }
            }
          }
        }
      }
    }
    userErrors {
      field
      message
    }
  }
}

{
  "cartId": "gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz?key=6979c8734cf8208ce9021ba5947673d7",
  "lines": [
    {
      "quantity": 2,
      "merchandiseId": "gid://shopify/ProductVariant/42372238213203"
    }
  ]
}

response:
{
  "data": {
    "cartLinesAdd": {
      "cart": {
        "id": "gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz?key=6979c8734cf8208ce9021ba5947673d7",
        "lines": {
          "edges": [
            {
              "node": {
                "id": "gid://shopify/CartLine/1fef0eff-d077-4d50-8c03-36c748d245a3?cart=Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz",
                "quantity": 2,
                "merchandise": {
                  "id": "gid://shopify/ProductVariant/42372238213203",
                  "title": "M"
                }
              }
            }
          ]
        }
      },
      "userErrors": []
    }
  }
}

3.  Get back the cart
query GetCart($cartId: ID!) {
  cart(id: $cartId) {
    id
    createdAt
    updatedAt
    lines(first: 10) {
      edges {
        node {
          id
          quantity
          merchandise {
            ... on ProductVariant {
              id
              title
            }
          }
        }
      }
    }
  }
}

{
  "cartId": "gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz?key=6979c8734cf8208ce9021ba5947673d7"
}

response:
{
  "data": {
    "cart": {
      "id": "gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz?key=6979c8734cf8208ce9021ba5947673d7",
      "createdAt": "2024-12-19T06:36:30Z",
      "updatedAt": "2024-12-19T06:49:00Z",
      "lines": {
        "edges": [
          {
            "node": {
              "id": "gid://shopify/CartLine/1fef0eff-d077-4d50-8c03-36c748d245a3?cart=Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz",
              "quantity": 2,
              "merchandise": {
                "id": "gid://shopify/ProductVariant/42372238213203",
                "title": "M"
              }
            }
          }
        ]
      }
    }
  }
}

4. Update the item quantiy based on cart line 

mutation {
  cartLinesUpdate(
    cartId: "gid://shopify/Cart/Z2NwLXVzLWV4YW1wbGU6MDEyMzQ1Njc4OTAxMjM0NTY3ODkw?key=examplekey1234567890"
    lines: {
      id: "gid://shopify/CartLine/1fef0eff-d077-4d50-8c03-36c748d245a3?cart=Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz"
      quantity: 3
    }
  ) {
    cart {
      id
      lines(first: 10) {
        edges {
          node {
            id
            quantity
            merchandise {
              ... on ProductVariant {
                id
              }
            }
          }
        }
      }
      cost {
        totalAmount {
          amount
          currencyCode
        }
        subtotalAmount {
          amount
          currencyCode
        }
        totalTaxAmount {
          amount
          currencyCode
        }
        totalDutyAmount {
          amount
          currencyCode
        }
      }
    }
  }
}

5. Get cart with the total price 

query GetCart($cartId: ID!) {
  cart(id: $cartId) {
    id
    createdAt
    
    cost {
      subtotalAmount {
        amount
        currencyCode
      }
      totalAmount {
        amount
        currencyCode
      }
      totalTaxAmount {
        amount
        currencyCode
      }
    }
    lines(first: 10) {
      edges {
        node {
          id
          quantity
          merchandise {
            ... on ProductVariant {
              id
              title
              price {
                amount
                currencyCode
              }
              product {
                title
              }
            }
          }
        }
      }
    }
  }
}

{
  "cartId": "gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz?key=6979c8734cf8208ce9021ba5947673d7"
}

response:
{
  "data": {
    "cart": {
      "id": "gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz?key=6979c8734cf8208ce9021ba5947673d7",
      "createdAt": "2024-12-19T06:36:30Z",
      "cost": {
        "subtotalAmount": {
          "amount": "1750.0",
          "currencyCode": "MYR"
        },
        "totalAmount": {
          "amount": "1925.0",
          "currencyCode": "MYR"
        },
        "totalTaxAmount": {
          "amount": "175.0",
          "currencyCode": "MYR"
        }
      },
      "lines": {
        "edges": [
          {
            "node": {
              "id": "gid://shopify/CartLine/1fef0eff-d077-4d50-8c03-36c748d245a3?cart=Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz",
              "quantity": 5,
              "merchandise": {
                "id": "gid://shopify/ProductVariant/42372238213203",
                "title": "M",
                "price": {
                  "amount": "350.0",
                  "currencyCode": "MYR"
                },
                "product": {
                  "title": "KEMBOJA IN BEIGE"
                }
              }
            }
          }
        ]
      }
    }
  }
}

6. Generate checkout url

query checkoutURL {
  cart(id: "gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz?key=6979c8734cf8208ce9021ba5947673d7") {
    checkoutUrl
  }
}

response:
{
  "data": {
    "cart": {
      "checkoutUrl": "https://amberdevstore.myshopify.com/cart/c/Z2NwLXVzLWVhc3QxOjAxSkZFVDNONktKMjJNUlE4NTI2UVo0Tlcz?key=6979c8734cf8208ce9021ba5947673d7"
    }
  }
}