How to create new product manually in the studio panel?

[kuleyu]

Thanks @Naimatteo for creating and sharing such a fantastic project. I really love it.

I have some needs to add products manually, not only getting products by syncing from shopify. So, I edited the file "shop-product.js" as follows:

... ...
__experimental_actions: ['create', 'update', 'publish', 'delete'],

... ...

    {
      title: 'Product Title',
      name: 'productTitle',
      type: 'string',
      // readOnly: true,
      fieldset: '2up',
      group: 'shopify'
    },
    {
      title: 'Product ID',
      name: 'productID',
      type: 'number',
      // readOnly: true,
      fieldset: '2up',
      group: 'shopify'
    },
    {
      title: 'Price (cents)',
      name: 'price',
      type: 'number',
      // readOnly: true,
      fieldset: '2up',
      group: 'shopify'
    },
    {
      title: 'Compare Price (cents)',
      name: 'comparePrice',
      type: 'number',
      // readOnly: true,
      fieldset: '2up',
      group: 'shopify'
    },
    {
      title: 'In Stock?',
      name: 'inStock',
      type: 'boolean',
      // readOnly: true,
      fieldset: '2up',
      group: 'shopify'
    },
    {
      title: 'Low Stock?',
      name: 'lowStock',
      type: 'boolean',
      // readOnly: true,
      fieldset: '2up',
      group: 'shopify'
    },
    {
      title: 'SKU',
      name: 'sku',
      type: 'string',
      // readOnly: true,
      fieldset: '2up',
      group: 'shopify'
    },
    {
      title: 'URL Slug',
      name: 'slug',
      type: 'slug',
      // readOnly: true,
      fieldset: '2up',
      group: 'shopify'
    },
    {
      title: 'Options',
      name: 'options',
      type: 'array',
      of: [{ type: 'productOption' }],
      // readOnly: true,
      group: 'shopify'
    },
    {
      title: 'Draft Mode',
      name: 'isDraft',
      type: 'boolean',
      // readOnly: true,
      hidden: true,
      fieldset: '2up',
      group: 'shopify'
    },
    {
      title: 'Deleted from Shopify?',
      name: 'wasDeleted',
      type: 'boolean',
      // readOnly: true,
      hidden: true,
      fieldset: '2up',
      group: 'shopify'
    }

Then it seems to work well, and I can add and edit new products manually in the studio panel. But when I visit the frontend site, every page which contains the manual added product will get the same error as follows:

---

Then, when I Inspect the manual created product, I see the value of the _id is a4ed66e1-1051-499c-b974-f42d880c8e0d. While when I Inspect a product which is sync from shopify, I see the value of the _id is product-7152543826104.

It seems that they are in different format. I'm not sure if this is the key point of the error. And what should I do? Thank you.

[ndimatteo]

Hey there @kuleyu!

This is because _id and id are different data points. You're looking at the _id which is a Sanity-specific field that's auto-generated when creating documents in the studio. The reason the format is different is because the ones sync'd from Shopify are created by the sync function where we explicitly set the _id value that's generated (see here).

The error you're seeing when visiting a manually created product is because it's looking for the variantID that's supplied via Shopify, which is constructed as the id in GROQ for the product data. You can see that being defined here.

Since HULL is meant to work with Shopify, it expects that these fields would always be filled out in order for the "add to cart" and checkout experiences to work properly.

Let me know if that makes sense!

[ndimatteo]

Hey there @kuleyu I hope my previous comment helped!

Going to close this issue now, but feel free to follow up 🤘

[QuinAiton]

@ndimatteo can you provide more information how how you would solve the above issue? I am running into the same problem and I cant figure out how to stop sanity from giving its own ID

[QuinAiton]

@kuleyu Did you solve this issue? can you provide me with some guidance on this problem?

[ndimatteo]

@QuinAiton I'm not sure what you're trying to accomplish, but the entire functionality behind product documents is inextricably linked to Shopify product data.

The _id of the document is irrelevant to how variants and their IDs are referenced on the front-end.

I do not recommend adding products manually from the Studio, but if you must, you would also need to create productVariant documents for each and fill out every Shopify-powered field in order to avoid Server errors on the frontend.

Again, I'm not sure how this is viable, since the entire shopping experience relies on the product also existing in Shopify (this is how the cart is powered and persisted, as well as checkout).

I hope that helps, but holler if there are more questions!