Fetching selling plans and addToCartFunctionality

Hey Team, I’m using the shopify integration in plasmic studio.

Is it possible for the currentProduct to also fetch the selling plans (subscriptions available on a product), and to also have the addToCartFunctionality handle the sellingplan?

Here is how you can query it from the API I assume the plugin uses the graphql storefront api:

`

query {
	        products(first: 20) {
	          edges {
	            node {
	              id
	              title
	              variants(first: 20) {
	                edges {
	                  node {
	                    id
	                    title
	                    price {
	                      amount
	                      currencyCode
	                    }
	                    image {
	                      originalSrc
	                    }
                      sku
	                    sellingPlanAllocations(first: 20) {
	                      edges {
	                        node {
	                          checkoutChargeAmount {
	                            amount
	                            currencyCode
	                          }
	                          sellingPlan {
	                            id
	                            name
	                            options {
	                              name
	                              value
	                            }
	                          }
	                        }
	                      }
	                    }
	                  }
	                }
	              }
	              images(first: 1) {
	                edges {
	                  node {
	                    originalSrc
	                  }
	                }
	              }
	            }
	          }
	        }
	      }`,

Here is how it would be for the cart create mutation

	   mutation cartCreateMutation($cartInput: CartInput) {
	     cartCreate(input: $cartInput) {
	       cart {
	         id
	         checkoutUrl
	         lines(first:10) {
	           edges {
	             node {
	               id
	               quantity
	               merchandise {
	                 __typename
	                 ... on ProductVariant {
	                   id
	                 }
	               }
	               sellingPlanAllocation {
	                 sellingPlan {
	                   id
	                   name
	                 }
	                 priceAdjustments {
	                   price {
	                     amount
	                   }
	                   compareAtPrice {
	                     amount
	                   }
	                   perDeliveryPrice {
	                     amount
	                   }
	                 }
	               }
	             }
	           }
	         }
	       }
	     }
	   }

In this case you would need to fork the shopify components from here: https://github.com/plasmicapp/plasmic/tree/master/plasmicpkgs/commerce-providers/shopify

You should be able to just edit one of the queries in here: https://github.com/plasmicapp/plasmic/tree/master/plasmicpkgs/commerce-providers/shopify/src/utils/queries

You can copy these components into your local next.js project, and use them together with npm i @plasmicpkgs/commerce

I see… but I assume this would not work with Nocode Studio right? @yang

Code components do work with Plasmic Studio, Plasmic lets you bring your own custom components (including forked/modified versions of our built-in components which are open source at the above URL)

It’s a one-time change you would need to make, and then afterward you can keep making edits in Plasmic Studio now with your extended data functionality, but setting up the codebase to make these kinds of customizations is indeed a technical exercise that would require development background

Ah ok is there a guide on how to get started with custom coded components? Ill give it a go. And also where can I fork the existing shopify plugin?

@yang

The best place to start is this quickstart https://docs.plasmic.app/learn/nextjs-quickstart/

There’s a section toward the bottom on how to add custom code components!

Once you’ve made it there, then you can copy/paste the code from the that @plasmicpkgs/commerce-shopify package into your codebase (maybe under a components/plasmic-shopify/ dir), don’t modify anything, and just make sure you’re able to get that working (may need to install deps in your package.json)

Finally make the edits you want to that graphql query

Ok great! And then once ive made the edits how do I use that custom
Component in my existing plasmic studio project? Or would it require me to start a new project? @yang

No you can just use your existing project, once you go through those steps you’ll see it actually show up in the insert menu

Amazing!!!