forked from vrann/m2graphql
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Extend example of rendering of the product items retrieved from the G…
…raphQL
- Loading branch information
Showing
15 changed files
with
537 additions
and
238 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| 0 info it worked if it ends with ok | ||
| 1 verbose cli [ '/opt/local/bin/node', '/opt/local/bin/npm', 'start' ] | ||
| 2 info using [email protected] | ||
| 3 info using [email protected] | ||
| 4 verbose run-script [ 'prestart', 'start', 'poststart' ] | ||
| 5 info lifecycle [email protected]~prestart: [email protected] | ||
| 6 silly lifecycle [email protected]~prestart: no script for prestart, continuing | ||
| 7 info lifecycle [email protected]~start: [email protected] | ||
| 8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true | ||
| 9 verbose lifecycle [email protected]~start: PATH: /opt/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/etulika/Projects/php/m2graphql/examples/react-product-webcomponent/node_modules/.bin:/opt/local/bin:/opt/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin | ||
| 10 verbose lifecycle [email protected]~start: CWD: /Users/etulika/Projects/php/m2graphql/examples/react-product-webcomponent | ||
| 11 silly lifecycle [email protected]~start: Args: [ '-c', 'react-scripts start' ] | ||
| 12 silly lifecycle [email protected]~start: Returned: code: 1 signal: null | ||
| 13 info lifecycle [email protected]~start: Failed to exec start script | ||
| 14 verbose stack Error: [email protected] start: `react-scripts start` | ||
| 14 verbose stack Exit status 1 | ||
| 14 verbose stack at EventEmitter.<anonymous> (/opt/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16) | ||
| 14 verbose stack at emitTwo (events.js:106:13) | ||
| 14 verbose stack at EventEmitter.emit (events.js:191:7) | ||
| 14 verbose stack at ChildProcess.<anonymous> (/opt/local/lib/node_modules/npm/lib/utils/spawn.js:40:14) | ||
| 14 verbose stack at emitTwo (events.js:106:13) | ||
| 14 verbose stack at ChildProcess.emit (events.js:191:7) | ||
| 14 verbose stack at maybeClose (internal/child_process.js:877:16) | ||
| 14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5) | ||
| 15 verbose pkgid [email protected] | ||
| 16 verbose cwd /Users/etulika/Projects/php/m2graphql/examples/react-product-webcomponent | ||
| 17 error Darwin 15.5.0 | ||
| 18 error argv "/opt/local/bin/node" "/opt/local/bin/npm" "start" | ||
| 19 error node v6.9.1 | ||
| 20 error npm v3.10.9 | ||
| 21 error code ELIFECYCLE | ||
| 22 error [email protected] start: `react-scripts start` | ||
| 22 error Exit status 1 | ||
| 23 error Failed at the [email protected] start script 'react-scripts start'. | ||
| 23 error Make sure you have the latest version of node.js and npm installed. | ||
| 23 error If you do, this is most likely a problem with the my-app package, | ||
| 23 error not with npm itself. | ||
| 23 error Tell the author that this fails on your system: | ||
| 23 error react-scripts start | ||
| 23 error You can get information on how to open an issue for this project with: | ||
| 23 error npm bugs my-app | ||
| 23 error Or if that isn't available, you can get their info via: | ||
| 23 error npm owner ls my-app | ||
| 23 error There is likely additional logging output above. | ||
| 24 verbose exit [ 1, true ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import ApolloClient, { createNetworkInterface } from 'apollo-client'; | ||
|
|
||
| function ApolloFactory() { | ||
| const logErrors = { | ||
| applyAfterware({ response }, next) { | ||
| if (!response.ok) { | ||
| response.clone().text().then(bodyText => { | ||
| console.error(`Network Error: ${response.status} (${response.statusText}) - ${bodyText}`); | ||
| next(); | ||
| }); | ||
| } else { | ||
| response.clone().json().then(({ errors }) => { | ||
| if (errors) { | ||
| console.error('GraphQL Errors:', errors.map(e => e.message)); | ||
| } | ||
| next(); | ||
| }); | ||
| } | ||
| }, | ||
| }; | ||
|
|
||
| const networkInterface = createNetworkInterface({ | ||
| uri: 'http://m2graphql.com/graphql', | ||
| }); | ||
| networkInterface.useAfter([logErrors]); | ||
|
|
||
| console.log('apollo'); | ||
| const client = new ApolloClient({ | ||
| connectToDevTools: true, | ||
| networkInterface: networkInterface, | ||
| }); | ||
| return client; | ||
| } | ||
|
|
||
| export default ApolloFactory; |
This file was deleted.
Oops, something went wrong.
8 changes: 0 additions & 8 deletions
8
examples/react-product-webcomponent/src/MagentoProduct.test.js
This file was deleted.
Oops, something went wrong.
20 changes: 20 additions & 0 deletions
20
examples/react-product-webcomponent/src/components/App/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React, { Component } from 'react'; | ||
|
|
||
| import MagentoProductList from '../MagentoProductList'; | ||
|
|
||
| class App extends Component { | ||
| render() { | ||
| return ( | ||
| <div className="App"> | ||
| <MagentoProductList registerGQL={this.props.registerGQL} /> | ||
| <MagentoProductList registerGQL={this.props.registerGQL} /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| this.props.mounted(); | ||
| } | ||
| } | ||
|
|
||
| export default App; |
Empty file.
60 changes: 60 additions & 0 deletions
60
examples/react-product-webcomponent/src/components/MagentoProductItem/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import React, { Component } from 'react'; | ||
|
|
||
| export default class MagentoProductItem extends React.Component { | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| console.log(props); | ||
| this.thumbnail = 'http://m2graphql.com/pub/static/frontend/Magento/luma/en_US/Magento_Catalog/images/product/placeholder/small_image.jpg'; | ||
| this.url_key = "http://m2graphql.com/placeholder.html" | ||
| } | ||
|
|
||
| render() { | ||
| if (this.props.data.hasOwnProperty('custom_attributes')) { | ||
| this.thumbnail = "http://m2graphql.com/pub/media/catalog/product/" + this.props.data.custom_attributes[0]['value']; | ||
| this.url_key = "http://m2graphql.com/index.php/" + this.props.data.custom_attributes[1]['value'] + '.html' | ||
| } | ||
| return ( | ||
| <li className="product-item"> | ||
| <div className="product-item-info"> | ||
| <a href={this.url_key} className="product-item-photo"> | ||
| <span className="product-image-container" style={{width: "240px"}}> | ||
| <span className="product-image-wrapper" style={{paddingBottom: "125%"}}> | ||
| <img className="product-image-photo" src={this.thumbnail} width="240" height="300" alt="Selene Yoga Hoodie" /> | ||
| </span> | ||
| </span> | ||
| </a> | ||
| <div className="product-item-details"> | ||
| <strong className="product-item-name"> | ||
| <a title="{this.props.data.name}" href={this.url_key} className="product-item-link"> | ||
| {this.props.data.name} | ||
| </a> | ||
| </strong> | ||
| <div className="price-box price-final_price" data-role="priceBox" data-product-id="1113"> | ||
| <span className="price-container price-final_price tax weee"> | ||
| <span id="old-price-1113-widget-product-grid" data-price-amount="{this.props.data.price}" data-price-type="finalPrice" className="price-wrapper "> | ||
| <span className="price">${this.props.data.price}</span> | ||
| </span> | ||
| </span> | ||
| </div> | ||
| <div className="product-item-actions"> | ||
| <div className="actions-primary"> | ||
| <button className="action tocart primary" data-post="{"action":"http:\/\/m2graphql.com\/index.php\/checkout\/cart\/add\/uenc\/aHR0cDovL20yZ3JhcGhxbC5jb20vaW5kZXgucGhwL3dvbWVuLmh0bWw%2C\/product\/1113\/","data":{"product":"1113","uenc":"aHR0cDovL20yZ3JhcGhxbC5jb20vaW5kZXgucGhwL3dvbWVuLmh0bWw,"}}" type="button" title="Add to Cart"> | ||
| <span>Add to Cart</span> | ||
| </button> | ||
| </div> | ||
| <div className="actions-secondary" data-role="add-to-links"> | ||
| <a href="#" data-post="{"action":"http:\/\/m2graphql.com\/index.php\/wishlist\/index\/add\/","data":{"product":"1113","uenc":"aHR0cDovL20yZ3JhcGhxbC5jb20vaW5kZXgucGhwL3dvbWVuLmh0bWw,"}}" className="action towishlist" data-action="add-to-wishlist" title="Add to Wish List"> | ||
| <span>Add to Wish List</span> | ||
| </a> | ||
| <a href="#" className="action tocompare" data-post="{"action":"http:\/\/m2graphql.com\/index.php\/catalog\/product_compare\/add\/","data":{"product":"1113","uenc":"aHR0cDovL20yZ3JhcGhxbC5jb20vaW5kZXgucGhwL3dvbWVuLmh0bWw,"}}" title="Add to Compare"> | ||
| <span>Add to Compare</span> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.