gatsby-starter-shopifypwa - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #go #golang #linux #docker #nodejs #windows #awesome #awesome-list #vue #mcp #openai

gatsby-starter-shopifypwa

(★ 101)

💚:shopping_cart:💚 Bodega is a Shopify PWA using Gatsby JS + Netlify CMS

파일 탐색기

최종 버전 다운로드 (.zip)

- - AddToCart.js
  - header.js
  - layout.css
  - ProductBox.js
  - ProductList.js
  - VariantSelector.js
- - formErrors.js
  - gqlFragments.js
  - settings.js
- - gatsby-icon.png
- - context.js
  - index.js
- - 404.js
  - index.js
  - products.js
- - checkout.json
  - collections.json
  - customers.json
  - global.json
  - products.json
- - collection.js
  - product.js
- - config.yml
.env.sample
.gitignore
.prettierrc
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
LICENSE
netlify.toml
package-lock.json
package.json
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/gil--/gatsby-starter-shopifypwa

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd gatsby-starter-shopifypwa

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Bodega Cloud

A Gatsby Shopify starter

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

[![Edit gatsby-starter-shopify](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/98rxxwxj1w)

## Bodega Cloud powered by Gatsby, Netlify, & Shopify

This will be a POC Shopify PWA using the Storefront API & GatsbyJS.

## High Level Project Goals

### Speed

Should be as fast but ideally, faster than a normal Shopify experience - especially for slower connection due to service worker.

### Highly Customizable Theme and Settings

There should be a number of ways to customize the theme without touching the code such as colors, typography, and settings (show breadcrumbs?, etc.)

### Accessible

Out-of-box, the site should be WCAG 2.0 accessible. This means aria tags where needed, AA color contrast, and keyboard accessible navigation with focus styling. This includes things like the gallery.

### Code Complete with regular Shopify themes

Should strive to offer the same features as a normal Shopify theme such as easy homepage section content, all the normal content types. See [this list of issues](https://github.com/gil--/gatsby-starter-shopifypwa/issues/4) which might prevent code complete.

## Install

### ENV

Copy .env.sample to .env.development and change the items to match your store. Make sure to add all .env keys and values in Netlify

### Emails

#### Customer Active

When sending a customer an active email (invite email), the template utilizes a url pattern that does not currently work with Shopify PWA. To simplify setup, change the following items in the *Customer account invite* email notification template (**Settings > Notifications > Customer Account > Customer account invite** or https://YOUR_STORE_NAME.myshopify.com/admin/email_templates/customer_account_activate/edit):

```diff
-<td class="button__cell"><a href="{{ customer.account_activation_url }}" class="button__text">Activate your account</a></td>
+{% assign url_parts = customer.account_activation_url  | split: '/' %}
+<td class="button__cell"><a href="{{shop.url}}/account/activate?id={{url_parts[5]}}&token={{url_parts[6]}}" class="button__text">Activate your account</a></td>
```

#### Password Reset

Shopify Password Resets urls do not currently work with the Storefront API and are also presented in a sturcture that requires custom Server-Side Routing. To simplify setup, change the following items in the *Customer account password reset* email notification template (**Settings > Notifications > Customer Account > Customer account password reset** or https://YOUR_STORE_NAME.myshopify.com/admin/email_templates/customer_account_reset/edit):

```diff
-<td class="button__cell"><a href="{{customer.reset_password_url}}" class="button__text">Reset your password</a></td>
+{% assign url_parts = customer.reset_password_url  | split: '/' %}
+<td class="button__cell"><a href="{{shop.url}}/account/reset?id={{url_parts[5]}}&token={{url_parts[6]}}" class="button__text">Reset your password</a></td>
```

We're basically splitting the reset password url into URL parameters which will make it MUCH easier for Gatsby to understand.

### Webhooks

Setup webhooks with Netlify to auto-deploy after product creation, update, and deletion.

1. Got to https://app.netlify.com/sites/MY_NETLIFY_APP/settings/deploys
2. Scroll down to **Build Hooks** and click the *Add build hook* button.
3. Create a new Build Hook such as **Shopify Product Update**.
4. Go to `https://YOUR_STORE_NAME.myshopify.com/admin/settings/notifications` and scroll down to Webhooks. Select **Create webhook** and for Event select *Product update* for example.
5. For the URL, enter the one Netlify gave you in step 3.
6. You can test the Webhook by clicking the **Send test notification** link and you should see a new build begin in Netlify.
7. Repeat steps 1 through 6 for any additional Shopify Events that should trigger a new build.

## Deploy

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gil--/gatsby-starter-shopifypwa)

### Instructions

1. Have your Shopify store name (If it's https://shopifypwa.myshopify.com, the store name would be **shopifypwa**) and [access token ready](https://www.shopify.com/partners/blog/17056443-how-to-generate-a-shopify-api-token). Enter those as the environment variables after clicking the deploy button above.
2. Enable Netlify Identity in order to enable the Admin CMS. Go to `https://app.netlify.com/sites/YOURAPPNAME/identity` and click **Enable Identity**.

## Features (WIP)

The following are planned features. Many of these are not planned for the initial release.

- ✅ Works Offline (Service Workers)
- ✅ Registration & Logic
- ✅ Shopify Product Pages
- ✅ Shopify Collection Pages
- [ ] Native-Like Homepage Sections
- [ ] Page Builder (Easily Build CMS Pages & Category Landing Pages)
- [ ] Theme Customizer (Colors, Typography, Basic Theme Features On/Off)
- [ ] Excellent SEO
- [ ] Rich-Media Cards (Twitter, Facebook)
- [ ] OOB Analytics Support (GA Ecommerce, GTM)
- [ ] WCAG AA Accessible
- [ ] PWA Functionality (Offline, Notifications, Manifest)
- [ ] Advanced Search (3rd Party Integration)
- [ ] WebPayments API Support? Shopify Dynamic Checkout?
- [ ] AR Product Support
- [ ] Advance Related Products
- [ ] 3rd Party Reviews Support
- [ ] 3rd Party Chat Support
- [ ] Mega Menu
- [ ] Login/Registration (My Orders)
- [ ] Order Status Lookup
- [ ] FAQ Page Template (w/ Typeahead search)