Skip to content

Commit

Permalink
DEVDOCS-4244: [net new] Storefront GraphQL products and variants (#1625)
Browse files Browse the repository at this point in the history 
Co-authored-by: Tina Gomez <[email protected]>
Co-authored-by: Sarah Riehl <[email protected]>
  • Loading branch information
@bc-andreadao @bc-tgomez
3 people authored Sep 21, 2023
1 parent dae7d75 commit 711e45d
Show file tree
Hide file tree
Showing 4 changed files with 1,679 additions and 217 deletions.
217 changes: 0 additions & 217 deletions docs/api-docs/storefront/graphql/graphql-api-examples.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,223 +193,6 @@ query LookUpUrl {

<a href="https://developer.bigcommerce.com/graphql?playground_tab=objectsByUrl" target="_blank">**Try it in GraphQL Playground**</a>

## Get product images at different resolutions

```graphql filename="Example query: Get product images at different resolutions" showLineNumbers copy
query SrcsetImages {
site {
product(entityId: 123) {
images {
edges {
node {
url320wide: url(width: 320)
url640wide: url(width: 640)
url960wide: url(width: 960)
url1280wide: url(width: 1280)
}
}
}
}
}
}
```

<a href="https://developer.bigcommerce.com/graphql?playground_tab=productImages" target="_blank">**Try it in GraphQL Playground**</a>

## Get a product

```graphql filename="Example query: Get a product" showLineNumbers copy
query SingleProduct {
site {
products (entityIds: [4917]) {
edges {
node {
id
entityId
name
prices {
price {
value
currencyCode
}
}
}
}
}
}
}
```

<a href="https://developer.bigcommerce.com/graphql?playground_tab=singleProduct" target="_blank">**Try it in GraphQL Playground**</a>

## Get variant details as a product object

```graphql filename="Example query: Get variant details as a product object" showLineNumbers copy
query VariantById {
site {
product(variantEntityId: 27098) {
name
sku
defaultImage {
url(width: 500, height: 500)
}
prices {
price {
...PriceFields
}
salePrice {
...PriceFields
}
retailPrice {
...PriceFields
}
}
width {
...DimensionFields
}
height {
...DimensionFields
}
depth {
...DimensionFields
}
}
}
}
fragment PriceFields on Money {
value
currencyCode
}
fragment DimensionFields on Measurement {
value
unit
}
```

<Callout type="info">
This query returns variant information appropriately overlaid on the Product object. For example, if the variant has a different image, dimensions, SKU, or price, that will be automatically returned -- this allows for directly merchandising particular variants.
</Callout>

<br />

<a href="https://developer.bigcommerce.com/graphql?playground_tab=variantDetails" target="_blank">**Try it in GraphQL Playground**</a>

## Get product option details by product ID

```graphql filename="Example query: Get product option details by product ID" showLineNumbers copy
query SeveralProductsByID {
site {
products(entityIds: [1, 2, 3]) {
edges {
node {
name
productOptions {
edges {
node {
entityId
displayName
isRequired
... on MultipleChoiceOption {
values {
edges {
node {
entityId
label
}
}
}
}
}
}
}
}
}
}
}
}
```

<a href="https://developer.bigcommerce.com/graphql?playground_tab=productOptions" target="_blank">**Try it in GraphQL Playground**</a>

## Get refined product object for given options

```graphql filename="Example query: Get refined product object for given options" showLineNumbers copy
query ProductsWithOptionSelections {
site {
product123: product(
entityId: 123
optionValueIds: [
{ optionEntityId: 4, valueEntityId: 543 }
{ optionEntityId: 5, valueEntityId: 443 }
]
) {
...ProductFields
}
product234: product(
entityId: 234
optionValueIds: [
{ optionEntityId: 8, valueEntityId: 768 }
{ optionEntityId: 13, valueEntityId: 883 }
]
) {
...ProductFields
}
}
}

fragment ProductFields on Product {
name
defaultImage {
url(width: 1000)
}
sku
}
```

<a href="https://developer.bigcommerce.com/graphql?playground_tab=refinedProduct" target="_blank">**Try it in GraphQL Playground**</a>

## Get product swatch option values

```graphql filename="Example query: Get product swatch option values" showLineNumbers copy
query {
site {
products (first: 3) {
pageInfo {
startCursor
endCursor
}
edges {
cursor
node {
entityId
name
productOptions {
edges {
node {
entityId
displayName
... on MultipleChoiceOption {
values {
edges {
node {
... on SwatchOptionValue {
label
hexColors
}
}
}
}
}
}
}
}
}
}
}
}
}
```

## Get popular brands

```graphql filename="Example query: Get popular brands" showLineNumbers copy
Expand Down
2 changes: 2 additions & 0 deletions docs/api-docs/storefront/graphql/graphql-api-overview.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -499,6 +499,8 @@ query brands {
}
```

If `first` is not specified, a query returns only 10 items by default.

## Complexity limits

Complexity scores estimate the load that a single GraphQL request may generate. BigCommerce calculates the complexity score using an algorithm before executing the call, based on the provided query.
Expand Down
Loading

0 comments on commit 711e45d

Please sign in to comment.