Вы можете использовать запрос Storefront GraphQL для этого.
{
products(first: 40, query: "title:Mulan"){
edges {
node {
handle
variants(first: 1) {
edges {
node {
selectedOptions{
name
value
}
}
}
}
}
}
}
}
Ответ будет примерно таким:
{
"data": {
"products": {
"edges": [
{
"node": {
"handle": "mulan",
"variants": {
"edges": [
{
"node": {
"selectedOptions": [
{
"name": "Color",
"value": "White"
}
]
}
}
]
}
}
},
{
"node": {
"handle": "mulan-1",
"variants": {
"edges": [
{
"node": {
"selectedOptions": [
{
"name": "Color",
"value": "Black"
}
]
}
}
]
}
}
}
]
}
}
}
Я предоставлю описание шаг за шагом, если вы не знаю, как его использовать.
Создание частного приложения
Вам необходимо создать личное приложение, расположенное в вашем магазине: https://YOUR_STORE.myshopify.com / admin / apps / private
и введите имя частного приложения:
После этого необходимо установить флажок Allow this app to access your storefront data using the Storefront API, расположенный на внизу экрана приложения и установите флажок Read products, variants, and collections.
После сохранения приложения вы увидите следующее:
Где важной частью является Storefront access token. Этот токен понадобится вам для выполнения запросов GraphQL.
Создание базового c запроса GraphQL
Создание базового c запроса GraphQL для проверки, например, работает ли он :
fetch('/api/graphql',{
method: 'POST',
headers: {
'X-Shopify-Storefront-Access-Token': 'ENTER YOUR STOREFRONT ACCESS TOKEN HEER',
'Content-Type': 'application/graphql',
},
body: `query {
shop {name}
}`
}).then(res => res.json()).then(data => {
console.log(data)
})
Должно возвращаться что-то вроде этого:
{
"data": {
"shop": {
"name": "YOUR STORE NAME"
}
}
}
Создайте запрос GraphQL
Позволяет создать функцию, в которой вы можете передать название продукта и сгенерированный токен:
function getProducts(title, token) {
return fetch('/api/graphql',{
method: 'POST',
headers: {
'X-Shopify-Storefront-Access-Token': `${token}`,
'Content-Type': 'application/graphql',
},
body: `query {
products(first: 40, query: "title:${title}"){
edges {
node {
handle
variants(first: 1) {
edges {
node {
selectedOptions{
name
value
}
}
}
}
}
}
}
}`
}).then(res => res.json())
}
Затем мы вызываем функцию следующим образом:
getProducts('Mulan', 'Your Access Token').then(res => console.log(res))
И вы получите объект JS с массивом элементов с их дескриптор, имя и значение первого варианта опции.
Вот и все.