saleor / saleor-storefront

A GraphQL-powered, NextJs-based, PWA storefront for Saleor. IMPORTANT: This project is [DEPRECATED] in favor of saleor/react-storefront soon to become our default demo and storefront starter pack.

saleor-storefront repository is DEPRECATED

We've decided to build a new storefront starting from scratch, with no fancy design, focusing solely on best practices for building commerce storefronts. The new project, called react-storefront, uses Next.js as its foundation and Tailwind for the looks. You can find it here: https://github.com/saleor/react-storefront.

Saleor Storefront

Note: This project is a demonstration on how Saleor can be used. It’s not ready to be a starter but rather show how different cases can be handled and could be used as a recipe book. There will be breaking changes and the code is constantly evolving, so use at your own risk.

A GraphQL-powered, PWA, single-page application storefront for Saleor.

Features

• Headless ecommerce storefront built with GraphQL, Apollo Client, React, Next.js and Typescript
• Offline mode (beta)
• Saleor GraphQL API integration
• Single-page application experience
• Braintree Payment Gateway integration

Demo

See the public demo of Saleor Storefront!

Or launch the demo on a free Heroku instance.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node.js 14.16
• A running instance of Saleor.

To run the storefront, you have to set the NEXT_PUBLIC_API_URI environment variable to point to the Saleor GraphQL API. If you are running Saleor locally, with the default settings, NEXT_PUBLIC_API_URI is set to: http://localhost:8000/graphql/. To change it, either create a .env.local file and add it there or set an env variable using export command.

Installing

Clone the repository:

git clone https://github.com/mirumee/saleor-storefront.git

Enter the project directory:

cd saleor-storefront

Using stable release

To use the official stable release, checkout to a release tag:

$ git checkout 2.11.0

See the list of all releases here: https://github.com/mirumee/saleor-storefront/releases/

Using development version

If you want to use the latest development version, checkout to the master branch:

$ git checkout master

Install NPM dependencies:

npm i

Run the development server:

npm start

Go to http://localhost:3000 to access the storefront.

Build

To compile the app run:

$ npm run build

To compile the app and export storefront to the static HTML run:

$ npm run build:export

To compile the app and run it in production mode with next server run:

$ npm run build:start

In order to enable Apollo Devtools in the production version, set the environmental variable

NEXT_PUBLIC_ENABLE_APOLLO_DEVTOOLS=true

Cypress tests

If you want to run Cypress tests, make sure that all dependencies (including Cypress) are installed by running the install command.

npm i

Following environment variables are required to be set in order to be able to run tests properly:

• API_URI - GraphQL API address.
• STATIC_URL - static files destination url, eg. S3 bucket
• CYPRESS_USER_NAME - username (email) for Storefront user.
• CYPRESS_USER_PASSWORD - for the user mentioned above.

If you are running the Storefront from the perspective of Docker container, then you can run tests using following commands:

Headless mode:

cy:run

Cypress UI mode:

cy:open

If you want to run tests against your local development environment then use following commands:

Headless mode:

test:e2e:run

Cypress UI mode:

test:e2e:dev

Creating new components

All new components should follow Atomic Design Guidelines and be placed in src/@next/components directory.

Files structure can be generated using plop:

npm run generate

Modifying the Storefront

From Spectrum Post

Important Files

• saleor-storefront/config/next/config.base.js - Base Next.js config file which contains webpack custom adjustments.
  • Can change name of the app (displayed when installed on mobile)
• saleor-storefront/src/pages/app.tsx - Main entry point file. Render's the component, apollo-client, and others to the root div in index.html file above. Contains also head section - You can change the title of storefront here.
• saleor-storefront/src/core/config.ts - Controls number of products shown per page, support email, gateway providers, social media, and some meta.
  • Can change support email
  • Can change products shown per page
  • Can change gateway providers
  • Can change social media links that are displayed in the footer
  • Can change some meta options
• saleor-storefront/src/images/ - Holds all the images for logo, cart, favicon, etc.
  • Can change storefront logo, favicon, or add new images here.
• saleor-storefront/src/globalStyles/scss/variables.scss - Contains base styles like colors, font size, container width, media breakpoints and more.
• saleor-storefront/src/@next/globalStyles/ - Contains more base styles, themes, media, and constants.
• saleor-storefront/src/views/ - This folder controls the views, or what is displayed for each page. Most views have a file named "Page.tsx" that controls the layout of the page and a file named "View.tsx" that calls the query and renders the component with the data.
  • Can add another view to storefront here. Requires adding a route (see routes below).
• saleor-storefront/src/@next/pages/ - Second spot for modifying/adding different pages. This is the recommended directory to add new pages.
• saleor-storefront/src/paths.ts - This folder contains all the paths. Here is where you add a new one.
• saleor-storefront/src/pages/ - This folder contains files which are translated to Next.js routing. Here is where you add a new route.
  1. Export a new path in paths.ts
  2. Inside pages, create a new file with name correnspond to your desired route (read more here about nested routes). Import your view in the created route file end export it as a default export.
  3. To link to your new view import Link from "next/link" and use new path you created in paths.ts (make sure to import it)
• saleor-storefront/src/app/App.tsx - This is main component that renders the , (explained below), and a couple other components.

Adding a Payment Gateway

• saleor-storefront/src/core/config.ts - Add new gateway provider name here.
• saleor-storefront/src/@next/components/organisms/ - Create a new folder for new payment gateway component here.
• saleor-storefront/src/@next/components/organisms/PaymentGatewaysList/PaymentGatewaysList.tsx - Import new gateway component, create a new switch case to handle your gateway component.

Receiving confirmation emails

• Set EMAIL_URL environment variable for Saleor core.
  • Using Docker - Add EMAIL_URL as new environment variable to both the api and worker service following the format here.
• Issues getting emails working?
  • Gmail
    • Check to see that "Less secure app access" is turned ON. Under "Manage your Google Account" > Go to the security tab. By default, the setting is off for security reasons.
    • If using 2FA make sure to set an app password and use that in place of your normal login password.

Multichannel

• Set [SALEOR_CHANNEL_SLUG] environment variable. - Default value: default-channel.

License

This project is licensed under the BSD-3-Clause License - see the LICENSE file for details

Crafted with ❤️ by Saleor Commerce

[email protected]

saleor-storefront's Issues

Cannot view some products

Faulty URL: https://pwa.getsaleor.com/product/pineapple-juice/75/

TypeError: "this.props.productVariants[0].attributes[0].attribute is null"
	createPickers https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:515:12544
	<anonymous> https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:515:14395
	Mo https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:291:48053
	ai https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:291:56917
	di https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:291:63392
	Hi https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:291:77769
	Qi https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:291:78143
	Ia https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:291:84229
	Aa https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:291:83768
	Ta https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:291:82847
	Gi https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:291:81762
	enqueueForceUpdate https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:291:47650
	forceUpdate https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:275:1739
	updateCurrentData https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:1:13662
	next https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:1:13357
	g https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:97645
	b https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98151
	value https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98704
	next https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:23788
	next https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:23741
	queryListenerForObserver https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:38171
	broadcastQueries https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:43536
	broadcastQueries https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:43516
	broadcastQueries https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:43410
	next https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:44600
	g https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:97645
	b https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98151
	value https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98704
	next https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:25505
	next https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:25471
	g https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:97645
	b https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98151
	value https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98704
	next https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:515:19780
	g https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:97645
	b https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98151
	value https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98704
	g https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:97645
	b https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98151
	value https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98704
	onNext https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:682:83095
	g https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:97645
	b https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98151
	value https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:267:98704
	p https://pwa.getsaleor.com/js/app.b9ade5682792b2d7e34b.js:682:89949

Add offline cache

The offline cache will be used when the app is in the offline state.

Add Overlay component

Overlay component will be used for:

• cart,
• login,
• register,
• menu,
• newsletter.

It should have two aligments to left and right.

"My bag" view - visual issues on mobile

• Saleor logo is trimmed
• Missing space between the product and variant name e.g. "Johnson-Arias(11)"
• Checkout button is not centered
• Quantity and Price column titles are clashing with each other

Add TSLint

TSLint (https://github.com/palantir/tslint) should be added to the project to help keep consistent code style in the app.

Add style guide

We will go with https://github.com/storybooks/storybook

all components can be found in the: https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/SALEOR-STOREFRONT?node-id=96%3A15

Things to consider:
https://github.com/abhiaiyer91/apollo-storybook-decorator

Add user session context

Checkout review page

• product list component same like #39
• steps summary component,

https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/SALEOR-STOREFRONT?node-id=927%3A4035

Add routing with app structure

• main page /,
• search page /search/,
• category page /category/([a-z-]+)/([0-9]+),
• product page /product/([a-z-]+)/([0-9]+),
• account page /account/,
• wishlist page /wish-list/,
• checkout page /checkout/([a-z-]+)/,
• content page /([a-z-]+)/.

Add search page

• search input,
• sort by component,
• filters component,
• products counter component,
• product list component,
• load more products component,
• most popular (API not ready yet).

https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/SALEOR-STOREFRONT?node-id=1057%3A6

query SearchProduct($query: String!, $attributes: [AttributeScalar], $pageSize: Int) {
  products(query: $query, attributes: $attributes, first: $pageSize) {
    totalCount
    edges {
      node {
        id
        name
        thumbnailUrl
        category {
          id
          name
        }
        price {
          amount
          currency
        }
      }
    }
  }
  attributes {
    edges {
      node {
        id
        name
        values {
          id
          name
        }
      }
    }
  }
}

Checkout shipping method form

• add shipping metod selector

https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/SALEOR-STOREFRONT?node-id=927%3A3150

Add i18n support

We will use https://lingui.js.org/ package. Language should be taken from:

1. url,
2. localstorage,
3. navigator.language

Implement search overlay

Add queries structure

• add homepage query,
• add product details query,
• add cart details query,
• add category query,
• add checkout query,
• add content query,
• add wishlist query,
• add search query

Category page

• bread crumbs component,
• sort by component,
• filters component,
• products counter component,
• product list component,
• load more products component,
• most popular (API not ready yet).

query Category($id: ID!, $attributes: [AttributeScalar], $pageSize: Int) {
    category(id: $id) {
      id
      name
      backgroundImage
      products(attributes: $attributes, first: $pageSize) {
        totalCount
        edges {
          node {
            id
            name
            thumbnailUrl
            category {
              id
              name
            }
            price {
              amount
              currency
            }
          }
        }
      }
    }
    attributes(inCategory: $id) {
      edges {
        node {
          id
          name
          values {
            id
            name
          }
        }
      }
    }
  }

Add polifils

Error if no shipping method found

If we try to order the product 63 (https://pwa.getsaleor.com/product/red-dwarf-red-paint/63/) (don't add any other products, otherwise it seems to work) from France, it should raise this error if you submit nothing (because of shippingMethodId: ""):

{
    "data": {
        "checkoutShippingMethodUpdate": {
            "errors": [{
                "field": "shippingMethodId",
                "message": "Couldn't resolve to a node: ",
                "__typename": "Error"
            }],
            "checkout": null,
            "__typename": "CheckoutShippingMethodUpdate"
        }
    }
}

Request

fragment Checkout on Checkout {
    token id totalPrice {
        net {
            amount __typename
        }
        gross {
            amount localized __typename
        }
        currency __typename
    }
    subtotalPrice {
        net {
            amount __typename
        }
        gross {
            amount localized __typename
        }
        currency __typename
    }
    billingAddress {
        firstName lastName companyName streetAddress1 streetAddress2 city postalCode country {
            code country __typename
        }
        countryArea phone __typename
    }
    shippingAddress {
        firstName lastName companyName streetAddress1 streetAddress2 city postalCode country {
            code country __typename
        }
        countryArea phone __typename
    }
    email availableShippingMethods {
        id name price {
            currency amount localized __typename
        }
        __typename
    }
    shippingMethod {
        id name price {
            currency amount localized __typename
        }
        __typename
    }
    shippingPrice {
        net {
            amount __typename
        }
        gross {
            amount localized __typename
        }
        currency __typename
    }
    lines {
        id quantity totalPrice {
            net {
                amount __typename
            }
            gross {
                amount localized __typename
            }
            currency __typename
        }
        variant {
            id name price {
                amount currency localized __typename
            }
            product {
                id name thumbnailUrl thumbnailUrl2x: thumbnailUrl(size: 510) __typename
            }
            __typename
        }
        quantity __typename
    }
    __typename
}
mutation updateCheckoutShippingOptions($checkoutId: ID!, $shippingMethodId: ID!) {
    checkoutShippingMethodUpdate(checkoutId: $checkoutId, shippingMethodId: $shippingMethodId) {
        errors {
            field message __typename
        }
        checkout { ...Checkout __typename
        }
        __typename
    }
}

{
"operationName":"updateCheckoutShippingOptions",
"variables":{"checkoutId":"Q2hlY2tvdXQ6NTdkMDY1MDUtYzQ4Ny00YjA2LTkyYjQtM2M3MGI3OWYyZDky","shippingMethodId":""
}

Remove cache from service worker

Current domain: https://store-front.getsaleor.com

Autofill the admin credentials in the login forms

We should autofill the admin account on the new storefront login forms

Link to related products from product details page

In the product details page we display a section "OTHER PRODUCTS IN THIS CATEGORY", but neither the images nor their titles are clickable so one cannot navigate to those related products.

Checkout payment page

• payment form we start with stride

https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/SALEOR-STOREFRONT?node-id=927%3A4035

Price range filter

In the current demo store a user can filter products on a category page using price range inputs. Should this functionality be added to the new storefront? What do you think @pwgryglak ?

Add messages component to the style guide

Related to #4
Related to #1

Use properly cursor-based pagination

ATM product list query requests first 8 products, then load more function requests first 16 products. It should be optimized to request first 8 products after previous pagination last cursor.

Add menu component to the style guide

Related to #4
Blocked by #1

Using localized prices

Prices displayed in the storefront aren't localized while we have that format in API.

Example price query:

price {
  currency
  amount
  localized
}

Result:

"price": {
  "currency": "USD",
  "amount": 46.43,
  "localized": "$46.43"
}

Instead of manually assembling the price representation based on amount and currency, we can just use localized value.

Improve offline placeholder component

I just don't think that rendering OFFLINE :( is a good idea here.

Add offline cache filler

The filler should be working only on the wifi connection. First, run should be done after installation event.

Implement the Payment Request API

This will allow us to bypass most of the checkout process at least for devices.

Details: https://developers.google.com/web/fundamentals/getting-started/primers/payment-request/

Display success message when users register a new account.

Currently, there is no visual feedback after registering a new account. Instead, we should show a message saying e.g. "User { email } has been created."

Optimize for Google Page Speed audit

There are some minor tweaks we could implement, eg.

Homepage

• Add meta description for the homepage
• Add robots.txt file (or at least make it not crash)
• Add alt texts for images on the homepage
• Set cache policy on the images (demo's Amazon configuration)
• Preload fonts
• Truncate the short_name on the PWA manifest

All pages

Implement lazyload & add alt texts whenever possible

All issues can be found when running the GPS audit

Improve dependency and devDependency division in package.json

Currently, package.json is a mess and would use some tidying up. We should think which packages should be placed in dependencies section, and which in devDependencies.

Product page

• bread crumbs component,
• share links component (API not ready yet)
• wishlist component (API not ready yet)
• product galery component (experience like https://www.gucci.com/pl/en_gb/pr/men/mens-ready-to-wear/jackets/houndstooth-wool-cape-jacket-p-541766Z496L9079?listName=LookDetailsPage&position=1)
• product info component,
  • variant picker component (#36),
  • attribute picker overlay component,
• product details component (API not ready yet),
• connected products (API not ready yet),
• sizes table overlay component (API not ready yet),

Blocked by saleor/saleor#2794

https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/SALEOR-STOREFRONT?node-id=1161%3A8

query Product {
  product(id: "UHJvZHVjdDo0") {
    id
    name
    description,
    category {
      id
      name
    }
    variants {
      edges {
        node {
          id
          sku
          name
          price:priceOverride {
            currency
            amount
          }
          attributes {
            attribute {
              id
              slug
              name
            }
            value {
              id
              name
              value:name
            }
          }
        }
      }
    }
    images {
      edges {
        node {
          id
          sortOrder
          alt
          url
        }
      }
    }
  }
}

Checkout anonymous login or register page

• continue as a guest component,
• login component

https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/SALEOR-STOREFRONT?node-id=927%3A2897

Update favicon

Change favicon to match the one used for new getsaleor.com website.

Add product list item to the style guide

This section is called "PRODUCT BEHAVIORE" in figma.

Related to #4
Related to #1

Add animations to main menu items on hover

Cart page

• product table component,
• discount form (API not ready yet),
• go to checkout component,
• information box component (we need to concider how to handle that in saleor),

Blocked by saleor/saleor#2798

https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/SALEOR-STOREFRONT?node-id=927%3A2777

query getCheckout($token: UUID!) {
  checkout(token: $token) {
    token
    id
    totalPrice
    subtotalPrice
    subtotalLineItemsQuantity
    lines {
      edges {
        node {
          id
          quantity
          totalPrice
          variant {
            id
            name
            product {
              id
              name
              thumbnailUrl
              price {
                amount,
                currency
              }
            }
          }
        }
      }
    }
  }
}

Product Photos - Saleor Storefront

Przydałyby się zdjecia produktowe do Storefront'a Saleora
Moje propozycje to żeby wasze ilustracje wrzucić na koszulki + ilustracje na deskach, snowboardach, longboardach itp. itd.

Moja prośba:
Zdjęcia produktowe powinny być bez tła

Variant picker component

Api limitations

Current Saleor API doesn't allow to set colors or images on the attribute field. Introduction of new attribute field value will solve this issue (more info in the saleor/saleor#2793). Because of this limitation, we will use the name field as a name and value.

query Product {
  product(id: "UHJvZHVjdDo0") {
    id
    variants {
      edges {
        node {
          id
          sku
          name
          attributes {
            attribute {
              id
              slug
              name
            }
            value {
              id
              name
              value:name
            }
          }
        }
      }
    }
  }
}

If the value matches color (#(?:[0-9a-f]{2}){2,4}|#[0-9a-f]{3} or even more hardcore https://gist.github.com/olmokramer/82ccce673f86db7cda5e#gistcomment-2174868) or image ((https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))) we should render it as a block option picker, if not as normal select.

Variant dimensions simplification

Another simplification. Saleor gives you the ability to define more than two attributes per variant that complicates UX a little bit. To keep it simple we will combine all above the first attribute to one abstract one.

Trousers example:

Trouser variant is defined by three attributes:

• color: #999098, #af9098,
• height: 32, 34, 36
• width: 32, 33

we will flatten this structure to two dimentsion color, height/width:

• color: #999098, #af9098,
• height/width: 32/33, 32/33, 34/32, 36/33

Checkout anonymous shipping address page

• address form component,
• cart sumarry component

https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/SALEOR-STOREFRONT?node-id=927%3A3081

It will be nice to have saleor/saleor#2800

Add webpack config

• ts support
• scss support,
• PWA support

Add category page

Create category page according to designs

Add design

https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/Saleor-Storefront

• style guide,
• main page,
  • menu overlay, we will try standard left overlay or mega menu,
  • search overlay,
  • featured section,
  • subscribe to a newsletter,
  • global notification component
• search page, as we agree on the meeting we will use the same view for search and categories,
• category page,
• product page,
• login overlay,
• register overlay,
• cart overlay (without separate page),
• my account,
  • user data form,
  • user addresses, in salor user can add many addresses and select which one is defoult shipping and which defauld billing.
  • newsletter form,
  • orders list,
  • order details,
• checkout
• wishlist page, as we agree on the meeting we will go with separate site rather than overlay,
• content page (like FAQ, private policy),

Can no longer checkout after first attempt to do full checkout

1. Attempted a full checkout (as [email protected]), which may have failed or not;
2. Attempted a second time to make a checkout;
3. Error.

TypeError: "d is null"

	gi
react-dom.production.min.js:181:139
Si/n.callback
react-dom.production.min.js:189:469
co
react-dom.production.min.js:128:451
lo
react-dom.production.min.js:128:248
ka
react-dom.production.min.js:228:201
Ia
react-dom.production.min.js:218:80
Aa
react-dom.production.min.js:217:172
Ta
react-dom.production.min.js:214:214
Gi
react-dom.production.min.js:212:36
enqueueSetState
react-dom.production.min.js:133:222
_.prototype.setState
react.production.min.js:13:210
E/this.getCheckout/<
index.tsx:45
a
index.tsx:4:41

Request

Host: demo.getsaleor.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://pwa.getsaleor.com/cart/76676168-68d3-4d94-9253-625b9c72aacf/
content-type: application/json
origin: https://pwa.getsaleor.com
Content-Length: 2162
Connection: keep-alive
TE: Trailers

{
    "operationName": "getCheckout",
    "variables": {
        "token": "76676168-68d3-4d94-9253-625b9c72aacf"
    },
    "query": "fragment Checkout on Checkout {\n  token\n  id\n  totalPrice {\n    net {\n      amount\n      __typename\n    }\n    gross {\n      amount\n      localized\n      __typename\n    }\n    currency\n    __typename\n  }\n  subtotalPrice {\n    net {\n      amount\n      __typename\n    }\n    gross {\n      amount\n      localized\n      __typename\n    }\n    currency\n    __typename\n  }\n  billingAddress {\n    firstName\n    lastName\n    companyName\n    streetAddress1\n    streetAddress2\n    city\n    postalCode\n    country {\n      code\n      country\n      __typename\n    }\n    countryArea\n    phone\n    __typename\n  }\n  shippingAddress {\n    firstName\n    lastName\n    companyName\n    streetAddress1\n    streetAddress2\n    city\n    postalCode\n    country {\n      code\n      country\n      __typename\n    }\n    countryArea\n    phone\n    __typename\n  }\n  email\n  availableShippingMethods {\n    id\n    name\n    price {\n      currency\n      amount\n      localized\n      __typename\n    }\n    __typename\n  }\n  shippingMethod {\n    id\n    name\n    price {\n      currency\n      amount\n      localized\n      __typename\n    }\n    __typename\n  }\n  shippingPrice {\n    net {\n      amount\n      __typename\n    }\n    gross {\n      amount\n      localized\n      __typename\n    }\n    currency\n    __typename\n  }\n  lines {\n    id\n    quantity\n    totalPrice {\n      net {\n        amount\n        __typename\n      }\n      gross {\n        amount\n        localized\n        __typename\n      }\n      currency\n      __typename\n    }\n    variant {\n      id\n      name\n      price {\n        amount\n        currency\n        localized\n        __typename\n      }\n      product {\n        id\n        name\n        thumbnailUrl\n        thumbnailUrl2x: thumbnailUrl(size: 510)\n        __typename\n      }\n      __typename\n    }\n    quantity\n    __typename\n  }\n  __typename\n}\n\nquery getCheckout($token: UUID!) {\n  checkout(token: $token) {\n    ...Checkout\n    __typename\n  }\n}\n"
}

Response

HTTP/2.0 200 OK
content-type: application/json
content-length: 3068
date: Wed, 31 Oct 2018 20:11:57 GMT
server: nginx/1.12.1
vary: Cookie, Accept-Language
access-control-allow-origin: *
access-control-allow-methods: POST, OPTIONS
access-control-allow-headers: Origin, Content-Type, Accept, Authorization
content-language: en
x-cache: Miss from cloudfront
via: 1.1 4d1cbe225c5d30aa78ec9a6fa1ba4211.cloudfront.net (CloudFront)
X-Firefox-Spdy: h2

{
    "data": {
        "checkout": {
            "token": "76676168-68d3-4d94-9253-625b9c72aacf",
            "id": "Q2hlY2tvdXQ6NzY2NzYxNjgtNjhkMy00ZDk0LTkyNTMtNjI1YjljNzJhYWNm",
            "totalPrice": {
                "net": {
                    "amount": 41.67,
                    "__typename": "Money"
                },
                "gross": {
                    "amount": 50.0,
                    "localized": "$50.00",
                    "__typename": "Money"
                },
                "currency": "USD",
                "__typename": "TaxedMoney"
            },
            "subtotalPrice": {
                "net": {
                    "amount": 41.67,
                    "__typename": "Money"
                },
                "gross": {
                    "amount": 50.0,
                    "localized": "$50.00",
                    "__typename": "Money"
                },
                "currency": "USD",
                "__typename": "TaxedMoney"
            },
            "billingAddress": {
                "firstName": "Hello",
                "lastName": "World",
                "companyName": "",
                "streetAddress1": "Avenue of the General Mc. Denille",
                "streetAddress2": "",
                "city": "Strasbourg",
                "postalCode": "67100",
                "country": {
                    "code": "FR",
                    "country": "France",
                    "__typename": "CountryDisplay"
                },
                "countryArea": "",
                "phone": "",
                "__typename": "Address"
            },
            "shippingAddress": {
                "firstName": "Hello",
                "lastName": "World",
                "companyName": "Hello World, INC",
                "streetAddress1": "Avenue of the General Mc. Denille",
                "streetAddress2": "",
                "city": "Strasbourg",
                "postalCode": "67100",
                "country": {
                    "code": "FR",
                    "country": "France",
                    "__typename": "CountryDisplay"
                },
                "countryArea": "",
                "phone": "",
                "__typename": "Address"
            },
            "email": "",
            "availableShippingMethods": [{
                "id": "U2hpcHBpbmdNZXRob2Q6MjU5",
                "name": "DB Schenker",
                "price": {
                    "currency": "USD",
                    "amount": 37.39,
                    "localized": "$37.39",
                    "__typename": "Money"
                },
                "__typename": "ShippingMethod"
            }],
            "shippingMethod": null,
            "shippingPrice": {
                "net": {
                    "amount": 0.0,
                    "__typename": "Money"
                },
                "gross": {
                    "amount": 0.0,
                    "localized": "$0.00",
                    "__typename": "Money"
                },
                "currency": "USD",
                "__typename": "TaxedMoney"
            },
            "lines": [{
                "id": "Q2hlY2tvdXRMaW5lOjMyNzA=",
                "quantity": 1,
                "totalPrice": {
                    "net": {
                        "amount": 25.0,
                        "__typename": "Money"
                    },
                    "gross": {
                        "amount": 30.0,
                        "localized": "$30.00",
                        "__typename": "Money"
                    },
                    "currency": "USD",
                    "__typename": "TaxedMoney"
                },
                "variant": {
                    "id": "UHJvZHVjdFZhcmlhbnQ6MTgx",
                    "name": "2.5l",
                    "price": {
                        "amount": 30.0,
                        "currency": "USD",
                        "localized": "$30.00",
                        "__typename": "Money"
                    },
                    "product": {
                        "id": "UHJvZHVjdDo2NA==",
                        "name": "Light Speed Yellow Paint",
                        "thumbnailUrl": "https://saleor-demo.s3.amazonaws.com/__sized__/products/saleordemoproduct_paints_04-thumbnail-255x255.png",
                        "thumbnailUrl2x": "https://saleor-demo.s3.amazonaws.com/__sized__/products/saleordemoproduct_paints_04-thumbnail-510x510.png",
                        "__typename": "Product"
                    },
                    "__typename": "ProductVariant"
                },
                "__typename": "CheckoutLine"
            }, {
                "id": "Q2hlY2tvdXRMaW5lOjMyNzQ=",
                "quantity": 1,
                "totalPrice": {
                    "net": {
                        "amount": 16.67,
                        "__typename": "Money"
                    },
                    "gross": {
                        "amount": 20.0,
                        "localized": "$20.00",
                        "__typename": "Money"
                    },
                    "currency": "USD",
                    "__typename": "TaxedMoney"
                },
                "variant": {
                    "id": "UHJvZHVjdFZhcmlhbnQ6MTk3",
                    "name": "45cm x 45cm",
                    "price": {
                        "amount": 20.0,
                        "currency": "USD",
                        "localized": "$20.00",
                        "__typename": "Money"
                    },
                    "product": {
                        "id": "UHJvZHVjdDo4NQ==",
                        "name": "Colored Parrot Cushion",
                        "thumbnailUrl": "https://saleor-demo.s3.amazonaws.com/__sized__/products/saleordemoproduct_cuschion01-thumbnail-255x255.png",
                        "thumbnailUrl2x": "https://saleor-demo.s3.amazonaws.com/__sized__/products/saleordemoproduct_cuschion01-thumbnail-510x510.png",
                        "__typename": "Product"
                    },
                    "__typename": "ProductVariant"
                },
                "__typename": "CheckoutLine"
            }],
            "__typename": "Checkout"
        }
    }
}

Add base styles and typography to the style guide

• colors,
• typography,
• buttons,
• inputs.

Related to #4
Blocked by #1

Checkout anonymous billing form

• address form same as #42

https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/SALEOR-STOREFRONT?node-id=927%3A3212

Add more issues about pages components. For that, we need to have full designs.

Things to consider:

1. use react context or apollo-link-state?
2. user context,
3. cart context,
4. menu context,
5. currency - separate context or in user?
6. country - does salor support default country (geoip)?

Add images cache

In the offline cache, we could also save products images.

We need to check how much transfer this kind of feature will take. VUE SF caches one product thumbnail when you are on a page. In offline mode, a stretched image doesn't look good.

Home page

• Featured collection component,
• Products carousel component,
• Categories component,

Is blocked by saleor/saleor#2788
https://www.figma.com/file/e7uBewUH0k7TsOkDLfP1e9/SALEOR-STOREFRONT?node-id=65%3A3