├── .editorconfig ├── CONTRIBUTING.md ├── README.md ├── assets └── logo.svg ├── templates ├── guide-template.md └── tutorial-template.md ├── with-nuxtjs └── README.md ├── with-react ├── README.md └── product-catalogue │ ├── package.json │ ├── public │ └── index.html │ └── src │ ├── App.js │ ├── components │ └── itemCard.js │ ├── index.js │ └── style.css ├── with-threejs ├── README.md ├── interactive-cart │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── assets │ │ │ ├── Cart.gif │ │ │ └── Products.png │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── prod_0egY5edW2o3QnA │ │ │ ├── Scene.js │ │ │ ├── scene.bin │ │ │ ├── scene.gltf │ │ │ └── textures │ │ │ │ ├── Jacket_Lv2_Jacket_baseColor.jpeg │ │ │ │ ├── Jacket_Lv2_Jacket_metallicRoughness.png │ │ │ │ └── Jacket_Lv2_Jacket_normal.png │ │ ├── prod_8XxzoBMgZwPQAZ │ │ │ ├── Scene.js │ │ │ ├── scene.bin │ │ │ ├── scene.gltf │ │ │ └── textures │ │ │ │ ├── lambert1_baseColor.png │ │ │ │ ├── lambert1_metallicRoughness.png │ │ │ │ └── lambert1_normal.png │ │ ├── prod_RqEv5xOVPoZz4j │ │ │ ├── Scene.js │ │ │ ├── scene.bin │ │ │ ├── scene.gltf │ │ │ └── textures │ │ │ │ ├── Blue_Vans_Shoe_baseColor.jpeg │ │ │ │ ├── Blue_Vans_Shoe_metallicRoughness.png │ │ │ │ └── Blue_Vans_Shoe_normal.png │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── Animation.js │ │ ├── Cart.js │ │ ├── CartItem.js │ │ ├── Controls.js │ │ ├── FontAwesome.js │ │ ├── Item.js │ │ ├── Loader.js │ │ ├── Navigation.js │ │ ├── Scene.js │ │ └── style.css │ │ └── index.js └── product-display │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── Jacket │ │ ├── Scene.js │ │ ├── scene.bin │ │ ├── scene.gltf │ │ └── textures │ │ │ ├── Jacket_Lv2_Jacket_baseColor.jpeg │ │ │ ├── Jacket_Lv2_Jacket_metallicRoughness.png │ │ │ └── Jacket_Lv2_Jacket_normal.png │ ├── assets │ │ ├── ChecProducts.png │ │ ├── Jacket.gif │ │ └── ProductDescription.png │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── components │ ├── Animation.js │ ├── Controls.js │ ├── Item.js │ ├── Scene.js │ └── style.css │ └── index.js ├── with-vanilla ├── README.md └── html-css-checkout │ ├── README.md │ ├── dist │ ├── index.html │ ├── script.js │ └── style.css │ ├── license.txt │ └── src │ ├── index.html │ ├── script.js │ └── style.css └── with-vuejs ├── README.md ├── add-to-cart ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── App.vue │ ├── components │ ├── CartItem.vue │ ├── Header.vue │ └── ProductCard.vue │ ├── main.js │ └── pages │ ├── CartPage.vue │ ├── ProductViewPage.vue │ └── ProductsPage.vue ├── cart-modal ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ ├── css │ │ │ └── tailwind.css │ │ ├── fav-icon.svg │ │ ├── hero-img.jpg │ │ ├── logo.png │ │ ├── menu-icon.svg │ │ ├── shopcart-icon.svg │ │ └── user-icon.svg │ ├── components │ │ ├── Cart.vue │ │ └── Product.vue │ └── main.js └── vue.config.js ├── checkout ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ └── index.html └── src │ ├── App.vue │ ├── assets │ ├── checkout1.png │ ├── checkout2.png │ ├── checkout3.png │ ├── checkout4.png │ ├── checkout5.png │ ├── checkout6.png │ ├── checkout7.png │ ├── checkout8.png │ └── checkout9.png │ ├── components │ ├── CartItem.vue │ ├── Confirmation.vue │ ├── DeliveryForm.vue │ ├── Header.vue │ ├── OrderSummary.vue │ ├── OrderSummaryItem.vue │ ├── PaymentForm.vue │ └── ProductCard.vue │ ├── main.js │ └── pages │ ├── CartPage.vue │ ├── CheckoutPage.vue │ ├── ProductViewPage.vue │ └── ProductsPage.vue ├── full-ecommerce-app ├── .editorconfig ├── .gitignore ├── README.md ├── babel.config.js ├── example.env ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── main.js │ ├── router │ └── index.js │ ├── styles │ └── index.scss │ └── views │ ├── About.vue │ ├── Cart.vue │ ├── Checkout.vue │ ├── Confirmation.vue │ ├── ProductItem.vue │ └── ProductLanding.vue ├── product-card ├── README.md ├── dist │ ├── index.html │ ├── script.js │ └── style.css ├── license.txt └── src │ ├── index.html │ ├── script.babel │ └── style.scss └── product-catalogue ├── .editorconfig ├── .gitignore ├── README.md ├── babel.config.js ├── deploy.sh ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── hero-img.png ├── index.html └── logo.svg ├── src ├── App.vue ├── assets │ ├── hero-img.png │ └── logo.svg ├── components │ ├── Cart.vue │ └── Product.vue ├── main.js └── styles │ ├── _mixins.scss │ ├── _variables.scss │ └── styles.scss ├── vue.config.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # For more information about the properties used in this file, 2 | # please see the EditorConfig documentation: 3 | # http://editorconfig.org 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 4 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.{yml,js,json,css,scss,feature,eslintrc}] 14 | indent_size = 2 15 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | If you would like to contribute an integration resource and have your guide or tutorial listed in our [community article listing](https://commercejs.com/docs/community/), please refer to the following set of guidelines. 4 | 5 | ## Submitting a new resource 6 | 7 | Please refer to our template guidelines on writing guides and tutorial: 8 | 9 | - [Guide template](https://github.com/chec/resources/blob/master/templates/guide-template.md) 10 | - [Tutorial template](https://github.com/chec/resources/blob/master/templates/tutorial-template.md) 11 | 12 | You can submit your contribution [here](https://commercejs.com/docs/community/contribute). 13 | 14 | ### Resource naming 15 | 16 | **Naming convention for demo repositories: ** 17 | 18 | commercejs-{FRONT-END}-demo-{SCOPE} 19 | 20 | Examples: 21 | - commercejs-nextjs-demo-cart 22 | - commercejs-react-demo-store 23 | - commercejs-react-demo-cart 24 | -------------------------------------------------------------------------------- /templates/guide-template.md: -------------------------------------------------------------------------------- 1 | # Project Title 2 | 3 | One line of project description goes here. 4 | 5 | Indicate which version of Commerce.js SDK/CDN is used: v1 or v2 6 | 7 | [Live Demo]() 8 | 9 | ## Overview 10 | 11 | A summary of project's intent or overview of what will be accomplished. 12 | 1. ... 13 | 2. ... 14 | 3. ... 15 | 16 | ### Requirements 17 | 18 | List the software or tools needed. 19 | - 1st tool 20 | - 2nd tool 21 | - 3rd tool 22 | 23 | ### Prerequisites 24 | 25 | List prerequisite knowledge if any. 26 | - ... 27 | - ... 28 | - ... 29 | 30 | 31 | ### Installing Commerce.js 32 | 33 | Use our Commerce.js SDK to access the Chec API data from your application. 34 | 35 | *Choose either one of the installation methods:* 36 | 37 | 1. Installing via CDN 38 | 39 | ``` 40 | installation script 41 | ``` 42 | 43 | 2. Installing via SDK 44 | 45 | ``` 46 | installation script 47 | ``` 48 | 49 | ### Project usage 50 | 51 | A step by step series on injecting Commerce.js logic. 52 | 53 | 1. First step of injecting Commerce.js logic 54 | 55 | ``` 56 | example script 57 | ``` 58 | 59 | 2. And repeat 60 | 61 | ``` 62 | example script 63 | ``` 64 | 65 | 2. Until finished 66 | 67 | ``` 68 | example script 69 | ``` 70 | 71 | End with linking an example of live project or demo. 72 | [Live Demo]() 73 | 74 | 75 | ## Built With 76 | 77 | List all frameworks/tools used. 78 | 79 | * [Vue.js](link) - The web framework used 80 | * [TailwindCSS](link) - The web framework used 81 | * [Yarn](link) - The web framework used 82 | 83 | ## Authors 84 | 85 | * **Name** - [Github](https://github.com/chec) 86 | 87 | See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project. 88 | 89 | ## Options 90 | 91 | Add any additional customization notes if any. -------------------------------------------------------------------------------- /templates/tutorial-template.md: -------------------------------------------------------------------------------- 1 | # Project Title 2 | 3 | One line of project description goes here. 4 | 5 | Indicate which version of Commerce.js SDK/CDN is used: v1 or v2 6 | 7 | [Live Demo]() 8 | 9 | If you'd like to jump straight to cloning this repo, please go [here]() 10 | 11 | ## Overview 12 | 13 | A summary of project's intent or overview of what will be accomplished 14 | 1. ... 15 | 2. ... 16 | 3. ... 17 | 18 | ### Requirements 19 | 20 | List the software or tools needed 21 | - 1st tool 22 | - 2nd tool 23 | - 3rd tool 24 | 25 | ### Prerequisites 26 | 27 | List prerequisite knowledge if any 28 | - ... 29 | - ... 30 | - ... 31 | 32 | ## Getting Started 33 | 34 | These instructions guides you on getting a project up and running on your local machine for development. 35 | 36 | ### Installing project dependencies 37 | 38 | A step by step series on how to get a development environment running. 39 | 40 | 1. Say what the step will be 41 | 42 | ``` 43 | Give the example 44 | ``` 45 | 46 | 2. And repeat 47 | 48 | ``` 49 | until finished 50 | ``` 51 | 52 | ### Installing Commerce.js 53 | 54 | Use our Commerce.js SDK to access the Chec API data from your application. 55 | 56 | *Choose either one of the installation methods:* 57 | 58 | 1. Installing via CDN 59 | 60 | ``` 61 | installation script 62 | ``` 63 | 64 | 2. Installing via SDK 65 | 66 | ``` 67 | installation script 68 | ``` 69 | 70 | ### Project usage 71 | 72 | A step by step series on injecting Commerce.js logic. 73 | 74 | 1. First step of injecting Commerce.js logic 75 | 76 | ``` 77 | example script 78 | ``` 79 | 80 | 2. And repeat 81 | 82 | ``` 83 | example script 84 | ``` 85 | 86 | 2. Until finished 87 | 88 | ``` 89 | example script 90 | ``` 91 | 92 | End with linking an example of live project or demo. 93 | 94 | [Live Demo]() 95 | 96 | ## Running tests 97 | 98 | Explain how to run the automated tests for this system. 99 | 100 | ## Deployment 101 | 102 | Add notes on deploying project on live system. 103 | 104 | ## Built With 105 | 106 | List all frameworks/tools used. 107 | 108 | * [Vue.js](link) - The web framework used 109 | * [TailwindCSS](link) - The web framework used 110 | * [Yarn](link) - The web framework used 111 | 112 | 113 | ## Authors 114 | 115 | * **Name** - [Github](https://github.com/chec) 116 | 117 | See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project. 118 | 119 | 120 | ## Options 121 | 122 | Add any additional customization notes if any. 123 | 124 | 125 | -------------------------------------------------------------------------------- /with-nuxtjs/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /with-react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-react/README.md -------------------------------------------------------------------------------- /with-react/product-catalogue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactjs-ecommerce-project-with-commercejs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@chec/commerce.js": "2.0.1", 9 | "react": "16.12.0", 10 | "react-dom": "16.12.0", 11 | "react-scripts": "3.0.1", 12 | "styled-components": "5.0.1" 13 | }, 14 | "devDependencies": { 15 | "typescript": "3.3.3" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test --env=jsdom", 21 | "eject": "react-scripts eject" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /with-react/product-catalogue/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /with-react/product-catalogue/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | import ItemCard from "./components/itemCard"; 4 | 5 | import styled from "styled-components"; 6 | import Commerce from "@chec/commerce.js"; 7 | 8 | /* Start off here. Create Commerce.js object and pass in your own API key 9 | to list out your products */ 10 | const commerce = new Commerce( 11 | "pk_test_17788c5e094778a51f0097622b204b19d39718b621f9c" 12 | ); 13 | 14 | /* Styled component. Play around with the styles to understand it better and 15 | and change it to your own liking.*/ 16 | const Container = styled.div` 17 | display: flex; 18 | justify-content: space-evenly; 19 | flex-wrap: wrap; 20 | max-width: 800px; 21 | margin: 0 auto; 22 | `; 23 | 24 | export default function App() { 25 | // state is used to store the product's list so it can be rendered 26 | const [products, setProducts] = useState([]); 27 | 28 | /* useEffect will fetch the data after initial render, sets the state with the 29 | fetched data, and then rerenders with the state*/ 30 | useEffect(() => { 31 | commerce.products.list().then(res => { 32 | setProducts(res.data); 33 | }); 34 | }, []); 35 | 36 | /* The Container styled component seen above is used. The product state maps out to 37 | each of its own ItemCard component and then passes down item details as props.*/ 38 | return ( 39 | 40 | {products.map(product => ( 41 | 42 | ))} 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /with-react/product-catalogue/src/components/itemCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | 4 | const Card = styled.div` 5 | height: 300px; 6 | width: 200px; 7 | padding: 10px; 8 | border: 1px solid lightgray; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: space-evenly; 12 | `; 13 | 14 | const CardImg = styled.img` 15 | width: 100%; 16 | height: 120px; 17 | `; 18 | 19 | const BuyButton = styled.button` 20 | color: white; 21 | background: dodgerblue; 22 | border: none; 23 | padding: 10px 20px; 24 | `; 25 | 26 | /* Props from the parent component(App.js) can then be used to dynamically list 27 | out item details */ 28 | const ItemCard = props => { 29 | return ( 30 | 31 | 32 |
33 |

{props.name}

34 |

{props.price.formatted_with_symbol}

35 |
36 |
37 |

Quantity: {props.quantity}

38 | 39 | BUY NOW 40 | 41 |
42 | 43 | ); 44 | }; 45 | 46 | export default ItemCard; 47 | -------------------------------------------------------------------------------- /with-react/product-catalogue/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | ReactDOM.render(, rootElement); 8 | -------------------------------------------------------------------------------- /with-react/product-catalogue/src/style.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /with-threejs/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/README.md -------------------------------------------------------------------------------- /with-threejs/interactive-cart/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "commercewith3d", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chec/commerce.js": "^2.0.1", 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.5.0", 9 | "@testing-library/user-event": "^7.2.1", 10 | "drei": "0.0.54", 11 | "react": "^16.13.1", 12 | "react-bootstrap": "^1.0.1", 13 | "react-dom": "^16.13.1", 14 | "react-scripts": "3.4.1", 15 | "react-spring": "^8.0.27", 16 | "react-three-fiber": "^4.2.8", 17 | "three": "^0.137.0" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": "react-app" 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/assets/Cart.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/assets/Cart.gif -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/assets/Products.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/assets/Products.png -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/favicon.ico -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | 28 | 29 | 30 | React App 31 | 32 | 33 | 34 |
35 | 36 |
37 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/logo192.png -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/logo512.png -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_0egY5edW2o3QnA/Scene.js: -------------------------------------------------------------------------------- 1 | /* 2 | auto-generated by: https://github.com/react-spring/gltfjsx 3 | author: Juan Martinez Sanjurjo (https://sketchfab.com/JuanSanjurjo) 4 | license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) 5 | source: https://sketchfab.com/3d-models/advanced-game-characters-week-2-jacket-8f211f057bb24f5db17ca659553b716b 6 | title: Advanced Game Characters - Week 2 Jacket 7 | */ 8 | 9 | import * as THREE from 'three' 10 | import React, { useRef } from 'react' 11 | import { useLoader } from 'react-three-fiber' 12 | import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' 13 | import { draco } from 'drei' 14 | 15 | export default function Model(props) { 16 | const group = useRef() 17 | const { nodes, materials } = useLoader(GLTFLoader, '/scene.gltf', draco('/draco-gltf/')) 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ) 27 | } 28 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_0egY5edW2o3QnA/scene.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_0egY5edW2o3QnA/scene.bin -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_0egY5edW2o3QnA/scene.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "accessors": [ 3 | { 4 | "bufferView": 2, 5 | "componentType": 5126, 6 | "count": 2645, 7 | "max": [ 8 | 1, 9 | 0.603954017162323, 10 | 0.24914099276065826 11 | ], 12 | "min": [ 13 | -1, 14 | -0.603954017162323, 15 | -0.24914099276065826 16 | ], 17 | "type": "VEC3" 18 | }, 19 | { 20 | "bufferView": 2, 21 | "byteOffset": 31740, 22 | "componentType": 5126, 23 | "count": 2645, 24 | "max": [ 25 | 0.99847114086151123, 26 | 0.95362865924835205, 27 | 0.99986135959625244 28 | ], 29 | "min": [ 30 | -0.99847102165222168, 31 | -0.99585634469985962, 32 | -0.99998247623443604 33 | ], 34 | "type": "VEC3" 35 | }, 36 | { 37 | "bufferView": 3, 38 | "componentType": 5126, 39 | "count": 2645, 40 | "max": [ 41 | 0.99997144937515259, 42 | 0.99984276294708252, 43 | 0.99995851516723633, 44 | 1 45 | ], 46 | "min": [ 47 | -0.99989199638366699, 48 | -0.99998193979263306, 49 | -0.99820667505264282, 50 | -1 51 | ], 52 | "type": "VEC4" 53 | }, 54 | { 55 | "bufferView": 1, 56 | "componentType": 5126, 57 | "count": 2645, 58 | "max": [ 59 | 0.97676301002502441, 60 | 0.94386202096939087 61 | ], 62 | "min": [ 63 | 0.0019496099557727575, 64 | 0.0019920200575143099 65 | ], 66 | "type": "VEC2" 67 | }, 68 | { 69 | "bufferView": 0, 70 | "componentType": 5125, 71 | "count": 14424, 72 | "max": [ 73 | 2644 74 | ], 75 | "min": [ 76 | 0 77 | ], 78 | "type": "SCALAR" 79 | } 80 | ], 81 | "asset": { 82 | "extras": { 83 | "author": "Juan Martinez Sanjurjo (https://sketchfab.com/JuanSanjurjo)", 84 | "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)", 85 | "source": "https://sketchfab.com/3d-models/advanced-game-characters-week-2-jacket-8f211f057bb24f5db17ca659553b716b", 86 | "title": "Advanced Game Characters - Week 2 Jacket" 87 | }, 88 | "generator": "Sketchfab-8.7.0", 89 | "version": "2.0" 90 | }, 91 | "bufferViews": [ 92 | { 93 | "buffer": 0, 94 | "byteLength": 57696, 95 | "byteOffset": 0, 96 | "name": "floatBufferViews", 97 | "target": 34963 98 | }, 99 | { 100 | "buffer": 0, 101 | "byteLength": 21160, 102 | "byteOffset": 57696, 103 | "byteStride": 8, 104 | "name": "floatBufferViews", 105 | "target": 34962 106 | }, 107 | { 108 | "buffer": 0, 109 | "byteLength": 63480, 110 | "byteOffset": 78856, 111 | "byteStride": 12, 112 | "name": "floatBufferViews", 113 | "target": 34962 114 | }, 115 | { 116 | "buffer": 0, 117 | "byteLength": 42320, 118 | "byteOffset": 142336, 119 | "byteStride": 16, 120 | "name": "floatBufferViews", 121 | "target": 34962 122 | } 123 | ], 124 | "buffers": [ 125 | { 126 | "byteLength": 184656, 127 | "uri": "scene.bin" 128 | } 129 | ], 130 | "images": [ 131 | { 132 | "uri": "textures/Jacket_Lv2_Jacket_baseColor.jpeg" 133 | }, 134 | { 135 | "uri": "textures/Jacket_Lv2_Jacket_metallicRoughness.png" 136 | }, 137 | { 138 | "uri": "textures/Jacket_Lv2_Jacket_normal.png" 139 | } 140 | ], 141 | "materials": [ 142 | { 143 | "doubleSided": true, 144 | "name": "Jacket_Lv2_Jacket", 145 | "normalTexture": { 146 | "index": 2, 147 | "scale": 1, 148 | "texCoord": 0 149 | }, 150 | "occlusionTexture": { 151 | "index": 1, 152 | "strength": 1, 153 | "texCoord": 0 154 | }, 155 | "pbrMetallicRoughness": { 156 | "baseColorFactor": [ 157 | 1, 158 | 1, 159 | 1, 160 | 1 161 | ], 162 | "baseColorTexture": { 163 | "index": 0, 164 | "texCoord": 0 165 | }, 166 | "metallicFactor": 1, 167 | "metallicRoughnessTexture": { 168 | "index": 1, 169 | "texCoord": 0 170 | }, 171 | "roughnessFactor": 1 172 | } 173 | } 174 | ], 175 | "meshes": [ 176 | { 177 | "name": "defaultMaterial", 178 | "primitives": [ 179 | { 180 | "attributes": { 181 | "NORMAL": 1, 182 | "POSITION": 0, 183 | "TANGENT": 2, 184 | "TEXCOORD_0": 3 185 | }, 186 | "indices": 4, 187 | "material": 0, 188 | "mode": 4 189 | } 190 | ] 191 | } 192 | ], 193 | "nodes": [ 194 | { 195 | "children": [ 196 | 1 197 | ], 198 | "name": "RootNode (gltf orientation matrix)", 199 | "rotation": [ 200 | -0.70710678118654746, 201 | -0, 202 | -0, 203 | 0.70710678118654757 204 | ] 205 | }, 206 | { 207 | "children": [ 208 | 2 209 | ], 210 | "name": "RootNode (model correction matrix)" 211 | }, 212 | { 213 | "children": [ 214 | 3 215 | ], 216 | "matrix": [ 217 | 1, 218 | 0, 219 | 0, 220 | 0, 221 | 0, 222 | -4.3711390063094768e-08, 223 | 0.999999999999999, 224 | 0, 225 | 0, 226 | -0.999999999999999, 227 | -4.3711390063094768e-08, 228 | 0, 229 | 0, 230 | 0, 231 | 0, 232 | 1 233 | ], 234 | "name": "Collada visual scene group" 235 | }, 236 | { 237 | "children": [ 238 | 4 239 | ], 240 | "name": "Jacket_Lv2:jacket_low" 241 | }, 242 | { 243 | "mesh": 0, 244 | "name": "defaultMaterial" 245 | } 246 | ], 247 | "samplers": [ 248 | { 249 | "magFilter": 9729, 250 | "minFilter": 9987, 251 | "wrapS": 10497, 252 | "wrapT": 10497 253 | } 254 | ], 255 | "scene": 0, 256 | "scenes": [ 257 | { 258 | "name": "OSG_Scene", 259 | "nodes": [ 260 | 0 261 | ] 262 | } 263 | ], 264 | "textures": [ 265 | { 266 | "sampler": 0, 267 | "source": 0 268 | }, 269 | { 270 | "sampler": 0, 271 | "source": 1 272 | }, 273 | { 274 | "sampler": 0, 275 | "source": 2 276 | } 277 | ] 278 | } 279 | 280 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_0egY5edW2o3QnA/textures/Jacket_Lv2_Jacket_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_0egY5edW2o3QnA/textures/Jacket_Lv2_Jacket_baseColor.jpeg -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_0egY5edW2o3QnA/textures/Jacket_Lv2_Jacket_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_0egY5edW2o3QnA/textures/Jacket_Lv2_Jacket_metallicRoughness.png -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_0egY5edW2o3QnA/textures/Jacket_Lv2_Jacket_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_0egY5edW2o3QnA/textures/Jacket_Lv2_Jacket_normal.png -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_8XxzoBMgZwPQAZ/Scene.js: -------------------------------------------------------------------------------- 1 | /* 2 | auto-generated by: https://github.com/react-spring/gltfjsx 3 | author: RedBlueChaos (https://sketchfab.com/kamerentorrence) 4 | license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) 5 | source: https://sketchfab.com/3d-models/game-res-shirt-for-male-character-629d138b40054e01b82af4541e2bc16c 6 | title: Game Res Shirt for Male Character 7 | */ 8 | 9 | import * as THREE from "three"; 10 | import React, { useRef } from "react"; 11 | import { useLoader } from "react-three-fiber"; 12 | import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; 13 | import { draco } from "drei"; 14 | 15 | export default function Model(props) { 16 | const group = useRef(); 17 | const { nodes, materials } = useLoader( 18 | GLTFLoader, 19 | "/scene.gltf", 20 | draco("/draco-gltf/") 21 | ); 22 | return ( 23 | 24 | 25 | 26 | 31 | 32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_8XxzoBMgZwPQAZ/scene.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_8XxzoBMgZwPQAZ/scene.bin -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_8XxzoBMgZwPQAZ/textures/lambert1_baseColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_8XxzoBMgZwPQAZ/textures/lambert1_baseColor.png -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_8XxzoBMgZwPQAZ/textures/lambert1_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_8XxzoBMgZwPQAZ/textures/lambert1_metallicRoughness.png -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_8XxzoBMgZwPQAZ/textures/lambert1_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_8XxzoBMgZwPQAZ/textures/lambert1_normal.png -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_RqEv5xOVPoZz4j/Scene.js: -------------------------------------------------------------------------------- 1 | /* 2 | auto-generated by: https://github.com/react-spring/gltfjsx 3 | author: thesidekick (https://sketchfab.com/thesidekick) 4 | license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) 5 | source: https://sketchfab.com/3d-models/unused-blue-vans-shoe-96baa4684df7415ba8ba87d39bd1c2ee 6 | title: Unused Blue Vans Shoe 7 | */ 8 | 9 | import * as THREE from 'three' 10 | import React, { useRef } from 'react' 11 | import { useLoader } from 'react-three-fiber' 12 | import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' 13 | import { draco } from 'drei' 14 | 15 | export default function Model(props) { 16 | const group = useRef() 17 | const { nodes, materials } = useLoader(GLTFLoader, '/scene.gltf', draco('/draco-gltf/')) 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_RqEv5xOVPoZz4j/scene.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_RqEv5xOVPoZz4j/scene.bin -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_RqEv5xOVPoZz4j/scene.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "accessors": [ 3 | { 4 | "bufferView": 2, 5 | "componentType": 5126, 6 | "count": 40968, 7 | "max": [ 8 | 0.66825300455093384, 9 | 3.2528119087219238, 10 | 2.2060348987579346 11 | ], 12 | "min": [ 13 | -1.2339999675750732, 14 | -2.0257630348205566, 15 | 0.046796001493930817 16 | ], 17 | "type": "VEC3" 18 | }, 19 | { 20 | "bufferView": 2, 21 | "byteOffset": 491616, 22 | "componentType": 5126, 23 | "count": 40968, 24 | "max": [ 25 | 0.9999992847442627, 26 | 0.99990260601043701, 27 | 0.99999845027923584 28 | ], 29 | "min": [ 30 | -0.9999929666519165, 31 | -0.99974578619003296, 32 | -0.9999927282333374 33 | ], 34 | "type": "VEC3" 35 | }, 36 | { 37 | "bufferView": 3, 38 | "componentType": 5126, 39 | "count": 40968, 40 | "max": [ 41 | 0.99945855140686035, 42 | 0.99999886751174927, 43 | 0.99938011169433594, 44 | 1 45 | ], 46 | "min": [ 47 | -0.99986720085144043, 48 | -0.99989032745361328, 49 | -0.99999541044235229, 50 | -1 51 | ], 52 | "type": "VEC4" 53 | }, 54 | { 55 | "bufferView": 1, 56 | "componentType": 5126, 57 | "count": 40968, 58 | "max": [ 59 | 0.98220998048782349, 60 | 0.99986100196838379 61 | ], 62 | "min": [ 63 | 0, 64 | 0 65 | ], 66 | "type": "VEC2" 67 | }, 68 | { 69 | "bufferView": 0, 70 | "componentType": 5125, 71 | "count": 233961, 72 | "max": [ 73 | 40967 74 | ], 75 | "min": [ 76 | 0 77 | ], 78 | "type": "SCALAR" 79 | } 80 | ], 81 | "asset": { 82 | "extras": { 83 | "author": "thesidekick (https://sketchfab.com/thesidekick)", 84 | "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)", 85 | "source": "https://sketchfab.com/3d-models/unused-blue-vans-shoe-96baa4684df7415ba8ba87d39bd1c2ee", 86 | "title": "Unused Blue Vans Shoe" 87 | }, 88 | "generator": "Sketchfab-8.74.0", 89 | "version": "2.0" 90 | }, 91 | "bufferViews": [ 92 | { 93 | "buffer": 0, 94 | "byteLength": 935844, 95 | "byteOffset": 0, 96 | "name": "floatBufferViews", 97 | "target": 34963 98 | }, 99 | { 100 | "buffer": 0, 101 | "byteLength": 327744, 102 | "byteOffset": 935844, 103 | "byteStride": 8, 104 | "name": "floatBufferViews", 105 | "target": 34962 106 | }, 107 | { 108 | "buffer": 0, 109 | "byteLength": 983232, 110 | "byteOffset": 1263588, 111 | "byteStride": 12, 112 | "name": "floatBufferViews", 113 | "target": 34962 114 | }, 115 | { 116 | "buffer": 0, 117 | "byteLength": 655488, 118 | "byteOffset": 2246820, 119 | "byteStride": 16, 120 | "name": "floatBufferViews", 121 | "target": 34962 122 | } 123 | ], 124 | "buffers": [ 125 | { 126 | "byteLength": 2902308, 127 | "uri": "scene.bin" 128 | } 129 | ], 130 | "images": [ 131 | { 132 | "uri": "textures/Blue_Vans_Shoe_baseColor.jpeg" 133 | }, 134 | { 135 | "uri": "textures/Blue_Vans_Shoe_metallicRoughness.png" 136 | }, 137 | { 138 | "uri": "textures/Blue_Vans_Shoe_normal.png" 139 | } 140 | ], 141 | "materials": [ 142 | { 143 | "doubleSided": true, 144 | "emissiveFactor": [ 145 | 0.3211247651418877, 146 | 0.3211247651418877, 147 | 0.3211247651418877 148 | ], 149 | "emissiveTexture": { 150 | "index": 0, 151 | "texCoord": 0 152 | }, 153 | "name": "Blue_Vans_Shoe", 154 | "normalTexture": { 155 | "index": 2, 156 | "scale": 1, 157 | "texCoord": 0 158 | }, 159 | "occlusionTexture": { 160 | "index": 1, 161 | "strength": 1, 162 | "texCoord": 0 163 | }, 164 | "pbrMetallicRoughness": { 165 | "baseColorFactor": [ 166 | 1, 167 | 1, 168 | 1, 169 | 1 170 | ], 171 | "baseColorTexture": { 172 | "index": 0, 173 | "texCoord": 0 174 | }, 175 | "metallicFactor": 0, 176 | "metallicRoughnessTexture": { 177 | "index": 1, 178 | "texCoord": 0 179 | }, 180 | "roughnessFactor": 1 181 | } 182 | } 183 | ], 184 | "meshes": [ 185 | { 186 | "primitives": [ 187 | { 188 | "attributes": { 189 | "NORMAL": 1, 190 | "POSITION": 0, 191 | "TANGENT": 2, 192 | "TEXCOORD_0": 3 193 | }, 194 | "indices": 4, 195 | "material": 0, 196 | "mode": 4 197 | } 198 | ] 199 | } 200 | ], 201 | "nodes": [ 202 | { 203 | "children": [ 204 | 1 205 | ], 206 | "name": "RootNode (gltf orientation matrix)", 207 | "rotation": [ 208 | -0.70710678118654746, 209 | -0, 210 | -0, 211 | 0.70710678118654757 212 | ] 213 | }, 214 | { 215 | "children": [ 216 | 2 217 | ], 218 | "name": "RootNode (model correction matrix)" 219 | }, 220 | { 221 | "children": [ 222 | 3 223 | ], 224 | "name": "Blue_Vans_Shoe_SF.obj.cleaner.materialmerger.gles" 225 | }, 226 | { 227 | "mesh": 0, 228 | "name": "" 229 | } 230 | ], 231 | "samplers": [ 232 | { 233 | "magFilter": 9729, 234 | "minFilter": 9987, 235 | "wrapS": 10497, 236 | "wrapT": 10497 237 | } 238 | ], 239 | "scene": 0, 240 | "scenes": [ 241 | { 242 | "name": "OSG_Scene", 243 | "nodes": [ 244 | 0 245 | ] 246 | } 247 | ], 248 | "textures": [ 249 | { 250 | "sampler": 0, 251 | "source": 0 252 | }, 253 | { 254 | "sampler": 0, 255 | "source": 1 256 | }, 257 | { 258 | "sampler": 0, 259 | "source": 2 260 | } 261 | ] 262 | } 263 | 264 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_RqEv5xOVPoZz4j/textures/Blue_Vans_Shoe_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_RqEv5xOVPoZz4j/textures/Blue_Vans_Shoe_baseColor.jpeg -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_RqEv5xOVPoZz4j/textures/Blue_Vans_Shoe_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_RqEv5xOVPoZz4j/textures/Blue_Vans_Shoe_metallicRoughness.png -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/prod_RqEv5xOVPoZz4j/textures/Blue_Vans_Shoe_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/interactive-cart/public/prod_RqEv5xOVPoZz4j/textures/Blue_Vans_Shoe_normal.png -------------------------------------------------------------------------------- /with-threejs/interactive-cart/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import Commerce from "@chec/commerce.js"; 3 | import Item from "./components/Item"; 4 | import Navigation from "./components/Navigation"; 5 | 6 | const commerce = new Commerce( 7 | "pk_test_183505c17b9df667acd2e6f925c4957b715322209303f" 8 | ); 9 | 10 | function App() { 11 | const [products, setProducts] = useState([]); 12 | const [cart, setCart] = useState(); 13 | const [numberOfItems, setNumberOfItems] = useState(""); 14 | 15 | // on Component Mount, retrieve cart and list products 16 | useEffect(() => { 17 | commerce.products.list().then((res) => { 18 | setProducts(res.data); 19 | }); 20 | commerce.cart.retrieve().then((res) => { 21 | setCart(res); 22 | }); 23 | }, []); 24 | 25 | // whenever cart changes, list number of items in cart 26 | // handles undefined state (while call to commerce is made) 27 | useEffect(() => { 28 | cart !== undefined 29 | ? setNumberOfItems(cart.total_items) 30 | : setNumberOfItems(""); 31 | }, [cart]); 32 | 33 | //adds products to the cart (both via a call to commerce, and locally) 34 | const addToCart = (productId, variantInfo) => { 35 | commerce.cart.add(productId, variantInfo).then((res) => { 36 | setCart(res.cart); 37 | }); 38 | }; 39 | 40 | // if count of an item is 0, deletes item from cart. 41 | // otherwise, updates cart info via call to commerce and local state update 42 | const updateCart = (itemId, count) => { 43 | count === 0 44 | ? commerce.cart.remove(itemId).then((res) => setCart(res.cart)) 45 | : commerce.cart.update(itemId, { quantity: count }).then((res) => { 46 | setCart(res.cart); 47 | }); 48 | }; 49 | 50 | //removes item from commerce's cart, and sets local cart state 51 | const removeItemFromCart = (itemId) => { 52 | commerce.cart.remove(itemId).then((res) => setCart(res.cart)); 53 | }; 54 | 55 | return ( 56 |
57 | 64 | {products.map((product) => ( 65 | 66 | ))} 67 |
68 | ); 69 | } 70 | 71 | export default App; 72 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/components/Animation.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from "react"; 2 | import Controls from "./Controls"; 3 | import Model from "./Scene"; 4 | import { Canvas } from "react-three-fiber"; 5 | import Loader from "./Loader"; 6 | 7 | function Animation(props) { 8 | // console.log(props); 9 | return ( 10 | <> 11 | 18 | 26 | 27 | 35 | 36 | }> 37 | 38 | 39 | 40 | 41 | ); 42 | } 43 | 44 | export default Animation; 45 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/components/Cart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useSpring, animated } from "react-spring"; 3 | import { Row, Col, Button } from "react-bootstrap"; 4 | import CartItem from "./CartItem"; 5 | import "./style.css"; 6 | 7 | function Cart(props) { 8 | const showCart = useSpring( 9 | props.isCartOpen 10 | ? { 11 | width: "40%", 12 | background: "#2D3047", 13 | opacity: 1, 14 | } 15 | : { 16 | width: "0%", 17 | background: "#eae6e5", 18 | opacity: 0, 19 | } 20 | ); 21 | 22 | return ( 23 | 24 | {props.cart !== undefined ? ( 25 |
26 | {props.cart.line_items.length === 0 ? ( 27 |

28 | Your cart is currently empty. 29 |

30 | ) : ( 31 |
32 | {props.cart.line_items.map((item) => ( 33 | 41 | ))} 42 | 43 | 44 |

45 | Total: {props.cart.subtotal.formatted_with_symbol} 46 |

47 | 48 | 49 | 50 | 51 | 52 | 55 | 56 | 57 | 58 |
59 | )} 60 |
61 | ) : ( 62 | <> 63 | )} 64 | 65 | ); 66 | } 67 | 68 | export default Cart; 69 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/components/CartItem.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Col, Row } from "react-bootstrap"; 3 | import Animation from "./Animation"; 4 | 5 | const CartItem = (props) => { 6 | const handleIncrement = (e) => { 7 | e.preventDefault(); 8 | props.updateCart(props.id, props.quantity + 1); 9 | }; 10 | 11 | const handleDecrement = (e) => { 12 | e.preventDefault(); 13 | props.updateCart(props.id, props.quantity - 1); 14 | }; 15 | 16 | const handleRemove = (e) => { 17 | e.preventDefault(); 18 | props.removeItemFromCart(props.id); 19 | }; 20 | 21 | return ( 22 | <> 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |

{props.name}

31 | 32 | 33 |

{props.price.formatted_with_symbol}

34 | 35 | 36 |

37 | Quantity:{" "} 38 | 39 | 42 | {" "} 43 | {props.quantity}{" "} 44 | 45 | 48 | 49 |

50 | 51 | 52 | 53 | 56 | 57 | 58 | 59 | 60 | ); 61 | }; 62 | 63 | export default CartItem; 64 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/components/Controls.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; 3 | import { extend, useThree, useFrame } from "react-three-fiber"; 4 | 5 | extend({ OrbitControls }); 6 | 7 | export default function Controls(props) { 8 | const { gl, camera } = useThree(); 9 | const ref = useRef(); 10 | useFrame(() => ref.current.update()); 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/components/FontAwesome.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const FontAwesome = ({ isCartOpen, numberOfItems }) => { 4 | // if cart is open, return an "x" to show where to close the cart 5 | // otherwise, it shows cart/number of items in cart 6 | return isCartOpen ? ( 7 | 11 | ) : ( 12 |
13 | 14 | {/* if # of items in cart is 0, only the cart fontAwesome is shown */} 15 | {numberOfItems === 0 ? <> :

{numberOfItems}

} 16 |
17 | ); 18 | }; 19 | export default FontAwesome; 20 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/components/Item.js: -------------------------------------------------------------------------------- 1 | // Import our dependencies 2 | import React, { useState } from "react"; 3 | import { Button, Col, Row } from "react-bootstrap"; 4 | import Animation from "./Animation"; 5 | import "./style.css"; 6 | 7 | // Build a card that will show our products 8 | function Item(props) { 9 | const [color, setColor] = useState(); 10 | const [optionId, setOptionId] = useState(); 11 | // need to take out the pTags included with description string 12 | // if value is null(the default), returns empty string 13 | const description = 14 | props.description !== null 15 | ? props.description.slice(3, props.description.length - 4) 16 | : ""; 17 | 18 | const variantsAvailable = props.variants[0] !== undefined; 19 | 20 | // This takes in a string (color name combined with hex color) and splits them 21 | const splitNameFromHex = (input) => { 22 | return input.split(" "); 23 | }; 24 | 25 | // defining variants makes the map below a lot cleaner to read 26 | let variants; 27 | // checks for available variants in the product 28 | variantsAvailable 29 | ? (variants = props.variants[0].options) 30 | : (variants = null); 31 | 32 | const handleColorChoice = (index) => { 33 | setColor(splitNameFromHex(variants[index].name)[1]); 34 | setOptionId(variants[index].id); 35 | }; 36 | 37 | const handleAddToCart = (e) => { 38 | e.preventDefault(); 39 | variants !== null 40 | ? props.addToCart(props.id, 1, { [props.variants[0].id]: optionId }) 41 | : props.addToCart(props.id); 42 | }; 43 | 44 | return ( 45 | 46 | 47 | 48 | 49 | 50 |

{props.name}

51 |
52 |
53 |

{description}

54 | 55 | {/* checks for available color variants, and either renders buttons or an empty column */} 56 | {variantsAvailable ? ( 57 | 58 |

Available Colors:

59 | {/* maps through the different color variants, dynamically providing id name (to match CSS) and then provides correct hex color options */} 60 | {variants.map((variant, index) => ( 61 | 69 | ))} 70 | 71 | ) : ( 72 | 73 | )} 74 | 75 |

Price: {props.price.formatted_with_symbol}

76 | 83 | 84 | 85 | 86 | 87 | ); 88 | } 89 | 90 | export default Item; 91 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/components/Loader.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Spinner } from "react-bootstrap"; 3 | import { HTML } from "drei"; 4 | 5 | const Loader = () => ( 6 | 7 | 8 | Loading... 9 | 10 | 11 | ); 12 | 13 | export default Loader; 14 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/components/Navigation.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Navbar, Nav, Button } from "react-bootstrap"; 3 | import Cart from "./Cart"; 4 | import FontAwesome from "./FontAwesome"; 5 | 6 | function Navigation(props) { 7 | const [isCartOpen, setIsCartOpen] = useState(false); 8 | 9 | return ( 10 | <> 11 | 12 | Commerce 13 | 14 | 27 | 28 | 35 | 36 | ); 37 | } 38 | 39 | export default Navigation; 40 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/components/Scene.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import { useLoader, useFrame } from "react-three-fiber"; 3 | import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; 4 | import { draco } from "drei"; 5 | 6 | export default function Model(props) { 7 | const group = useRef(); 8 | 9 | const { nodes, materials } = useLoader( 10 | GLTFLoader, 11 | `../${props.uniqueId}/scene.gltf`, 12 | draco("/draco-gltf/") 13 | ); 14 | 15 | useFrame(() => (group.current.rotation.y += 0.003)); 16 | 17 | // we take the return value from the gltfjsx generated file, and put into this switch function 18 | function switchItem(item) { 19 | switch (item) { 20 | case "prod_RqEv5xOVPoZz4j": 21 | return ( 22 | 29 | 30 | 36 | 37 | 38 | ); 39 | 40 | case "prod_8XxzoBMgZwPQAZ": 41 | return ( 42 | 43 | 44 | 45 | 51 | 52 | 53 | 54 | ); 55 | 56 | default: 57 | return; 58 | } 59 | } 60 | return <>{switchItem(props.uniqueId)}; 61 | } 62 | -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/components/style.css: -------------------------------------------------------------------------------- 1 | body, 2 | html, 3 | canvas { 4 | width: 100vw; 5 | height: 100vh; 6 | margin:0; 7 | padding:0; 8 | background-color: #2D3047; 9 | background-image: linear-gradient(147deg, #2D3047 0%, #eae6e5 74%); 10 | } 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | .sr-only { 17 | z-index: 1; 18 | } 19 | /* Item Page Styling */ 20 | .item { 21 | background: #fafdff; 22 | } 23 | 24 | h2 { 25 | text-align: center; 26 | margin-top: 50px; 27 | } 28 | 29 | .info { 30 | margin: 30px 30px 15px 0; 31 | padding: 30px; 32 | } 33 | 34 | .buttonRow { 35 | margin-top: 80px; 36 | } 37 | 38 | /* Possible Item Colors */ 39 | .colorButton { 40 | border-radius: 50%; 41 | border-style: solid; 42 | border-width: 1px; 43 | border-color:#e6e6e6 ; 44 | width: 50px; 45 | height: 50px; 46 | margin-right: 10px; 47 | /* background: linear-gradient(145deg, #e6e6e6, #ffffff); */ 48 | box-shadow: 20px 20px 60px #d9d9d9, 49 | -20px -20px 60px #ffffff; 50 | } 51 | 52 | .addToCart{ 53 | float:right; 54 | margin-top: 0px; 55 | border-radius: 7px; 56 | } 57 | 58 | /* Keeps color buttons on item page from colliding on resize */ 59 | @media screen and (max-width: 929px ) { 60 | .colorButton, 61 | .addToCart { 62 | margin-top: 10px; 63 | } 64 | } 65 | 66 | @media screen and (max-device-width: 575px ) { 67 | canvas { 68 | width:100%; 69 | height: 100%; 70 | } 71 | .info { 72 | margin: 30px; 73 | padding: 30px; 74 | } 75 | 76 | } 77 | 78 | /* Navbar Styling */ 79 | .mainNav { 80 | height: 70px; 81 | z-index: 20; 82 | } 83 | 84 | /* Cart Styling */ 85 | .cart{ 86 | position: fixed; 87 | top: 70px; 88 | right: 0; 89 | height: 100vh; 90 | background: #2D3047; 91 | padding: 40px; 92 | z-index: 100; 93 | overflow: scroll; 94 | /* min-width: 230px; */ 95 | } 96 | 97 | .cart p { 98 | color: #ffffff; 99 | } 100 | .cart h4 { 101 | color: #ffffff; 102 | } 103 | .cart h3 { 104 | color: #ffffff; 105 | } 106 | 107 | #cartNumber { 108 | color: #ffffff; 109 | float: right; 110 | margin-left: 7px; 111 | font-size: 15px; 112 | } 113 | 114 | #cartButton { 115 | padding: 10px 15px; 116 | } 117 | 118 | .cartItem { 119 | padding: 0; 120 | max-block-size: inherit; 121 | } 122 | 123 | .cartInfo { 124 | margin-top: 20px; 125 | } 126 | 127 | #total{ 128 | float: right; 129 | margin-top: 20px; 130 | } 131 | 132 | #buy { 133 | float: right; 134 | border-radius: 7px; 135 | margin: 10px 0 80px; 136 | } 137 | 138 | .quantityButton{ 139 | height: 27px; 140 | width: 27px; 141 | border-radius: 50%; 142 | border-style: solid; 143 | border-width: .1px; 144 | border-color:#30334c ; 145 | background: linear-gradient(45deg, #30334c, #292b40); 146 | box-shadow: 20px 20px 60px #202232, -20px -20px 60px #3a3e5c; 147 | } 148 | 149 | span .fas { 150 | color: #ffffff; 151 | } 152 | 153 | .fa-trash { 154 | float:right; 155 | } -------------------------------------------------------------------------------- /with-threejs/interactive-cart/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById("root") 10 | ); 11 | -------------------------------------------------------------------------------- /with-threejs/product-display/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /with-threejs/product-display/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "commercewith3d", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chec/commerce.js": "^2.0.1", 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.5.0", 9 | "@testing-library/user-event": "^7.2.1", 10 | "drei": "0.0.54", 11 | "react": "^16.13.1", 12 | "react-bootstrap": "^1.0.1", 13 | "react-dom": "^16.13.1", 14 | "react-scripts": "3.4.1", 15 | "react-three-fiber": "^4.2.8", 16 | "three": "^0.137.0" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": "react-app" 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /with-threejs/product-display/public/Jacket/Scene.js: -------------------------------------------------------------------------------- 1 | /* 2 | auto-generated by: https://github.com/react-spring/gltfjsx 3 | author: Juan Martinez Sanjurjo (https://sketchfab.com/JuanSanjurjo) 4 | license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) 5 | source: https://sketchfab.com/3d-models/advanced-game-characters-week-2-jacket-8f211f057bb24f5db17ca659553b716b 6 | title: Advanced Game Characters - Week 2 Jacket 7 | */ 8 | 9 | import * as THREE from 'three' 10 | import React, { useRef } from 'react' 11 | import { useLoader } from 'react-three-fiber' 12 | import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' 13 | import { draco } from 'drei' 14 | 15 | export default function Model(props) { 16 | const group = useRef() 17 | const { nodes, materials } = useLoader(GLTFLoader, '/scene.gltf', draco('/draco-gltf/')) 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ) 27 | } 28 | -------------------------------------------------------------------------------- /with-threejs/product-display/public/Jacket/scene.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/product-display/public/Jacket/scene.bin -------------------------------------------------------------------------------- /with-threejs/product-display/public/Jacket/scene.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "accessors": [ 3 | { 4 | "bufferView": 2, 5 | "componentType": 5126, 6 | "count": 2645, 7 | "max": [ 8 | 1, 9 | 0.603954017162323, 10 | 0.24914099276065826 11 | ], 12 | "min": [ 13 | -1, 14 | -0.603954017162323, 15 | -0.24914099276065826 16 | ], 17 | "type": "VEC3" 18 | }, 19 | { 20 | "bufferView": 2, 21 | "byteOffset": 31740, 22 | "componentType": 5126, 23 | "count": 2645, 24 | "max": [ 25 | 0.99847114086151123, 26 | 0.95362865924835205, 27 | 0.99986135959625244 28 | ], 29 | "min": [ 30 | -0.99847102165222168, 31 | -0.99585634469985962, 32 | -0.99998247623443604 33 | ], 34 | "type": "VEC3" 35 | }, 36 | { 37 | "bufferView": 3, 38 | "componentType": 5126, 39 | "count": 2645, 40 | "max": [ 41 | 0.99997144937515259, 42 | 0.99984276294708252, 43 | 0.99995851516723633, 44 | 1 45 | ], 46 | "min": [ 47 | -0.99989199638366699, 48 | -0.99998193979263306, 49 | -0.99820667505264282, 50 | -1 51 | ], 52 | "type": "VEC4" 53 | }, 54 | { 55 | "bufferView": 1, 56 | "componentType": 5126, 57 | "count": 2645, 58 | "max": [ 59 | 0.97676301002502441, 60 | 0.94386202096939087 61 | ], 62 | "min": [ 63 | 0.0019496099557727575, 64 | 0.0019920200575143099 65 | ], 66 | "type": "VEC2" 67 | }, 68 | { 69 | "bufferView": 0, 70 | "componentType": 5125, 71 | "count": 14424, 72 | "max": [ 73 | 2644 74 | ], 75 | "min": [ 76 | 0 77 | ], 78 | "type": "SCALAR" 79 | } 80 | ], 81 | "asset": { 82 | "extras": { 83 | "author": "Juan Martinez Sanjurjo (https://sketchfab.com/JuanSanjurjo)", 84 | "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)", 85 | "source": "https://sketchfab.com/3d-models/advanced-game-characters-week-2-jacket-8f211f057bb24f5db17ca659553b716b", 86 | "title": "Advanced Game Characters - Week 2 Jacket" 87 | }, 88 | "generator": "Sketchfab-8.7.0", 89 | "version": "2.0" 90 | }, 91 | "bufferViews": [ 92 | { 93 | "buffer": 0, 94 | "byteLength": 57696, 95 | "byteOffset": 0, 96 | "name": "floatBufferViews", 97 | "target": 34963 98 | }, 99 | { 100 | "buffer": 0, 101 | "byteLength": 21160, 102 | "byteOffset": 57696, 103 | "byteStride": 8, 104 | "name": "floatBufferViews", 105 | "target": 34962 106 | }, 107 | { 108 | "buffer": 0, 109 | "byteLength": 63480, 110 | "byteOffset": 78856, 111 | "byteStride": 12, 112 | "name": "floatBufferViews", 113 | "target": 34962 114 | }, 115 | { 116 | "buffer": 0, 117 | "byteLength": 42320, 118 | "byteOffset": 142336, 119 | "byteStride": 16, 120 | "name": "floatBufferViews", 121 | "target": 34962 122 | } 123 | ], 124 | "buffers": [ 125 | { 126 | "byteLength": 184656, 127 | "uri": "scene.bin" 128 | } 129 | ], 130 | "images": [ 131 | { 132 | "uri": "textures/Jacket_Lv2_Jacket_baseColor.jpeg" 133 | }, 134 | { 135 | "uri": "textures/Jacket_Lv2_Jacket_metallicRoughness.png" 136 | }, 137 | { 138 | "uri": "textures/Jacket_Lv2_Jacket_normal.png" 139 | } 140 | ], 141 | "materials": [ 142 | { 143 | "doubleSided": true, 144 | "name": "Jacket_Lv2_Jacket", 145 | "normalTexture": { 146 | "index": 2, 147 | "scale": 1, 148 | "texCoord": 0 149 | }, 150 | "occlusionTexture": { 151 | "index": 1, 152 | "strength": 1, 153 | "texCoord": 0 154 | }, 155 | "pbrMetallicRoughness": { 156 | "baseColorFactor": [ 157 | 1, 158 | 1, 159 | 1, 160 | 1 161 | ], 162 | "baseColorTexture": { 163 | "index": 0, 164 | "texCoord": 0 165 | }, 166 | "metallicFactor": 1, 167 | "metallicRoughnessTexture": { 168 | "index": 1, 169 | "texCoord": 0 170 | }, 171 | "roughnessFactor": 1 172 | } 173 | } 174 | ], 175 | "meshes": [ 176 | { 177 | "name": "defaultMaterial", 178 | "primitives": [ 179 | { 180 | "attributes": { 181 | "NORMAL": 1, 182 | "POSITION": 0, 183 | "TANGENT": 2, 184 | "TEXCOORD_0": 3 185 | }, 186 | "indices": 4, 187 | "material": 0, 188 | "mode": 4 189 | } 190 | ] 191 | } 192 | ], 193 | "nodes": [ 194 | { 195 | "children": [ 196 | 1 197 | ], 198 | "name": "RootNode (gltf orientation matrix)", 199 | "rotation": [ 200 | -0.70710678118654746, 201 | -0, 202 | -0, 203 | 0.70710678118654757 204 | ] 205 | }, 206 | { 207 | "children": [ 208 | 2 209 | ], 210 | "name": "RootNode (model correction matrix)" 211 | }, 212 | { 213 | "children": [ 214 | 3 215 | ], 216 | "matrix": [ 217 | 1, 218 | 0, 219 | 0, 220 | 0, 221 | 0, 222 | -4.3711390063094768e-08, 223 | 0.999999999999999, 224 | 0, 225 | 0, 226 | -0.999999999999999, 227 | -4.3711390063094768e-08, 228 | 0, 229 | 0, 230 | 0, 231 | 0, 232 | 1 233 | ], 234 | "name": "Collada visual scene group" 235 | }, 236 | { 237 | "children": [ 238 | 4 239 | ], 240 | "name": "Jacket_Lv2:jacket_low" 241 | }, 242 | { 243 | "mesh": 0, 244 | "name": "defaultMaterial" 245 | } 246 | ], 247 | "samplers": [ 248 | { 249 | "magFilter": 9729, 250 | "minFilter": 9987, 251 | "wrapS": 10497, 252 | "wrapT": 10497 253 | } 254 | ], 255 | "scene": 0, 256 | "scenes": [ 257 | { 258 | "name": "OSG_Scene", 259 | "nodes": [ 260 | 0 261 | ] 262 | } 263 | ], 264 | "textures": [ 265 | { 266 | "sampler": 0, 267 | "source": 0 268 | }, 269 | { 270 | "sampler": 0, 271 | "source": 1 272 | }, 273 | { 274 | "sampler": 0, 275 | "source": 2 276 | } 277 | ] 278 | } 279 | 280 | -------------------------------------------------------------------------------- /with-threejs/product-display/public/Jacket/textures/Jacket_Lv2_Jacket_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/product-display/public/Jacket/textures/Jacket_Lv2_Jacket_baseColor.jpeg -------------------------------------------------------------------------------- /with-threejs/product-display/public/Jacket/textures/Jacket_Lv2_Jacket_metallicRoughness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/product-display/public/Jacket/textures/Jacket_Lv2_Jacket_metallicRoughness.png -------------------------------------------------------------------------------- /with-threejs/product-display/public/Jacket/textures/Jacket_Lv2_Jacket_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/product-display/public/Jacket/textures/Jacket_Lv2_Jacket_normal.png -------------------------------------------------------------------------------- /with-threejs/product-display/public/assets/ChecProducts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/product-display/public/assets/ChecProducts.png -------------------------------------------------------------------------------- /with-threejs/product-display/public/assets/Jacket.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/product-display/public/assets/Jacket.gif -------------------------------------------------------------------------------- /with-threejs/product-display/public/assets/ProductDescription.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/product-display/public/assets/ProductDescription.png -------------------------------------------------------------------------------- /with-threejs/product-display/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/product-display/public/favicon.ico -------------------------------------------------------------------------------- /with-threejs/product-display/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | 28 | React App 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /with-threejs/product-display/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/product-display/public/logo192.png -------------------------------------------------------------------------------- /with-threejs/product-display/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-threejs/product-display/public/logo512.png -------------------------------------------------------------------------------- /with-threejs/product-display/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /with-threejs/product-display/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /with-threejs/product-display/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import Commerce from "@chec/commerce.js"; 3 | import Item from "./components/Item"; 4 | 5 | const commerce = new Commerce( 6 | "pk_test_18265006f98e5bc6f77efa3b7d99014bf7e1a31d0e6a3" 7 | ); 8 | 9 | function App() { 10 | const [products, setProducts] = useState([]); 11 | 12 | useEffect(() => { 13 | commerce.products.list().then((res) => { 14 | setProducts(res.data); 15 | }); 16 | }, []); 17 | 18 | return ( 19 |
20 | {products.map((product) => ( 21 | 22 | ))} 23 |
24 | ); 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /with-threejs/product-display/src/components/Animation.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense } from "react"; 2 | import { Canvas } from "react-three-fiber"; 3 | import Controls from "./Controls"; 4 | import Model from "./Scene"; 5 | 6 | function Animation(props) { 7 | return ( 8 | 15 | 25 | 26 | 27 | 35 | 36 | 37 | 38 | 39 | 40 | ); 41 | } 42 | 43 | export default Animation; 44 | -------------------------------------------------------------------------------- /with-threejs/product-display/src/components/Controls.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; 3 | import { extend, useThree, useFrame } from "react-three-fiber"; 4 | 5 | extend({ OrbitControls }); 6 | 7 | export default function Controls(props) { 8 | const { gl, camera } = useThree(); 9 | const ref = useRef(); 10 | useFrame(() => ref.current.update()); 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /with-threejs/product-display/src/components/Item.js: -------------------------------------------------------------------------------- 1 | // Import our dependencies 2 | import React, { useState } from "react"; 3 | import { Button, Col, Row } from "react-bootstrap"; 4 | import Animation from "./Animation"; 5 | import "./style.css"; 6 | 7 | // Build a card that will show our products 8 | function Item(props) { 9 | const [color, setColor] = useState("#80CED7"); 10 | 11 | // need to take out the pTags included with description string 12 | // if value is null(the default), returns empty string 13 | const description = 14 | props.description !== null 15 | ? props.description.slice(3, props.description.length - 4) 16 | : ""; 17 | 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 |

{props.name}

25 |
26 |
27 |

{description}

28 | 29 | 30 |

Available Colors:

31 | 32 | 33 | 34 | 35 | 36 |

Price: {props.price.formatted_with_symbol}

37 | 38 | 41 | 42 | 43 | 44 | 45 | 46 | ); 47 | } 48 | 49 | export default Item; 50 | -------------------------------------------------------------------------------- /with-threejs/product-display/src/components/Scene.js: -------------------------------------------------------------------------------- 1 | /* 2 | auto-generated by: https://github.com/react-spring/gltfjsx 3 | author: Juan Martinez Sanjurjo (https://sketchfab.com/JuanSanjurjo) 4 | license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) 5 | source: https://sketchfab.com/3d-models/advanced-game-characters-week-2-jacket-8f211f057bb24f5db17ca659553b716b 6 | title: Advanced Game Characters - Week 2 Jacket 7 | */ 8 | 9 | import React, { useRef } from "react"; 10 | import { useLoader } from "react-three-fiber"; 11 | import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; 12 | import { draco } from "drei"; 13 | 14 | export default function Model(props) { 15 | const group = useRef(); 16 | const { nodes, materials } = useLoader( 17 | GLTFLoader, 18 | `../${props.permalink}/scene.gltf`, 19 | draco("/draco-gltf/") 20 | ); 21 | 22 | return ( 23 | 24 | 25 | 26 | 31 | 32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /with-threejs/product-display/src/components/style.css: -------------------------------------------------------------------------------- 1 | body, 2 | html, 3 | canvas { 4 | width: 100vw; 5 | height: 100vh; 6 | margin:0; 7 | padding:0; 8 | background-color: #2D3047; 9 | background-image: linear-gradient(147deg, #2D3047 0%, #eae6e5 74%); 10 | } 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | .item { 17 | background: #fafdff; 18 | } 19 | 20 | h2 { 21 | text-align: center; 22 | margin-top: 50px; 23 | } 24 | 25 | .info { 26 | margin: 30px 30px 15px 0; 27 | padding: 30px; 28 | } 29 | 30 | .buttonRow { 31 | margin-top: 80px; 32 | } 33 | 34 | #blue { 35 | border-radius: 50%; 36 | width: 50px; 37 | height: 50px; 38 | margin-right: 10px; 39 | background-color: #80CED7; 40 | } 41 | 42 | #flax { 43 | border-radius: 50%; 44 | width: 50px; 45 | height: 50px; 46 | margin-right: 10px; 47 | background-color: #E9D985; 48 | } 49 | 50 | #red{ 51 | border-radius: 50%; 52 | width: 50px; 53 | height: 50px; 54 | margin-right: 10px; 55 | background-color: #BF211E; 56 | } 57 | 58 | #buy{ 59 | float:right; 60 | margin-top: 0px; 61 | border-radius: 7px; 62 | } 63 | 64 | @media screen and (max-width: 929px ) { 65 | #blue, 66 | #flax, 67 | #red, 68 | #buy { 69 | margin-top: 10px; 70 | } 71 | } 72 | 73 | @media screen and (max-device-width: 575px ) { 74 | canvas { 75 | width:100%; 76 | height: 100%; 77 | } 78 | .info { 79 | margin: 30px; 80 | padding: 30px; 81 | } 82 | 83 | } -------------------------------------------------------------------------------- /with-threejs/product-display/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById("root") 10 | ); 11 | -------------------------------------------------------------------------------- /with-vanilla/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chec/commercejs-examples/f2f2add3f94f6b7a69e309b6295c743e16cdcb74/with-vanilla/README.md -------------------------------------------------------------------------------- /with-vanilla/html-css-checkout/README.md: -------------------------------------------------------------------------------- 1 | # Checkout Demo 2 | 3 | A Pen created on CodePen.io. Original URL: [https://codepen.io/commercejs/pen/oNXvpxZ](https://codepen.io/commercejs/pen/oNXvpxZ). 4 | 5 | 6 | -------------------------------------------------------------------------------- /with-vanilla/html-css-checkout/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - Checkout Demo 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | Checkout 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |

Checkout

25 | 26 |
27 | 28 |
29 | 30 |

Customer Details

31 |
32 | 33 |
34 |
35 | 36 | 37 |
38 | 39 |
40 | 41 | 42 |
43 |
44 | 45 |
46 | 47 | 48 |
49 | 50 |
51 | 52 |
53 | 54 |

Shipping Details

55 |
56 | 57 |
58 | 59 | 60 |
61 | 62 |
63 | 64 | 65 |
66 | 67 |
68 | 69 | 70 |
71 | 72 |
73 |
74 | 75 | 76 |
77 | 78 |
79 | 80 | 81 |
82 |
83 | 84 |
85 |
86 | 87 | 88 |
89 | 90 |
91 | 92 | 93 |
94 |
95 | 96 |
97 | 98 |
99 | 100 |

Payment

101 |
102 | 103 |
104 | 105 | 106 |
107 | 108 |
109 |
110 | 111 | 112 |
113 | 114 |
115 | 116 | 117 |
118 |
119 | 120 |
121 |
122 | 123 | 124 |
125 | 126 |
127 | 128 | 129 |
130 |
131 | 132 |
133 | 134 | 135 | 136 |
137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /with-vanilla/html-css-checkout/dist/script.js: -------------------------------------------------------------------------------- 1 | // Initialize commerce with your public API key 2 | // new Commerce('YOUR_PUBLIC_API_KEY', true); 3 | var commerce = new Commerce('pk_17054571618e73520760e522b00e08ee196503b14e95c', true); 4 | 5 | $(document).ready(function(){ 6 | 7 | //Create a checkout token for the product with the permalink 'commerce-js-example'. 8 | commerce.checkout.generateToken('black-leather-watch', 'permalink', 9 | function(resp){ 10 | 11 | //Store the checkout token id as a global variable 12 | checkout_token_id = resp.id; 13 | 14 | /* 15 | CREATE THE SHIPPING METHOD 27 | $('select[name="fulfillment[shipping_method]"]').append(option_html); 28 | 29 | }); 30 | 31 | //Let's use the List all countries helper to populate the shipping[country] 39 | get_regions('CA'); 40 | }); 41 | }, 42 | 43 | function(error){ 44 | console.log(error); 45 | } 46 | ); 47 | }); 48 | 49 | 50 | //When the buyer select their country, lets grab a list of all provinces/states for that country and populate the shipping[county_state] 27 | 28 | 29 |
30 | 31 | 32 |
33 | 34 | 35 |
36 | 37 | 38 |
39 | 40 | 41 | 42 |
43 | 44 |

Shipping Details

45 |
46 | 47 |
48 | 49 | 50 |
51 | 52 |
53 | 54 | 55 |
56 | 57 |
58 | 59 | 60 |
61 | 62 |
63 |
64 | 65 | 66 |
67 | 68 |
69 | 70 | 71 |
72 |
73 | 74 |
75 |
76 | 77 | 78 |
79 | 80 |
81 | 82 | 83 |
84 |
85 | 86 |
87 | 88 |
89 | 90 |

Payment

91 |
92 | 93 |
94 | 95 | 96 |
97 | 98 |
99 |
100 | 101 | 102 |
103 | 104 |
105 | 106 | 107 |
108 |
109 | 110 |
111 |
112 | 113 | 114 |
115 | 116 |
117 | 118 | 119 |
120 |
121 | 122 |
123 | 124 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /with-vanilla/html-css-checkout/src/script.js: -------------------------------------------------------------------------------- 1 | // Initialize commerce with your public API key 2 | // new Commerce('YOUR_PUBLIC_API_KEY', true); 3 | var commerce = new Commerce('pk_17054571618e73520760e522b00e08ee196503b14e95c', true); 4 | 5 | $(document).ready(function(){ 6 | 7 | //Create a checkout token for the product with the permalink 'commerce-js-example'. 8 | commerce.checkout.generateToken('black-leather-watch', 'permalink', 9 | function(resp){ 10 | 11 | //Store the checkout token id as a global variable 12 | checkout_token_id = resp.id; 13 | 14 | /* 15 | CREATE THE SHIPPING METHOD 27 | $('select[name="fulfillment[shipping_method]"]').append(option_html); 28 | 29 | }); 30 | 31 | //Let's use the List all countries helper to populate the shipping[country] 39 | get_regions('CA'); 40 | }); 41 | }, 42 | 43 | function(error){ 44 | console.log(error); 45 | } 46 | ); 47 | }); 48 | 49 | 50 | //When the buyer select their country, lets grab a list of all provinces/states for that country and populate the shipping[county_state]