Gadget
Gadget
  • 137
  • 190 950
Set up Shopify managed pricing for public apps (in Gadget!)
Build your own app with Gadget: ggt.link/build-shopify
Riley sets up Shopify managed pricing for a public Shopify app built with Gadget!
Ask questions in our developer Discord: ggt.link/discord
Read the Gadget docs: docs.gadget.dev
Shopify managed pricing docs: shopify.dev/docs/apps/launch/billing/managed-pricing
A helpful Shopify community forum thread: community.shopify.com/c/billing-api/managed-pricing-redirecting/td-p/2708530
Fork this sample: app.gadget.dev/auth/fork?domain=managed-billing-demo.gadget.app
(Sample fetches app handle from the database!)
Chapters
00:00 Intro + app creation
00:34 Set up Shopify connection
02:10 Set up managed pricing in Partner dashboard
04:32 Store chargeId and set up HTTP redirect route
11:24 Clean up chargeIds and sync data on install
14:18 Check for subscription and redirect in frontend
18:38 Test install, uninstall, reinstall flows
21:46 Outro
Переглядів: 391

Відео

Send emails from your Gadget apps (using GadgetMailer)
Переглядів 1973 місяці тому
Riley shows you how to send custom emails (with attachments) from your Gadget actions! Try Gadget: gadget.new Read the docs: docs.gadget.dev/guides/plugins/authentication/email-pass
Introduction to Gadget: platform overview
Переглядів 1 тис.4 місяці тому
A quick overview of Gadget, the hosted and scaled fullstack app development platform. Start building for free: gadget.dev Ask questions in our developer Discord: ggt.link/discord Read our docs: docs.gadget.dev Chapters 00:00 Intro 00:22 Create a new web app 01:12 Add a data model 01:39 Backend explained 02:41 Preview the live app and build frontend 04:10 Test the todo list 04:49 Deploy to produ...
Gadget explained: ecommerce connections
Переглядів 1814 місяці тому
A high-level overview of Gadget's built-in connections for Shopify and BigCommerce apps. Start building for free: gadget.dev Ask questions in our developer Discord: ggt.link/discord Read our docs: docs.gadget.dev
Gadget explained: serverless React frontends
Переглядів 1564 місяці тому
A high-level overview of the serverless React frontend included with every Gadget app. Start building for free: gadget.dev Ask questions in our developer Discord: ggt.link/discord Read our docs: docs.gadget.dev
Gadget explained: serverless Node backends
Переглядів 1494 місяці тому
A high-level overview of the serverless Node backend included with every Gadget app. Start building for free: gadget.dev Ask questions in our developer Discord: ggt.link/discord Read our docs: docs.gadget.dev
Gadget explained: data models
Переглядів 1234 місяці тому
A high-level overview of Gadget's data models (and the Postgres database that powers them). Start building for free: gadget.dev Ask questions in our developer Discord: ggt.link/discord Read our docs: docs.gadget.dev
Gadget explained: hosted and scaled full stack environments
Переглядів 1334 місяці тому
A high-level overview of the Gadget's hosted and scaled full stack, single stack environments. Start building for free: gadget.dev Ask questions in our developer Discord: ggt.link/discord Read our docs: docs.gadget.dev
How to convert a Shopify app to use auto-generated Polaris components
Переглядів 2565 місяців тому
Build your own app with Gadget: ggt.link/build-shopify In this video, we will take an app that uses standard frontend components and replace those with Gadget's new autocomponents. Using just one line of code, we'll render a fully-functional Polaris form and table. Autocomponents docs: docs.gadget.dev/guides/frontend/autocomponents Chapters 00:00 Intro 00:30 Importing AutoForm and AutoTable 01:...
Build a fullstack, single-click BigCommerce app in 25 minutes
Переглядів 4775 місяців тому
In this video, we build a fullstack single-click BigCommerce application that automatically applies search keywords to products. Written tutorial and code snippets: docs.gadget.dev/guides/tutorials/bigcommerce/product-search-keywords Read the BigCommerce connection docs: docs.gadget.dev/guides/plugins/bigcommerce Have questions? Ask in Gadget's Discord: ggt.link/discord Chapters 00:00 Intro 00:...
Use Shopify web pixel extensions to capture most-viewed product pages
Переглядів 1,5 тис.8 місяців тому
Try out Gadget: ggt.link/build-shopify In this video, we will build an app that uses Shopify web pixel extensions to track the most-viewed product pages in a storefront. We will also use Gadget's computed fields and realtime queries to display the view count in an embedded admin app. Fork this app: app.gadget.dev/auth/fork?domain=product-page-web-pixels.gadget.app Shopify web pixel extension tu...
Build Shopify customer account UI extensions
Переглядів 1,7 тис.8 місяців тому
Try out Gadget: ggt.link/build-shopify In this Shopify tutorial, we explore customer account UI extensions, and build a fullstack app that allows merchants to define issues that customers can then select once an order has been fulfilled. This tutorial: gadget.dev/blog/building-with-shopify-customer-account-extensions Gadget docs for customer authentication and account UI extensions: docs.gadget...
Set up billing for public Shopify apps in under 20 minutes! (with Gadget and Mantle)
Переглядів 2,1 тис.9 місяців тому
Set up billing for public Shopify apps in under 20 minutes! (with Gadget and Mantle)
Build a pre-purchase Shopify checkout UI extension in 25 minutes!
Переглядів 2,1 тис.10 місяців тому
Build a pre-purchase Shopify checkout UI extension in 25 minutes!
Speedrun: Forward Shopify data to an external service in under 5 minutes
Переглядів 48910 місяців тому
Speedrun: Forward Shopify data to an external service in under 5 minutes
Build an automated Shopify product tagger in under 20 minutes
Переглядів 3,9 тис.10 місяців тому
Build an automated Shopify product tagger in under 20 minutes
Agency partner program (Launch Week Day 5)
Переглядів 13310 місяців тому
Agency partner program (Launch Week Day 5)
Background actions (Launch Week Day 4)
Переглядів 20410 місяців тому
Background actions (Launch Week Day 4)
GGT & local development improvements (Launch Week Day 3)
Переглядів 18110 місяців тому
GGT & local development improvements (Launch Week Day 3)
Source control in Gadget (Launch Week Day 2)
Переглядів 24910 місяців тому
Source control in Gadget (Launch Week Day 2)
Set up a Shopify connection in Gadget
Переглядів 2 тис.10 місяців тому
Set up a Shopify connection in Gadget
Unlimited development environments (Launch Week Day 1)
Переглядів 16210 місяців тому
Unlimited development environments (Launch Week Day 1)
Gadget Launch Week kickoff
Переглядів 26510 місяців тому
Gadget Launch Week kickoff
Developer experience improvements (Launch Week sneak peek!)
Переглядів 15310 місяців тому
Developer experience improvements (Launch Week sneak peek!)
Shopify theme development setup using Shopify's CLI
Переглядів 1,9 тис.11 місяців тому
Shopify theme development setup using Shopify's CLI
Use Shopify customer account UI extensions to capture order problems
Переглядів 1,1 тис.Рік тому
Use Shopify customer account UI extensions to capture order problems
Build an OpenAI-powered chatbot for a Shopify store (using theme extensions)
Переглядів 2,1 тис.Рік тому
Build an OpenAI-powered chatbot for a Shopify store (using theme extensions)
Fork and deploy fullstack apps in minutes: Gadget app templates
Переглядів 536Рік тому
Fork and deploy fullstack apps in minutes: Gadget app templates
Build a custom Shopify quiz app in under 15 minutes (using theme app extensions)!
Переглядів 2,2 тис.Рік тому
Build a custom Shopify quiz app in under 15 minutes (using theme app extensions)!
Quickly build React forms in Gadget (with useActionForm)
Переглядів 479Рік тому
Quickly build React forms in Gadget (with useActionForm)

КОМЕНТАРІ

  • @JesusGil90
    @JesusGil90 День тому

    how can i sync de code (with the extension) in gadget?

  • @Murphs37
    @Murphs37 3 дні тому

    Does this App allow the taxes to be automatically cleared from the Checkout price, if the customer presents a valid VAT number? This is something that Shopify really should have as standard for outside of USA B2B and I am amazed it still doesnt have...

  • @seoprosnyc613
    @seoprosnyc613 14 днів тому

    Great stuff! I need a bit of help. How do I add an custom action to export and keep the delete functionality? I looked through your documentation and autocomplete sample page but could not deduce! Appreciate the help :)

  • @ajay--yadav
    @ajay--yadav 27 днів тому

    great tutorial Riley. This is not just about Gadget but also about what is Shopify REST API, Graphql API, Client ID, Secret, App Bridge, Polaris. I also learnt about the best practices in the shopify app development.

  • @Flighttostars
    @Flighttostars 27 днів тому

    What would you advise for a rookie doing his first public app, this way or mantle from your previous video about billing?

  • @luisitonocomunica6795
    @luisitonocomunica6795 Місяць тому

    Help, I don't know how to calculate a shipping rate using my own app, I know it's possible cause a lot of people do it but I just have no idea 😭

  • @xixlabs
    @xixlabs Місяць тому

    I'm finding your videos extremely useful, Riley. Keep up the great work! Thanks.

  • @abdi14
    @abdi14 Місяць тому

    I have requested access to Orders api and they are saying i need to wait "This may take up to 7 business days. You will receive an email from our Developer Support team when your request has been processed. " this is test env so not sure why i need approval from shopify.

  • @aaronjosebricenomejia1231
    @aaronjosebricenomejia1231 Місяць тому

    te amo

  • @worthychukwuemeka
    @worthychukwuemeka Місяць тому

    You just earned a subscriber, thank you!

  • @ydscomau
    @ydscomau Місяць тому

    In step 7, I had to change the statement "import { useNavigate } from "react-router-dom";" to "import { useNavigate } from "react-router";" else I got an error.

    • @gadget_dev
      @gadget_dev Місяць тому

      We have upgraded our version of react-router to v7 in our starter apps, so the import has changed - thanks for highlighting this!

  • @NazHussain
    @NazHussain Місяць тому

    Thanks Riley, really appreciated that! Keep up the good work.

  • @hashiinngg
    @hashiinngg Місяць тому

    Thank you so much Riley, I implemented this in a different way in our app, so happy to get this guide on this from you guys <3

  • @shopify-españa
    @shopify-españa Місяць тому

    LIKE IF YOU USE GADGETS TO MAKE MONEY OR CREATE YOUR APPS

  • @AhsanKhan-qo8rq
    @AhsanKhan-qo8rq Місяць тому

    Will this forward order's all data like Name, address etc or just the id??

    • @gadget_dev
      @gadget_dev Місяць тому

      This sample just forwards the ID, but you could use the "record" param in the "forward" action to get access to all fields on the model (name, address, ...)

  • @themanlihood
    @themanlihood Місяць тому

    Hello Riley! Do you have any idea of how I would set a metafield on the order, that I can actually retrieve on the thank-you page? In a webhook, I'm setting some data. I can query it via Shopifys GraphQL App. It works. I can also see it on the UI extension I've made for order status. But for some weird reason, I have no way of viewing it on the thank you page. I'm leaning towards enabling the fetch api, but it feels so hacky to do that.

    • @gadget_dev
      @gadget_dev Місяць тому

      According to Shopify's docs (shopify.dev/docs/apps/build/checkout/thank-you-order-status#limitations-and-considerations), the order isn't created on the thank you page when the extension is displayed, but you do get access to the order ID which you can use to query for additional order info So it seems like you need to use the roundabout fetch to get the info on the thank you page. (I also don't see "order" metafields as valid on the extension API page - shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/metafields#standardapi-propertydetail-appmetafields_

  • @NazHussain
    @NazHussain 2 місяці тому

    Really wish you could build the b2b invoice generator app!

  • @bestmotivationspeekar4384
    @bestmotivationspeekar4384 2 місяці тому

    sorce code

  • @2an_sound
    @2an_sound 2 місяці тому

    Incredible. This is going to help me create a niche shipping rule solution for my client!

  • @Flighttostars
    @Flighttostars 3 місяці тому

    You didn't fill in Data protection details. Isn't it necessary?

    • @gadget_dev
      @gadget_dev 3 місяці тому

      The data protection details are required when you submit a public app to Shopify for review, but aren't required to be able to register for webhooks for API scopes

    • @Flighttostars
      @Flighttostars 3 місяці тому

      @@gadget_dev But in the end it will be necessary for those who submit a public app. Could pleas you do a small video about it, too?

  • @__gavin__
    @__gavin__ 3 місяці тому

    EDIT: With further exposure to gadget, I must amend my original comments (which can still be found below). It is possible to implement discord gateway events in gadget apps by way of an undocumented feature (Fastify server boot plugin to establish the websocket). Request time usage is reasonable despite permanent websocket connection - it doesn't use it continuously. Also, you can make a kinda hacky workaround for the "interaction failed" errors by using scheduled actions to keep your instance alive, preventing coldstarts. There are still other unique challenges and general annoyances you will face by using gadget, but it does come with benefits as well (particularly if you're going to be dealing with databases a lot). I still think the average discord bot is probably better off just written to run on traditional "serverful" tech stack and self hosting from a cheap VPS, but I cannot outrightly disrecommend gadget. Advice for anyone thinking about using gadget for their discord bot from someone who was convinced by this video to do so: I cannot recommend it. Gadget is not well suited for this purpose because their severless stack does not integrate well with websocket connections, which is how discord handles their "gateway" events. Attempting to do so will consume all of your monthly allowance of request time within practically one day (you only 25 hours in the free tier, which is fine if you're only doing webhook style /interactions requests, but a websocket will use request time continuously). Furthermore, their severless stack causes coldstarts which leads to "interaction failed" errors because discord's webhook requests timeout. If you want to do anything beyond simple RESTful handling of /interactions endpoint requests or if you mind getting occasional "interaction failed" errors, you should not use gadget.

  • @danielgarcia-dx1vf
    @danielgarcia-dx1vf 3 місяці тому

    Nice

  • @samuelvandeven3613
    @samuelvandeven3613 3 місяці тому

    I keep getting the following error in my shopify admin app: TypeError: Cannot use 'in' operator to search for 'modelApiIdentifier' in undefined. It seems like the custom action savePrePurchaseProduct is not being registered?

    • @gadget_dev
      @gadget_dev 3 місяці тому

      Yes, it seems like something isn't being defined properly in the API client. One way to check if it is the API: go to your app's API docs and see if the action exists on the model. If it does, the client should be up to date. We're happy to help debug and take a look at your app in our Discord (ggt.link/discord)

  • @jaredingold
    @jaredingold 4 місяці тому

    is @gadget-client still a package? i'm getting a "not found" error, also can't find it in the registry

    • @gadget_dev
      @gadget_dev 3 місяці тому

      The @gadget-client package is still being generated for your app, and is of the format @gadget-client/<your-app-slug>. You may need to register our private registry if the install is failing (docs.gadget.dev/api/example-app/development/external-api-calls/installing#node-module) If you're having issues installing feel free to hop in our Discord (ggt.link/discord) so our team can help with debugging

  • @j.nordstrom9425
    @j.nordstrom9425 4 місяці тому

    I am wondering if Gadget will work as middleware between Shopify and another application. I am struggling to locate any documentation regarding whether Gadget has an API that allows an outside source to access backend data or trigger actions to transfer data back and forth.

    • @gadget_dev
      @gadget_dev 3 місяці тому

      Yes, Gadget as middleware (using our background actions system) is a very popular use case. There are a couple of different ways to call your Gadget actions: - For middleware, if the other application has webhooks you can subscribe to, you can create an HTTP route in Gadget and use that route to subscribe - Every Gadget app has a unique JS API client that can be installed in external apps and used to call your app's actions. Details are in your app's API docs (in the External API calls with Gadget section) - Every Gadget app also has a GraphQL API that is generated and can be called from an external app. Once again, more info is in your API docs (External API calls with Gadget -> GraphQL)

  • @zubair.mohsin
    @zubair.mohsin 4 місяці тому

    Me checking all my audio devices only to find out he was on mute 😂

  • @zubair.mohsin
    @zubair.mohsin 4 місяці тому

    Missed it LIVE 😢

  • @eivanovue
    @eivanovue 4 місяці тому

    Great video, thanks man! Sorry for the late question, but is there a way to remove the header on the offer page i.e. the "You've paid for your order. View order confirmation." ?

    • @gadget_dev
      @gadget_dev 3 місяці тому

      You might have luck with Shopify's UI extensions for the Thank you and Order status pages (shopify.dev/docs/apps/build/checkout/thank-you-order-status). In particular, the Thank you render block target might allow you to customize the message: shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/block/purchase-thank-you-block-render

    • @eivanovue
      @eivanovue 3 місяці тому

      @@gadget_dev Hey thanks for the reply, but I get a 404 on that link.

  • @RealityShop-i1k
    @RealityShop-i1k 4 місяці тому

    @riley and @gadget_dev - i followed instructions but at minute 12:27 when you sees the recommendations, I'm not seeing that. When i click Get my results. It just does nothing. How can I see what the error is? console log shows no error

    • @gadget_dev
      @gadget_dev 4 місяці тому

      You can try checking your Gadget logs to see if there are any errors The best way to get help with debugging is in our developer Discord: ggt.link/discord

  • @omarkalthoum4698
    @omarkalthoum4698 5 місяців тому

    You are great guys! Well done

  • @zohremusavi
    @zohremusavi 5 місяців тому

    Hello, where can I see how to make an app in Shopify through Gadget from basic to advance? Please help me, I don't have enough knowledge about coding 😢😢🙏🏻🙏🏻

    • @karimpanacci
      @karimpanacci 5 місяців тому

      I think you should first learn to coding and only then learn to create a Shopify app

    • @gadget_dev
      @gadget_dev 4 місяці тому

      Gadget is a platform for app developers and you'll need to know a bit of Javascript and React before getting started. There are plenty of good (and free) online resources and courses you can look into including freeCodeCamp (www.freecodecamp.org/), Harvard's CS50 course (pll.harvard.edu/course/cs50-introduction-computer-science), or The Odin Project (www.theodinproject.com/)

  • @bigAndSmallRabbit
    @bigAndSmallRabbit 5 місяців тому

    Seriously, you didn't provide the code used in the tutorial? Do you expect us to input it manually? What if the tutorial is outdated or the Gadget has been updated? I'm speechless - spending so much time only to find out it doesn't work.

    • @gadget_dev
      @gadget_dev 4 місяці тому

      Thanks for calling out the lack of a forkable link! App code is available here: app.gadget.dev/auth/fork?domain=product-page-web-pixels.gadget.app

  • @Deepscs
    @Deepscs 5 місяців тому

    **Hi, I'm new to development.** I'm trying to get some details about a customer when they visit a specific product page, and I want to store this data for later processing. Additionally, I need to display some dynamic content on the product page. My question is: **How should I approach this?** Should I develop it as a standard Remix app, or should I build it as an extension using Shopify Admin actions?

    • @gadget_dev
      @gadget_dev 3 місяці тому

      It sounds like you might want to look into Shopify's web pixel extensions (shopify.dev/docs/apps/build/marketing-analytics/build-web-pixels) to see if the data you need is already being generated. Depending on the type of data generated, you would need to store it in a database or Shopify metaobjects To display dynamic elements on storefront product pages, you can use theme extensions (shopify.dev/docs/apps/build/online-store/theme-app-extensions) Depending on the data you are storing and the required processing on the data, you can build an extension-only Shopify app (shopify.dev/docs/apps/build/app-extensions/build-extension-only-app). It possible, this is the solution that would keep things simple and use Shopify's infrastructure

  • @SimonS188
    @SimonS188 5 місяців тому

    Super impressive stuff, gadget continuing to make itself the default service for Shopify App development. Looking forward to more auto-components in the future.

  • @ChowdeswariP-dr7pi
    @ChowdeswariP-dr7pi 5 місяців тому

    while i am generating the extension ,even i have toml file also getting this error... │ │ Couldn't find an app toml file at D:/pre-purchase-app, is this an app │ │ directory?

  • @muhammadaqibshahzad9494
    @muhammadaqibshahzad9494 5 місяців тому

    I am trying to build app,to transfer data of one store including products and collections(sync products+sorting order) ,to move another store Issue which I am facing with mapping When product import then have new product id,and when collection import ,can not sync to products because sync product not found in second store. and collections doesn't know the new id products Is there any solution or guidance? I am using shopify admin API

  • @tervahagn
    @tervahagn 5 місяців тому

    Already using the Gadget. Thanks a lot, you make development easy.

  • @kirillmartynov3132
    @kirillmartynov3132 6 місяців тому

    The webpixel is not working instantly in browser because shopify always cache their websites, and do don't have live webpage rather some old version

  • @julieshi9257
    @julieshi9257 6 місяців тому

    can you customized the look too?

  • @NeroTheDog
    @NeroTheDog 6 місяців тому

    Hi, thanks for your tutorial, I do have a few questions. I scaffolded an app with React Remix template 1. You said you are going to add the mutation once the app is installed, i really need to know, where do you do that? 2. I noticed that I had to delete the webPixel and re-add again to have it have my updated webPixel code. What if 10k users install my app and I decide to update the code of a webpixel? What is the industry standard for this?

  • @linkndark
    @linkndark 6 місяців тому

    Underrated short.

  • @amitmanevlog1609
    @amitmanevlog1609 6 місяців тому

    What is gadget Is it the only way to add gdpr webhook?

    • @gadget_dev
      @gadget_dev 4 місяці тому

      Gadget is a full-stack app development platform and the built-in connection handles a bunch of the Shopify boilerplate. It is not the only way to handle GDPR webhooks though - you can do that with any app stack and it is required when building public Shopify apps listed on their app store

  • @denyslav
    @denyslav 6 місяців тому

    the Ui doesn't look like that now .. none of these are getting imported now

    • @gadget_dev
      @gadget_dev 6 місяців тому

      Yes, Gadget has changed quite a bit from when this video was published, but we still handle GDPR webhooks for Shopify apps! When you connect to Shopify in Gadget, you will have a shopifyGDPRRequest model with action files for each request. You can handle the incoming requests in these action files

  • @pramodkumartg4430
    @pramodkumartg4430 6 місяців тому

    Hi can you please share the code for the frontend, that you pasted in index.js?

    • @rushipatel6965
      @rushipatel6965 6 місяців тому

      its on their docs

    • @gadget_dev
      @gadget_dev 6 місяців тому

      Here's a link to the written tutorial with all of the code: docs.gadget.dev/guides/tutorials/automated-product-tagger

  • @saiyamgambhir
    @saiyamgambhir 7 місяців тому

    How can we convert a app already buitl on vue 3 and using php larvel rest api connection. Can we have a connection to our own database?

    • @gadget_dev
      @gadget_dev 6 місяців тому

      Right now we don't allow connections to external databases. You would need to migrate existing data using a Gadget app's API (which you would generate by adding various data models) and then bulk create items in the db. If you want to chat more about this, feel free to jump in our Discord (ggt.link/discord). We have done migrations before have have a solutions engineering team that would be happy to help!

  • @עידושמשון-ר7ש
    @עידושמשון-ר7ש 7 місяців тому

    how i can work on existing extension of the app? i have already deleted the files from my computer and now i want to update the extension

  • @macenwilliams3283
    @macenwilliams3283 7 місяців тому

    I was not able to run a test on my global actions commands. does that affect my app or bot?

    • @gadget_dev
      @gadget_dev 7 місяців тому

      You shouldn't need to run a "/test" command for the bot to work, but it could mean that the slash commands weren't installed properly! Do you see /test available in Discord as a command to run, or is an error thrown?

  • @macenwilliams3283
    @macenwilliams3283 7 місяців тому

    For The Gadget Process, We would register correct? Or would we log in?