Skip to content
This repository has been archived by the owner on May 14, 2024. It is now read-only.

Shopify/shopify-marketplaces-buyer-app

Repository files navigation

Shopify Buyer-Facing Marketplace App

This is a Next.js project bootstrapped with create-next-app. It connects to the Shopify Merchant-Facing Channel App using GraphQL. 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 and be used as a springboard starting point for development of a buyer facing marketplace.



1. Getting Started

Requirements:

Clone this repository:

git clone https://github.com/Shopify/shopify-marketplaces-buyer-app

Install dependencies:

yarn

Run local development server:

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.

const client = new ApolloClient({
    uri: `http://localhost:8081/graphql`,
    ...
});

Open marketplace in browser:

Open 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 application will be placed in this directory.

components/* Contains common React components that are used in multiple places in the app.
public/*

Explained here: 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

5. License

This repository is available as open source under the terms of the MIT License.

About

No description, website, or topics provided.

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published