Shipping Simulator

Store Development
1

Olá, Pessoal. Espero que estejam todos bem!

Pessoal. Gostaria de desenvolver um Shipping Simulation Customizado onde eu conseguisse consumir dados e seprar retirada de entrega na página de produto (pdp). Não achei nenhuma documentação do graphql para isso. Tentei utilizar o https://github.com/vtex-apps/store-components/blob/master/react/components/ShippingSimulator/index.js mas não consegui executar. Alguém já precisou fazer algo parecido? Obrigado!

2

Olá!

Dá uma olhada nesta discussão antiga onde foram discutidas algumas soluções.

1 Like
3

@Saito

Essa é a graphQl que de fato eu quero, mas não consigo chamar de forma alguma.

import React from 'react'
import gql from 'graphql-tag'
import { useQuery } from "react-apollo";


const GET_SHIPPING = gql`query getShippingEstimates($items: [ShippingItem], $postalCode: String!, $country: String!
  ) {
    shipping(items: $items, postalCode: $postalCode, country: $country) 
    @context(provider: "vtex.search-graphql") {
      items {
        id
        requestIndex
        quantity
        seller
        sellerChain
        tax
        priceValidUntil
        price
        listPrice
        rewardValue
        sellingPrice
        measurementUnit
        unitMultiplier
        availability
      }
      logisticsInfo {
        itemIndex
        slas {
          id
          name
          price
          shippingEstimate
          shippingEstimateDate
          deliveryIds {
            courierId
            warehouseId
            dockId
            courierName
            quantity
          }
          deliveryChannel
          friendlyName
          pickupPointId
          pickupStoreInfo {
            friendlyName
            additionalInfo
            dockId
            isPickupStore
          }
          pickupDistance
        }
      }
    } 
  }`

export const ShippingEstimate = () => {

  const shippingData = useQuery(GET_SHIPPING, {
    variables: {
      items: [
        {
          id: "297631",
          quantity: "1",
          seller: "PST020"
        }
      ],
      postalCode: "08562500",
      country: "BRA"
    }
  })
  
  console.log('getShippingEstimate', shippingData)
}

Aí da o seguinte erro no console: Network error: Could not generate hash from query. Are you using graphql-tag ? Split your graphql queries in .graphql files and import them instead

4

@viniciusgarciaalarco nesse caso voce precisar criar um arquivo .gql separado do componente para que funcione: exemplo de como ficaria:

arquivo shipping.gql

query getShippingEstimates($items: [ShippingItem], $postalCode: String!, $country: String!
  ) {
    shipping(items: $items, postalCode: $postalCode, country: $country) 
    @context(provider: "vtex.search-graphql") {
      items {
        id
        requestIndex
        quantity
        seller
        sellerChain
        tax
        priceValidUntil
        price
        listPrice
        rewardValue
        sellingPrice
        measurementUnit
        unitMultiplier
        availability
      }
      logisticsInfo {
        itemIndex
        slas {
          id
          name
          price
          shippingEstimate
          shippingEstimateDate
          deliveryIds {
            courierId
            warehouseId
            dockId
            courierName
            quantity
          }
          deliveryChannel
          friendlyName
          pickupPointId
          pickupStoreInfo {
            friendlyName
            additionalInfo
            dockId
            isPickupStore
          }
          pickupDistance
        }
      }
    } 
  }

import GET_SHIPPING from './shipping.gql'