artwithaliens / storefront Goto Github PK

View Code? Open in Web Editor NEW

52.0 5.0 14.0 6.51 MB

⚡ React Storefront for Art With Aliens, built with Next.js

Home Page: https://artwithaliens.com

License: MIT License

JavaScript 0.22% TypeScript 99.75% Shell 0.03%

wp-graphql react nextjs wordpress graphql woocommerce storefront

storefront's Introduction

Art With Aliens 👽

This is a React theme for WordPress, built with Next.js, Webpack, Babel, Node.

Live Site

https://artwithaliens.com

Getting Started 🏄

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

Installing 🔧

Clone this repo in [email protected]:artwithaliens/storefront.git
cd storefront
yarn install

Configure Backend (WordPress site) 🔧

1. Add GraphQl support on WordPress

Clone and activate the following plugins, in your WordPress plugin directory:
- wp-graphql Exposes graphql for WordPress
- wp-graphql-jwt-authentication This plugin extends the wp-graphql plugin to provide authentication using JWT.
- wp-graphql-woocommerce Adds Woocommerce functionality to a WPGraphQL schema
- wp-graphql-yoast-seo Adds SEO data to WPGraphQL schema
You can also import default wooCommerce products that come with wooCommerce Plugin for development ( if you don't have any products in your WordPress install ) WP Dashboard > Tools > WooCommerce products(CSV) : The WooCommerce default products csv file is available at wp-content/plugins/woocommerce/sample-data/sample_products.csv

2. For Authentication.

a. You can use any secret token of your choice, however it would be best if you generate one using WordPress Salt generator (https://api.wordpress.org/secret-key/1.1/salt/) to generate a Secret. And just pick up any one of the token and add it in place of 'your-secret-token' below:

Define a Secret in wp-config.php of your WordPress directory:

define('GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-token');

b. Depending on your particular environment, you may have to research how to enable these headers, but in Apache, you can do the following in your .htaccess:

SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1

Configure Front end 🔧

Rename .env.example to .env and update your React Site URL

GRAPHQL_URL=http://wordpressSiteUrl/graphql

Commands 💻

dev Runs the node server in development mode

Using PWA on mobile

Open the site in Chrome on your mobile and then click on add to home screen.
It will be downloaded and saved as a Progressive Web App on your mobile.
Once added look Art With Aliens app on your mobile.
This PWA will work even when you are offline.

Branches Information: 🌱

master Main React WooCommerce theme
develop For testing

Author

Eike Foken

License 📃

This project is licensed under the MIT License - see the LICENSE.md file for details

storefront's People

Contributors

Stargazers

Watchers

Forkers

kabitakis jdiestramelendez perufork phildarv elko-lemiso mraf mycoinber pratikgupta556 zvekov yzessta michaelrabelo 1thorarinn zackha theboutiquestudio

storefront's Issues

Wordpress plugins version

Could you advise which version of plugins are you using with WordPress?

Links not working on checkout/review page

Hi,

noticed that IconButton hrefs are not working on checkout/review page

please see below screenshot

Customer Account

Hi,

do you have any plans to update customer account and dashboard feature? Currently registration and login is not working.

No service worker detected

Hi,

probably there is some typo when loading service worker

No matching service worker detected.

SW registration failed: TypeError: Failed to register a ServiceWorker for scope ('https://artwithaliens.com/') with script ('https://artwithaliens.com/service-worker.js'): A bad HTTP response code (404) was received when fetching the script.

Problen with schema

I'm trying to run dev, but get this problem.
Everything ok with category, but products notfound

(base) Vitiss-MacBook-Pro:storefront vitisindustriesltd$ npm run dev

[email protected] dev
concurrently "next dev" "yarn generate --watch"

yarn run v1.22.10
warning ../../package.json: No license field
$ graphql-codegen --watch
[0] ready - started server on 0.0.0.0:3000, url: http://localhost:3000
[0] info - Loaded env from /Users/vitisindustriesltd/Desktop/Lala/alien_woo/storefront/.env
[1] [09:58:38] Parse configuration [started]
[1] [09:58:38] Parse configuration [completed]
[1] [09:58:38] Generate outputs [started]
[1] [09:58:38] Generate ./src/graphql.ts [started]
[1] [09:58:38] Generate ./src/fragment-types.ts [started]
[1] [09:58:38] Load GraphQL schemas [started]
[1] [09:58:38] Load GraphQL schemas [started]
[0] info - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
[0] (node:1654) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin
[0] (Use node --trace-deprecation ... to show where the warning was created)
[0] Defining routes from exportPathMap
[1] [09:58:52] Load GraphQL schemas [completed]
[1] [09:58:52] Load GraphQL documents [started]
[1] [09:58:53] Load GraphQL schemas [completed]
[1] [09:58:53] Load GraphQL documents [started]
[1] [09:58:53] Load GraphQL documents [completed]
[1] [09:58:53] Generate [started]
[1] [09:58:53] Generate [failed]
[1] [09:58:53] → Name "" must not begin with "", which is reserved by GraphQL introspection.
[1]
[1] Name "" must not begin with "", which is reserved by GraphQL introspection.
[1] [09:58:53] Generate ./src/fragment-types.ts [failed]
[1] [09:58:53] → Name "" must not begin with "", which is reserved by GraphQL introspection.
[1]
[1] Name "" must not begin with "", which is reserved by GraphQL introspection.
[1] [09:58:53] Load GraphQL documents [completed]
[1] [09:58:53] Generate [started]
[1] [09:58:53] Generate [failed]
[1] [09:58:53] → Name "" must not begin with "", which is reserved by GraphQL introspection.
[1]
[1] Name "" must not begin with "", which is reserved by GraphQL introspection.
[1] [09:58:53] Generate ./src/graphql.ts [failed]
[1] [09:58:53] → Name "" must not begin with "", which is reserved by GraphQL introspection.
[1]
[1] Name "_______________________" must not begin with "", which is reserved by GraphQL introspection.
[1] [09:58:53] Generate outputs [failed]
[1] ℹ Watching for changes...
[0] info - Using external babel configuration from /Users/vitisindustriesltd/Desktop/Lala/alien_woo/storefront/.babelrc
[0] (node:1654) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
[0] BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
[0] Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
[0] Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE*.
[0] event - compiled successfully
[0] event - build page: /404
[0] wait - compiling...
[0] event - build page: /404
[0] event - build page: /
[0] event - compiled successfully

Suggest Features

Hi, "Postcode" verification is required on checkout page with respect to the country selected, Right now any random numbers is accepted as postcode.

On shop page "Product short by" feature required ie, short by popularity, short by price, short by latest.

Can you implement the search feature from https://github.com/imranhsayed/gatsby-woocommerce-themes/tree/main/packages/gatsby-woocommerce-theme/src/components/home

Thank you for your work

Total price error above €1000

Hi,

Total price is showing €1.00 in cart when order goes above €1000

Lower than €1000

and showing €1.00 when order is above €1000

Contact RootMutation Error

Hi,

Recently you implemented contact form via GraphQL. How did you add query field "contact"? Via register_graphql_field or
Filters /graphql_input_fields?

GraphQLDocumentError: Cannot query field "contact" on type "RootMutation".
[1]         at /src/queries/contact.graphql:8:3
[1] [09:29:04] Generate ./src/fragment-types.ts [failed]

please advise