Попытка отобразить дополнительные миниатюры изображения под основным изображением избранного продукта - PullRequest
Новая
       15

Попытка отобразить дополнительные миниатюры изображения под основным изображением избранного продукта

0 голосов
/ 11 июля 2019

Не удается получить файлы из Moltin API для отображения под основным изображением продукта

Использование этого репо: https://github.com/moltin/gatsby-demo-store и обновление @ moltin / gatsby-source-moltin до 1.3.1 Я пытался расширить продукт Схема узла для включения отношений в соответствии с документацией Moltin API ссылка на это в новом компоненте, но дополнительные изображения не отображаются.

Посмотрел другие реализации, т.е. пример магазина Gatsby, который использует Миниатюры и могут получить крошечные кликабельные тонкие фиолетовые полосы рендеринга, но без изображения. Магазин использует хранилище Shopify и localFile для рендеринга изображений, поэтому данный вариант использования не применим. 

```
import React, { useContext, useEffect, useReducer, useState } from 'react'
import { graphql, withPrefix } from 'gatsby'

import SEO from '../components/SEO'
import Photo from '../components/Photo'
import Badge from '../components/Badge'
import AddToCart from '../components/AddToCart'
import { Shopkit } from '../shopkit'
import Img from 'gatsby-image'


  const {
    meta: { display_price }
  } = product

  return (
    <React.Fragment>
      <SEO
        type="product"
        title={product.meta_title || product.name}
        description={product.meta_description || product.description}
        image={withPrefix(product.mainImage.childImageSharp.fixed.src)}
      />

      <div className="flex flex-wrap md:bg-grey-light">
        <div className="py-2 md:py-5 md:px-5 w-full lg:w-1/2">
          <div className="sticky pin-t">
            <Photo
              src={product.mainImage}
              alt={product.main_image_alt_text || product.name}
            />
           <Img 
             src={product.relationships.files.data.id}
             alt=""
           />  
          </div>
        </div>
......
.....
....
    </React.Fragment>
  )
}

export const query = graphql`
  query($id: String!) {
    product: moltinProduct(id: { eq: $id }) {
      id
      slug
      name
      description
      sku
      mainImage {
        childImageSharp {
          fixed(width: 560) {
            ...GatsbyImageSharpFixed
          }
        }
        publicURL
      }
      meta {
        display_price {
          without_tax {
            formatted
          }
        }
      }
      manage_stock
      meta_title
      meta_description
      on_sale
      bulb
      bulb_qty
      material
      finish
      max_watt
      relationships {
             main_image {
              data {
                id
              }
            }
        files {
          data {
            type
            id
          }
    }
  }
`

export default ProductPage
```

Хотелось бы получить маленькую миниатюру разрисовки под основным изображением товара. Приставка сообщение об ошибке при использовании компонента Img: Uncaught TypeError: Не удается прочитать свойство 'src' не определено.

1 Ответ

0 голосов
/ 11 июля 2019

gatsby-source-moltin добавляет поле images к схеме продукта, которое вы можете запросить следующим образом: 

images {
  childImageSharp {
    fluid(maxWidth: 300) {
      ...GatsbyImageSharpFluid
    }
  }
}

Я собрал пример для CodeSandbox .

...