jssscode / smallawesomeshop Goto Github PK

@JsssCode Your Example App helps me understanding Shopify Storefront API.
But i stuck how to fetch Collections Image

Using "GraphiQL" with this Query

{
  shop {
    collections(first: 1) {
      edges {
        node {
          id
          handle
          image {
            originalSrc
          }
        }
      }
      pageInfo {
        hasNextPage
      }
    }
  }
}

will Result with

{
  "data": {
    "shop": {
      "collections": {
        "edges": [
          {
            "node": {
              "id": "Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzM2NTUwNjY5OQ==",
              "title": "Snacks",
              "handle": "snacks-co",
              "image": {
                "originalSrc": "https://cdn.shopify.com/s/files/1/2262/0831/collections/Snacks_Collection.jpg?v=1524511173"
              }
            }
          }
        ],
        "pageInfo": {
          "hasNextPage": true
        }
      }
    }
  }
}

But using "graphql-js-client" with Ionic 3, Collection Image is not available.
Using this in a Service Provider

getCollectionsWithImage() {
        let query = this.client.query((root) => {
            root.add('shop', (shop) => {
                shop.addConnection('collections', {args: {first: 16}}, (collection) => {
                    collection.add('id');
                    collection.add('title');

                    // THIS does not work
                    // collection.add('image', {args: {first: 1}}, (image) => {
                    //     image.add('originalSrc');
                    // })

                   // THIS does not work
                    // collection.addConnection('image', {args: {first: 1}}, (image) => {
                    //     image.add('originalSrc');
                    // })                  
                })
            })
        });

        return this.client.send(query).then(({model, data}) => {
            return model.shop.collections;
        });
    }

Do you have any Idea?

Hi J.
Thank you for providing a great starting point for Angular/ Shopify Storefront API. I want to create a simple search form where user can search any product from the store using a handle (keyword). I saw that in storefront API on shopify there is a property called productbyHandle but your implementation doesn't have that.
Can you please send me a code sample on how I can add that or point me in the right direction please.

Ahmar.

Do you have a method to fetch all products in collection?

Hey cool fork. Very helpful.

You should update this version with the updated environment files.

Just wondering, why is graphql-js-client is a dev dependency, should it not be a code dependency?

Hi @JsssCode

First of all thank you very much for the code.
Im have problems with the check out, Im getting this result

vendor.js:45065 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'checkout' of undefined
TypeError: Cannot read property 'checkout' of undefined
at main.js:1361
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:3268)
at Object.onInvoke (vendor.js:46624)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:3267)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (polyfills.js:3018)
at polyfills.js:3752
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:3301)
at Object.onInvokeTask (vendor.js:46615)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:3300)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:3068)
at main.js:1361
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:3268)
at Object.onInvoke (vendor.js:46624)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:3267)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (polyfills.js:3018)
at polyfills.js:3752
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:3301)
at Object.onInvokeTask (vendor.js:46615)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:3300)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:3068)
at resolvePromise (polyfills.js:3694)
at resolvePromise (polyfills.js:3651)
at polyfills.js:3753
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:3301)
at Object.onInvokeTask (vendor.js:46615)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:3300)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:3068)
at drainMicroTaskQueue (polyfills.js:3475)
defaultErrorLogger @ vendor.js:45065

The products are being pulled correctly but i can not checkout in the page or shopify, and the this.cardtId is always null, any idea?

Thank you very much for your time

I need to load only a small amount of Products from a given Collection for using it with InfinityScroll

getProductsInCollection(collectionId) {
        let query = this.shopClient.query((root) => {
            root.add('node', {args: {id: collectionId}, alias: 'collection'}, (node) => {
                node.addInlineFragmentOn('Collection', (collection) => {
                    collection.add('id');
                    collection.addConnection('products', {args: {first: 20}}, (products) => {
                        products.add('id');
                        products.add('title');
                        products.addConnection('variants', {args: {first: 1}}, (variants) => {
                            variants.add('price');
                        });
                        products.addConnection('images', {args: {first: 1}}, (images) => {
                            images.add('src');
                        })
                    })
                })
            })
        });

        return this.shopClient.send(query).then(({model, data}) => {
            // returns all Pages
            //return this.shopClient.fetchAllPages(model.collection.products, {pageSize: 20})
           
           // return first 10
          return model.collection.products;
        });
   }

Do you know if there is a Function to build the Pagination or do i have to implement the Logic?
Or is it even better to build Queries using native GraphQL without using "graphql-js-client"?

Hi Jsss,
First off ... Thank you so much for building this example ... it seems to be the only example I can find of building a Shopify shopping cart into an Angular app. (i.e. NOT an AngularJS app). I was able to get your code running with my storefront on myshopify account.

One thing I can't figure out how to do is put the shopify web checkout in an Angular component and show it in a dialog box or pop up ... or just show it as tab on the navbar next to the "My cart" router link.

My app is using Angular Material and it would really love to show the user a Material dialog popup to complete the check out ... but I can't figure out how to embed the WebUrl for the shopify checkout into an angular component to show it in a pop up or dialog.

Might you have any ideas or experience getting something like that to work ?? I tried just a simple "iframe" in a div ... but the checkout does not like that ... I don't have enough experience with Content Security Policies and the like to know if there is a way to get that to work.

Thanks again for making this repository and any and all pointers would be greatly appreciated.
Brett.