Pulling image URL from Catalog Item

Questions
1

Bear with me here!

Im trying to build a site that pulls every item from my catalog using listCatalog and maps it out. I got the mapping of the catalog down (its super sloppy dont judge), but apparently the list catalog API doesnt carry the image URL! The only solution I can think of is to grab my image ID from my listCatalog instance, and run it through the RetrieveCatalogObject instance, but Im not terribly sure about how to logically do that. or if I even have to. to be honest.

My question for y’all is twofold:

  1. Does the list catalog carry the image URL? It seems counter-intuitive to me that it wouldnt. I mean, its a part of the catalog on upload after all lol

If anyone feels like helping, heres my awful attempt at this
Im using NextJS

**pages/menu/index.tsx

import Image from 'next/image';
import React from 'react'
import { Client, Environment } from 'square'
(BigInt.prototype as any).toJSON = function() { return this.toString(); }


const Menu = ({results, data}) => {
    console.log(data);


  return (
    <div>
        <h1>Menu</h1>
        { results && results.objects.map(items  => (
            <>
            <h2>{ items.itemData.name }</h2>
            <h3> { items.itemData.description} </h3>
            <h3> { items.id } </h3>

            { data && data.objects.map(bro => (
                <>
                <h2>{bro.id}</h2>
                </>
            ))}
            {items.itemData.variations.map(variation => (
                // this is my current solution for displaying price variations. its not elegant, but it gets the job done. God speed when it comes to importing the image
                <>
                <p>{variation.itemVariationData.name}:</p>
                <p> $ {`${(Math.round(variation.itemVariationData.priceMoney.amount) / 100).toFixed(2) }`}
                </p>

                </>
            ))}

           </>
        ))}


    </div>
  )
}

export default Menu

export async function getServerSideProps(){
    console.log('hello world! kinda..');

    const config = ({
        accessToken: process.env.SQUARE_ACCESS_TOKEN,
        environment: Environment.Sandbox,
    });

    const { catalogApi } = new Client(config);

    const {result } = await catalogApi.listCatalog(undefined, 'ITEM');
    // const data = await res.json();

    const oof = await catalogApi.searchCatalogObjects({
        objectTypes: [
          'IMAGE'
        ],
        includeDeletedObjects: false,
        includeRelatedObjects: true
      });


    console.log("image JSON is", oof.body);

    return {
        props: {
            data: JSON.parse(oof.body.toString()),
            results: JSON.parse(JSON.stringify(result))
        }
    }
}
2

You have a few options here. You could use SearchCatalogObjects to get the image URLs or you can call ListCatalog and set the type to IMAGE. This will return all images and they’re URLs. :slightly_smiling_face:

1 Like
3

IMAGE doesnt exist as a type for ListCatalog.

Search Catalog pushed the image to another array/JSON (depending on how I called it)

I ended up doing SearchCatalogObjects for Item and doing some weird merge between related Obj and Obj by mapping across the two JSONs.

below is what I got for now (obv still a WIP). Is there a better way than this?

import Image from 'next/image';
import React from 'react'
import { Client, Environment } from 'square'
(BigInt.prototype as any).toJSON = function() { return this.toString(); }


const Menu = ({relData, data}) => {

    var mergeArr = data.map(a => Object.assign(a, relData.find(b => b.id == a.itemData.imageIds)));

   console.log(mergeArr)

  return (
    <div>
        <h1>Menu</h1>

//New id is Images ID -- item id can be foind in itemId. USE THAT FOR [ID]

        {mergeArr && mergeArr.map(d =>(
            <p>{d.id}</p>
        ))}


    </div>
  )
}

export default Menu

export async function getServerSideProps(){
    console.log('hello world! kinda..');

    const config = ({
        accessToken: process.env.SQUARE_ACCESS_TOKEN,
        environment: Environment.Sandbox,
    });

    const { catalogApi } = new Client(config);

    const res = await catalogApi.searchCatalogObjects({
        objectTypes: [
          'ITEM',

        ],
        includeDeletedObjects: false,
        includeRelatedObjects: true
      });

     const data = res.result.objects
     const rel = res.result.relatedObjects

     console.log(res.result)


      return {
        props: {
            data: JSON.parse(JSON.stringify(data)),
            relData: JSON.parse(JSON.stringify(rel)),

        }
      }
}
4

It works if you set the query parameters: /v2/catalog/list?types=IMAGE

1 Like
5

you’re correst, I did IMAGES like a dodo lol

That returns only the images. I was looking for a solution that would associate each image URL with the item it was uploaded with, but I hobbled together a solution for now

6

Awesome! Glad to hear you got it to work. :slightly_smiling_face: