https://github.com/Shopify/shopify-marketplaces-buyer-app
https://github.com/Shopify/shopify-marketplaces-buyer-app
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/Shopify/shopify-marketplaces-buyer-app
- Owner: Shopify
- License: mit
- Archived: true
- Created: 2022-02-14T21:22:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-24T13:19:49.000Z (about 2 years ago)
- Last Synced: 2025-03-25T04:54:36.810Z (7 months ago)
- Language: JavaScript
- Size: 402 KB
- Stars: 53
- Watchers: 236
- Forks: 38
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- jimsghstars - Shopify/shopify-marketplaces-buyer-app - (JavaScript)
README
Shopify Buyer-Facing Marketplace App
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). It connects to the [`Shopify Merchant-Facing Channel App`](https://github.com/Shopify/shopify-marketplaces-admin-app) using [GraphQL](https://graphql.org/). It is an example of a simple buyer-side client application that can be used to get started quickly with marketplaces. The code in this repo comes directly from Marketplace Kit tutorials on [https://shopify.dev/marketplaces](https://shopify.dev/marketplaces) and be used as a springboard starting point for development of a buyer facing marketplace.
---
- [1. Getting Started](#1-getting-started)
- [2. Overview of Code Structure](#2-overview-of-code-structure)
- [3. How to use this repo (including tutorial links & files modified)](#3-how-to-use-this-repo)
- [4. Key Tech](#4-key-tech)
- [5. License](#5-license)
---
## 1. Getting Started
**Requirements:**
- [yarn](https://yarnpkg.com/en/) - Checkout [`this branch`](#) for npm-specific setup instructions
- [`Setup the merchant-facing app`](https://github.com/Shopify/shopify-marketplaces-admin-app), this is where we get data to hydrate our client
- Ensure you have [NodeJS](https://nodejs.org/en/) installed on your system.
**Clone this repository:**
```bash
git clone https://github.com/Shopify/shopify-marketplaces-buyer-app
```
**Install dependencies:**
```bash
yarn
```
**Run local development server:**
```bash
yarn dev
```
**Change graphql uri:**
We connect to the merchant-facing-app to retrieve important information like shop name and storefront access token. To do this we connect to the merchant-facing-app graphql endpoint. By default this is set to `uri: http://localhost:8081/graphql` but you can change it to whatever port your merchant facing app is running on. To do this edit line 129 in /pages/cart/index.js line 129.
```js
const client = new ApolloClient({
uri: `http://localhost:8081/graphql`,
...
});
```
**Open marketplace in browser:**
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## 2. Overview of Code Structure
Familiarize yourself with the code structure for the buyer-facing app, to help you add all additional features that will be required, it is a great way to get started! It follows Next project conventions.
Code structure
Folder/file
Contains
pages/*
All the routes of your [`Next.js`](https://nextjs.org/docs/getting-started) application will be placed in this directory.
components/*
Contains common React components that are used in multiple places in the app.
public/*
[`Explained here`](https://nextjs.org/docs/basic-features/static-file-serving): Statically serve files like robots.txt and favicon.ico.
styles/*
CSS in this directory.
.eslintrc.json
Defines the configuration structure for ESLint as JSON.
next.config.js
Configuration file for your Next project.
.gitignore
Tells Git which files to ignore whe commiting to your project.
package.json
Records important metadata about a project, heart of Node project.
yarn.lock
Lockfile is generated according to the contents of package.json.
## 3. How to use this repo
We have bundled up the code from our tutorials to help you get started building marketplaces quickly. You can use the code in this repo out-of-the-box but we highly recommend familiarizing yourself with the codebase and tutorials so you can have a full understanding of how it works. This will make it easier for you to modify and customize your marketplace.
Below is an ordered list of tutorials with the files affected.
Tutorials
Tutorial URL
Files Modified
https://shopify.dev/marketplaces/shop-discovery
pages/index.js - components/page.js
https://shopify.dev/marketplaces/shops
pages/shops/[id].js - pages/index.js - components/productGrid.js - pages/products/[shopid]/[producthandle].js
https://shopify.dev/marketplaces/cart-and-checkout
helpers/cartHelpers.js - components/page.js - pages/products/[shopid]/[productHandle].js - pages/cart.js
## 4. Key tech
- Main tech- frontend framework: [NextJS](https://nextjs.org/), which is a framework for [ReactJS](https://reactjs.org/)
- Main CSS library: [`MUI - Material UI`](https://mui.com/)
- Data fetching: [`GraphQL`](https://graphql.org/)
- The Shopify API that provides store channel data: [`Storefront API`](https://shopify.dev/api/storefront#top)
## 5. License
This repository is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).