Graphql functionality missing documentation #108
Description
Our client needs a custom widget that they are able to choose their own products and I'm trying to get the product details via graphql. How do I pass in the users selected productIds as queryVariables? Right now my bandaid fix is with first: 50
I'm doing my best to copy this:
https://github.com/bigcommerce/widget-builder/tree/master/src/services/__fixtures__
Code below:
Graphql:
query ProductList($productIds: [Int!]) {
site {
products(first: 50, entityIds: $productIds) {
edges {
node {
entityId
plainTextDescription
name
entityId
addToCartUrl
addToWishlistUrl
path
sku
prices {
price {
currencyCode
value
}
priceRange {
min {
value
currencyCode
}
max {
value
currencyCode
}
}
}
reviewSummary {
summationOfRatings
numberOfReviews
}
defaultImage {
url(width: 1500, height: 1500)
}
customFields(names: ["New"]) {
edges {
node {
value
}
}
}
productOptions(first: 5) {
edges {
node {
__typename
... on MultipleChoiceOption {
values {
edges {
node {
entityId
label
isDefault
}
}
}
}
entityId
displayName
}
}
}
}
}
}
}
}
schema.json:
[
{
"type": "tab",
"label": "Design",
"sections": [
{
"label": "Title",
"settings": [
{
"type": "input",
"id": "title",
"label": "Title",
"default": "Layflat Photo Albums"
},
{
"type": "input",
"id": "productBlockDescription",
"label": "Description text",
"default": "Our most premium offering, these books have the most rigid pages. Offered in 5 sizes - from bigger than your face to hand held."
}
]
}
]
},
{
"type": "array",
"label": "Our Favorites",
"id": "favorites",
"thumbnail": {
"type": "image",
"valueKey": "product_img.src"
},
"defaultCount": 8,
"entryLabel": "Product",
"schema": [
{
"type": "hidden",
"settings": [
{
"type": "graphQl",
"id": "graphQueries",
"typeMeta": {
"mappings": {
"productId": {
"reads": "productId",
"type": "Int!"
}
}
}
}
]
},
{
"type": "tab",
"label": "Product Settings",
"sections": [
{
"settings": [
{
"type": "productId",
"label": "Product",
"id": "productId",
"default": "137",
"typeMeta": {
"placeholder": "Search by name or SKU"
}
},
{
"type": "productImage",
"id": "product_img",
"label": "Product Image",
"default": {
"src": "img.jpeg"
},
"typeMeta": {
"reference": "productId"
}
}
]
}
]
}
]
}
]
html:
<ul id="product-card-grid-{{_.id}}">
{{#each favorites as |product|}}
{{#each ../_.data.site.products.edges as
|productResource|}}
{{#if productResource.node.entityId "=="
product.productId}}
<li class="product-card card-body">
<a href="{{productResource.node.path}}">
<img src="{{product.product_img.src}}" />
<h3 class="card-title">{{productResource.node.name}}</h3>
<p class="card-desc">{{productResource.node.plainTextDescription}}</p>
<div class="row">
<span class="fav-price-label price price--withoutTax">
{{#if productResource.node.prices.priceRange.min.value "!="
productResource.node.prices.priceRange.max.value}} from {{/if}}
${{productResource.node.prices.priceRange.min.value}}</span
>
<span
class="color-swatches"
data-swatch-pid="{{product.productId}}"
></span>
</div>
</a>
</li>
{{/if}} {{/each}} {{/each}}
</ul>