Git Product home page Git Product logo

sanity-shopify-studio's Introduction

Note

This repo has been archived, but the Sanity / Shopify Studio is still maintained and is available via our CLI. To install, run npm create sanity@latest -- --template shopify

Sanity Studio for Shopify Projects

About

This Sanity Studio is configured for headless Shopify projects that use the official Sanity Connect app, allowing you to extend Shopify products and collections with your own rich editorial content.

It contains examples of customizing your desk structure, document actions and input components.

This studio can be used with our Hydrogen starter, your frontend, or anywhere else you want your e-commerce content to go.

Features

This studio comes preconfigured with Shopify-friendly content schemas and a whole host of customizations to make managing Shopify data in your Sanity studio easier.

It also comes with several convenient layout modules which can be re-used across various pages.

View studio features

Assumptions

No two custom storefronts are the same, and we've taken a few strong opinions on how we've approached this studio.

  • Synced Shopify data for collection, product and productVariant documents are stored in a read-only object, store
  • Shopify is the source of truth for both product titles, slugs (handles) and thumbnail images
  • Shopify is the source of truth for collections
  • Sanity is used as an additional presentational layer to add custom metadata to both Shopify collections and products
    • For products: this includes a portable text field with support for editorial modules
    • For collections: this includes a customizable array of editorial modules
  • Some images (such as product and cart line item thumbnails) are served by Shopify's CDN whilst other images (such as those served in editorial modules) are handled by Sanity's Image API
  • We only concern ourselves with incoming data from Shopify collections, products and product variants

We believe these rules work well for simpler use cases, and keeping product titles, images and slugs handled by Shopify helps keep content consistent as you navigate from your product views to the cart and ultimately checkout. Managing collections in Shopify gives you the flexibility to take full advantage of manual and automated collections.

You may have differing opinions on how content best be modeled to fit your particular needs – this is normal and encouraged! Fortunately, Sanity was built with this flexibility in mind, and we've written a guide on structured content patterns of e-commerce which may help inform how to tackle this challenge.

Setup

If you're reading this on GitHub, chances are you haven't initialized the studio locally yet. To do so, run the following shell command:

# run a one-off initializing script:
npx @sanity/cli init --template shopify

Make sure to run the tagged release! (@sanity/cli)

Local Development

Starting development server

npm run dev

Deploying the studio

npm run deploy

Upgrading Sanity Studio

npm install sanity@latest

If you have the Sanity CLI installed, you can also run this with sanity start|deploy|upgrade. It comes with additional useful functionality.

Upgrading from an old version?

We've updated some of the schema in this template to support deploying a GraphQL API, as well as making updates to remove schema warnings in v3 of the Sanity Studio. There are some breaking changes in these updates, which may mean you see schema warnings in the Studio. Please see migrations/strictSchema.ts as a guide to migrate your data. Don't forget to take a backup before making any changes!

License

This repository is published under the MIT license.

sanity-shopify-studio's People

Contributors

codingchewie avatar dumle11 avatar evenwestvang avatar rexxars avatar ryanleichty avatar snorrees avatar thebiggianthead avatar timosutterer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sanity-shopify-studio's Issues

Bug: TypeScript errors in blocksToText.js

Reviewing over v3 after a new project setup there are two reported errors in the file blocksToText.js.

1st Error

The code:

import { Block } from 'sanity'

located here throws the TypeScript Error:

Module '"sanity"' has no exported member 'Block'.ts(2305)

In research, this has been a closed issue on Sanity: "3.1.2 back-compat: Type error: Module '"sanity"' has no exported member 'Block'."

but I'm unsure what the proper course of resolution should be.

2nd Error

For the code:

return block.children.map(child => child.text).join('')

located here generates the TypeScript error:

Parameter 'child' implicitly has an 'any' type.ts(7006)

but I believe the resolution for that error would be:

return block.children.map((child: { text: any }) => child.text).join('')

Sanity specs:

@sanity/cli (global)          3.5.0 (up to date)
@sanity/asset-utils           1.3.0 (up to date)
@sanity/color-input           3.0.2 (up to date)
@sanity/eslint-config-studio  2.0.1 (up to date)
@sanity/vision                3.5.0 (up to date)
sanity                        3.5.0 (up to date)

Cannot get storeId

The function getShopifyStoreId() located at the file utils/getShopifyStoreId.ts returns nothing, which creates issues when trying to show the URLs to edit products/collections in Shopify (document actions).

I was checking the object fetched and there is no sanity.shopify.sync document type.

Is there another way to get the store ID from the sanity client?

Show specific products in collection?

Sanity sync Shopify collections, but it only provides meta data like GID, ID etc
Is there a way we can get the array/lists of products contained in the collection?

Any help would be really appreciated!

Template "shopify" not found

Error: Template "shopify" not found
at e.default (~/.npm/_npx/97fe0ac6ea3bd86d/node_modules/@sanity/cli/bin/sanity-cli.js:4494:9253)
at processTicksAndRejections (node:internal/process/task_queues:96:5)

Upgrade Path

We've created a Sanity Studio using this Shopify template before. Upgrading to the latest Sanity has caused some config issues on our part specifically for the colorProductOption. It doesn't have the issue here as there was some changes made to fix it and we can copy-paste it in our Studio as well to fix it. But it got me thinking, how does someone upgrade our Studio to use the latest changes with Shopify template?

Can't connect from Shopify

I've been connected before but had do disconnect my store. However now I can't complete the connection:

{"error":"Forbidden","message":"CORS Origin not allowed","statusCode":403}

Tried to reinstall the app but it does not work. This happens trying to Auth in the popup inside Shopify Admin.

It doesn't work along with github.com/sanity-io/hydrogen-sanity-demo

It doesn't work along with github.com/sanity-io/hydrogen-sanity-demo. I use npx @sanity/cli init --template shopify --project secret --dataset production. After that I run through yarn dev, I get the error "Internal server error: Cannot read properties of undefined (reading 'config') Plugin: vite:css" in studio, although all I did was change the projectId in sanity.config in starter.

productVariant "image" field is never synced

G'day!

I've noticed recently that the Sanity Connect App is never sending the expected "image" field to the NextJS API endpoint.

It's listed in the docs as an expected field:
image

But I've never seen the field sent at all. A server side log of the object sent:
image

Would be quite nice to have the field for the preview thumbnails of the productVariant documents I reckon :)

Cheers,
Laird

Support for page, blog and article templates

Heya, really exciting to see a CMS with an integration like this pushing data into metafields. When can developers expect this application to extend to more of the template types that shopify has as a platform?

Object names using periods appears to be incorrect according to Sanity documentation.

First thanks for a comprehensive template! Very excited to work with this and see where it goes.

I have run into an issue where part of https://github.com/ricokahler/sanity-codegen has a validator that is honoring the Sanity Documentation -- which states that object names can only have numbers, letters and underscores
(https://www.sanity.io/docs/object-type#9a9a8b5c6404).

This validator is rejecting this template as it uses periods for things like article.editorialand seo.product.

I am guessing that one of two things is true, either the Sanity Documentation (and therefore the sanity-codegen validation) is out of date and this template is correct, or this template should be using underscores for object names?

Where is the custom sync function located?

I am still trying to get my head around Sanity connect works, but from the docs I gather that a custom sync function is required to map where and how the shopify data is constructed within the sanity content lake, in accordance with the desired structure. However, I can't seem to find the specific function/ file that controls this in the sanity shopify studio template. I am expecting to find a file much like the one in the docs that maybe I can tinker around with?

The reason for this, is that I'd like to change how the product options are handled. Rather than an array of strings as it currently is, I'd like the variant options (colour and size) to be reference fields – this will enable me to:

  1. Colours to be a single source of truth for global swatch images as they tend to be the same for every product
  2. Use the colours and size documents as product filters on the listing page

To do this, I'd need to adapt the sync mapping so that it first checks if a matching reference colour already exists, if it does, reference it in the variant doc and product doc, and if not create one.

Can anyone point me in the direction of where that sync function is located?

isAvailable doesn't seem to return any value?

Using this studio as a starting spot for a project, and the isAvailable field doesn't seem to return anything currently. Is there an internal version of Shopify Connect that hasn't yet been publicly released that supports the field? As of right now, nothing is returned when I make a request for the field on the Shopify Product or Product Variant level via GROQ.

Included annotations are not rendering their icons and inline styles

The annotations included with this package are no longer according to their schemas. These four:

schemas/annotations/linkEmail.tsx
schemas/annotations/linkExternal.tsx
schemas/annotations/linkInternal.tsx
schemas/annotations/product.tsx

In the examples are supposed to be used like so:

// schemas/objects/module/accordion.ts


defineField({
  name: 'body',
  title: 'Body',
  type: 'array',
  of: [
    {
      lists: [],
      marks: {
        annotations: [
          // Email
          {
            name: 'annotationLinkEmail',
            type: 'annotationLinkEmail',
          },
          // Internal link
          {
            name: 'annotationLinkInternal',
            type: 'annotationLinkInternal',
          },
          // URL
          {
            name: 'annotationLinkExternal',
            type: 'annotationLinkExternal',
          },
        ],
        decorators: [
          {
            title: 'Italic',
            value: 'em',
          },
          {
            title: 'Strong',
            value: 'strong',
          },
        ],
      },
      // Regular styles
      styles: [],
      // Paragraphs
      type: 'block',
    },
  ],
  validation: (Rule) => Rule.required(),
}),

Renders the default way with no icon in the menu or inline:

Screenshot 2023-04-10 at 6 29 25 PM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.