From 4a34ed4368adf96ca2add8854a224dda6833796f Mon Sep 17 00:00:00 2001 From: ChinmayeeMestry <54532403+ChinmayeeMestry@users.noreply.github.com> Date: Thu, 7 Mar 2024 19:16:34 +0530 Subject: [PATCH 1/5] Update README.md --- README.md | 48 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 69a1a3c..11c28c3 100644 --- a/README.md +++ b/README.md @@ -1 +1,47 @@ -# hydrogen-contentstack-demo \ No newline at end of file +# Hydrogen Contentstack Demo - An example storefront powered by Contentstack + Hydrogen + +This demo is compatible with `@shopify/hydrogen >= 2024.01` built on Remix. + +> For a more complex reference example, please see our [demo-ecommerce repo](https://github.com/contentstack/shopify-contentstack-app) which features a monorepo with an embedded Contentstack. + +[Demo][hydrogen-contentstack-demo] | [Contentstack Connect for Shopify][[contentstack-connect]] + +# About + +Hydrogen Contentstack Demo is our customized [Hydrogen][hydrogen-github] starter that presents a real-world example of how Contentstack and Structured Content can elevate your custom Shopify storefronts. + +It's designed to be used, which syncs products and collections from your Shopify storefront to your Contentstack Account. + +This starter showcases a few patterns you can adopt when creating your own custom storefronts. Use Contentstack and Hydrogen to delight customers with rich, shoppable editorial experiences that best tell your story. + +# Getting started + +## Requirements: + +- Node.js version 18.05.0 or higher +- `npm` (or your package manager of choice, such as `yarn` or `pnpm`) + +## Getting Started + +1. Create a `.env` file, based on the `.env.template` file. + +2. Install dependencies and start the development server + + ```bash + npm i + npm run dev + ``` + +3. Visit the development environment running at http://localhost:3000. + +For information on running production builds and deployment, see the [Hydrogen documentation][hydrogen-framework]. + +# License + +This repository is published under the [MIT][license] license. + +[hydrogen-contentstack-demo]: https://01hq4sm3tp6r1g3yas5q5h3qq1-6f2958b70f5894a4ad6d.myshopify.dev/ +[hydrogen-github]: https://github.com/contentstack/hydrogen-contentstack-demo +[hydrogen-framework]: https://shopify.dev/docs/custom-storefronts/hydrogen +[license]: https://github.com/sanity-io/sanity/blob/next/LICENSE +[contentstack-connect]: https://www.contentstack.com/docs From 2ed83111dd97b3c2787cb34c698dcf300f08a2de Mon Sep 17 00:00:00 2001 From: Sankaranandh TN <86720185+sankartn@users.noreply.github.com> Date: Fri, 8 Mar 2024 11:27:34 +0530 Subject: [PATCH 2/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 11c28c3..afb38c1 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ This demo is compatible with `@shopify/hydrogen >= 2024.01` built on Remix. Hydrogen Contentstack Demo is our customized [Hydrogen][hydrogen-github] starter that presents a real-world example of how Contentstack and Structured Content can elevate your custom Shopify storefronts. -It's designed to be used, which syncs products and collections from your Shopify storefront to your Contentstack Account. +It's designed to be used, which syncs products and collections from your Shopify storefront to your Stack in Contentstack. This starter showcases a few patterns you can adopt when creating your own custom storefronts. Use Contentstack and Hydrogen to delight customers with rich, shoppable editorial experiences that best tell your story. From 9884ead4ffdef09c3870dfa221d0ca5f0b93d69b Mon Sep 17 00:00:00 2001 From: ChinmayeeMestry <54532403+ChinmayeeMestry@users.noreply.github.com> Date: Tue, 12 Mar 2024 11:24:40 +0530 Subject: [PATCH 3/5] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index afb38c1..4443c80 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ This demo is compatible with `@shopify/hydrogen >= 2024.01` built on Remix. > For a more complex reference example, please see our [demo-ecommerce repo](https://github.com/contentstack/shopify-contentstack-app) which features a monorepo with an embedded Contentstack. - + [Demo][hydrogen-contentstack-demo] | [Contentstack Connect for Shopify][[contentstack-connect]] # About From 9094ebf8401d890b31a1958d04b151b897f13d66 Mon Sep 17 00:00:00 2001 From: ChinmayeeMestry <54532403+ChinmayeeMestry@users.noreply.github.com> Date: Wed, 13 Mar 2024 11:05:10 +0530 Subject: [PATCH 4/5] Update README.md --- README.md | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) diff --git a/README.md b/README.md index 4443c80..9f2a055 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,80 @@ It's designed to be used, which syncs products and collections from your Shopify This starter showcases a few patterns you can adopt when creating your own custom storefronts. Use Contentstack and Hydrogen to delight customers with rich, shoppable editorial experiences that best tell your story. +# Features + +**[View the feature gallery][about]** + +This TypeScript demo adopts many of Hydrogen's [framework conventions and third-party libraries][hydrogen-framework]. If you've used Hydrogen then you should hopefully feel at home here. + +# Fetching Contentstack data + +This demo comes preconfigured Contentstack, which adds a Contentstack client to the Remix context. This enables you to fetch content from Contentstack in Remix loaders and actions. +```tsx +// /app/routes/($locale).products.$handle.tsx +import {getEntryByUid} from '~/components/contentstack-sdk'; + +const fetchData = async () => { + try { + const result = await getEntryByUid({ + contentTypeUid: 'shopify_home', + entryUid: 'your entry uid', + envConfig, + }); + return result; + } catch (error) { + console.error('ERROR', error); + } + }; +``` +This uses our official [`contentstack-sdk`][contentstack-sdk] library, so it supports all the methods you would expect to interact with Contentstack API's +You can also use the [`defer` and `Await` utilities](https://remix.run/docs/en/1.15.0/guides/streaming#using-defer) from Remix to prioritize critical data: + +# Viewpoint + +We've taken the following viewpoint on how we've approached this demo. + +
+Shopify is the source of truth for non-editorial content + +- For products, this includes titles, handles, product options and metaFields. +- For collections, this includes titles, products associated to it and collection images. + +
+ +
+Shopify data stored in our Contentstack is used to improve the editor experience + +- This allows us to display things like product status, prices and even inventory levels. +- Our application always fetches from Shopify's Storefront API at runtime to ensure we have the freshest data possible, especially important when dealing with fast-moving inventory. + +
+ +
+Collections are also managed by Shopify and Contentstack + +- Shopify is used to handle collection rules and sort orders. +- In Contentstack also, you can create Collection entries and which will get created inside Shopify using webhooks. + +
+ +
+Product options are customized in Contenstack + +- Data added to specific product options is done in Contentstack entries. +- For the extra fields inside Contentstack gets updated in Shopify in MetaField. + +
+ +
+Non-product pages i.e About are managed entirely by Contentstack + +- Shopify pages and blog posts (associated with the Online Store) channel aren't used in this demo. A dedicated `page` content type in Contentstack has been created for this purpose. + +
+ # Getting started +Contentstack for Shopify is a Shopify Plus-certified app. ## Requirements: @@ -40,8 +113,10 @@ For information on running production builds and deployment, see the [Hydrogen d This repository is published under the [MIT][license] license. +[about]: https://01hq4sm3tp6r1g3yas5q5h3qq1-6f2958b70f5894a4ad6d.myshopify.dev/about [hydrogen-contentstack-demo]: https://01hq4sm3tp6r1g3yas5q5h3qq1-6f2958b70f5894a4ad6d.myshopify.dev/ [hydrogen-github]: https://github.com/contentstack/hydrogen-contentstack-demo [hydrogen-framework]: https://shopify.dev/docs/custom-storefronts/hydrogen [license]: https://github.com/sanity-io/sanity/blob/next/LICENSE [contentstack-connect]: https://www.contentstack.com/docs +[contentstack-sdk]: https://www.contentstack.com/docs/developers/sdks/content-delivery-sdk/javascript-browser/reference From 3ec9d20eb4b61bc8f7a6ffec94f97c0902d9d591 Mon Sep 17 00:00:00 2001 From: ChinmayeeMestry Date: Wed, 13 Mar 2024 22:24:23 +0530 Subject: [PATCH 5/5] added changes in UI --- app/components/Aside.tsx | 2 +- app/components/contentstack-sdk.js | 1 - app/routes/($locale)._index.tsx | 208 ++++++++++++++++------ app/routes/($locale).collections.all.tsx | 26 +-- app/routes/($locale).pages.$handle.tsx | 2 - app/routes/($locale).products.$handle.tsx | 58 +++++- app/routes/_index.tsx | 208 ++++++++++++++++------ app/styles/app.css | 7 +- app/styles/pages.css | 66 ++++++- contentstack-app/app/styles/app.css | 3 +- public/banner.svg | 10 +- 11 files changed, 451 insertions(+), 140 deletions(-) diff --git a/app/components/Aside.tsx b/app/components/Aside.tsx index f486f19..fe252ee 100644 --- a/app/components/Aside.tsx +++ b/app/components/Aside.tsx @@ -26,7 +26,7 @@ export function Aside({ window.location.hash = ''; }} /> -