Gadget
내용
[subtitle-meta] lang=en auto=True
I'm going to show you how you can use
Shop's checkout UI extensions and Gadget
to build a full stack pre- purchase
product offer application in under 25
minutes I'm going to get started
building my custom pre- purchase offer
application for my shop by checkout I've
gone to
main for my app I'll just call this pre
purchase V1 tutorial and I'm using V1
because we're on Gadget framework
version one now and when I create this
app I get my hosted and scaled postgress
database my serverless node backend and
my react frontend powered by V
everything is set up and ready to go the
first thing I'm going to do is connect
to
Shopify now because I want app
extensions I want to check out UI
extension for that pre- purchase offer I
need to connect through the partner
dashboard so I can go
ahead go to my partners dashboard I'm on
the apps page already and I'll just
create a new app and create an app
manually and I'll give this the same
name pre purchase V1 tutorial
perfect and now I can copy my client ID
in secret back to my Gadget
app there's my secret and I'll press
continue
now on this page I select what shopy API
Scopes and data models I want to include
in my app I want to be able to read my
existing products to my Gadget database
and then I'll allow Merchants to select
one of the products in my embedded admin
app to be offered in the checkout so I'm
going to go ahead and click the read
product scope so I can get my product
data into my Gadget database and I'll
select the product data model now I get
a setup summary off to the right here
this is covering a couple things that
getting with the gadget connection out
of the box the first is web hook
subscriptions to your Shopify web hooks
so I can see access to web hook triggers
that's going to include my product web
hooks so I am automatically going to be
subscribed to my product web hooks in
Shopify which means that anytime a
merchant changes a product in their
store admin the web hook will fire
Gadget will stay up
toate I can also see that I am going to
have the read products access scope
which is good
and I see the data models we're going to
be syncing into my Gadget database and
that includes my shopy product model as
well as the shop and gdpr request models
which are added every time you connect
to Shopify through the partner dashboard
now the other thing you're getting
through this connection is a historical
data sync so not only will you be able
to react to any product web hooks but
you'll be able to sync your existing
products into your database as well and
that's what is being highlighted by this
model syncing data section so I'm happy
with this I'm going to go ahead and
press
confirm now I need to go ahead and copy
my app URL and redirection URL back to
my partner's app so I'll do that go back
to my partner go to
configuration paste my app URL and I'll
do the same for my redirection
URL and I'm good I'll press save and
release now I'm ready to install my app
on my development store so I can go back
to my overview in my partner dashboard
for my app select a store and I will do
my classic test with sample data store
so I haven't written a line of code yet
no off code Gadget is going to handle
all of that for me I can go ahead and
press install right away gadget's also
going to handle Shopify Polaris
installation that's their component
Library it'll manage app Bridge setup
for me so I don't need to touch app
Bridge manually and it'll handle
shopify's session tokens so all of that
handled for me by Gadget this is
actually my embedded react app I can see
that this page is powered by roach
index. jsx and if I go back to my Gadget
app I can see I'm successfully connected
to Shopify so that's
fantastic I am going to go ahead and
actually run my historical data sync now
so I'm going to go in this Connected app
section to my
installs I can see here's my shop my API
Scopes have been granted access my web
hooks are registered I will press the
sync button this is going to bring all
of my products from this development
store test with sample data into my
Gadget database looks like it's
completed I'm going to go ahead and
close this and you'll see in my file
explorer off to the left here under API
models API is my back end web is my
front end I have my Shopify product data
model as well as my shop ggpr request
session and sync so if I go ahead and
open product click on schema these are
all of the fields on my model fields are
like columns on my database table and if
I check out the data page I see that my
data has indeed been synced so there's
not a ton of product data this is just a
test store but no matter how much data
you do have Gadget will manage Shop's
rate limit and bring data into your
Gadget database as fast as possible so
you don't need to write that data sync
yourself that's great that is the
connecting to Shopify step before I get
into custom action code I actually am
going to go on a bit of a detour this
isn't really required for this tutorial
it's mostly just to show you how to do
it it's also included in the written
instructions I'm going to go to my
Shopify shop model click on my schema I
once again see all of my fields and I'm
going to go ahead and add a custom field
and I'm just going to go call this pre
purchase
product so I can actually store data
from my shop five meta fields in line
with the rest of my shop data that's
pretty neat I just need to enter a
namespace I'll just call this gadget
tutorial I'm going to register my
namespace and I'll enter a key for my
meta field so I'll call this
pre
purchase product and this is going to be
a product
reference and I'll leave it as a string
type for next so we're going to store
that product ID to a meta field so that
it can be easily ingested into my check
out extension I'm also going to sync
that data here in my Gadget database
when I said I didn't need it before I
think that was a bit of a lie I actually
do need this and this is going to power
my frontend experience so I'll be able
to tell uh what meta field has been
selected already so that when the
merchant comes back to my app I'll be
able to pre-populate the selected option
so that was a bit of a lie that's okay
we're going to keep on trucking so now
I'm going to go ahead and add a custom
action to my Shopify shop model you'll
see when I went ahead and set up my shop
by connection or if I go ahead and
create a custom model Gadget is going to
automatically generate a crud API for
your data models I can also go ahead and
modify this API by adding custom actions
so I'll just click Plus on the actions
folder and I'll call my action save
prepurchase
products and I want to add Js
and this will give me a new action file
so the anatomy of a default action we
have run and on success functions run is
good for database level quick operations
and then I also have my on success
function this is good for side effects
longer running code check out our
documentation for more information on
the difference between the two off to
the side I have triggers so I can see
like I mentioned this is a custom action
so it is custom API so I can see if I
want to call this from my API client
it's api. Shop shop. saave prepurchase
product I'm going to go ahead and paste
in some code that actually modifies this
API and we can actually take a look at
how this updates when I paste in code so
you notice I dumped in some stuff
there's a lot less parameters here in my
little example API endpoint trigger box
uh which is very cool and I'll explain
what happened uh by default when I
create new AC and Gadget it is a action
type update and this means that all of
the fields on your model my case shop VI
shop are available as parameters I've
set this to a custom action now which
means the only required parameter is the
ID and that's this one two three you're
seeing there so that's going to be the
ID of my shop I've then defined a custom
parameter down here export cons perams
as the product ID and this will be the
product ID of the product that I offer
offer in the checkout which is
groovy I've added a bunch of code to my
run function now I still have apply
prams and prevent cross up data access
that's particularly useful for public
apps it means multi-tenancy is enforced
and all I'm doing here is I am grabbing
my product ID from my past in parameters
it's going to be the product that's
offered in the
checkout and I've got this connections
object here from my highcon context
parameter I'm going connections. shopy
docr dog graphql and this is going to
have my current shop context and we know
that because when we make a request
using our Gadget API client in the front
end which we'll get to in a bit we're
going to include the session token
automatically so we know what store is
making that request which is why we can
use current and then I can just go
graphql and this is just a set meta
field graphql mutation straight from
shop docs and we are defining our meta
field see it's pre- purchased product
same key name space as we defined on the
custom field on the shop by shop model
passing in the shop as the owner record
is my current shop so it's just going to
be the shop ID it's a product reference
meta field and the value is just the
product ID and finally I'm just using
gadgets built-in logger this is also
exposed via this High context parameter
to log the response so that is my custom
action now I need to go ahead and do one
more thing on this page before I build
my front end and that's Access Control
by default when I create a custom model
or add a custom action to an existing
model we do not allow Merchants Shopify
Merchants to be able to call these
actions you actually need to enable it
and that's just for some built-in
security I'm going to go ahead and under
my triggers box I have this Access
Control I'm just going to toggle shopy
app users and that's the role that is
assigned to Merchants when when they
interact with your app in the embedded
admin so now I'm good now I can go ahead
and call this action from my front end
without
issue and so now we can get to the front
end that's our backend
build I have my web folder I can open
that up you see we already set up an API
client and this is going to be specific
to your Gadget app pre- purchase V1
tutorial here and all I need to do is
import API into whatever code file I
want and I can call my Gadget API
if I go into routes well let's take a
look at components first components has
our rotor definition uh it's in this app
jsx file and this is kind of handling I
mean it's route definitions right now uh
there's an unauthenticated app view so
if I try and open up my app outside of
the shop VI admin I'll just go ahead and
click
preview I'll get denied get out of here
only view it in the admin so that's nice
uh the interesting stuff is in routes I
have an about and index jsx which are
just the default rotes we provide I'm
going to paste over my index jsx so this
will be my new default page and let's go
ahead and just give this a refresh
Gadget front ends do have hot module
reloading built in however there is a
time out of two or three minutes so you
may need to refresh if you go idle for a
bit but this is my app I can go ahead
and select one of my products press save
and this will actually go ahead it'll
fire that custom action
save it to a meta field or save that
product Ed you to a meta field and now
if I go ahead and check my shop shop
data and I do need to go ahead and
find go ahead and find that meta field
column here we go pre- purchased product
I see that my product ID was indeed
saved so that is fantastic uh my front
end is working I'll quickly walk through
the front end code here so I actually
have a custom pre- purchase form I'll
get to that we are importing that API
client I'm using some react hooks we
also have a gadge in react package that
is providing some useful hooks that I'm
using to interact with my API so I'll
scroll down past here the default
function being exported at this route
all I'm doing I'm using a use find meni
hook to actually read my existing
products so you can see it's my api.
Shop product I get data fetching and
error data is the return products
fetching is a Boolean I can use to show
a loading spinner air is going to be any
errors we can display those to
users I'm also using a use find first
hook to read my current shop ID so I'm
passing in api. shop VI shop as well as
an additional selection criteria and I'm
just setting ID to true so I'll only
read the ID I don't need the rest of my
shop Fields once again data fetching and
error and I'm aliasing all
those I have a little use effect hook
here so when I do actually have products
or my products change uh if they do
indeed exist I'm just mapping these to
an options object uh setting them in
some react State and that's what I'm
actually feeding in if I go ahead and
highlight product options here I'm just
feeding that into my prepurchase form
component to be offered in that drop
down and the rest of this is just plain
old shopy Polaris uh which is pretty
groovy so I'm just going to go back up
to my pre- purchase form now this is the
component I had in that blower block one
thing I do want to point out here is use
action form so you notice in my form I
don't have any react use State hooks use
action form is handling my entire form
state for me now in this case my form
state is a single input use action form
is really powerful when you get to large
forms or nested data models if you want
an example of that check out our product
quiz template or tutorial and use action
form it comes with a submit that is
being called it's a function that fires
this API so that's going to be api.
shopy shop. saave prepurchase product
that's my custom action so whenever I go
ahead and hit my button submit my form
it fires my custom action and it is
passing in the ID which is going to be
the ID of the shop and the product ID
and I'm doing some little Wizardry down
here to just watch for changes on the
pre-purchase product that's the custom
field on my model and I'm just setting
that value to product ID so that
whenever I change it in the input I'm
setting that up as a product ID and not
as the pre- purchased product
field the other thing to point out is
that because Polaris is a controlled
component Library I'm using this
controller component I am importing this
from my gadg in react Library I'm
passing in a name I got my model and
then field and this is what handles all
of my form state for me so I just pass
in this control this is coming right
from my use action form
hook and then in my render I get my
field I'm just pulling out the ref polar
doesn't like refs uh spreading the field
props and this is taking care of things
like my onchange my value my name all of
the default Fields you need for your
form it'll be taken care of which is
great and then I am passing in my
products as options so that's my entire
front end now we can get to the good
stuff so I can see that this works now I
want to build my extension so let's go
ahead I am going to open up my Gadget
command pallet it's just command p and I
can go ahead and run yarn
ad Shopify
app and Shopify
CLI so normally what you do or what you
could do with this or what you did
before if you've built an extension
before with Gadget is you would go ahead
and create a new shopi CLI app it would
include these dependencies and you would
build your extension separately from
Gadget I'm actually going to build my
extension in my Gadget app and the main
benefit to this is that now that Gadget
has Source control support I can manage
my entire app and my shopy extensions in
one nice little neat package one code
base so that is great so that's what I'm
doing I'm just installing my shopy app
and shopy CLI mpm packages so I can go
ahead and generate my extensions here in
my Gadget
project I will have to make some edits
to my package Json file I'm just going
to leave this for now so the first thing
I'll need to do is add uh workspaces and
trusted dependencies I'm just going to
paste these at the bottom here fantastic
once again these are in the written
tutorials if you want to copy paste
directly I'm also going to add the
default scripts included with Shopify
apps I am just going to expand this save
those and I am good to go now what I
need to do in order to actually generate
my extension is pull down my code to my
local machine and I'm going to use ggt
to do that so I have this little Cloud
icon I'm just GNA copy this
command ggt is Gadget CLI tool and what
it does is it pulls your Gadget project
down to your local machine and then
while it's running while this ggt Dev
command is running in the background you
see it will just stay running any
changes I make locally or in my Gadget
editor will be pushed to the other
location so it will keep everything in
SEC means I can develop my Gadget apps
locally so I'm just going to open up
another tab here let's make this a bit
bigger and so if I change directory into
my app pre purchase V1 tutorial I can go
ahead and I am actually going to do a
bit more setup first a bit more setup
I'm just going to open my
editor and copy this over here so we got
vs code so this is my Gadget app you can
see I've got a settings.
gadget.storage.extract
I do have a scheme of files now for my
model so I can use Source control to
manage my whole Gadget app what I want
to go ahead and add in order to support
extensions is at the root level a do
ignore helps if I spell it correctly
let's go ahead and rename
this ignore beautiful and then I'm
actually just going to go ahead and
paste this extensions star
slist and this do ignore file just means
that any folders defined in here will
not be synced as part of that ggt Dev
command the Syntax for this do ignore is
the exact same as G
ignore so that's great so now when I
actually build my extensions I won't get
all of the distribution files synced up
to my Gadget app which is okay because
shopy is actually going to host my
extension so I'll go ahead go back to my
editor and I'm going to generate my
extension I'm just going to straight up
copy this command and so this is using
yarn generate extension I'm selecting
this checkout UI template and calling it
pre purchase
EXT I want to select the same Partners
organization and app so I do not want to
create a new app I want to connect to an
existing app and I want to select the
app I use to connect Gadget to my
Shopify
store and I'll select JavaScript y as
the
language
and you can see I now have an extensions
folder here in my local Gadget project
and if I flip back to my Gadget editor
in the web I have my extensions folder
here so that's great so now I can either
choose to develop locally or here in the
gadget editor I'll uh I'll stick to
local for now really all I need to do is
modify my extension now so I can go
ahead and open my extensions file I have
this tommel and this is my extension
configuration file I'm going to paste
something over it but the only real
change is that I am passing in in my
meta field as input to my extension uh
the rest is all just standard boiler
plate included when I generate my
extension no other changes now I'm going
to go ahead and copy code into my
checkout jsx file do you want I'll
actually go ahead and start my extension
first just so we can see what this looks
like so if I go ahead and run yarn
Dev this will go ahead and start my
Shopify app I want to select the same
development store I used to set up my
Gadget connection so that was test with
sample
data and if I open up
this copy my pre-purchase
extension URL and paste it in here I see
this is going to be my default extension
which is just a banner so it's this pre-
purchase extension here so let's go
ahead and update this now I'll just copy
a bit more code go back to my local file
and you see this is just a banner right
now so if I paste over this flip back I
see I am now being offered my product
that I select in my admin app so let's
mix this up let's go oxygen press
save so that was saved it's going to
save to that shop by metafield and if I
go ahead and refresh this page I see
that oxygen is now being offered that's
fantastic so I know my extension is
working if I click add it's added to my
cart so let's go ahead and check out our
extension go quickly I will be perfectly
honest a lot of this code is taken
directly from Shop's own pre- purchase
tutorial so there's not a lot of
differences I'm using the shopy UI
extensions react checkout package and I
am just pulling all of their checkout UI
components that I need as well as some
react hooks um these do not use default
players components they're their own set
of components so just something to be
aware of quickly walking through here
I'm using apply cart line changes to go
ahead and actually make the change when
I add that item to the cart this is my
use app meta fields and I'm getting my
pre- purchase product so this is how I'm
actually getting my meta field into my
app I've got a bunch of react state that
I'm setting up here inside a use effect
when I actually get my meta field in as
input uh if it exists I'm actually just
querying the storefront so I can query
the storefront this query is coming
right from my use API hook that Shopify
provides for me and I'm just grabbing
the very first variant and the very
first image for this product normally if
you're building this for a you know
production system you probably want to
be able to choose the image choose the
variant you're offering or showing to
Shoppers in the checkout right now I'm
just grabbing the first ones and I'm
passing in my meta field value as input
so what this is going to do is going to
get me my product variant which has the
price and an image I can show I'm also
using use cart lines to grab the cart
lines there is a little loading block
here I'm using the cart lines to check
to see if the product being offered is
already in the cart if it's not I'm
returning null same with if things are
done loading I'm returning null or
there's no product selected when I
return null on extension it just means
don't draw the extension so that's how I
can just Escape early not actually draw
anything finally I've got my product I'm
just grabbing my images title and
variance I am getting my image URL I'm
also providing a default here and then
I'm just using my checkout components
I've got my image I've got my product
title I've got my price and then I have
my ADD button here the interesting part
about the add button is in on press I am
using that apply cart lines change
function that came from the hook I am
adding a cart line I'm just adding my
variant I'm setting it to a quantity of
one and that is that if I do have an
error I am going to go ahead and show
that error as well as log it so that is
the endtoend app build we've already
gone through the demo and we've seen
that it does indeed work I can also go
ahead and deploy my extension let's walk
through this really quickly I'm going to
go ahead and
stop Shopify does host all of your
extensions so I can just go yarn
deploy
this will actually push my extension
code to
Shopify in this case include Shopify app
toml configuration on deploy it doesn't
really matter what you pick Gadget is
going to manage your Shopify connection
anyways and how that app is defined in
terms of Scopes so it doesn't really
matter if you push or don't push I'm
just going to select yes and I will
release my extension as a new
version and now if I go ahead into my
store let's
go to
settings check
out
customize and this is my checkout editor
I can go to add app Block and I see this
is my app Block I can click on it it is
added to my page I'm just going to go
back here I can actually hover and I can
drag this around if I want if I want to
move it in different places now it's
down at the bottom here I can move it to
my order summary maybe I want it right
up here uh that looks good to me if I'm
with this location I can press save and
I want to actually go visit my
store if I just go to my store here and
run through a quick
checkout oh there's already some things
in my cart I'm going to remove the
oxygen snowboard and check out and I can
see there we go my Dev command isn't
running so this is actually my deployed
extension in my checkout and I can go
ahead and add it to my card that was our
end to end app tutorial if you have any
questions you can check out our written
tutorial or ask us questions in our
developer Discord we're always hanging
around and happy to help until next time
I hope we keep building more on coding
less with Gadget
원문 자막 펼치기
WEBVTT Kind: captions Language: en 00:00:00.440 --> 00:00:01.790 align:start position:0% I'm<00:00:00.520><c> going</c><00:00:00.640><c> to</c><00:00:00.760><c> show</c><00:00:00.960><c> you</c><00:00:01.160><c> how</c><00:00:01.360><c> you</c><00:00:01.439><c> can</c><00:00:01.599><c> use</c> 00:00:01.790 --> 00:00:01.800 align:start position:0% I'm going to show you how you can use 00:00:01.800 --> 00:00:04.590 align:start position:0% I'm going to show you how you can use Shop's<00:00:02.360><c> checkout</c><00:00:02.760><c> UI</c><00:00:03.120><c> extensions</c><00:00:03.679><c> and</c><00:00:04.000><c> Gadget</c> 00:00:04.590 --> 00:00:04.600 align:start position:0% Shop's checkout UI extensions and Gadget 00:00:04.600 --> 00:00:07.110 align:start position:0% Shop's checkout UI extensions and Gadget to<00:00:04.759><c> build</c><00:00:05.000><c> a</c><00:00:05.160><c> full</c><00:00:05.480><c> stack</c><00:00:06.319><c> pre-</c><00:00:06.640><c> purchase</c> 00:00:07.110 --> 00:00:07.120 align:start position:0% to build a full stack pre- purchase 00:00:07.120 --> 00:00:10.310 align:start position:0% to build a full stack pre- purchase product<00:00:07.560><c> offer</c><00:00:08.000><c> application</c><00:00:08.679><c> in</c><00:00:08.960><c> under</c><00:00:09.360><c> 25</c> 00:00:10.310 --> 00:00:10.320 align:start position:0% product offer application in under 25 00:00:10.320 --> 00:00:12.070 align:start position:0% product offer application in under 25 minutes<00:00:11.320><c> I'm</c><00:00:11.400><c> going</c><00:00:11.519><c> to</c><00:00:11.639><c> get</c><00:00:11.759><c> started</c> 00:00:12.070 --> 00:00:12.080 align:start position:0% minutes I'm going to get started 00:00:12.080 --> 00:00:14.629 align:start position:0% minutes I'm going to get started building<00:00:12.480><c> my</c><00:00:12.759><c> custom</c><00:00:13.280><c> pre-</c><00:00:13.599><c> purchase</c><00:00:14.120><c> offer</c> 00:00:14.629 --> 00:00:14.639 align:start position:0% building my custom pre- purchase offer 00:00:14.639 --> 00:00:17.910 align:start position:0% building my custom pre- purchase offer application<00:00:15.480><c> for</c><00:00:15.799><c> my</c><00:00:16.000><c> shop</c><00:00:16.279><c> by</c><00:00:16.720><c> checkout</c><00:00:17.720><c> I've</c> 00:00:17.910 --> 00:00:17.920 align:start position:0% application for my shop by checkout I've 00:00:17.920 --> 00:00:30.070 align:start position:0% application for my shop by checkout I've gone<00:00:18.119><c> to</c> 00:00:30.070 --> 00:00:30.080 align:start position:0% 00:00:30.080 --> 00:00:32.950 align:start position:0% main<00:00:30.279><c> for</c><00:00:30.480><c> my</c><00:00:30.679><c> app</c><00:00:30.920><c> I'll</c><00:00:31.039><c> just</c><00:00:31.199><c> call</c><00:00:31.359><c> this</c><00:00:31.960><c> pre</c> 00:00:32.950 --> 00:00:32.960 align:start position:0% main for my app I'll just call this pre 00:00:32.960 --> 00:00:36.510 align:start position:0% main for my app I'll just call this pre purchase<00:00:33.960><c> V1</c><00:00:34.960><c> tutorial</c><00:00:35.600><c> and</c><00:00:35.719><c> I'm</c><00:00:35.840><c> using</c><00:00:36.079><c> V1</c> 00:00:36.510 --> 00:00:36.520 align:start position:0% purchase V1 tutorial and I'm using V1 00:00:36.520 --> 00:00:37.790 align:start position:0% purchase V1 tutorial and I'm using V1 because<00:00:36.640><c> we're</c><00:00:36.760><c> on</c><00:00:37.000><c> Gadget</c><00:00:37.320><c> framework</c> 00:00:37.790 --> 00:00:37.800 align:start position:0% because we're on Gadget framework 00:00:37.800 --> 00:00:40.470 align:start position:0% because we're on Gadget framework version<00:00:38.239><c> one</c><00:00:38.559><c> now</c><00:00:39.480><c> and</c><00:00:39.600><c> when</c><00:00:39.760><c> I</c><00:00:39.920><c> create</c><00:00:40.280><c> this</c> 00:00:40.470 --> 00:00:40.480 align:start position:0% version one now and when I create this 00:00:40.480 --> 00:00:43.470 align:start position:0% version one now and when I create this app<00:00:40.800><c> I</c><00:00:41.000><c> get</c><00:00:41.320><c> my</c><00:00:41.800><c> hosted</c><00:00:42.160><c> and</c><00:00:42.399><c> scaled</c><00:00:42.879><c> postgress</c> 00:00:43.470 --> 00:00:43.480 align:start position:0% app I get my hosted and scaled postgress 00:00:43.480 --> 00:00:46.910 align:start position:0% app I get my hosted and scaled postgress database<00:00:44.440><c> my</c><00:00:44.719><c> serverless</c><00:00:45.360><c> node</c><00:00:45.760><c> backend</c><00:00:46.760><c> and</c> 00:00:46.910 --> 00:00:46.920 align:start position:0% database my serverless node backend and 00:00:46.920 --> 00:00:49.029 align:start position:0% database my serverless node backend and my<00:00:47.120><c> react</c><00:00:47.440><c> frontend</c><00:00:47.920><c> powered</c><00:00:48.199><c> by</c><00:00:48.360><c> V</c> 00:00:49.029 --> 00:00:49.039 align:start position:0% my react frontend powered by V 00:00:49.039 --> 00:00:51.069 align:start position:0% my react frontend powered by V everything<00:00:49.399><c> is</c><00:00:49.600><c> set</c><00:00:49.840><c> up</c><00:00:50.039><c> and</c><00:00:50.199><c> ready</c><00:00:50.399><c> to</c><00:00:50.600><c> go</c><00:00:50.960><c> the</c> 00:00:51.069 --> 00:00:51.079 align:start position:0% everything is set up and ready to go the 00:00:51.079 --> 00:00:52.310 align:start position:0% everything is set up and ready to go the first<00:00:51.239><c> thing</c><00:00:51.399><c> I'm</c><00:00:51.480><c> going</c><00:00:51.559><c> to</c><00:00:51.680><c> do</c><00:00:51.840><c> is</c><00:00:52.000><c> connect</c> 00:00:52.310 --> 00:00:52.320 align:start position:0% first thing I'm going to do is connect 00:00:52.320 --> 00:00:53.910 align:start position:0% first thing I'm going to do is connect to 00:00:53.910 --> 00:00:53.920 align:start position:0% to 00:00:53.920 --> 00:00:56.670 align:start position:0% to Shopify<00:00:54.920><c> now</c><00:00:55.239><c> because</c><00:00:55.760><c> I</c><00:00:55.960><c> want</c><00:00:56.440><c> app</c> 00:00:56.670 --> 00:00:56.680 align:start position:0% Shopify now because I want app 00:00:56.680 --> 00:00:58.150 align:start position:0% Shopify now because I want app extensions<00:00:57.160><c> I</c><00:00:57.239><c> want</c><00:00:57.359><c> to</c><00:00:57.480><c> check</c><00:00:57.680><c> out</c><00:00:57.840><c> UI</c> 00:00:58.150 --> 00:00:58.160 align:start position:0% extensions I want to check out UI 00:00:58.160 --> 00:01:00.270 align:start position:0% extensions I want to check out UI extension<00:00:58.519><c> for</c><00:00:58.680><c> that</c><00:00:58.840><c> pre-</c><00:00:59.120><c> purchase</c><00:00:59.440><c> offer</c><00:01:00.160><c> I</c> 00:01:00.270 --> 00:01:00.280 align:start position:0% extension for that pre- purchase offer I 00:01:00.280 --> 00:01:01.590 align:start position:0% extension for that pre- purchase offer I need<00:01:00.480><c> to</c><00:01:00.640><c> connect</c><00:01:00.879><c> through</c><00:01:01.039><c> the</c><00:01:01.199><c> partner</c> 00:01:01.590 --> 00:01:01.600 align:start position:0% need to connect through the partner 00:01:01.600 --> 00:01:04.310 align:start position:0% need to connect through the partner dashboard<00:01:02.519><c> so</c><00:01:02.680><c> I</c><00:01:02.760><c> can</c><00:01:02.920><c> go</c> 00:01:04.310 --> 00:01:04.320 align:start position:0% dashboard so I can go 00:01:04.320 --> 00:01:07.030 align:start position:0% dashboard so I can go ahead<00:01:05.320><c> go</c><00:01:05.479><c> to</c><00:01:05.640><c> my</c><00:01:05.799><c> partners</c><00:01:06.280><c> dashboard</c><00:01:06.760><c> I'm</c><00:01:06.880><c> on</c> 00:01:07.030 --> 00:01:07.040 align:start position:0% ahead go to my partners dashboard I'm on 00:01:07.040 --> 00:01:09.230 align:start position:0% ahead go to my partners dashboard I'm on the<00:01:07.200><c> apps</c><00:01:07.560><c> page</c><00:01:07.799><c> already</c><00:01:08.720><c> and</c><00:01:08.880><c> I'll</c><00:01:09.040><c> just</c> 00:01:09.230 --> 00:01:09.240 align:start position:0% the apps page already and I'll just 00:01:09.240 --> 00:01:10.950 align:start position:0% the apps page already and I'll just create<00:01:09.479><c> a</c><00:01:09.640><c> new</c><00:01:09.880><c> app</c><00:01:10.280><c> and</c><00:01:10.439><c> create</c><00:01:10.640><c> an</c><00:01:10.759><c> app</c> 00:01:10.950 --> 00:01:10.960 align:start position:0% create a new app and create an app 00:01:10.960 --> 00:01:12.830 align:start position:0% create a new app and create an app manually<00:01:11.799><c> and</c><00:01:11.960><c> I'll</c><00:01:12.119><c> give</c><00:01:12.320><c> this</c><00:01:12.479><c> the</c><00:01:12.600><c> same</c> 00:01:12.830 --> 00:01:12.840 align:start position:0% manually and I'll give this the same 00:01:12.840 --> 00:01:18.550 align:start position:0% manually and I'll give this the same name<00:01:13.240><c> pre</c><00:01:13.560><c> purchase</c><00:01:14.600><c> V1</c><00:01:16.080><c> tutorial</c> 00:01:18.550 --> 00:01:18.560 align:start position:0% name pre purchase V1 tutorial 00:01:18.560 --> 00:01:21.069 align:start position:0% name pre purchase V1 tutorial perfect<00:01:19.560><c> and</c><00:01:19.720><c> now</c><00:01:19.880><c> I</c><00:01:19.960><c> can</c><00:01:20.119><c> copy</c><00:01:20.400><c> my</c><00:01:20.520><c> client</c><00:01:20.840><c> ID</c> 00:01:21.069 --> 00:01:21.079 align:start position:0% perfect and now I can copy my client ID 00:01:21.079 --> 00:01:27.030 align:start position:0% perfect and now I can copy my client ID in<00:01:21.240><c> secret</c><00:01:21.920><c> back</c><00:01:22.119><c> to</c><00:01:22.360><c> my</c><00:01:22.640><c> Gadget</c> 00:01:27.030 --> 00:01:27.040 align:start position:0% 00:01:27.040 --> 00:01:29.550 align:start position:0% app<00:01:28.040><c> there's</c><00:01:28.320><c> my</c><00:01:28.479><c> secret</c><00:01:29.000><c> and</c><00:01:29.159><c> I'll</c><00:01:29.320><c> press</c> 00:01:29.550 --> 00:01:29.560 align:start position:0% app there's my secret and I'll press 00:01:29.560 --> 00:01:31.069 align:start position:0% app there's my secret and I'll press continue 00:01:31.069 --> 00:01:31.079 align:start position:0% continue 00:01:31.079 --> 00:01:33.510 align:start position:0% continue now<00:01:31.240><c> on</c><00:01:31.400><c> this</c><00:01:31.600><c> page</c><00:01:32.000><c> I</c><00:01:32.159><c> select</c><00:01:32.479><c> what</c><00:01:32.600><c> shopy</c><00:01:33.119><c> API</c> 00:01:33.510 --> 00:01:33.520 align:start position:0% now on this page I select what shopy API 00:01:33.520 --> 00:01:35.670 align:start position:0% now on this page I select what shopy API Scopes<00:01:33.840><c> and</c><00:01:33.960><c> data</c><00:01:34.240><c> models</c><00:01:34.640><c> I</c><00:01:34.720><c> want</c><00:01:34.840><c> to</c><00:01:35.159><c> include</c> 00:01:35.670 --> 00:01:35.680 align:start position:0% Scopes and data models I want to include 00:01:35.680 --> 00:01:38.550 align:start position:0% Scopes and data models I want to include in<00:01:35.880><c> my</c><00:01:36.119><c> app</c><00:01:37.040><c> I</c><00:01:37.159><c> want</c><00:01:37.280><c> to</c><00:01:37.399><c> be</c><00:01:37.520><c> able</c><00:01:37.680><c> to</c><00:01:37.920><c> read</c><00:01:38.320><c> my</c> 00:01:38.550 --> 00:01:38.560 align:start position:0% in my app I want to be able to read my 00:01:38.560 --> 00:01:41.149 align:start position:0% in my app I want to be able to read my existing<00:01:39.000><c> products</c><00:01:39.399><c> to</c><00:01:39.600><c> my</c><00:01:39.840><c> Gadget</c><00:01:40.200><c> database</c> 00:01:41.149 --> 00:01:41.159 align:start position:0% existing products to my Gadget database 00:01:41.159 --> 00:01:42.789 align:start position:0% existing products to my Gadget database and<00:01:41.280><c> then</c><00:01:41.399><c> I'll</c><00:01:41.600><c> allow</c><00:01:41.840><c> Merchants</c><00:01:42.280><c> to</c><00:01:42.479><c> select</c> 00:01:42.789 --> 00:01:42.799 align:start position:0% and then I'll allow Merchants to select 00:01:42.799 --> 00:01:44.990 align:start position:0% and then I'll allow Merchants to select one<00:01:42.920><c> of</c><00:01:43.000><c> the</c><00:01:43.200><c> products</c><00:01:43.799><c> in</c><00:01:44.000><c> my</c><00:01:44.240><c> embedded</c><00:01:44.640><c> admin</c> 00:01:44.990 --> 00:01:45.000 align:start position:0% one of the products in my embedded admin 00:01:45.000 --> 00:01:47.310 align:start position:0% one of the products in my embedded admin app<00:01:45.200><c> to</c><00:01:45.360><c> be</c><00:01:45.520><c> offered</c><00:01:45.880><c> in</c><00:01:46.040><c> the</c><00:01:46.200><c> checkout</c><00:01:47.079><c> so</c><00:01:47.240><c> I'm</c> 00:01:47.310 --> 00:01:47.320 align:start position:0% app to be offered in the checkout so I'm 00:01:47.320 --> 00:01:49.069 align:start position:0% app to be offered in the checkout so I'm going<00:01:47.399><c> to</c><00:01:47.560><c> go</c><00:01:47.680><c> ahead</c><00:01:48.000><c> and</c><00:01:48.159><c> click</c><00:01:48.439><c> the</c><00:01:48.680><c> read</c> 00:01:49.069 --> 00:01:49.079 align:start position:0% going to go ahead and click the read 00:01:49.079 --> 00:01:50.950 align:start position:0% going to go ahead and click the read product<00:01:49.399><c> scope</c><00:01:49.759><c> so</c><00:01:49.920><c> I</c><00:01:50.000><c> can</c><00:01:50.240><c> get</c><00:01:50.439><c> my</c><00:01:50.640><c> product</c> 00:01:50.950 --> 00:01:50.960 align:start position:0% product scope so I can get my product 00:01:50.960 --> 00:01:53.389 align:start position:0% product scope so I can get my product data<00:01:51.240><c> into</c><00:01:51.439><c> my</c><00:01:51.600><c> Gadget</c><00:01:52.079><c> database</c><00:01:53.079><c> and</c><00:01:53.240><c> I'll</c> 00:01:53.389 --> 00:01:53.399 align:start position:0% data into my Gadget database and I'll 00:01:53.399 --> 00:01:55.230 align:start position:0% data into my Gadget database and I'll select<00:01:53.719><c> the</c><00:01:54.000><c> product</c><00:01:54.320><c> data</c><00:01:54.600><c> model</c><00:01:54.880><c> now</c><00:01:55.000><c> I</c><00:01:55.119><c> get</c> 00:01:55.230 --> 00:01:55.240 align:start position:0% select the product data model now I get 00:01:55.240 --> 00:01:58.389 align:start position:0% select the product data model now I get a<00:01:55.439><c> setup</c><00:01:55.880><c> summary</c><00:01:56.479><c> off</c><00:01:56.680><c> to</c><00:01:56.840><c> the</c><00:01:57.039><c> right</c><00:01:57.399><c> here</c> 00:01:58.389 --> 00:01:58.399 align:start position:0% a setup summary off to the right here 00:01:58.399 --> 00:01:59.990 align:start position:0% a setup summary off to the right here this<00:01:58.520><c> is</c><00:01:58.680><c> covering</c><00:01:59.039><c> a</c><00:01:59.159><c> couple</c><00:01:59.399><c> things</c><00:01:59.600><c> that</c> 00:01:59.990 --> 00:02:00.000 align:start position:0% this is covering a couple things that 00:02:00.000 --> 00:02:01.310 align:start position:0% this is covering a couple things that getting<00:02:00.240><c> with</c><00:02:00.360><c> the</c><00:02:00.520><c> gadget</c><00:02:00.799><c> connection</c><00:02:01.159><c> out</c> 00:02:01.310 --> 00:02:01.320 align:start position:0% getting with the gadget connection out 00:02:01.320 --> 00:02:03.670 align:start position:0% getting with the gadget connection out of<00:02:01.439><c> the</c><00:02:01.600><c> box</c><00:02:02.320><c> the</c><00:02:02.479><c> first</c><00:02:02.880><c> is</c><00:02:03.200><c> web</c><00:02:03.479><c> hook</c> 00:02:03.670 --> 00:02:03.680 align:start position:0% of the box the first is web hook 00:02:03.680 --> 00:02:06.029 align:start position:0% of the box the first is web hook subscriptions<00:02:04.280><c> to</c><00:02:04.520><c> your</c><00:02:04.680><c> Shopify</c><00:02:05.240><c> web</c><00:02:05.479><c> hooks</c> 00:02:06.029 --> 00:02:06.039 align:start position:0% subscriptions to your Shopify web hooks 00:02:06.039 --> 00:02:08.469 align:start position:0% subscriptions to your Shopify web hooks so<00:02:06.200><c> I</c><00:02:06.320><c> can</c><00:02:06.439><c> see</c><00:02:07.079><c> access</c><00:02:07.399><c> to</c><00:02:07.600><c> web</c><00:02:07.840><c> hook</c><00:02:08.039><c> triggers</c> 00:02:08.469 --> 00:02:08.479 align:start position:0% so I can see access to web hook triggers 00:02:08.479 --> 00:02:10.190 align:start position:0% so I can see access to web hook triggers that's<00:02:08.640><c> going</c><00:02:08.759><c> to</c><00:02:08.920><c> include</c><00:02:09.319><c> my</c><00:02:09.560><c> product</c><00:02:09.920><c> web</c> 00:02:10.190 --> 00:02:10.200 align:start position:0% that's going to include my product web 00:02:10.200 --> 00:02:12.869 align:start position:0% that's going to include my product web hooks<00:02:10.840><c> so</c><00:02:11.280><c> I</c><00:02:11.400><c> am</c><00:02:11.760><c> automatically</c><00:02:12.360><c> going</c><00:02:12.480><c> to</c><00:02:12.640><c> be</c> 00:02:12.869 --> 00:02:12.879 align:start position:0% hooks so I am automatically going to be 00:02:12.879 --> 00:02:15.229 align:start position:0% hooks so I am automatically going to be subscribed<00:02:13.680><c> to</c><00:02:14.040><c> my</c><00:02:14.239><c> product</c><00:02:14.560><c> web</c><00:02:14.800><c> hooks</c><00:02:15.000><c> in</c> 00:02:15.229 --> 00:02:15.239 align:start position:0% subscribed to my product web hooks in 00:02:15.239 --> 00:02:17.309 align:start position:0% subscribed to my product web hooks in Shopify<00:02:16.239><c> which</c><00:02:16.360><c> means</c><00:02:16.640><c> that</c><00:02:16.840><c> anytime</c><00:02:17.200><c> a</c> 00:02:17.309 --> 00:02:17.319 align:start position:0% Shopify which means that anytime a 00:02:17.319 --> 00:02:19.110 align:start position:0% Shopify which means that anytime a merchant<00:02:17.640><c> changes</c><00:02:18.080><c> a</c><00:02:18.400><c> product</c><00:02:18.840><c> in</c><00:02:19.000><c> their</c> 00:02:19.110 --> 00:02:19.120 align:start position:0% merchant changes a product in their 00:02:19.120 --> 00:02:21.710 align:start position:0% merchant changes a product in their store<00:02:19.519><c> admin</c><00:02:20.280><c> the</c><00:02:20.440><c> web</c><00:02:20.720><c> hook</c><00:02:20.879><c> will</c><00:02:21.040><c> fire</c> 00:02:21.710 --> 00:02:21.720 align:start position:0% store admin the web hook will fire 00:02:21.720 --> 00:02:23.670 align:start position:0% store admin the web hook will fire Gadget<00:02:22.120><c> will</c><00:02:22.360><c> stay</c><00:02:22.760><c> up</c> 00:02:23.670 --> 00:02:23.680 align:start position:0% Gadget will stay up 00:02:23.680 --> 00:02:26.550 align:start position:0% Gadget will stay up toate<00:02:24.680><c> I</c><00:02:24.760><c> can</c><00:02:24.920><c> also</c><00:02:25.120><c> see</c><00:02:25.400><c> that</c><00:02:25.680><c> I</c><00:02:25.800><c> am</c><00:02:26.120><c> going</c><00:02:26.319><c> to</c> 00:02:26.550 --> 00:02:26.560 align:start position:0% toate I can also see that I am going to 00:02:26.560 --> 00:02:29.150 align:start position:0% toate I can also see that I am going to have<00:02:26.760><c> the</c><00:02:26.920><c> read</c><00:02:27.319><c> products</c><00:02:27.879><c> access</c><00:02:28.239><c> scope</c> 00:02:29.150 --> 00:02:29.160 align:start position:0% have the read products access scope 00:02:29.160 --> 00:02:30.710 align:start position:0% have the read products access scope which<00:02:29.280><c> is</c><00:02:29.519><c> good</c> 00:02:30.710 --> 00:02:30.720 align:start position:0% which is good 00:02:30.720 --> 00:02:32.750 align:start position:0% which is good and<00:02:31.040><c> I</c><00:02:31.160><c> see</c><00:02:31.560><c> the</c><00:02:31.840><c> data</c><00:02:32.120><c> models</c><00:02:32.440><c> we're</c><00:02:32.560><c> going</c><00:02:32.680><c> to</c> 00:02:32.750 --> 00:02:32.760 align:start position:0% and I see the data models we're going to 00:02:32.760 --> 00:02:34.630 align:start position:0% and I see the data models we're going to be<00:02:32.840><c> syncing</c><00:02:33.280><c> into</c><00:02:33.519><c> my</c><00:02:33.720><c> Gadget</c><00:02:34.080><c> database</c><00:02:34.519><c> and</c> 00:02:34.630 --> 00:02:34.640 align:start position:0% be syncing into my Gadget database and 00:02:34.640 --> 00:02:36.949 align:start position:0% be syncing into my Gadget database and that<00:02:34.720><c> includes</c><00:02:35.080><c> my</c><00:02:35.200><c> shopy</c><00:02:35.840><c> product</c><00:02:36.200><c> model</c><00:02:36.879><c> as</c> 00:02:36.949 --> 00:02:36.959 align:start position:0% that includes my shopy product model as 00:02:36.959 --> 00:02:38.949 align:start position:0% that includes my shopy product model as well<00:02:37.120><c> as</c><00:02:37.200><c> the</c><00:02:37.319><c> shop</c><00:02:37.519><c> and</c><00:02:37.680><c> gdpr</c><00:02:38.239><c> request</c><00:02:38.560><c> models</c> 00:02:38.949 --> 00:02:38.959 align:start position:0% well as the shop and gdpr request models 00:02:38.959 --> 00:02:41.070 align:start position:0% well as the shop and gdpr request models which<00:02:39.080><c> are</c><00:02:39.360><c> added</c><00:02:39.760><c> every</c><00:02:40.080><c> time</c><00:02:40.319><c> you</c><00:02:40.599><c> connect</c> 00:02:41.070 --> 00:02:41.080 align:start position:0% which are added every time you connect 00:02:41.080 --> 00:02:44.030 align:start position:0% which are added every time you connect to<00:02:41.360><c> Shopify</c><00:02:41.959><c> through</c><00:02:42.120><c> the</c><00:02:42.239><c> partner</c><00:02:43.040><c> dashboard</c> 00:02:44.030 --> 00:02:44.040 align:start position:0% to Shopify through the partner dashboard 00:02:44.040 --> 00:02:45.309 align:start position:0% to Shopify through the partner dashboard now<00:02:44.200><c> the</c><00:02:44.319><c> other</c><00:02:44.519><c> thing</c><00:02:44.640><c> you're</c><00:02:44.840><c> getting</c> 00:02:45.309 --> 00:02:45.319 align:start position:0% now the other thing you're getting 00:02:45.319 --> 00:02:47.110 align:start position:0% now the other thing you're getting through<00:02:45.560><c> this</c><00:02:45.720><c> connection</c><00:02:46.200><c> is</c><00:02:46.319><c> a</c><00:02:46.560><c> historical</c> 00:02:47.110 --> 00:02:47.120 align:start position:0% through this connection is a historical 00:02:47.120 --> 00:02:49.309 align:start position:0% through this connection is a historical data<00:02:47.400><c> sync</c><00:02:48.040><c> so</c><00:02:48.239><c> not</c><00:02:48.400><c> only</c><00:02:48.640><c> will</c><00:02:48.800><c> you</c><00:02:48.959><c> be</c><00:02:49.080><c> able</c> 00:02:49.309 --> 00:02:49.319 align:start position:0% data sync so not only will you be able 00:02:49.319 --> 00:02:52.990 align:start position:0% data sync so not only will you be able to<00:02:50.080><c> react</c><00:02:50.720><c> to</c><00:02:51.280><c> any</c><00:02:51.599><c> product</c><00:02:51.959><c> web</c><00:02:52.239><c> hooks</c><00:02:52.879><c> but</c> 00:02:52.990 --> 00:02:53.000 align:start position:0% to react to any product web hooks but 00:02:53.000 --> 00:02:54.509 align:start position:0% to react to any product web hooks but you'll<00:02:53.200><c> be</c><00:02:53.319><c> able</c><00:02:53.480><c> to</c><00:02:53.560><c> sync</c><00:02:53.879><c> your</c><00:02:54.080><c> existing</c> 00:02:54.509 --> 00:02:54.519 align:start position:0% you'll be able to sync your existing 00:02:54.519 --> 00:02:56.630 align:start position:0% you'll be able to sync your existing products<00:02:54.879><c> into</c><00:02:55.080><c> your</c><00:02:55.239><c> database</c><00:02:55.760><c> as</c><00:02:55.920><c> well</c><00:02:56.440><c> and</c> 00:02:56.630 --> 00:02:56.640 align:start position:0% products into your database as well and 00:02:56.640 --> 00:02:59.390 align:start position:0% products into your database as well and that's<00:02:56.959><c> what</c><00:02:57.720><c> is</c><00:02:57.920><c> being</c><00:02:58.239><c> highlighted</c><00:02:58.920><c> by</c><00:02:59.120><c> this</c> 00:02:59.390 --> 00:02:59.400 align:start position:0% that's what is being highlighted by this 00:02:59.400 --> 00:03:03.070 align:start position:0% that's what is being highlighted by this model<00:03:00.080><c> syncing</c><00:03:00.640><c> data</c><00:03:01.640><c> section</c><00:03:02.440><c> so</c><00:03:02.640><c> I'm</c><00:03:02.800><c> happy</c> 00:03:03.070 --> 00:03:03.080 align:start position:0% model syncing data section so I'm happy 00:03:03.080 --> 00:03:04.430 align:start position:0% model syncing data section so I'm happy with<00:03:03.280><c> this</c><00:03:03.760><c> I'm</c><00:03:03.840><c> going</c><00:03:03.959><c> to</c><00:03:04.080><c> go</c><00:03:04.159><c> ahead</c><00:03:04.319><c> and</c> 00:03:04.430 --> 00:03:04.440 align:start position:0% with this I'm going to go ahead and 00:03:04.440 --> 00:03:05.589 align:start position:0% with this I'm going to go ahead and press 00:03:05.589 --> 00:03:05.599 align:start position:0% press 00:03:05.599 --> 00:03:07.910 align:start position:0% press confirm<00:03:06.599><c> now</c><00:03:06.720><c> I</c><00:03:06.799><c> need</c><00:03:06.959><c> to</c><00:03:07.120><c> go</c><00:03:07.239><c> ahead</c><00:03:07.480><c> and</c><00:03:07.640><c> copy</c> 00:03:07.910 --> 00:03:07.920 align:start position:0% confirm now I need to go ahead and copy 00:03:07.920 --> 00:03:10.030 align:start position:0% confirm now I need to go ahead and copy my<00:03:08.080><c> app</c><00:03:08.280><c> URL</c><00:03:08.599><c> and</c><00:03:08.720><c> redirection</c><00:03:09.280><c> URL</c><00:03:09.760><c> back</c><00:03:09.920><c> to</c> 00:03:10.030 --> 00:03:10.040 align:start position:0% my app URL and redirection URL back to 00:03:10.040 --> 00:03:12.789 align:start position:0% my app URL and redirection URL back to my<00:03:10.200><c> partner's</c><00:03:10.720><c> app</c><00:03:11.159><c> so</c><00:03:11.280><c> I'll</c><00:03:11.480><c> do</c><00:03:11.720><c> that</c><00:03:12.480><c> go</c><00:03:12.680><c> back</c> 00:03:12.789 --> 00:03:12.799 align:start position:0% my partner's app so I'll do that go back 00:03:12.799 --> 00:03:15.670 align:start position:0% my partner's app so I'll do that go back to<00:03:12.959><c> my</c><00:03:13.120><c> partner</c><00:03:13.640><c> go</c><00:03:13.840><c> to</c> 00:03:15.670 --> 00:03:15.680 align:start position:0% to my partner go to 00:03:15.680 --> 00:03:18.430 align:start position:0% to my partner go to configuration<00:03:16.680><c> paste</c><00:03:16.959><c> my</c><00:03:17.120><c> app</c><00:03:17.319><c> URL</c><00:03:18.159><c> and</c><00:03:18.280><c> I'll</c> 00:03:18.430 --> 00:03:18.440 align:start position:0% configuration paste my app URL and I'll 00:03:18.440 --> 00:03:21.830 align:start position:0% configuration paste my app URL and I'll do<00:03:18.599><c> the</c><00:03:18.720><c> same</c><00:03:18.879><c> for</c><00:03:19.040><c> my</c><00:03:19.159><c> redirection</c> 00:03:21.830 --> 00:03:21.840 align:start position:0% 00:03:21.840 --> 00:03:25.789 align:start position:0% URL<00:03:22.840><c> and</c><00:03:23.640><c> I'm</c><00:03:23.920><c> good</c><00:03:24.200><c> I'll</c><00:03:24.400><c> press</c><00:03:24.640><c> save</c><00:03:24.840><c> and</c> 00:03:25.789 --> 00:03:25.799 align:start position:0% URL and I'm good I'll press save and 00:03:25.799 --> 00:03:28.030 align:start position:0% URL and I'm good I'll press save and release<00:03:26.799><c> now</c><00:03:26.959><c> I'm</c><00:03:27.080><c> ready</c><00:03:27.239><c> to</c><00:03:27.400><c> install</c><00:03:27.720><c> my</c><00:03:27.879><c> app</c> 00:03:28.030 --> 00:03:28.040 align:start position:0% release now I'm ready to install my app 00:03:28.040 --> 00:03:29.630 align:start position:0% release now I'm ready to install my app on<00:03:28.200><c> my</c><00:03:28.319><c> development</c><00:03:28.760><c> store</c><00:03:29.120><c> so</c><00:03:29.239><c> I</c><00:03:29.319><c> can</c><00:03:29.400><c> go</c><00:03:29.519><c> back</c> 00:03:29.630 --> 00:03:29.640 align:start position:0% on my development store so I can go back 00:03:29.640 --> 00:03:32.070 align:start position:0% on my development store so I can go back to<00:03:29.840><c> my</c><00:03:30.000><c> overview</c><00:03:31.000><c> in</c><00:03:31.159><c> my</c><00:03:31.360><c> partner</c><00:03:31.680><c> dashboard</c> 00:03:32.070 --> 00:03:32.080 align:start position:0% to my overview in my partner dashboard 00:03:32.080 --> 00:03:35.670 align:start position:0% to my overview in my partner dashboard for<00:03:32.280><c> my</c><00:03:32.560><c> app</c><00:03:33.560><c> select</c><00:03:33.920><c> a</c><00:03:34.120><c> store</c><00:03:34.920><c> and</c><00:03:35.159><c> I</c><00:03:35.239><c> will</c><00:03:35.439><c> do</c> 00:03:35.670 --> 00:03:35.680 align:start position:0% for my app select a store and I will do 00:03:35.680 --> 00:03:39.350 align:start position:0% for my app select a store and I will do my<00:03:36.000><c> classic</c><00:03:36.560><c> test</c><00:03:36.959><c> with</c><00:03:37.239><c> sample</c><00:03:37.760><c> data</c><00:03:38.360><c> store</c> 00:03:39.350 --> 00:03:39.360 align:start position:0% my classic test with sample data store 00:03:39.360 --> 00:03:40.789 align:start position:0% my classic test with sample data store so<00:03:39.519><c> I</c><00:03:39.599><c> haven't</c><00:03:39.760><c> written</c><00:03:39.959><c> a</c><00:03:40.080><c> line</c><00:03:40.239><c> of</c><00:03:40.400><c> code</c><00:03:40.640><c> yet</c> 00:03:40.789 --> 00:03:40.799 align:start position:0% so I haven't written a line of code yet 00:03:40.799 --> 00:03:43.070 align:start position:0% so I haven't written a line of code yet no<00:03:41.080><c> off</c><00:03:41.400><c> code</c><00:03:41.920><c> Gadget</c><00:03:42.319><c> is</c><00:03:42.480><c> going</c><00:03:42.560><c> to</c><00:03:42.720><c> handle</c> 00:03:43.070 --> 00:03:43.080 align:start position:0% no off code Gadget is going to handle 00:03:43.080 --> 00:03:45.110 align:start position:0% no off code Gadget is going to handle all<00:03:43.200><c> of</c><00:03:43.400><c> that</c><00:03:43.560><c> for</c><00:03:43.799><c> me</c><00:03:44.519><c> I</c><00:03:44.599><c> can</c><00:03:44.720><c> go</c><00:03:44.840><c> ahead</c><00:03:45.000><c> and</c> 00:03:45.110 --> 00:03:45.120 align:start position:0% all of that for me I can go ahead and 00:03:45.120 --> 00:03:47.910 align:start position:0% all of that for me I can go ahead and press<00:03:45.360><c> install</c><00:03:45.920><c> right</c><00:03:46.239><c> away</c><00:03:47.239><c> gadget's</c><00:03:47.720><c> also</c> 00:03:47.910 --> 00:03:47.920 align:start position:0% press install right away gadget's also 00:03:47.920 --> 00:03:50.589 align:start position:0% press install right away gadget's also going<00:03:48.040><c> to</c><00:03:48.239><c> handle</c><00:03:49.200><c> Shopify</c><00:03:49.879><c> Polaris</c> 00:03:50.589 --> 00:03:50.599 align:start position:0% going to handle Shopify Polaris 00:03:50.599 --> 00:03:52.030 align:start position:0% going to handle Shopify Polaris installation<00:03:51.239><c> that's</c><00:03:51.400><c> their</c><00:03:51.599><c> component</c> 00:03:52.030 --> 00:03:52.040 align:start position:0% installation that's their component 00:03:52.040 --> 00:03:54.990 align:start position:0% installation that's their component Library<00:03:52.920><c> it'll</c><00:03:53.239><c> manage</c><00:03:53.799><c> app</c><00:03:54.040><c> Bridge</c><00:03:54.480><c> setup</c> 00:03:54.990 --> 00:03:55.000 align:start position:0% Library it'll manage app Bridge setup 00:03:55.000 --> 00:03:56.470 align:start position:0% Library it'll manage app Bridge setup for<00:03:55.200><c> me</c><00:03:55.360><c> so</c><00:03:55.519><c> I</c><00:03:55.599><c> don't</c><00:03:55.720><c> need</c><00:03:55.879><c> to</c><00:03:56.040><c> touch</c><00:03:56.280><c> app</c> 00:03:56.470 --> 00:03:56.480 align:start position:0% for me so I don't need to touch app 00:03:56.480 --> 00:03:58.550 align:start position:0% for me so I don't need to touch app Bridge<00:03:56.879><c> manually</c><00:03:57.879><c> and</c><00:03:58.000><c> it'll</c><00:03:58.280><c> handle</c> 00:03:58.550 --> 00:03:58.560 align:start position:0% Bridge manually and it'll handle 00:03:58.560 --> 00:04:02.110 align:start position:0% Bridge manually and it'll handle shopify's<00:03:59.360><c> session</c><00:04:00.040><c> tokens</c><00:04:00.680><c> so</c><00:04:00.959><c> all</c><00:04:01.079><c> of</c><00:04:01.319><c> that</c> 00:04:02.110 --> 00:04:02.120 align:start position:0% shopify's session tokens so all of that 00:04:02.120 --> 00:04:04.589 align:start position:0% shopify's session tokens so all of that handled<00:04:02.519><c> for</c><00:04:02.760><c> me</c><00:04:03.040><c> by</c><00:04:03.360><c> Gadget</c><00:04:04.280><c> this</c><00:04:04.400><c> is</c> 00:04:04.589 --> 00:04:04.599 align:start position:0% handled for me by Gadget this is 00:04:04.599 --> 00:04:06.550 align:start position:0% handled for me by Gadget this is actually<00:04:04.920><c> my</c><00:04:05.079><c> embedded</c><00:04:05.560><c> react</c><00:04:06.000><c> app</c><00:04:06.239><c> I</c><00:04:06.280><c> can</c><00:04:06.400><c> see</c> 00:04:06.550 --> 00:04:06.560 align:start position:0% actually my embedded react app I can see 00:04:06.560 --> 00:04:08.670 align:start position:0% actually my embedded react app I can see that<00:04:06.720><c> this</c><00:04:06.840><c> page</c><00:04:07.040><c> is</c><00:04:07.239><c> powered</c><00:04:07.599><c> by</c><00:04:07.760><c> roach</c> 00:04:08.670 --> 00:04:08.680 align:start position:0% that this page is powered by roach 00:04:08.680 --> 00:04:12.110 align:start position:0% that this page is powered by roach index.<00:04:09.680><c> jsx</c><00:04:10.680><c> and</c><00:04:10.840><c> if</c><00:04:10.920><c> I</c><00:04:11.079><c> go</c><00:04:11.239><c> back</c><00:04:11.400><c> to</c><00:04:11.560><c> my</c><00:04:11.760><c> Gadget</c> 00:04:12.110 --> 00:04:12.120 align:start position:0% index. jsx and if I go back to my Gadget 00:04:12.120 --> 00:04:14.710 align:start position:0% index. jsx and if I go back to my Gadget app<00:04:13.040><c> I</c><00:04:13.120><c> can</c><00:04:13.280><c> see</c><00:04:13.599><c> I'm</c><00:04:13.840><c> successfully</c><00:04:14.360><c> connected</c> 00:04:14.710 --> 00:04:14.720 align:start position:0% app I can see I'm successfully connected 00:04:14.720 --> 00:04:17.110 align:start position:0% app I can see I'm successfully connected to<00:04:14.879><c> Shopify</c><00:04:15.439><c> so</c><00:04:15.560><c> that's</c> 00:04:17.110 --> 00:04:17.120 align:start position:0% to Shopify so that's 00:04:17.120 --> 00:04:19.349 align:start position:0% to Shopify so that's fantastic<00:04:18.120><c> I</c><00:04:18.280><c> am</c><00:04:18.440><c> going</c><00:04:18.560><c> to</c><00:04:18.799><c> go</c><00:04:18.919><c> ahead</c><00:04:19.160><c> and</c> 00:04:19.349 --> 00:04:19.359 align:start position:0% fantastic I am going to go ahead and 00:04:19.359 --> 00:04:21.909 align:start position:0% fantastic I am going to go ahead and actually<00:04:19.639><c> run</c><00:04:19.919><c> my</c><00:04:20.120><c> historical</c><00:04:20.560><c> data</c><00:04:20.840><c> sync</c><00:04:21.160><c> now</c> 00:04:21.909 --> 00:04:21.919 align:start position:0% actually run my historical data sync now 00:04:21.919 --> 00:04:24.710 align:start position:0% actually run my historical data sync now so<00:04:22.520><c> I'm</c><00:04:22.680><c> going</c><00:04:22.759><c> to</c><00:04:23.000><c> go</c><00:04:23.560><c> in</c><00:04:23.800><c> this</c><00:04:23.960><c> Connected</c><00:04:24.440><c> app</c> 00:04:24.710 --> 00:04:24.720 align:start position:0% so I'm going to go in this Connected app 00:04:24.720 --> 00:04:26.430 align:start position:0% so I'm going to go in this Connected app section<00:04:25.280><c> to</c><00:04:25.560><c> my</c> 00:04:26.430 --> 00:04:26.440 align:start position:0% section to my 00:04:26.440 --> 00:04:31.110 align:start position:0% section to my installs<00:04:27.440><c> I</c><00:04:27.560><c> can</c><00:04:27.720><c> see</c><00:04:28.360><c> here's</c><00:04:28.680><c> my</c><00:04:28.880><c> shop</c><00:04:29.960><c> my</c><00:04:30.240><c> API</c> 00:04:31.110 --> 00:04:31.120 align:start position:0% installs I can see here's my shop my API 00:04:31.120 --> 00:04:33.590 align:start position:0% installs I can see here's my shop my API Scopes<00:04:31.639><c> have</c><00:04:31.800><c> been</c><00:04:31.960><c> granted</c><00:04:32.600><c> access</c><00:04:33.199><c> my</c><00:04:33.360><c> web</c> 00:04:33.590 --> 00:04:33.600 align:start position:0% Scopes have been granted access my web 00:04:33.600 --> 00:04:35.550 align:start position:0% Scopes have been granted access my web hooks<00:04:33.880><c> are</c><00:04:34.120><c> registered</c><00:04:34.880><c> I</c><00:04:34.960><c> will</c><00:04:35.199><c> press</c><00:04:35.400><c> the</c> 00:04:35.550 --> 00:04:35.560 align:start position:0% hooks are registered I will press the 00:04:35.560 --> 00:04:36.870 align:start position:0% hooks are registered I will press the sync<00:04:35.880><c> button</c><00:04:36.160><c> this</c><00:04:36.240><c> is</c><00:04:36.360><c> going</c><00:04:36.440><c> to</c><00:04:36.520><c> bring</c><00:04:36.759><c> all</c> 00:04:36.870 --> 00:04:36.880 align:start position:0% sync button this is going to bring all 00:04:36.880 --> 00:04:39.350 align:start position:0% sync button this is going to bring all of<00:04:37.039><c> my</c><00:04:37.240><c> products</c><00:04:38.160><c> from</c><00:04:38.639><c> this</c><00:04:38.880><c> development</c> 00:04:39.350 --> 00:04:39.360 align:start position:0% of my products from this development 00:04:39.360 --> 00:04:41.469 align:start position:0% of my products from this development store<00:04:39.759><c> test</c><00:04:40.039><c> with</c><00:04:40.240><c> sample</c><00:04:40.560><c> data</c><00:04:41.080><c> into</c><00:04:41.280><c> my</c> 00:04:41.469 --> 00:04:41.479 align:start position:0% store test with sample data into my 00:04:41.479 --> 00:04:43.510 align:start position:0% store test with sample data into my Gadget<00:04:42.039><c> database</c><00:04:43.039><c> looks</c><00:04:43.240><c> like</c><00:04:43.360><c> it's</c> 00:04:43.510 --> 00:04:43.520 align:start position:0% Gadget database looks like it's 00:04:43.520 --> 00:04:44.790 align:start position:0% Gadget database looks like it's completed<00:04:44.120><c> I'm</c><00:04:44.199><c> going</c><00:04:44.320><c> to</c><00:04:44.400><c> go</c><00:04:44.479><c> ahead</c><00:04:44.639><c> and</c> 00:04:44.790 --> 00:04:44.800 align:start position:0% completed I'm going to go ahead and 00:04:44.800 --> 00:04:48.150 align:start position:0% completed I'm going to go ahead and close<00:04:45.520><c> this</c><00:04:46.520><c> and</c><00:04:46.639><c> you'll</c><00:04:46.840><c> see</c><00:04:47.440><c> in</c><00:04:47.639><c> my</c><00:04:47.840><c> file</c> 00:04:48.150 --> 00:04:48.160 align:start position:0% close this and you'll see in my file 00:04:48.160 --> 00:04:51.230 align:start position:0% close this and you'll see in my file explorer<00:04:48.720><c> off</c><00:04:48.880><c> to</c><00:04:49.080><c> the</c><00:04:49.240><c> left</c><00:04:49.560><c> here</c><00:04:50.280><c> under</c><00:04:50.680><c> API</c> 00:04:51.230 --> 00:04:51.240 align:start position:0% explorer off to the left here under API 00:04:51.240 --> 00:04:53.510 align:start position:0% explorer off to the left here under API models<00:04:51.800><c> API</c><00:04:52.240><c> is</c><00:04:52.400><c> my</c><00:04:52.600><c> back</c><00:04:52.720><c> end</c><00:04:53.039><c> web</c><00:04:53.280><c> is</c><00:04:53.400><c> my</c> 00:04:53.510 --> 00:04:53.520 align:start position:0% models API is my back end web is my 00:04:53.520 --> 00:04:57.510 align:start position:0% models API is my back end web is my front<00:04:53.800><c> end</c><00:04:54.759><c> I</c><00:04:54.919><c> have</c><00:04:55.199><c> my</c><00:04:55.400><c> Shopify</c><00:04:56.199><c> product</c><00:04:57.199><c> data</c> 00:04:57.510 --> 00:04:57.520 align:start position:0% front end I have my Shopify product data 00:04:57.520 --> 00:05:00.310 align:start position:0% front end I have my Shopify product data model<00:04:58.120><c> as</c><00:04:58.240><c> well</c><00:04:58.360><c> as</c><00:04:58.479><c> my</c><00:04:58.600><c> shop</c><00:04:58.840><c> ggpr</c><00:04:59.360><c> request</c> 00:05:00.310 --> 00:05:00.320 align:start position:0% model as well as my shop ggpr request 00:05:00.320 --> 00:05:02.790 align:start position:0% model as well as my shop ggpr request session<00:05:00.840><c> and</c><00:05:01.080><c> sync</c><00:05:02.000><c> so</c><00:05:02.120><c> if</c><00:05:02.240><c> I</c><00:05:02.360><c> go</c><00:05:02.479><c> ahead</c><00:05:02.639><c> and</c> 00:05:02.790 --> 00:05:02.800 align:start position:0% session and sync so if I go ahead and 00:05:02.800 --> 00:05:05.550 align:start position:0% session and sync so if I go ahead and open<00:05:03.160><c> product</c><00:05:03.880><c> click</c><00:05:04.080><c> on</c><00:05:04.320><c> schema</c><00:05:05.199><c> these</c><00:05:05.360><c> are</c> 00:05:05.550 --> 00:05:05.560 align:start position:0% open product click on schema these are 00:05:05.560 --> 00:05:07.670 align:start position:0% open product click on schema these are all<00:05:05.680><c> of</c><00:05:05.880><c> the</c><00:05:06.039><c> fields</c><00:05:06.520><c> on</c><00:05:06.720><c> my</c><00:05:06.880><c> model</c><00:05:07.160><c> fields</c><00:05:07.479><c> are</c> 00:05:07.670 --> 00:05:07.680 align:start position:0% all of the fields on my model fields are 00:05:07.680 --> 00:05:11.390 align:start position:0% all of the fields on my model fields are like<00:05:07.919><c> columns</c><00:05:08.400><c> on</c><00:05:08.639><c> my</c><00:05:08.880><c> database</c><00:05:10.039><c> table</c><00:05:11.039><c> and</c><00:05:11.280><c> if</c> 00:05:11.390 --> 00:05:11.400 align:start position:0% like columns on my database table and if 00:05:11.400 --> 00:05:13.870 align:start position:0% like columns on my database table and if I<00:05:11.520><c> check</c><00:05:11.720><c> out</c><00:05:11.880><c> the</c><00:05:12.080><c> data</c><00:05:12.400><c> page</c><00:05:12.840><c> I</c><00:05:13.000><c> see</c><00:05:13.400><c> that</c><00:05:13.639><c> my</c> 00:05:13.870 --> 00:05:13.880 align:start position:0% I check out the data page I see that my 00:05:13.880 --> 00:05:16.710 align:start position:0% I check out the data page I see that my data<00:05:14.400><c> has</c><00:05:14.759><c> indeed</c><00:05:15.440><c> been</c><00:05:15.960><c> synced</c><00:05:16.440><c> so</c><00:05:16.560><c> there's</c> 00:05:16.710 --> 00:05:16.720 align:start position:0% data has indeed been synced so there's 00:05:16.720 --> 00:05:18.590 align:start position:0% data has indeed been synced so there's not<00:05:16.880><c> a</c><00:05:17.000><c> ton</c><00:05:17.160><c> of</c><00:05:17.320><c> product</c><00:05:17.680><c> data</c><00:05:17.960><c> this</c><00:05:18.039><c> is</c><00:05:18.199><c> just</c><00:05:18.319><c> a</c> 00:05:18.590 --> 00:05:18.600 align:start position:0% not a ton of product data this is just a 00:05:18.600 --> 00:05:22.150 align:start position:0% not a ton of product data this is just a test<00:05:18.919><c> store</c><00:05:19.919><c> but</c><00:05:20.639><c> no</c><00:05:20.840><c> matter</c><00:05:21.319><c> how</c><00:05:21.600><c> much</c><00:05:21.880><c> data</c> 00:05:22.150 --> 00:05:22.160 align:start position:0% test store but no matter how much data 00:05:22.160 --> 00:05:24.309 align:start position:0% test store but no matter how much data you<00:05:22.280><c> do</c><00:05:22.560><c> have</c><00:05:22.880><c> Gadget</c><00:05:23.240><c> will</c><00:05:23.479><c> manage</c><00:05:23.840><c> Shop's</c> 00:05:24.309 --> 00:05:24.319 align:start position:0% you do have Gadget will manage Shop's 00:05:24.319 --> 00:05:26.230 align:start position:0% you do have Gadget will manage Shop's rate<00:05:24.520><c> limit</c><00:05:24.880><c> and</c><00:05:25.120><c> bring</c><00:05:25.400><c> data</c><00:05:25.759><c> into</c><00:05:26.039><c> your</c> 00:05:26.230 --> 00:05:26.240 align:start position:0% rate limit and bring data into your 00:05:26.240 --> 00:05:28.510 align:start position:0% rate limit and bring data into your Gadget<00:05:26.600><c> database</c><00:05:27.199><c> as</c><00:05:27.479><c> fast</c><00:05:27.840><c> as</c><00:05:28.080><c> possible</c><00:05:28.400><c> so</c> 00:05:28.510 --> 00:05:28.520 align:start position:0% Gadget database as fast as possible so 00:05:28.520 --> 00:05:30.230 align:start position:0% Gadget database as fast as possible so you<00:05:28.600><c> don't</c><00:05:28.759><c> need</c><00:05:28.880><c> to</c><00:05:29.080><c> write</c><00:05:29.319><c> that</c><00:05:29.720><c> data</c><00:05:29.919><c> sync</c> 00:05:30.230 --> 00:05:30.240 align:start position:0% you don't need to write that data sync 00:05:30.240 --> 00:05:32.510 align:start position:0% you don't need to write that data sync yourself<00:05:31.240><c> that's</c><00:05:31.560><c> great</c><00:05:31.919><c> that</c><00:05:32.039><c> is</c><00:05:32.280><c> the</c> 00:05:32.510 --> 00:05:32.520 align:start position:0% yourself that's great that is the 00:05:32.520 --> 00:05:36.150 align:start position:0% yourself that's great that is the connecting<00:05:33.039><c> to</c><00:05:33.479><c> Shopify</c><00:05:34.520><c> step</c><00:05:35.520><c> before</c><00:05:35.800><c> I</c><00:05:36.000><c> get</c> 00:05:36.150 --> 00:05:36.160 align:start position:0% connecting to Shopify step before I get 00:05:36.160 --> 00:05:38.469 align:start position:0% connecting to Shopify step before I get into<00:05:36.639><c> custom</c><00:05:37.080><c> action</c><00:05:37.400><c> code</c><00:05:37.919><c> I</c><00:05:38.080><c> actually</c><00:05:38.360><c> am</c> 00:05:38.469 --> 00:05:38.479 align:start position:0% into custom action code I actually am 00:05:38.479 --> 00:05:40.270 align:start position:0% into custom action code I actually am going<00:05:38.600><c> to</c><00:05:38.759><c> go</c><00:05:38.919><c> on</c><00:05:39.080><c> a</c><00:05:39.319><c> bit</c><00:05:39.440><c> of</c><00:05:39.560><c> a</c><00:05:39.720><c> detour</c><00:05:40.199><c> this</c> 00:05:40.270 --> 00:05:40.280 align:start position:0% going to go on a bit of a detour this 00:05:40.280 --> 00:05:42.150 align:start position:0% going to go on a bit of a detour this isn't<00:05:40.720><c> really</c><00:05:41.080><c> required</c><00:05:41.479><c> for</c><00:05:41.639><c> this</c><00:05:41.800><c> tutorial</c> 00:05:42.150 --> 00:05:42.160 align:start position:0% isn't really required for this tutorial 00:05:42.160 --> 00:05:44.029 align:start position:0% isn't really required for this tutorial it's<00:05:42.319><c> mostly</c><00:05:42.560><c> just</c><00:05:42.680><c> to</c><00:05:42.840><c> show</c><00:05:43.080><c> you</c><00:05:43.440><c> how</c><00:05:43.639><c> to</c><00:05:43.880><c> do</c> 00:05:44.029 --> 00:05:44.039 align:start position:0% it's mostly just to show you how to do 00:05:44.039 --> 00:05:45.629 align:start position:0% it's mostly just to show you how to do it<00:05:44.240><c> it's</c><00:05:44.400><c> also</c><00:05:44.600><c> included</c><00:05:44.960><c> in</c><00:05:45.080><c> the</c><00:05:45.199><c> written</c> 00:05:45.629 --> 00:05:45.639 align:start position:0% it it's also included in the written 00:05:45.639 --> 00:05:47.270 align:start position:0% it it's also included in the written instructions<00:05:46.639><c> I'm</c><00:05:46.759><c> going</c><00:05:46.840><c> to</c><00:05:46.960><c> go</c><00:05:47.039><c> to</c><00:05:47.160><c> my</c> 00:05:47.270 --> 00:05:47.280 align:start position:0% instructions I'm going to go to my 00:05:47.280 --> 00:05:50.350 align:start position:0% instructions I'm going to go to my Shopify<00:05:47.880><c> shop</c><00:05:48.199><c> model</c><00:05:48.960><c> click</c><00:05:49.160><c> on</c><00:05:49.319><c> my</c><00:05:49.479><c> schema</c><00:05:50.240><c> I</c> 00:05:50.350 --> 00:05:50.360 align:start position:0% Shopify shop model click on my schema I 00:05:50.360 --> 00:05:52.110 align:start position:0% Shopify shop model click on my schema I once<00:05:50.639><c> again</c><00:05:50.840><c> see</c><00:05:51.120><c> all</c><00:05:51.240><c> of</c><00:05:51.400><c> my</c><00:05:51.520><c> fields</c><00:05:51.919><c> and</c><00:05:52.039><c> I'm</c> 00:05:52.110 --> 00:05:52.120 align:start position:0% once again see all of my fields and I'm 00:05:52.120 --> 00:05:53.990 align:start position:0% once again see all of my fields and I'm going<00:05:52.199><c> to</c><00:05:52.319><c> go</c><00:05:52.440><c> ahead</c><00:05:52.560><c> and</c><00:05:52.680><c> add</c><00:05:52.800><c> a</c><00:05:53.000><c> custom</c><00:05:53.280><c> field</c> 00:05:53.990 --> 00:05:54.000 align:start position:0% going to go ahead and add a custom field 00:05:54.000 --> 00:05:56.749 align:start position:0% going to go ahead and add a custom field and<00:05:54.160><c> I'm</c><00:05:54.280><c> just</c><00:05:54.400><c> going</c><00:05:54.479><c> to</c><00:05:54.639><c> go</c><00:05:54.880><c> call</c><00:05:55.120><c> this</c><00:05:55.639><c> pre</c> 00:05:56.749 --> 00:05:56.759 align:start position:0% and I'm just going to go call this pre 00:05:56.759 --> 00:05:58.629 align:start position:0% and I'm just going to go call this pre purchase 00:05:58.629 --> 00:05:58.639 align:start position:0% purchase 00:05:58.639 --> 00:06:02.150 align:start position:0% purchase product<00:05:59.800><c> so</c><00:06:00.039><c> I</c><00:06:00.160><c> can</c><00:06:00.360><c> actually</c><00:06:00.759><c> store</c><00:06:01.639><c> data</c> 00:06:02.150 --> 00:06:02.160 align:start position:0% product so I can actually store data 00:06:02.160 --> 00:06:04.510 align:start position:0% product so I can actually store data from<00:06:02.360><c> my</c><00:06:02.479><c> shop</c><00:06:02.840><c> five</c><00:06:03.000><c> meta</c><00:06:03.240><c> fields</c><00:06:03.680><c> in</c><00:06:03.919><c> line</c> 00:06:04.510 --> 00:06:04.520 align:start position:0% from my shop five meta fields in line 00:06:04.520 --> 00:06:07.230 align:start position:0% from my shop five meta fields in line with<00:06:04.720><c> the</c><00:06:04.919><c> rest</c><00:06:05.360><c> of</c><00:06:05.600><c> my</c><00:06:05.800><c> shop</c><00:06:06.160><c> data</c><00:06:07.039><c> that's</c> 00:06:07.230 --> 00:06:07.240 align:start position:0% with the rest of my shop data that's 00:06:07.240 --> 00:06:09.189 align:start position:0% with the rest of my shop data that's pretty<00:06:07.599><c> neat</c><00:06:08.240><c> I</c><00:06:08.360><c> just</c><00:06:08.479><c> need</c><00:06:08.599><c> to</c><00:06:08.800><c> enter</c><00:06:09.080><c> a</c> 00:06:09.189 --> 00:06:09.199 align:start position:0% pretty neat I just need to enter a 00:06:09.199 --> 00:06:11.909 align:start position:0% pretty neat I just need to enter a namespace<00:06:09.880><c> I'll</c><00:06:10.039><c> just</c><00:06:10.199><c> call</c><00:06:10.360><c> this</c><00:06:10.560><c> gadget</c> 00:06:11.909 --> 00:06:11.919 align:start position:0% namespace I'll just call this gadget 00:06:11.919 --> 00:06:14.430 align:start position:0% namespace I'll just call this gadget tutorial<00:06:12.919><c> I'm</c><00:06:13.039><c> going</c><00:06:13.120><c> to</c><00:06:13.360><c> register</c><00:06:13.880><c> my</c> 00:06:14.430 --> 00:06:14.440 align:start position:0% tutorial I'm going to register my 00:06:14.440 --> 00:06:16.830 align:start position:0% tutorial I'm going to register my namespace<00:06:15.440><c> and</c><00:06:15.680><c> I'll</c><00:06:15.840><c> enter</c><00:06:16.080><c> a</c><00:06:16.280><c> key</c><00:06:16.479><c> for</c><00:06:16.720><c> my</c> 00:06:16.830 --> 00:06:16.840 align:start position:0% namespace and I'll enter a key for my 00:06:16.840 --> 00:06:19.629 align:start position:0% namespace and I'll enter a key for my meta<00:06:17.160><c> field</c><00:06:17.479><c> so</c><00:06:17.599><c> I'll</c><00:06:17.800><c> call</c><00:06:18.000><c> this</c> 00:06:19.629 --> 00:06:19.639 align:start position:0% meta field so I'll call this 00:06:19.639 --> 00:06:21.990 align:start position:0% meta field so I'll call this pre 00:06:21.990 --> 00:06:22.000 align:start position:0% pre 00:06:22.000 --> 00:06:24.629 align:start position:0% pre purchase<00:06:23.000><c> product</c><00:06:23.880><c> and</c><00:06:24.000><c> this</c><00:06:24.080><c> is</c><00:06:24.199><c> going</c><00:06:24.319><c> to</c><00:06:24.440><c> be</c> 00:06:24.629 --> 00:06:24.639 align:start position:0% purchase product and this is going to be 00:06:24.639 --> 00:06:26.589 align:start position:0% purchase product and this is going to be a<00:06:24.880><c> product</c> 00:06:26.589 --> 00:06:26.599 align:start position:0% a product 00:06:26.599 --> 00:06:28.870 align:start position:0% a product reference<00:06:27.599><c> and</c><00:06:27.800><c> I'll</c><00:06:27.960><c> leave</c><00:06:28.120><c> it</c><00:06:28.240><c> as</c><00:06:28.360><c> a</c><00:06:28.479><c> string</c> 00:06:28.870 --> 00:06:28.880 align:start position:0% reference and I'll leave it as a string 00:06:28.880 --> 00:06:30.710 align:start position:0% reference and I'll leave it as a string type<00:06:29.120><c> for</c><00:06:29.360><c> next</c><00:06:29.919><c> so</c><00:06:30.080><c> we're</c><00:06:30.199><c> going</c><00:06:30.280><c> to</c><00:06:30.400><c> store</c> 00:06:30.710 --> 00:06:30.720 align:start position:0% type for next so we're going to store 00:06:30.720 --> 00:06:33.350 align:start position:0% type for next so we're going to store that<00:06:30.919><c> product</c><00:06:31.240><c> ID</c><00:06:31.840><c> to</c><00:06:32.000><c> a</c><00:06:32.160><c> meta</c><00:06:32.479><c> field</c><00:06:33.080><c> so</c><00:06:33.240><c> that</c> 00:06:33.350 --> 00:06:33.360 align:start position:0% that product ID to a meta field so that 00:06:33.360 --> 00:06:35.749 align:start position:0% that product ID to a meta field so that it<00:06:33.520><c> can</c><00:06:33.680><c> be</c><00:06:34.039><c> easily</c><00:06:34.599><c> ingested</c><00:06:35.199><c> into</c><00:06:35.400><c> my</c><00:06:35.520><c> check</c> 00:06:35.749 --> 00:06:35.759 align:start position:0% it can be easily ingested into my check 00:06:35.759 --> 00:06:38.790 align:start position:0% it can be easily ingested into my check out<00:06:36.400><c> extension</c><00:06:37.400><c> I'm</c><00:06:37.720><c> also</c><00:06:38.039><c> going</c><00:06:38.199><c> to</c><00:06:38.400><c> sync</c> 00:06:38.790 --> 00:06:38.800 align:start position:0% out extension I'm also going to sync 00:06:38.800 --> 00:06:40.749 align:start position:0% out extension I'm also going to sync that<00:06:39.000><c> data</c><00:06:39.360><c> here</c><00:06:39.560><c> in</c><00:06:39.720><c> my</c><00:06:39.880><c> Gadget</c><00:06:40.199><c> database</c> 00:06:40.749 --> 00:06:40.759 align:start position:0% that data here in my Gadget database 00:06:40.759 --> 00:06:42.430 align:start position:0% that data here in my Gadget database when<00:06:40.880><c> I</c><00:06:40.960><c> said</c><00:06:41.160><c> I</c><00:06:41.280><c> didn't</c><00:06:41.479><c> need</c><00:06:41.599><c> it</c><00:06:41.800><c> before</c><00:06:42.319><c> I</c> 00:06:42.430 --> 00:06:42.440 align:start position:0% when I said I didn't need it before I 00:06:42.440 --> 00:06:43.909 align:start position:0% when I said I didn't need it before I think<00:06:42.599><c> that</c><00:06:42.680><c> was</c><00:06:42.759><c> a</c><00:06:42.840><c> bit</c><00:06:42.960><c> of</c><00:06:43.039><c> a</c><00:06:43.160><c> lie</c><00:06:43.440><c> I</c><00:06:43.680><c> actually</c> 00:06:43.909 --> 00:06:43.919 align:start position:0% think that was a bit of a lie I actually 00:06:43.919 --> 00:06:46.150 align:start position:0% think that was a bit of a lie I actually do<00:06:44.120><c> need</c><00:06:44.400><c> this</c><00:06:44.960><c> and</c><00:06:45.080><c> this</c><00:06:45.160><c> is</c><00:06:45.319><c> going</c><00:06:45.400><c> to</c><00:06:45.680><c> power</c> 00:06:46.150 --> 00:06:46.160 align:start position:0% do need this and this is going to power 00:06:46.160 --> 00:06:48.189 align:start position:0% do need this and this is going to power my<00:06:46.599><c> frontend</c><00:06:47.240><c> experience</c><00:06:47.639><c> so</c><00:06:47.800><c> I'll</c><00:06:47.919><c> be</c><00:06:48.039><c> able</c> 00:06:48.189 --> 00:06:48.199 align:start position:0% my frontend experience so I'll be able 00:06:48.199 --> 00:06:50.790 align:start position:0% my frontend experience so I'll be able to<00:06:48.440><c> tell</c><00:06:49.400><c> uh</c><00:06:49.560><c> what</c><00:06:49.720><c> meta</c><00:06:50.039><c> field</c><00:06:50.440><c> has</c><00:06:50.599><c> been</c> 00:06:50.790 --> 00:06:50.800 align:start position:0% to tell uh what meta field has been 00:06:50.800 --> 00:06:52.070 align:start position:0% to tell uh what meta field has been selected<00:06:51.280><c> already</c><00:06:51.599><c> so</c><00:06:51.759><c> that</c><00:06:51.880><c> when</c><00:06:52.000><c> the</c> 00:06:52.070 --> 00:06:52.080 align:start position:0% selected already so that when the 00:06:52.080 --> 00:06:53.469 align:start position:0% selected already so that when the merchant<00:06:52.440><c> comes</c><00:06:52.680><c> back</c><00:06:52.800><c> to</c><00:06:52.919><c> my</c><00:06:53.080><c> app</c><00:06:53.280><c> I'll</c><00:06:53.360><c> be</c> 00:06:53.469 --> 00:06:53.479 align:start position:0% merchant comes back to my app I'll be 00:06:53.479 --> 00:06:56.110 align:start position:0% merchant comes back to my app I'll be able<00:06:53.680><c> to</c><00:06:53.840><c> pre-populate</c><00:06:54.599><c> the</c><00:06:54.759><c> selected</c><00:06:55.240><c> option</c> 00:06:56.110 --> 00:06:56.120 align:start position:0% able to pre-populate the selected option 00:06:56.120 --> 00:06:58.230 align:start position:0% able to pre-populate the selected option so<00:06:56.720><c> that</c><00:06:56.879><c> was</c><00:06:57.000><c> a</c><00:06:57.080><c> bit</c><00:06:57.199><c> of</c><00:06:57.280><c> a</c><00:06:57.440><c> lie</c><00:06:57.840><c> that's</c><00:06:58.080><c> okay</c> 00:06:58.230 --> 00:06:58.240 align:start position:0% so that was a bit of a lie that's okay 00:06:58.240 --> 00:07:00.270 align:start position:0% so that was a bit of a lie that's okay we're<00:06:58.360><c> going</c><00:06:58.440><c> to</c><00:06:58.560><c> keep</c><00:06:58.720><c> on</c><00:06:58.840><c> trucking</c><00:06:59.720><c> so</c><00:06:59.960><c> now</c> 00:07:00.270 --> 00:07:00.280 align:start position:0% we're going to keep on trucking so now 00:07:00.280 --> 00:07:02.950 align:start position:0% we're going to keep on trucking so now I'm<00:07:00.400><c> going</c><00:07:00.520><c> to</c><00:07:00.720><c> go</c><00:07:00.919><c> ahead</c><00:07:01.319><c> and</c><00:07:01.680><c> add</c><00:07:01.960><c> a</c><00:07:02.319><c> custom</c> 00:07:02.950 --> 00:07:02.960 align:start position:0% I'm going to go ahead and add a custom 00:07:02.960 --> 00:07:05.830 align:start position:0% I'm going to go ahead and add a custom action<00:07:03.360><c> to</c><00:07:03.599><c> my</c><00:07:03.800><c> Shopify</c><00:07:04.479><c> shop</c><00:07:04.840><c> model</c><00:07:05.639><c> you'll</c> 00:07:05.830 --> 00:07:05.840 align:start position:0% action to my Shopify shop model you'll 00:07:05.840 --> 00:07:08.350 align:start position:0% action to my Shopify shop model you'll see<00:07:06.240><c> when</c><00:07:06.759><c> I</c><00:07:06.919><c> went</c><00:07:07.199><c> ahead</c><00:07:07.479><c> and</c><00:07:07.680><c> set</c><00:07:07.840><c> up</c><00:07:07.960><c> my</c><00:07:08.039><c> shop</c> 00:07:08.350 --> 00:07:08.360 align:start position:0% see when I went ahead and set up my shop 00:07:08.360 --> 00:07:10.189 align:start position:0% see when I went ahead and set up my shop by<00:07:08.520><c> connection</c><00:07:09.280><c> or</c><00:07:09.520><c> if</c><00:07:09.639><c> I</c><00:07:09.800><c> go</c><00:07:09.919><c> ahead</c><00:07:10.080><c> and</c> 00:07:10.189 --> 00:07:10.199 align:start position:0% by connection or if I go ahead and 00:07:10.199 --> 00:07:12.390 align:start position:0% by connection or if I go ahead and create<00:07:10.400><c> a</c><00:07:10.560><c> custom</c><00:07:10.879><c> model</c><00:07:11.599><c> Gadget</c><00:07:11.919><c> is</c><00:07:12.039><c> going</c><00:07:12.160><c> to</c> 00:07:12.390 --> 00:07:12.400 align:start position:0% create a custom model Gadget is going to 00:07:12.400 --> 00:07:15.550 align:start position:0% create a custom model Gadget is going to automatically<00:07:13.000><c> generate</c><00:07:13.440><c> a</c><00:07:13.639><c> crud</c><00:07:14.160><c> API</c><00:07:15.080><c> for</c> 00:07:15.550 --> 00:07:15.560 align:start position:0% automatically generate a crud API for 00:07:15.560 --> 00:07:18.150 align:start position:0% automatically generate a crud API for your<00:07:15.919><c> data</c><00:07:16.240><c> models</c><00:07:17.120><c> I</c><00:07:17.199><c> can</c><00:07:17.360><c> also</c><00:07:17.560><c> go</c><00:07:17.720><c> ahead</c><00:07:17.879><c> and</c> 00:07:18.150 --> 00:07:18.160 align:start position:0% your data models I can also go ahead and 00:07:18.160 --> 00:07:20.309 align:start position:0% your data models I can also go ahead and modify<00:07:18.599><c> this</c><00:07:18.759><c> API</c><00:07:19.160><c> by</c><00:07:19.280><c> adding</c><00:07:19.599><c> custom</c><00:07:19.960><c> actions</c> 00:07:20.309 --> 00:07:20.319 align:start position:0% modify this API by adding custom actions 00:07:20.319 --> 00:07:22.629 align:start position:0% modify this API by adding custom actions so<00:07:20.440><c> I'll</c><00:07:20.599><c> just</c><00:07:20.759><c> click</c><00:07:21.160><c> Plus</c><00:07:21.520><c> on</c><00:07:21.680><c> the</c><00:07:21.919><c> actions</c> 00:07:22.629 --> 00:07:22.639 align:start position:0% so I'll just click Plus on the actions 00:07:22.639 --> 00:07:25.469 align:start position:0% so I'll just click Plus on the actions folder<00:07:23.639><c> and</c><00:07:23.840><c> I'll</c><00:07:24.039><c> call</c><00:07:24.280><c> my</c><00:07:24.479><c> action</c><00:07:24.879><c> save</c> 00:07:25.469 --> 00:07:25.479 align:start position:0% folder and I'll call my action save 00:07:25.479 --> 00:07:26.869 align:start position:0% folder and I'll call my action save prepurchase 00:07:26.869 --> 00:07:26.879 align:start position:0% prepurchase 00:07:26.879 --> 00:07:30.430 align:start position:0% prepurchase products<00:07:27.879><c> and</c><00:07:28.000><c> I</c><00:07:28.120><c> want</c><00:07:28.240><c> to</c><00:07:28.400><c> add</c><00:07:28.879><c> Js</c> 00:07:30.430 --> 00:07:30.440 align:start position:0% products and I want to add Js 00:07:30.440 --> 00:07:32.350 align:start position:0% products and I want to add Js and<00:07:30.599><c> this</c><00:07:30.720><c> will</c><00:07:30.919><c> give</c><00:07:31.039><c> me</c><00:07:31.160><c> a</c><00:07:31.319><c> new</c><00:07:31.599><c> action</c><00:07:32.000><c> file</c> 00:07:32.350 --> 00:07:32.360 align:start position:0% and this will give me a new action file 00:07:32.360 --> 00:07:35.270 align:start position:0% and this will give me a new action file so<00:07:32.560><c> the</c><00:07:32.720><c> anatomy</c><00:07:33.440><c> of</c><00:07:33.639><c> a</c><00:07:33.800><c> default</c><00:07:34.280><c> action</c><00:07:35.080><c> we</c> 00:07:35.270 --> 00:07:35.280 align:start position:0% so the anatomy of a default action we 00:07:35.280 --> 00:07:39.070 align:start position:0% so the anatomy of a default action we have<00:07:35.680><c> run</c><00:07:36.160><c> and</c><00:07:36.560><c> on</c><00:07:37.000><c> success</c><00:07:37.520><c> functions</c><00:07:38.400><c> run</c><00:07:38.879><c> is</c> 00:07:39.070 --> 00:07:39.080 align:start position:0% have run and on success functions run is 00:07:39.080 --> 00:07:42.430 align:start position:0% have run and on success functions run is good<00:07:39.240><c> for</c><00:07:39.680><c> database</c><00:07:40.199><c> level</c><00:07:40.680><c> quick</c><00:07:41.440><c> operations</c> 00:07:42.430 --> 00:07:42.440 align:start position:0% good for database level quick operations 00:07:42.440 --> 00:07:44.110 align:start position:0% good for database level quick operations and<00:07:42.599><c> then</c><00:07:42.759><c> I</c><00:07:42.919><c> also</c><00:07:43.160><c> have</c><00:07:43.319><c> my</c><00:07:43.440><c> on</c><00:07:43.720><c> success</c> 00:07:44.110 --> 00:07:44.120 align:start position:0% and then I also have my on success 00:07:44.120 --> 00:07:46.390 align:start position:0% and then I also have my on success function<00:07:44.479><c> this</c><00:07:44.599><c> is</c><00:07:44.759><c> good</c><00:07:44.919><c> for</c><00:07:45.199><c> side</c><00:07:45.599><c> effects</c> 00:07:46.390 --> 00:07:46.400 align:start position:0% function this is good for side effects 00:07:46.400 --> 00:07:49.149 align:start position:0% function this is good for side effects longer<00:07:46.919><c> running</c><00:07:47.599><c> code</c><00:07:48.599><c> check</c><00:07:48.800><c> out</c><00:07:48.960><c> our</c> 00:07:49.149 --> 00:07:49.159 align:start position:0% longer running code check out our 00:07:49.159 --> 00:07:50.510 align:start position:0% longer running code check out our documentation<00:07:49.639><c> for</c><00:07:49.800><c> more</c><00:07:50.039><c> information</c><00:07:50.400><c> on</c> 00:07:50.510 --> 00:07:50.520 align:start position:0% documentation for more information on 00:07:50.520 --> 00:07:52.510 align:start position:0% documentation for more information on the<00:07:50.639><c> difference</c><00:07:50.960><c> between</c><00:07:51.240><c> the</c><00:07:51.360><c> two</c><00:07:52.240><c> off</c><00:07:52.400><c> to</c> 00:07:52.510 --> 00:07:52.520 align:start position:0% the difference between the two off to 00:07:52.520 --> 00:07:54.469 align:start position:0% the difference between the two off to the<00:07:52.639><c> side</c><00:07:52.800><c> I</c><00:07:52.919><c> have</c><00:07:53.039><c> triggers</c><00:07:53.639><c> so</c><00:07:53.800><c> I</c><00:07:53.879><c> can</c><00:07:54.039><c> see</c> 00:07:54.469 --> 00:07:54.479 align:start position:0% the side I have triggers so I can see 00:07:54.479 --> 00:07:56.790 align:start position:0% the side I have triggers so I can see like<00:07:54.599><c> I</c><00:07:54.720><c> mentioned</c><00:07:55.199><c> this</c><00:07:55.280><c> is</c><00:07:55.400><c> a</c><00:07:55.599><c> custom</c><00:07:56.000><c> action</c> 00:07:56.790 --> 00:07:56.800 align:start position:0% like I mentioned this is a custom action 00:07:56.800 --> 00:07:59.270 align:start position:0% like I mentioned this is a custom action so<00:07:57.039><c> it</c><00:07:57.120><c> is</c><00:07:57.400><c> custom</c><00:07:57.800><c> API</c><00:07:58.240><c> so</c><00:07:58.400><c> I</c><00:07:58.479><c> can</c><00:07:58.639><c> see</c><00:07:58.960><c> if</c><00:07:59.159><c> I</c> 00:07:59.270 --> 00:07:59.280 align:start position:0% so it is custom API so I can see if I 00:07:59.280 --> 00:08:01.149 align:start position:0% so it is custom API so I can see if I want<00:07:59.639><c> to</c><00:07:59.800><c> call</c><00:07:59.960><c> this</c><00:08:00.080><c> from</c><00:08:00.280><c> my</c><00:08:00.400><c> API</c><00:08:00.800><c> client</c> 00:08:01.149 --> 00:08:01.159 align:start position:0% want to call this from my API client 00:08:01.159 --> 00:08:04.029 align:start position:0% want to call this from my API client it's<00:08:01.319><c> api.</c><00:08:01.919><c> Shop</c><00:08:02.360><c> shop.</c><00:08:02.879><c> saave</c><00:08:03.400><c> prepurchase</c> 00:08:04.029 --> 00:08:04.039 align:start position:0% it's api. Shop shop. saave prepurchase 00:08:04.039 --> 00:08:07.070 align:start position:0% it's api. Shop shop. saave prepurchase product<00:08:05.039><c> I'm</c><00:08:05.159><c> going</c><00:08:05.240><c> to</c><00:08:05.440><c> go</c><00:08:05.599><c> ahead</c><00:08:06.440><c> and</c><00:08:06.840><c> paste</c> 00:08:07.070 --> 00:08:07.080 align:start position:0% product I'm going to go ahead and paste 00:08:07.080 --> 00:08:09.950 align:start position:0% product I'm going to go ahead and paste in<00:08:07.240><c> some</c><00:08:07.479><c> code</c><00:08:07.720><c> that</c><00:08:07.879><c> actually</c><00:08:08.199><c> modifies</c><00:08:09.159><c> this</c> 00:08:09.950 --> 00:08:09.960 align:start position:0% in some code that actually modifies this 00:08:09.960 --> 00:08:12.189 align:start position:0% in some code that actually modifies this API<00:08:10.960><c> and</c><00:08:11.199><c> we</c><00:08:11.280><c> can</c><00:08:11.479><c> actually</c><00:08:11.680><c> take</c><00:08:11.840><c> a</c><00:08:11.960><c> look</c><00:08:12.080><c> at</c> 00:08:12.189 --> 00:08:12.199 align:start position:0% API and we can actually take a look at 00:08:12.199 --> 00:08:14.589 align:start position:0% API and we can actually take a look at how<00:08:12.360><c> this</c><00:08:12.479><c> updates</c><00:08:12.919><c> when</c><00:08:13.039><c> I</c><00:08:13.199><c> paste</c><00:08:13.440><c> in</c><00:08:13.680><c> code</c><00:08:14.440><c> so</c> 00:08:14.589 --> 00:08:14.599 align:start position:0% how this updates when I paste in code so 00:08:14.599 --> 00:08:16.070 align:start position:0% how this updates when I paste in code so you<00:08:14.800><c> notice</c><00:08:15.000><c> I</c><00:08:15.080><c> dumped</c><00:08:15.319><c> in</c><00:08:15.400><c> some</c><00:08:15.639><c> stuff</c> 00:08:16.070 --> 00:08:16.080 align:start position:0% you notice I dumped in some stuff 00:08:16.080 --> 00:08:18.950 align:start position:0% you notice I dumped in some stuff there's<00:08:16.280><c> a</c><00:08:16.520><c> lot</c><00:08:16.800><c> less</c><00:08:17.240><c> parameters</c><00:08:17.960><c> here</c><00:08:18.479><c> in</c><00:08:18.680><c> my</c> 00:08:18.950 --> 00:08:18.960 align:start position:0% there's a lot less parameters here in my 00:08:18.960 --> 00:08:24.110 align:start position:0% there's a lot less parameters here in my little<00:08:19.960><c> example</c><00:08:21.120><c> API</c><00:08:22.120><c> endpoint</c><00:08:22.720><c> trigger</c><00:08:23.240><c> box</c> 00:08:24.110 --> 00:08:24.120 align:start position:0% little example API endpoint trigger box 00:08:24.120 --> 00:08:26.550 align:start position:0% little example API endpoint trigger box uh<00:08:24.240><c> which</c><00:08:24.360><c> is</c><00:08:24.720><c> very</c><00:08:25.000><c> cool</c><00:08:25.440><c> and</c><00:08:25.680><c> I'll</c><00:08:25.919><c> explain</c> 00:08:26.550 --> 00:08:26.560 align:start position:0% uh which is very cool and I'll explain 00:08:26.560 --> 00:08:28.830 align:start position:0% uh which is very cool and I'll explain what<00:08:26.879><c> happened</c><00:08:27.879><c> uh</c><00:08:28.080><c> by</c><00:08:28.280><c> default</c><00:08:28.599><c> when</c><00:08:28.720><c> I</c> 00:08:28.830 --> 00:08:28.840 align:start position:0% what happened uh by default when I 00:08:28.840 --> 00:08:32.070 align:start position:0% what happened uh by default when I create<00:08:29.120><c> new</c><00:08:29.240><c> AC</c><00:08:29.639><c> and</c><00:08:29.840><c> Gadget</c><00:08:30.720><c> it</c><00:08:30.879><c> is</c><00:08:31.240><c> a</c><00:08:31.599><c> action</c> 00:08:32.070 --> 00:08:32.080 align:start position:0% create new AC and Gadget it is a action 00:08:32.080 --> 00:08:34.870 align:start position:0% create new AC and Gadget it is a action type<00:08:32.640><c> update</c><00:08:33.640><c> and</c><00:08:33.839><c> this</c><00:08:33.959><c> means</c><00:08:34.320><c> that</c><00:08:34.560><c> all</c><00:08:34.719><c> of</c> 00:08:34.870 --> 00:08:34.880 align:start position:0% type update and this means that all of 00:08:34.880 --> 00:08:38.230 align:start position:0% type update and this means that all of the<00:08:35.039><c> fields</c><00:08:35.680><c> on</c><00:08:36.200><c> your</c><00:08:36.719><c> model</c><00:08:37.320><c> my</c><00:08:37.560><c> case</c><00:08:37.760><c> shop</c><00:08:38.039><c> VI</c> 00:08:38.230 --> 00:08:38.240 align:start position:0% the fields on your model my case shop VI 00:08:38.240 --> 00:08:41.430 align:start position:0% the fields on your model my case shop VI shop<00:08:38.919><c> are</c><00:08:39.240><c> available</c><00:08:39.760><c> as</c><00:08:40.279><c> parameters</c><00:08:41.279><c> I've</c> 00:08:41.430 --> 00:08:41.440 align:start position:0% shop are available as parameters I've 00:08:41.440 --> 00:08:43.670 align:start position:0% shop are available as parameters I've set<00:08:41.760><c> this</c><00:08:41.880><c> to</c><00:08:42.159><c> a</c><00:08:42.479><c> custom</c><00:08:43.000><c> action</c><00:08:43.320><c> now</c><00:08:43.560><c> which</c> 00:08:43.670 --> 00:08:43.680 align:start position:0% set this to a custom action now which 00:08:43.680 --> 00:08:46.110 align:start position:0% set this to a custom action now which means<00:08:43.959><c> the</c><00:08:44.120><c> only</c><00:08:44.480><c> required</c><00:08:44.959><c> parameter</c><00:08:45.519><c> is</c><00:08:45.760><c> the</c> 00:08:46.110 --> 00:08:46.120 align:start position:0% means the only required parameter is the 00:08:46.120 --> 00:08:48.630 align:start position:0% means the only required parameter is the ID<00:08:47.120><c> and</c><00:08:47.279><c> that's</c><00:08:47.519><c> this</c><00:08:47.720><c> one</c><00:08:48.000><c> two</c><00:08:48.240><c> three</c><00:08:48.480><c> you're</c> 00:08:48.630 --> 00:08:48.640 align:start position:0% ID and that's this one two three you're 00:08:48.640 --> 00:08:49.790 align:start position:0% ID and that's this one two three you're seeing<00:08:48.959><c> there</c><00:08:49.120><c> so</c><00:08:49.240><c> that's</c><00:08:49.360><c> going</c><00:08:49.480><c> to</c><00:08:49.560><c> be</c><00:08:49.680><c> the</c> 00:08:49.790 --> 00:08:49.800 align:start position:0% seeing there so that's going to be the 00:08:49.800 --> 00:08:52.670 align:start position:0% seeing there so that's going to be the ID<00:08:50.160><c> of</c><00:08:50.320><c> my</c><00:08:50.600><c> shop</c><00:08:51.480><c> I've</c><00:08:51.640><c> then</c><00:08:51.800><c> defined</c><00:08:52.120><c> a</c><00:08:52.320><c> custom</c> 00:08:52.670 --> 00:08:52.680 align:start position:0% ID of my shop I've then defined a custom 00:08:52.680 --> 00:08:55.670 align:start position:0% ID of my shop I've then defined a custom parameter<00:08:53.120><c> down</c><00:08:53.320><c> here</c><00:08:53.839><c> export</c><00:08:54.320><c> cons</c><00:08:54.680><c> perams</c> 00:08:55.670 --> 00:08:55.680 align:start position:0% parameter down here export cons perams 00:08:55.680 --> 00:08:57.310 align:start position:0% parameter down here export cons perams as<00:08:55.880><c> the</c><00:08:56.080><c> product</c><00:08:56.440><c> ID</c><00:08:56.680><c> and</c><00:08:56.800><c> this</c><00:08:56.880><c> will</c><00:08:57.000><c> be</c><00:08:57.160><c> the</c> 00:08:57.310 --> 00:08:57.320 align:start position:0% as the product ID and this will be the 00:08:57.320 --> 00:08:59.430 align:start position:0% as the product ID and this will be the product<00:08:57.680><c> ID</c><00:08:58.160><c> of</c><00:08:58.360><c> the</c><00:08:58.600><c> product</c><00:08:58.920><c> that</c><00:08:59.000><c> I</c><00:08:59.160><c> offer</c> 00:08:59.430 --> 00:08:59.440 align:start position:0% product ID of the product that I offer 00:08:59.440 --> 00:09:02.550 align:start position:0% product ID of the product that I offer offer<00:08:59.800><c> in</c><00:09:00.240><c> the</c><00:09:00.560><c> checkout</c><00:09:01.320><c> which</c><00:09:01.480><c> is</c> 00:09:02.550 --> 00:09:02.560 align:start position:0% offer in the checkout which is 00:09:02.560 --> 00:09:05.550 align:start position:0% offer in the checkout which is groovy<00:09:03.560><c> I've</c><00:09:03.760><c> added</c><00:09:04.079><c> a</c><00:09:04.279><c> bunch</c><00:09:04.480><c> of</c><00:09:04.720><c> code</c><00:09:05.120><c> to</c><00:09:05.360><c> my</c> 00:09:05.550 --> 00:09:05.560 align:start position:0% groovy I've added a bunch of code to my 00:09:05.560 --> 00:09:07.790 align:start position:0% groovy I've added a bunch of code to my run<00:09:05.839><c> function</c><00:09:06.240><c> now</c><00:09:06.839><c> I</c><00:09:06.920><c> still</c><00:09:07.120><c> have</c><00:09:07.399><c> apply</c> 00:09:07.790 --> 00:09:07.800 align:start position:0% run function now I still have apply 00:09:07.800 --> 00:09:10.590 align:start position:0% run function now I still have apply prams<00:09:08.600><c> and</c><00:09:08.880><c> prevent</c><00:09:09.200><c> cross</c><00:09:09.519><c> up</c><00:09:09.720><c> data</c><00:09:10.040><c> access</c> 00:09:10.590 --> 00:09:10.600 align:start position:0% prams and prevent cross up data access 00:09:10.600 --> 00:09:13.470 align:start position:0% prams and prevent cross up data access that's<00:09:10.920><c> particularly</c><00:09:11.600><c> useful</c><00:09:12.320><c> for</c><00:09:13.120><c> public</c> 00:09:13.470 --> 00:09:13.480 align:start position:0% that's particularly useful for public 00:09:13.480 --> 00:09:16.829 align:start position:0% that's particularly useful for public apps<00:09:13.800><c> it</c><00:09:13.959><c> means</c><00:09:14.640><c> multi-tenancy</c><00:09:15.440><c> is</c><00:09:15.839><c> enforced</c> 00:09:16.829 --> 00:09:16.839 align:start position:0% apps it means multi-tenancy is enforced 00:09:16.839 --> 00:09:19.910 align:start position:0% apps it means multi-tenancy is enforced and<00:09:17.839><c> all</c><00:09:18.079><c> I'm</c><00:09:18.240><c> doing</c><00:09:18.760><c> here</c><00:09:19.120><c> is</c><00:09:19.279><c> I</c><00:09:19.399><c> am</c><00:09:19.519><c> grabbing</c> 00:09:19.910 --> 00:09:19.920 align:start position:0% and all I'm doing here is I am grabbing 00:09:19.920 --> 00:09:22.190 align:start position:0% and all I'm doing here is I am grabbing my<00:09:20.079><c> product</c><00:09:20.399><c> ID</c><00:09:20.680><c> from</c><00:09:20.839><c> my</c><00:09:21.000><c> past</c><00:09:21.240><c> in</c><00:09:21.560><c> parameters</c> 00:09:22.190 --> 00:09:22.200 align:start position:0% my product ID from my past in parameters 00:09:22.200 --> 00:09:23.389 align:start position:0% my product ID from my past in parameters it's<00:09:22.360><c> going</c><00:09:22.480><c> to</c><00:09:22.560><c> be</c><00:09:22.640><c> the</c><00:09:22.800><c> product</c><00:09:23.120><c> that's</c> 00:09:23.389 --> 00:09:23.399 align:start position:0% it's going to be the product that's 00:09:23.399 --> 00:09:24.550 align:start position:0% it's going to be the product that's offered<00:09:23.640><c> in</c><00:09:23.760><c> the</c> 00:09:24.550 --> 00:09:24.560 align:start position:0% offered in the 00:09:24.560 --> 00:09:27.310 align:start position:0% offered in the checkout<00:09:25.560><c> and</c><00:09:25.720><c> I've</c><00:09:25.880><c> got</c><00:09:26.079><c> this</c><00:09:26.320><c> connections</c> 00:09:27.310 --> 00:09:27.320 align:start position:0% checkout and I've got this connections 00:09:27.320 --> 00:09:29.630 align:start position:0% checkout and I've got this connections object<00:09:27.839><c> here</c><00:09:28.519><c> from</c><00:09:28.760><c> my</c><00:09:28.920><c> highcon</c><00:09:29.360><c> context</c> 00:09:29.630 --> 00:09:29.640 align:start position:0% object here from my highcon context 00:09:29.640 --> 00:09:31.870 align:start position:0% object here from my highcon context parameter<00:09:30.000><c> I'm</c><00:09:30.120><c> going</c><00:09:30.360><c> connections.</c><00:09:31.279><c> shopy</c> 00:09:31.870 --> 00:09:31.880 align:start position:0% parameter I'm going connections. shopy 00:09:31.880 --> 00:09:34.150 align:start position:0% parameter I'm going connections. shopy docr<00:09:32.760><c> dog</c><00:09:33.000><c> graphql</c><00:09:33.560><c> and</c><00:09:33.680><c> this</c><00:09:33.760><c> is</c><00:09:33.880><c> going</c><00:09:33.959><c> to</c> 00:09:34.150 --> 00:09:34.160 align:start position:0% docr dog graphql and this is going to 00:09:34.160 --> 00:09:36.710 align:start position:0% docr dog graphql and this is going to have<00:09:34.360><c> my</c><00:09:34.600><c> current</c><00:09:34.880><c> shop</c><00:09:35.320><c> context</c><00:09:36.200><c> and</c><00:09:36.360><c> we</c><00:09:36.480><c> know</c> 00:09:36.710 --> 00:09:36.720 align:start position:0% have my current shop context and we know 00:09:36.720 --> 00:09:39.190 align:start position:0% have my current shop context and we know that<00:09:36.959><c> because</c><00:09:37.680><c> when</c><00:09:37.839><c> we</c><00:09:38.000><c> make</c><00:09:38.160><c> a</c><00:09:38.440><c> request</c> 00:09:39.190 --> 00:09:39.200 align:start position:0% that because when we make a request 00:09:39.200 --> 00:09:40.949 align:start position:0% that because when we make a request using<00:09:39.480><c> our</c><00:09:39.680><c> Gadget</c><00:09:40.000><c> API</c><00:09:40.360><c> client</c><00:09:40.600><c> in</c><00:09:40.680><c> the</c><00:09:40.760><c> front</c> 00:09:40.949 --> 00:09:40.959 align:start position:0% using our Gadget API client in the front 00:09:40.959 --> 00:09:42.550 align:start position:0% using our Gadget API client in the front end<00:09:41.240><c> which</c><00:09:41.360><c> we'll</c><00:09:41.519><c> get</c><00:09:41.600><c> to</c><00:09:41.800><c> in</c><00:09:41.880><c> a</c><00:09:42.040><c> bit</c><00:09:42.399><c> we're</c> 00:09:42.550 --> 00:09:42.560 align:start position:0% end which we'll get to in a bit we're 00:09:42.560 --> 00:09:43.990 align:start position:0% end which we'll get to in a bit we're going<00:09:42.640><c> to</c><00:09:42.839><c> include</c><00:09:43.160><c> the</c><00:09:43.240><c> session</c><00:09:43.600><c> token</c> 00:09:43.990 --> 00:09:44.000 align:start position:0% going to include the session token 00:09:44.000 --> 00:09:45.910 align:start position:0% going to include the session token automatically<00:09:44.680><c> so</c><00:09:44.839><c> we</c><00:09:44.959><c> know</c><00:09:45.200><c> what</c><00:09:45.440><c> store</c><00:09:45.720><c> is</c> 00:09:45.910 --> 00:09:45.920 align:start position:0% automatically so we know what store is 00:09:45.920 --> 00:09:47.389 align:start position:0% automatically so we know what store is making<00:09:46.240><c> that</c><00:09:46.440><c> request</c><00:09:46.880><c> which</c><00:09:46.959><c> is</c><00:09:47.079><c> why</c><00:09:47.200><c> we</c><00:09:47.320><c> can</c> 00:09:47.389 --> 00:09:47.399 align:start position:0% making that request which is why we can 00:09:47.399 --> 00:09:49.190 align:start position:0% making that request which is why we can use<00:09:47.640><c> current</c><00:09:48.320><c> and</c><00:09:48.440><c> then</c><00:09:48.519><c> I</c><00:09:48.600><c> can</c><00:09:48.720><c> just</c><00:09:48.839><c> go</c> 00:09:49.190 --> 00:09:49.200 align:start position:0% use current and then I can just go 00:09:49.200 --> 00:09:51.190 align:start position:0% use current and then I can just go graphql<00:09:49.800><c> and</c><00:09:49.880><c> this</c><00:09:50.000><c> is</c><00:09:50.160><c> just</c><00:09:50.360><c> a</c><00:09:50.480><c> set</c><00:09:50.839><c> meta</c> 00:09:51.190 --> 00:09:51.200 align:start position:0% graphql and this is just a set meta 00:09:51.200 --> 00:09:53.389 align:start position:0% graphql and this is just a set meta field<00:09:51.800><c> graphql</c><00:09:52.360><c> mutation</c><00:09:52.880><c> straight</c><00:09:53.160><c> from</c> 00:09:53.389 --> 00:09:53.399 align:start position:0% field graphql mutation straight from 00:09:53.399 --> 00:09:56.509 align:start position:0% field graphql mutation straight from shop<00:09:53.959><c> docs</c><00:09:54.880><c> and</c><00:09:55.079><c> we</c><00:09:55.200><c> are</c><00:09:55.440><c> defining</c><00:09:56.000><c> our</c><00:09:56.240><c> meta</c> 00:09:56.509 --> 00:09:56.519 align:start position:0% shop docs and we are defining our meta 00:09:56.519 --> 00:09:58.750 align:start position:0% shop docs and we are defining our meta field<00:09:56.920><c> see</c><00:09:57.079><c> it's</c><00:09:57.399><c> pre-</c><00:09:57.640><c> purchased</c><00:09:58.120><c> product</c> 00:09:58.750 --> 00:09:58.760 align:start position:0% field see it's pre- purchased product 00:09:58.760 --> 00:10:01.150 align:start position:0% field see it's pre- purchased product same<00:09:59.040><c> key</c><00:09:59.480><c> name</c><00:09:59.680><c> space</c><00:09:59.920><c> as</c><00:10:00.079><c> we</c><00:10:00.279><c> defined</c><00:10:00.760><c> on</c><00:10:00.920><c> the</c> 00:10:01.150 --> 00:10:01.160 align:start position:0% same key name space as we defined on the 00:10:01.160 --> 00:10:04.030 align:start position:0% same key name space as we defined on the custom<00:10:01.519><c> field</c><00:10:01.880><c> on</c><00:10:02.000><c> the</c><00:10:02.120><c> shop</c><00:10:02.440><c> by</c><00:10:02.640><c> shop</c><00:10:03.040><c> model</c> 00:10:04.030 --> 00:10:04.040 align:start position:0% custom field on the shop by shop model 00:10:04.040 --> 00:10:07.110 align:start position:0% custom field on the shop by shop model passing<00:10:04.399><c> in</c><00:10:04.880><c> the</c><00:10:05.040><c> shop</c><00:10:05.480><c> as</c><00:10:05.680><c> the</c><00:10:05.880><c> owner</c><00:10:06.640><c> record</c> 00:10:07.110 --> 00:10:07.120 align:start position:0% passing in the shop as the owner record 00:10:07.120 --> 00:10:09.310 align:start position:0% passing in the shop as the owner record is<00:10:07.360><c> my</c><00:10:07.560><c> current</c><00:10:07.959><c> shop</c><00:10:08.760><c> so</c><00:10:08.920><c> it's</c><00:10:09.040><c> just</c><00:10:09.160><c> going</c><00:10:09.240><c> to</c> 00:10:09.310 --> 00:10:09.320 align:start position:0% is my current shop so it's just going to 00:10:09.320 --> 00:10:11.670 align:start position:0% is my current shop so it's just going to be<00:10:09.440><c> the</c><00:10:09.519><c> shop</c><00:10:09.800><c> ID</c><00:10:10.600><c> it's</c><00:10:10.760><c> a</c><00:10:10.959><c> product</c><00:10:11.279><c> reference</c> 00:10:11.670 --> 00:10:11.680 align:start position:0% be the shop ID it's a product reference 00:10:11.680 --> 00:10:13.630 align:start position:0% be the shop ID it's a product reference meta<00:10:11.959><c> field</c><00:10:12.360><c> and</c><00:10:12.519><c> the</c><00:10:12.680><c> value</c><00:10:13.079><c> is</c><00:10:13.240><c> just</c><00:10:13.440><c> the</c> 00:10:13.630 --> 00:10:13.640 align:start position:0% meta field and the value is just the 00:10:13.640 --> 00:10:15.949 align:start position:0% meta field and the value is just the product<00:10:14.000><c> ID</c><00:10:14.800><c> and</c><00:10:14.959><c> finally</c><00:10:15.399><c> I'm</c><00:10:15.519><c> just</c><00:10:15.640><c> using</c> 00:10:15.949 --> 00:10:15.959 align:start position:0% product ID and finally I'm just using 00:10:15.959 --> 00:10:18.630 align:start position:0% product ID and finally I'm just using gadgets<00:10:16.279><c> built-in</c><00:10:16.640><c> logger</c><00:10:17.160><c> this</c><00:10:17.279><c> is</c><00:10:17.640><c> also</c> 00:10:18.630 --> 00:10:18.640 align:start position:0% gadgets built-in logger this is also 00:10:18.640 --> 00:10:20.990 align:start position:0% gadgets built-in logger this is also exposed<00:10:19.399><c> via</c><00:10:19.600><c> this</c><00:10:19.760><c> High</c><00:10:19.959><c> context</c><00:10:20.320><c> parameter</c> 00:10:20.990 --> 00:10:21.000 align:start position:0% exposed via this High context parameter 00:10:21.000 --> 00:10:24.870 align:start position:0% exposed via this High context parameter to<00:10:21.200><c> log</c><00:10:21.519><c> the</c><00:10:21.920><c> response</c><00:10:22.920><c> so</c><00:10:23.240><c> that</c><00:10:23.519><c> is</c><00:10:23.680><c> my</c><00:10:24.000><c> custom</c> 00:10:24.870 --> 00:10:24.880 align:start position:0% to log the response so that is my custom 00:10:24.880 --> 00:10:28.550 align:start position:0% to log the response so that is my custom action<00:10:25.880><c> now</c><00:10:26.040><c> I</c><00:10:26.160><c> need</c><00:10:26.279><c> to</c><00:10:26.480><c> go</c><00:10:26.640><c> ahead</c><00:10:27.480><c> and</c><00:10:28.040><c> do</c><00:10:28.360><c> one</c> 00:10:28.550 --> 00:10:28.560 align:start position:0% action now I need to go ahead and do one 00:10:28.560 --> 00:10:30.190 align:start position:0% action now I need to go ahead and do one more<00:10:28.760><c> thing</c><00:10:28.920><c> on</c><00:10:29.079><c> this</c><00:10:29.399><c> page</c><00:10:29.680><c> before</c><00:10:29.880><c> I</c><00:10:29.959><c> build</c> 00:10:30.190 --> 00:10:30.200 align:start position:0% more thing on this page before I build 00:10:30.200 --> 00:10:32.670 align:start position:0% more thing on this page before I build my<00:10:30.320><c> front</c><00:10:30.519><c> end</c><00:10:30.839><c> and</c><00:10:30.959><c> that's</c><00:10:31.360><c> Access</c><00:10:31.720><c> Control</c> 00:10:32.670 --> 00:10:32.680 align:start position:0% my front end and that's Access Control 00:10:32.680 --> 00:10:34.910 align:start position:0% my front end and that's Access Control by<00:10:32.880><c> default</c><00:10:33.240><c> when</c><00:10:33.360><c> I</c><00:10:33.480><c> create</c><00:10:33.720><c> a</c><00:10:33.880><c> custom</c><00:10:34.240><c> model</c> 00:10:34.910 --> 00:10:34.920 align:start position:0% by default when I create a custom model 00:10:34.920 --> 00:10:36.829 align:start position:0% by default when I create a custom model or<00:10:35.160><c> add</c><00:10:35.320><c> a</c><00:10:35.480><c> custom</c><00:10:35.839><c> action</c><00:10:36.079><c> to</c><00:10:36.240><c> an</c><00:10:36.440><c> existing</c> 00:10:36.829 --> 00:10:36.839 align:start position:0% or add a custom action to an existing 00:10:36.839 --> 00:10:41.350 align:start position:0% or add a custom action to an existing model<00:10:37.639><c> we</c><00:10:38.000><c> do</c><00:10:38.440><c> not</c><00:10:39.160><c> allow</c><00:10:39.720><c> Merchants</c><00:10:40.720><c> Shopify</c> 00:10:41.350 --> 00:10:41.360 align:start position:0% model we do not allow Merchants Shopify 00:10:41.360 --> 00:10:43.670 align:start position:0% model we do not allow Merchants Shopify Merchants<00:10:42.240><c> to</c><00:10:42.440><c> be</c><00:10:42.600><c> able</c><00:10:42.800><c> to</c><00:10:43.000><c> call</c><00:10:43.360><c> these</c> 00:10:43.670 --> 00:10:43.680 align:start position:0% Merchants to be able to call these 00:10:43.680 --> 00:10:45.470 align:start position:0% Merchants to be able to call these actions<00:10:44.120><c> you</c><00:10:44.320><c> actually</c><00:10:44.519><c> need</c><00:10:44.680><c> to</c><00:10:44.880><c> enable</c><00:10:45.360><c> it</c> 00:10:45.470 --> 00:10:45.480 align:start position:0% actions you actually need to enable it 00:10:45.480 --> 00:10:48.430 align:start position:0% actions you actually need to enable it and<00:10:45.600><c> that's</c><00:10:45.839><c> just</c><00:10:46.160><c> for</c><00:10:46.519><c> some</c><00:10:46.800><c> built-in</c> 00:10:48.430 --> 00:10:48.440 align:start position:0% and that's just for some built-in 00:10:48.440 --> 00:10:51.310 align:start position:0% and that's just for some built-in security<00:10:49.440><c> I'm</c><00:10:49.519><c> going</c><00:10:49.639><c> to</c><00:10:49.800><c> go</c><00:10:49.959><c> ahead</c><00:10:50.839><c> and</c><00:10:51.079><c> under</c> 00:10:51.310 --> 00:10:51.320 align:start position:0% security I'm going to go ahead and under 00:10:51.320 --> 00:10:53.350 align:start position:0% security I'm going to go ahead and under my<00:10:51.480><c> triggers</c><00:10:51.920><c> box</c><00:10:52.279><c> I</c><00:10:52.399><c> have</c><00:10:52.600><c> this</c><00:10:52.880><c> Access</c> 00:10:53.350 --> 00:10:53.360 align:start position:0% my triggers box I have this Access 00:10:53.360 --> 00:10:55.430 align:start position:0% my triggers box I have this Access Control<00:10:54.120><c> I'm</c><00:10:54.200><c> just</c><00:10:54.320><c> going</c><00:10:54.440><c> to</c><00:10:54.560><c> toggle</c><00:10:54.880><c> shopy</c> 00:10:55.430 --> 00:10:55.440 align:start position:0% Control I'm just going to toggle shopy 00:10:55.440 --> 00:10:57.710 align:start position:0% Control I'm just going to toggle shopy app<00:10:55.639><c> users</c><00:10:56.360><c> and</c><00:10:56.519><c> that's</c><00:10:56.720><c> the</c><00:10:56.880><c> role</c><00:10:57.200><c> that</c><00:10:57.360><c> is</c> 00:10:57.710 --> 00:10:57.720 align:start position:0% app users and that's the role that is 00:10:57.720 --> 00:10:59.509 align:start position:0% app users and that's the role that is assigned<00:10:58.360><c> to</c><00:10:58.600><c> Merchants</c><00:10:59.079><c> when</c><00:10:59.320><c> when</c><00:10:59.399><c> they</c> 00:10:59.509 --> 00:10:59.519 align:start position:0% assigned to Merchants when when they 00:10:59.519 --> 00:11:01.550 align:start position:0% assigned to Merchants when when they interact<00:10:59.920><c> with</c><00:11:00.040><c> your</c><00:11:00.200><c> app</c><00:11:00.440><c> in</c><00:11:00.560><c> the</c><00:11:00.720><c> embedded</c> 00:11:01.550 --> 00:11:01.560 align:start position:0% interact with your app in the embedded 00:11:01.560 --> 00:11:04.150 align:start position:0% interact with your app in the embedded admin<00:11:02.560><c> so</c><00:11:02.800><c> now</c><00:11:02.959><c> I'm</c><00:11:03.160><c> good</c><00:11:03.440><c> now</c><00:11:03.600><c> I</c><00:11:03.680><c> can</c><00:11:03.839><c> go</c><00:11:04.000><c> ahead</c> 00:11:04.150 --> 00:11:04.160 align:start position:0% admin so now I'm good now I can go ahead 00:11:04.160 --> 00:11:06.030 align:start position:0% admin so now I'm good now I can go ahead and<00:11:04.320><c> call</c><00:11:04.560><c> this</c><00:11:04.760><c> action</c><00:11:05.240><c> from</c><00:11:05.440><c> my</c><00:11:05.600><c> front</c><00:11:05.800><c> end</c> 00:11:06.030 --> 00:11:06.040 align:start position:0% and call this action from my front end 00:11:06.040 --> 00:11:07.629 align:start position:0% and call this action from my front end without 00:11:07.629 --> 00:11:07.639 align:start position:0% without 00:11:07.639 --> 00:11:10.430 align:start position:0% without issue<00:11:08.639><c> and</c><00:11:08.800><c> so</c><00:11:09.600><c> now</c><00:11:09.720><c> we</c><00:11:09.839><c> can</c><00:11:09.920><c> get</c><00:11:10.040><c> to</c><00:11:10.120><c> the</c><00:11:10.240><c> front</c> 00:11:10.430 --> 00:11:10.440 align:start position:0% issue and so now we can get to the front 00:11:10.440 --> 00:11:12.110 align:start position:0% issue and so now we can get to the front end<00:11:10.800><c> that's</c><00:11:10.959><c> our</c><00:11:11.200><c> backend</c> 00:11:12.110 --> 00:11:12.120 align:start position:0% end that's our backend 00:11:12.120 --> 00:11:15.430 align:start position:0% end that's our backend build<00:11:13.120><c> I</c><00:11:13.240><c> have</c><00:11:13.399><c> my</c><00:11:13.560><c> web</c><00:11:13.839><c> folder</c><00:11:14.839><c> I</c><00:11:14.920><c> can</c><00:11:15.079><c> open</c> 00:11:15.430 --> 00:11:15.440 align:start position:0% build I have my web folder I can open 00:11:15.440 --> 00:11:17.750 align:start position:0% build I have my web folder I can open that<00:11:15.600><c> up</c><00:11:16.160><c> you</c><00:11:16.279><c> see</c><00:11:16.519><c> we</c><00:11:16.680><c> already</c><00:11:16.920><c> set</c><00:11:17.120><c> up</c><00:11:17.240><c> an</c><00:11:17.360><c> API</c> 00:11:17.750 --> 00:11:17.760 align:start position:0% that up you see we already set up an API 00:11:17.760 --> 00:11:19.430 align:start position:0% that up you see we already set up an API client<00:11:18.040><c> and</c><00:11:18.120><c> this</c><00:11:18.240><c> is</c><00:11:18.320><c> going</c><00:11:18.440><c> to</c><00:11:18.519><c> be</c><00:11:18.839><c> specific</c> 00:11:19.430 --> 00:11:19.440 align:start position:0% client and this is going to be specific 00:11:19.440 --> 00:11:21.990 align:start position:0% client and this is going to be specific to<00:11:19.639><c> your</c><00:11:20.000><c> Gadget</c><00:11:20.440><c> app</c><00:11:20.959><c> pre-</c><00:11:21.240><c> purchase</c><00:11:21.560><c> V1</c> 00:11:21.990 --> 00:11:22.000 align:start position:0% to your Gadget app pre- purchase V1 00:11:22.000 --> 00:11:24.829 align:start position:0% to your Gadget app pre- purchase V1 tutorial<00:11:22.680><c> here</c><00:11:23.600><c> and</c><00:11:23.800><c> all</c><00:11:23.920><c> I</c><00:11:24.040><c> need</c><00:11:24.200><c> to</c><00:11:24.360><c> do</c><00:11:24.560><c> is</c> 00:11:24.829 --> 00:11:24.839 align:start position:0% tutorial here and all I need to do is 00:11:24.839 --> 00:11:27.509 align:start position:0% tutorial here and all I need to do is import<00:11:25.399><c> API</c><00:11:26.160><c> into</c><00:11:26.560><c> whatever</c><00:11:26.920><c> code</c><00:11:27.160><c> file</c><00:11:27.440><c> I</c> 00:11:27.509 --> 00:11:27.519 align:start position:0% import API into whatever code file I 00:11:27.519 --> 00:11:31.150 align:start position:0% import API into whatever code file I want<00:11:27.839><c> and</c><00:11:27.959><c> I</c><00:11:28.040><c> can</c><00:11:28.160><c> call</c><00:11:28.360><c> my</c><00:11:28.519><c> Gadget</c><00:11:28.800><c> API</c> 00:11:31.150 --> 00:11:31.160 align:start position:0% want and I can call my Gadget API 00:11:31.160 --> 00:11:33.350 align:start position:0% want and I can call my Gadget API if<00:11:31.279><c> I</c><00:11:31.399><c> go</c><00:11:31.519><c> into</c><00:11:31.800><c> routes</c><00:11:32.760><c> well</c><00:11:32.920><c> let's</c><00:11:33.120><c> take</c><00:11:33.240><c> a</c> 00:11:33.350 --> 00:11:33.360 align:start position:0% if I go into routes well let's take a 00:11:33.360 --> 00:11:35.030 align:start position:0% if I go into routes well let's take a look<00:11:33.480><c> at</c><00:11:33.600><c> components</c><00:11:34.079><c> first</c><00:11:34.279><c> components</c><00:11:34.800><c> has</c> 00:11:35.030 --> 00:11:35.040 align:start position:0% look at components first components has 00:11:35.040 --> 00:11:37.990 align:start position:0% look at components first components has our<00:11:35.279><c> rotor</c><00:11:35.959><c> definition</c><00:11:36.959><c> uh</c><00:11:37.079><c> it's</c><00:11:37.279><c> in</c><00:11:37.440><c> this</c><00:11:37.720><c> app</c> 00:11:37.990 --> 00:11:38.000 align:start position:0% our rotor definition uh it's in this app 00:11:38.000 --> 00:11:41.550 align:start position:0% our rotor definition uh it's in this app jsx<00:11:38.760><c> file</c><00:11:39.720><c> and</c><00:11:39.880><c> this</c><00:11:40.000><c> is</c><00:11:40.160><c> kind</c><00:11:40.279><c> of</c><00:11:40.519><c> handling</c><00:11:41.519><c> I</c> 00:11:41.550 --> 00:11:41.560 align:start position:0% jsx file and this is kind of handling I 00:11:41.560 --> 00:11:43.710 align:start position:0% jsx file and this is kind of handling I mean<00:11:41.680><c> it's</c><00:11:41.880><c> route</c><00:11:42.240><c> definitions</c><00:11:42.839><c> right</c><00:11:43.000><c> now</c><00:11:43.600><c> uh</c> 00:11:43.710 --> 00:11:43.720 align:start position:0% mean it's route definitions right now uh 00:11:43.720 --> 00:11:46.310 align:start position:0% mean it's route definitions right now uh there's<00:11:43.880><c> an</c><00:11:44.519><c> unauthenticated</c><00:11:45.519><c> app</c><00:11:45.760><c> view</c><00:11:46.160><c> so</c> 00:11:46.310 --> 00:11:46.320 align:start position:0% there's an unauthenticated app view so 00:11:46.320 --> 00:11:48.269 align:start position:0% there's an unauthenticated app view so if<00:11:46.399><c> I</c><00:11:46.519><c> try</c><00:11:46.680><c> and</c><00:11:46.959><c> open</c><00:11:47.200><c> up</c><00:11:47.360><c> my</c><00:11:47.519><c> app</c><00:11:47.760><c> outside</c><00:11:48.160><c> of</c> 00:11:48.269 --> 00:11:48.279 align:start position:0% if I try and open up my app outside of 00:11:48.279 --> 00:11:49.870 align:start position:0% if I try and open up my app outside of the<00:11:48.360><c> shop</c><00:11:48.639><c> VI</c><00:11:48.839><c> admin</c><00:11:49.279><c> I'll</c><00:11:49.399><c> just</c><00:11:49.560><c> go</c><00:11:49.639><c> ahead</c><00:11:49.800><c> and</c> 00:11:49.870 --> 00:11:49.880 align:start position:0% the shop VI admin I'll just go ahead and 00:11:49.880 --> 00:11:50.829 align:start position:0% the shop VI admin I'll just go ahead and click 00:11:50.829 --> 00:11:50.839 align:start position:0% click 00:11:50.839 --> 00:11:53.750 align:start position:0% click preview<00:11:51.839><c> I'll</c><00:11:52.079><c> get</c><00:11:52.320><c> denied</c><00:11:52.959><c> get</c><00:11:53.120><c> out</c><00:11:53.320><c> of</c><00:11:53.519><c> here</c> 00:11:53.750 --> 00:11:53.760 align:start position:0% preview I'll get denied get out of here 00:11:53.760 --> 00:11:56.389 align:start position:0% preview I'll get denied get out of here only<00:11:53.959><c> view</c><00:11:54.200><c> it</c><00:11:54.360><c> in</c><00:11:54.480><c> the</c><00:11:54.639><c> admin</c><00:11:55.200><c> so</c><00:11:55.440><c> that's</c><00:11:55.680><c> nice</c> 00:11:56.389 --> 00:11:56.399 align:start position:0% only view it in the admin so that's nice 00:11:56.399 --> 00:11:58.550 align:start position:0% only view it in the admin so that's nice uh<00:11:56.560><c> the</c><00:11:56.720><c> interesting</c><00:11:57.160><c> stuff</c><00:11:57.440><c> is</c><00:11:57.560><c> in</c><00:11:57.720><c> routes</c><00:11:58.440><c> I</c> 00:11:58.550 --> 00:11:58.560 align:start position:0% uh the interesting stuff is in routes I 00:11:58.560 --> 00:12:01.509 align:start position:0% uh the interesting stuff is in routes I have<00:11:58.680><c> an</c><00:11:58.880><c> about</c><00:11:59.360><c> and</c><00:11:59.560><c> index</c><00:12:00.399><c> jsx</c><00:12:01.160><c> which</c><00:12:01.279><c> are</c> 00:12:01.509 --> 00:12:01.519 align:start position:0% have an about and index jsx which are 00:12:01.519 --> 00:12:03.389 align:start position:0% have an about and index jsx which are just<00:12:01.680><c> the</c><00:12:01.800><c> default</c><00:12:02.120><c> rotes</c><00:12:02.480><c> we</c><00:12:02.639><c> provide</c><00:12:03.320><c> I'm</c> 00:12:03.389 --> 00:12:03.399 align:start position:0% just the default rotes we provide I'm 00:12:03.399 --> 00:12:06.110 align:start position:0% just the default rotes we provide I'm going<00:12:03.480><c> to</c><00:12:03.680><c> paste</c><00:12:03.959><c> over</c><00:12:04.200><c> my</c><00:12:04.320><c> index</c><00:12:04.720><c> jsx</c><00:12:05.720><c> so</c><00:12:06.000><c> this</c> 00:12:06.110 --> 00:12:06.120 align:start position:0% going to paste over my index jsx so this 00:12:06.120 --> 00:12:08.190 align:start position:0% going to paste over my index jsx so this will<00:12:06.320><c> be</c><00:12:06.480><c> my</c><00:12:06.639><c> new</c><00:12:06.880><c> default</c><00:12:07.440><c> page</c><00:12:07.720><c> and</c><00:12:07.880><c> let's</c><00:12:08.079><c> go</c> 00:12:08.190 --> 00:12:08.200 align:start position:0% will be my new default page and let's go 00:12:08.200 --> 00:12:10.590 align:start position:0% will be my new default page and let's go ahead<00:12:08.360><c> and</c><00:12:08.600><c> just</c><00:12:09.160><c> give</c><00:12:09.360><c> this</c><00:12:09.480><c> a</c><00:12:09.680><c> refresh</c> 00:12:10.590 --> 00:12:10.600 align:start position:0% ahead and just give this a refresh 00:12:10.600 --> 00:12:11.990 align:start position:0% ahead and just give this a refresh Gadget<00:12:10.839><c> front</c><00:12:11.079><c> ends</c><00:12:11.279><c> do</c><00:12:11.399><c> have</c><00:12:11.519><c> hot</c><00:12:11.680><c> module</c> 00:12:11.990 --> 00:12:12.000 align:start position:0% Gadget front ends do have hot module 00:12:12.000 --> 00:12:14.990 align:start position:0% Gadget front ends do have hot module reloading<00:12:12.480><c> built</c><00:12:13.199><c> in</c><00:12:14.199><c> however</c><00:12:14.440><c> there</c><00:12:14.600><c> is</c><00:12:14.720><c> a</c> 00:12:14.990 --> 00:12:15.000 align:start position:0% reloading built in however there is a 00:12:15.000 --> 00:12:17.949 align:start position:0% reloading built in however there is a time<00:12:15.279><c> out</c><00:12:15.800><c> of</c><00:12:16.480><c> two</c><00:12:16.680><c> or</c><00:12:16.800><c> three</c><00:12:17.040><c> minutes</c><00:12:17.440><c> so</c><00:12:17.800><c> you</c> 00:12:17.949 --> 00:12:17.959 align:start position:0% time out of two or three minutes so you 00:12:17.959 --> 00:12:19.750 align:start position:0% time out of two or three minutes so you may<00:12:18.160><c> need</c><00:12:18.320><c> to</c><00:12:18.480><c> refresh</c><00:12:18.920><c> if</c><00:12:19.040><c> you</c><00:12:19.120><c> go</c><00:12:19.279><c> idle</c><00:12:19.560><c> for</c><00:12:19.680><c> a</c> 00:12:19.750 --> 00:12:19.760 align:start position:0% may need to refresh if you go idle for a 00:12:19.760 --> 00:12:21.870 align:start position:0% may need to refresh if you go idle for a bit<00:12:20.360><c> but</c><00:12:20.560><c> this</c><00:12:20.639><c> is</c><00:12:20.880><c> my</c><00:12:21.120><c> app</c><00:12:21.399><c> I</c><00:12:21.440><c> can</c><00:12:21.560><c> go</c><00:12:21.680><c> ahead</c> 00:12:21.870 --> 00:12:21.880 align:start position:0% bit but this is my app I can go ahead 00:12:21.880 --> 00:12:25.990 align:start position:0% bit but this is my app I can go ahead and<00:12:22.000><c> select</c><00:12:22.360><c> one</c><00:12:22.480><c> of</c><00:12:22.600><c> my</c><00:12:23.279><c> products</c><00:12:24.279><c> press</c><00:12:25.000><c> save</c> 00:12:25.990 --> 00:12:26.000 align:start position:0% and select one of my products press save 00:12:26.000 --> 00:12:27.910 align:start position:0% and select one of my products press save and<00:12:26.440><c> this</c><00:12:26.560><c> will</c><00:12:26.880><c> actually</c><00:12:27.160><c> go</c><00:12:27.360><c> ahead</c><00:12:27.639><c> it'll</c> 00:12:27.910 --> 00:12:27.920 align:start position:0% and this will actually go ahead it'll 00:12:27.920 --> 00:12:29.990 align:start position:0% and this will actually go ahead it'll fire<00:12:28.279><c> that</c><00:12:28.519><c> custom</c><00:12:28.839><c> action</c> 00:12:29.990 --> 00:12:30.000 align:start position:0% fire that custom action 00:12:30.000 --> 00:12:31.870 align:start position:0% fire that custom action save<00:12:30.240><c> it</c><00:12:30.399><c> to</c><00:12:30.560><c> a</c><00:12:30.720><c> meta</c><00:12:31.000><c> field</c><00:12:31.320><c> or</c><00:12:31.480><c> save</c><00:12:31.720><c> that</c> 00:12:31.870 --> 00:12:31.880 align:start position:0% save it to a meta field or save that 00:12:31.880 --> 00:12:33.430 align:start position:0% save it to a meta field or save that product<00:12:32.160><c> Ed</c><00:12:32.360><c> you</c><00:12:32.440><c> to</c><00:12:32.560><c> a</c><00:12:32.639><c> meta</c><00:12:32.839><c> field</c><00:12:33.199><c> and</c><00:12:33.320><c> now</c> 00:12:33.430 --> 00:12:33.440 align:start position:0% product Ed you to a meta field and now 00:12:33.440 --> 00:12:36.750 align:start position:0% product Ed you to a meta field and now if<00:12:33.560><c> I</c><00:12:33.720><c> go</c><00:12:33.880><c> ahead</c><00:12:34.079><c> and</c><00:12:34.680><c> check</c><00:12:35.680><c> my</c><00:12:35.839><c> shop</c><00:12:36.399><c> shop</c> 00:12:36.750 --> 00:12:36.760 align:start position:0% if I go ahead and check my shop shop 00:12:36.760 --> 00:12:41.269 align:start position:0% if I go ahead and check my shop shop data<00:12:37.760><c> and</c><00:12:38.240><c> I</c><00:12:38.320><c> do</c><00:12:38.480><c> need</c><00:12:38.639><c> to</c><00:12:38.800><c> go</c><00:12:38.920><c> ahead</c><00:12:39.079><c> and</c> 00:12:41.269 --> 00:12:41.279 align:start position:0% data and I do need to go ahead and 00:12:41.279 --> 00:12:46.310 align:start position:0% data and I do need to go ahead and find<00:12:42.279><c> go</c><00:12:42.440><c> ahead</c><00:12:42.639><c> and</c><00:12:43.040><c> find</c><00:12:43.880><c> that</c><00:12:44.800><c> meta</c><00:12:45.320><c> field</c> 00:12:46.310 --> 00:12:46.320 align:start position:0% find go ahead and find that meta field 00:12:46.320 --> 00:12:48.629 align:start position:0% find go ahead and find that meta field column<00:12:47.320><c> here</c><00:12:47.440><c> we</c><00:12:47.600><c> go</c><00:12:47.760><c> pre-</c><00:12:48.000><c> purchased</c><00:12:48.320><c> product</c> 00:12:48.629 --> 00:12:48.639 align:start position:0% column here we go pre- purchased product 00:12:48.639 --> 00:12:50.790 align:start position:0% column here we go pre- purchased product I<00:12:48.760><c> see</c><00:12:49.000><c> that</c><00:12:49.160><c> my</c><00:12:49.399><c> product</c><00:12:49.880><c> ID</c><00:12:50.320><c> was</c><00:12:50.480><c> indeed</c> 00:12:50.790 --> 00:12:50.800 align:start position:0% I see that my product ID was indeed 00:12:50.800 --> 00:12:53.670 align:start position:0% I see that my product ID was indeed saved<00:12:51.199><c> so</c><00:12:51.440><c> that</c><00:12:51.560><c> is</c><00:12:52.240><c> fantastic</c><00:12:53.240><c> uh</c><00:12:53.360><c> my</c><00:12:53.480><c> front</c> 00:12:53.670 --> 00:12:53.680 align:start position:0% saved so that is fantastic uh my front 00:12:53.680 --> 00:12:55.470 align:start position:0% saved so that is fantastic uh my front end<00:12:53.880><c> is</c><00:12:54.040><c> working</c><00:12:54.600><c> I'll</c><00:12:54.839><c> quickly</c><00:12:55.120><c> walk</c><00:12:55.320><c> through</c> 00:12:55.470 --> 00:12:55.480 align:start position:0% end is working I'll quickly walk through 00:12:55.480 --> 00:12:57.150 align:start position:0% end is working I'll quickly walk through the<00:12:55.600><c> front</c><00:12:55.760><c> end</c><00:12:56.000><c> code</c><00:12:56.279><c> here</c><00:12:56.720><c> so</c><00:12:56.880><c> I</c><00:12:57.000><c> actually</c> 00:12:57.150 --> 00:12:57.160 align:start position:0% the front end code here so I actually 00:12:57.160 --> 00:12:59.350 align:start position:0% the front end code here so I actually have<00:12:57.279><c> a</c><00:12:57.560><c> custom</c><00:12:58.040><c> pre-</c><00:12:58.320><c> purchase</c><00:12:58.639><c> form</c><00:12:59.199><c> I'll</c> 00:12:59.350 --> 00:12:59.360 align:start position:0% have a custom pre- purchase form I'll 00:12:59.360 --> 00:13:01.629 align:start position:0% have a custom pre- purchase form I'll get<00:12:59.480><c> to</c><00:12:59.680><c> that</c><00:13:00.079><c> we</c><00:13:00.199><c> are</c><00:13:00.360><c> importing</c><00:13:01.000><c> that</c><00:13:01.199><c> API</c> 00:13:01.629 --> 00:13:01.639 align:start position:0% get to that we are importing that API 00:13:01.639 --> 00:13:04.150 align:start position:0% get to that we are importing that API client<00:13:02.040><c> I'm</c><00:13:02.160><c> using</c><00:13:02.440><c> some</c><00:13:02.680><c> react</c><00:13:03.160><c> hooks</c><00:13:03.959><c> we</c> 00:13:04.150 --> 00:13:04.160 align:start position:0% client I'm using some react hooks we 00:13:04.160 --> 00:13:06.189 align:start position:0% client I'm using some react hooks we also<00:13:04.440><c> have</c><00:13:04.680><c> a</c><00:13:04.920><c> gadge</c><00:13:05.199><c> in</c><00:13:05.440><c> react</c><00:13:05.800><c> package</c><00:13:06.120><c> that</c> 00:13:06.189 --> 00:13:06.199 align:start position:0% also have a gadge in react package that 00:13:06.199 --> 00:13:08.269 align:start position:0% also have a gadge in react package that is<00:13:06.399><c> providing</c><00:13:06.800><c> some</c><00:13:06.959><c> useful</c><00:13:07.680><c> hooks</c><00:13:08.000><c> that</c><00:13:08.160><c> I'm</c> 00:13:08.269 --> 00:13:08.279 align:start position:0% is providing some useful hooks that I'm 00:13:08.279 --> 00:13:10.430 align:start position:0% is providing some useful hooks that I'm using<00:13:08.519><c> to</c><00:13:08.680><c> interact</c><00:13:09.040><c> with</c><00:13:09.160><c> my</c><00:13:09.320><c> API</c><00:13:10.160><c> so</c><00:13:10.320><c> I'll</c> 00:13:10.430 --> 00:13:10.440 align:start position:0% using to interact with my API so I'll 00:13:10.440 --> 00:13:12.550 align:start position:0% using to interact with my API so I'll scroll<00:13:10.760><c> down</c><00:13:11.000><c> past</c><00:13:11.320><c> here</c><00:13:11.959><c> the</c><00:13:12.120><c> default</c> 00:13:12.550 --> 00:13:12.560 align:start position:0% scroll down past here the default 00:13:12.560 --> 00:13:14.870 align:start position:0% scroll down past here the default function<00:13:12.920><c> being</c><00:13:13.160><c> exported</c><00:13:13.680><c> at</c><00:13:13.839><c> this</c><00:13:14.040><c> route</c> 00:13:14.870 --> 00:13:14.880 align:start position:0% function being exported at this route 00:13:14.880 --> 00:13:17.350 align:start position:0% function being exported at this route all<00:13:15.160><c> I'm</c><00:13:15.320><c> doing</c><00:13:16.120><c> I'm</c><00:13:16.240><c> using</c><00:13:16.519><c> a</c><00:13:16.639><c> use</c><00:13:16.959><c> find</c><00:13:17.079><c> meni</c> 00:13:17.350 --> 00:13:17.360 align:start position:0% all I'm doing I'm using a use find meni 00:13:17.360 --> 00:13:19.430 align:start position:0% all I'm doing I'm using a use find meni hook<00:13:17.560><c> to</c><00:13:17.720><c> actually</c><00:13:18.000><c> read</c><00:13:18.519><c> my</c><00:13:18.760><c> existing</c> 00:13:19.430 --> 00:13:19.440 align:start position:0% hook to actually read my existing 00:13:19.440 --> 00:13:21.670 align:start position:0% hook to actually read my existing products<00:13:20.040><c> so</c><00:13:20.199><c> you</c><00:13:20.279><c> can</c><00:13:20.399><c> see</c><00:13:20.600><c> it's</c><00:13:20.800><c> my</c><00:13:21.000><c> api.</c> 00:13:21.670 --> 00:13:21.680 align:start position:0% products so you can see it's my api. 00:13:21.680 --> 00:13:25.189 align:start position:0% products so you can see it's my api. Shop<00:13:22.399><c> product</c><00:13:23.399><c> I</c><00:13:23.560><c> get</c><00:13:23.880><c> data</c><00:13:24.600><c> fetching</c><00:13:25.000><c> and</c> 00:13:25.189 --> 00:13:25.199 align:start position:0% Shop product I get data fetching and 00:13:25.199 --> 00:13:26.990 align:start position:0% Shop product I get data fetching and error<00:13:25.600><c> data</c><00:13:25.839><c> is</c><00:13:25.959><c> the</c><00:13:26.240><c> return</c><00:13:26.600><c> products</c> 00:13:26.990 --> 00:13:27.000 align:start position:0% error data is the return products 00:13:27.000 --> 00:13:28.629 align:start position:0% error data is the return products fetching<00:13:27.320><c> is</c><00:13:27.440><c> a</c><00:13:27.560><c> Boolean</c><00:13:28.000><c> I</c><00:13:28.120><c> can</c><00:13:28.240><c> use</c><00:13:28.399><c> to</c><00:13:28.519><c> show</c> 00:13:28.629 --> 00:13:28.639 align:start position:0% fetching is a Boolean I can use to show 00:13:28.639 --> 00:13:30.949 align:start position:0% fetching is a Boolean I can use to show a<00:13:28.760><c> loading</c><00:13:29.279><c> spinner</c><00:13:30.000><c> air</c><00:13:30.279><c> is</c><00:13:30.399><c> going</c><00:13:30.519><c> to</c><00:13:30.600><c> be</c><00:13:30.720><c> any</c> 00:13:30.949 --> 00:13:30.959 align:start position:0% a loading spinner air is going to be any 00:13:30.959 --> 00:13:33.150 align:start position:0% a loading spinner air is going to be any errors<00:13:31.360><c> we</c><00:13:31.440><c> can</c><00:13:31.560><c> display</c><00:13:31.959><c> those</c><00:13:32.079><c> to</c> 00:13:33.150 --> 00:13:33.160 align:start position:0% errors we can display those to 00:13:33.160 --> 00:13:35.470 align:start position:0% errors we can display those to users<00:13:34.160><c> I'm</c><00:13:34.320><c> also</c><00:13:34.480><c> using</c><00:13:34.720><c> a</c><00:13:34.800><c> use</c><00:13:35.079><c> find</c><00:13:35.199><c> first</c> 00:13:35.470 --> 00:13:35.480 align:start position:0% users I'm also using a use find first 00:13:35.480 --> 00:13:37.430 align:start position:0% users I'm also using a use find first hook<00:13:35.680><c> to</c><00:13:35.839><c> read</c><00:13:36.079><c> my</c><00:13:36.240><c> current</c><00:13:36.560><c> shop</c><00:13:36.839><c> ID</c><00:13:37.160><c> so</c><00:13:37.279><c> I'm</c> 00:13:37.430 --> 00:13:37.440 align:start position:0% hook to read my current shop ID so I'm 00:13:37.440 --> 00:13:40.110 align:start position:0% hook to read my current shop ID so I'm passing<00:13:37.639><c> in</c><00:13:37.800><c> api.</c><00:13:38.320><c> shop</c><00:13:38.560><c> VI</c><00:13:38.760><c> shop</c><00:13:39.519><c> as</c><00:13:39.639><c> well</c><00:13:39.880><c> as</c> 00:13:40.110 --> 00:13:40.120 align:start position:0% passing in api. shop VI shop as well as 00:13:40.120 --> 00:13:42.110 align:start position:0% passing in api. shop VI shop as well as an<00:13:40.320><c> additional</c><00:13:40.800><c> selection</c><00:13:41.399><c> criteria</c><00:13:41.920><c> and</c><00:13:42.000><c> I'm</c> 00:13:42.110 --> 00:13:42.120 align:start position:0% an additional selection criteria and I'm 00:13:42.120 --> 00:13:43.750 align:start position:0% an additional selection criteria and I'm just<00:13:42.240><c> setting</c><00:13:42.519><c> ID</c><00:13:42.760><c> to</c><00:13:42.920><c> true</c><00:13:43.160><c> so</c><00:13:43.279><c> I'll</c><00:13:43.519><c> only</c> 00:13:43.750 --> 00:13:43.760 align:start position:0% just setting ID to true so I'll only 00:13:43.760 --> 00:13:45.590 align:start position:0% just setting ID to true so I'll only read<00:13:44.040><c> the</c><00:13:44.160><c> ID</c><00:13:44.440><c> I</c><00:13:44.480><c> don't</c><00:13:44.639><c> need</c><00:13:44.839><c> the</c><00:13:45.079><c> rest</c><00:13:45.320><c> of</c><00:13:45.480><c> my</c> 00:13:45.590 --> 00:13:45.600 align:start position:0% read the ID I don't need the rest of my 00:13:45.600 --> 00:13:48.509 align:start position:0% read the ID I don't need the rest of my shop<00:13:45.959><c> Fields</c><00:13:46.800><c> once</c><00:13:47.040><c> again</c><00:13:47.440><c> data</c><00:13:47.760><c> fetching</c><00:13:48.279><c> and</c> 00:13:48.509 --> 00:13:48.519 align:start position:0% shop Fields once again data fetching and 00:13:48.519 --> 00:13:50.910 align:start position:0% shop Fields once again data fetching and error<00:13:48.839><c> and</c><00:13:48.959><c> I'm</c><00:13:49.120><c> aliasing</c><00:13:50.000><c> all</c> 00:13:50.910 --> 00:13:50.920 align:start position:0% error and I'm aliasing all 00:13:50.920 --> 00:13:53.310 align:start position:0% error and I'm aliasing all those<00:13:51.920><c> I</c><00:13:52.000><c> have</c><00:13:52.079><c> a</c><00:13:52.199><c> little</c><00:13:52.399><c> use</c><00:13:52.720><c> effect</c><00:13:53.079><c> hook</c> 00:13:53.310 --> 00:13:53.320 align:start position:0% those I have a little use effect hook 00:13:53.320 --> 00:13:55.829 align:start position:0% those I have a little use effect hook here<00:13:53.480><c> so</c><00:13:53.680><c> when</c><00:13:53.839><c> I</c><00:13:53.959><c> do</c><00:13:54.320><c> actually</c><00:13:54.839><c> have</c><00:13:55.480><c> products</c> 00:13:55.829 --> 00:13:55.839 align:start position:0% here so when I do actually have products 00:13:55.839 --> 00:13:59.150 align:start position:0% here so when I do actually have products or<00:13:56.079><c> my</c><00:13:56.440><c> products</c><00:13:56.920><c> change</c><00:13:57.920><c> uh</c><00:13:58.120><c> if</c><00:13:58.519><c> they</c><00:13:58.639><c> do</c> 00:13:59.150 --> 00:13:59.160 align:start position:0% or my products change uh if they do 00:13:59.160 --> 00:14:01.389 align:start position:0% or my products change uh if they do indeed<00:13:59.639><c> exist</c><00:14:00.399><c> I'm</c><00:14:00.519><c> just</c><00:14:00.680><c> mapping</c><00:14:01.040><c> these</c><00:14:01.199><c> to</c> 00:14:01.389 --> 00:14:01.399 align:start position:0% indeed exist I'm just mapping these to 00:14:01.399 --> 00:14:03.829 align:start position:0% indeed exist I'm just mapping these to an<00:14:01.680><c> options</c><00:14:02.360><c> object</c><00:14:03.160><c> uh</c><00:14:03.279><c> setting</c><00:14:03.560><c> them</c><00:14:03.720><c> in</c> 00:14:03.829 --> 00:14:03.839 align:start position:0% an options object uh setting them in 00:14:03.839 --> 00:14:05.110 align:start position:0% an options object uh setting them in some<00:14:04.040><c> react</c><00:14:04.360><c> State</c><00:14:04.560><c> and</c><00:14:04.680><c> that's</c><00:14:04.839><c> what</c><00:14:04.959><c> I'm</c> 00:14:05.110 --> 00:14:05.120 align:start position:0% some react State and that's what I'm 00:14:05.120 --> 00:14:09.189 align:start position:0% some react State and that's what I'm actually<00:14:05.480><c> feeding</c><00:14:06.040><c> in</c><00:14:06.880><c> if</c><00:14:06.959><c> I</c><00:14:07.199><c> go</c><00:14:07.360><c> ahead</c><00:14:08.199><c> and</c> 00:14:09.189 --> 00:14:09.199 align:start position:0% actually feeding in if I go ahead and 00:14:09.199 --> 00:14:11.389 align:start position:0% actually feeding in if I go ahead and highlight<00:14:09.639><c> product</c><00:14:10.000><c> options</c><00:14:10.480><c> here</c><00:14:11.160><c> I'm</c><00:14:11.279><c> just</c> 00:14:11.389 --> 00:14:11.399 align:start position:0% highlight product options here I'm just 00:14:11.399 --> 00:14:13.509 align:start position:0% highlight product options here I'm just feeding<00:14:11.839><c> that</c><00:14:12.000><c> into</c><00:14:12.320><c> my</c><00:14:12.519><c> prepurchase</c><00:14:12.959><c> form</c> 00:14:13.509 --> 00:14:13.519 align:start position:0% feeding that into my prepurchase form 00:14:13.519 --> 00:14:15.430 align:start position:0% feeding that into my prepurchase form component<00:14:13.920><c> to</c><00:14:14.040><c> be</c><00:14:14.279><c> offered</c><00:14:14.680><c> in</c><00:14:14.839><c> that</c><00:14:15.120><c> drop</c> 00:14:15.430 --> 00:14:15.440 align:start position:0% component to be offered in that drop 00:14:15.440 --> 00:14:17.269 align:start position:0% component to be offered in that drop down<00:14:16.279><c> and</c><00:14:16.399><c> the</c><00:14:16.519><c> rest</c><00:14:16.639><c> of</c><00:14:16.759><c> this</c><00:14:16.839><c> is</c><00:14:17.000><c> just</c><00:14:17.120><c> plain</c> 00:14:17.269 --> 00:14:17.279 align:start position:0% down and the rest of this is just plain 00:14:17.279 --> 00:14:19.790 align:start position:0% down and the rest of this is just plain old<00:14:17.480><c> shopy</c><00:14:18.000><c> Polaris</c><00:14:18.920><c> uh</c><00:14:19.040><c> which</c><00:14:19.160><c> is</c><00:14:19.360><c> pretty</c> 00:14:19.790 --> 00:14:19.800 align:start position:0% old shopy Polaris uh which is pretty 00:14:19.800 --> 00:14:21.749 align:start position:0% old shopy Polaris uh which is pretty groovy<00:14:20.800><c> so</c><00:14:20.920><c> I'm</c><00:14:21.040><c> just</c><00:14:21.120><c> going</c><00:14:21.240><c> to</c><00:14:21.360><c> go</c><00:14:21.519><c> back</c><00:14:21.639><c> up</c> 00:14:21.749 --> 00:14:21.759 align:start position:0% groovy so I'm just going to go back up 00:14:21.759 --> 00:14:23.350 align:start position:0% groovy so I'm just going to go back up to<00:14:21.920><c> my</c><00:14:22.079><c> pre-</c><00:14:22.320><c> purchase</c><00:14:22.600><c> form</c><00:14:22.839><c> now</c><00:14:23.000><c> this</c><00:14:23.120><c> is</c><00:14:23.199><c> the</c> 00:14:23.350 --> 00:14:23.360 align:start position:0% to my pre- purchase form now this is the 00:14:23.360 --> 00:14:26.230 align:start position:0% to my pre- purchase form now this is the component<00:14:23.839><c> I</c><00:14:24.000><c> had</c><00:14:24.120><c> in</c><00:14:24.279><c> that</c><00:14:24.440><c> blower</c><00:14:25.079><c> block</c><00:14:26.079><c> one</c> 00:14:26.230 --> 00:14:26.240 align:start position:0% component I had in that blower block one 00:14:26.240 --> 00:14:28.110 align:start position:0% component I had in that blower block one thing<00:14:26.399><c> I</c><00:14:26.519><c> do</c><00:14:26.639><c> want</c><00:14:26.720><c> to</c><00:14:26.880><c> point</c><00:14:27.040><c> out</c><00:14:27.320><c> here</c><00:14:27.720><c> is</c><00:14:27.839><c> use</c> 00:14:28.110 --> 00:14:28.120 align:start position:0% thing I do want to point out here is use 00:14:28.120 --> 00:14:30.710 align:start position:0% thing I do want to point out here is use action<00:14:28.360><c> form</c><00:14:28.759><c> so</c><00:14:28.880><c> you</c><00:14:29.199><c> notice</c><00:14:29.880><c> in</c><00:14:30.040><c> my</c><00:14:30.199><c> form</c><00:14:30.639><c> I</c> 00:14:30.710 --> 00:14:30.720 align:start position:0% action form so you notice in my form I 00:14:30.720 --> 00:14:34.189 align:start position:0% action form so you notice in my form I don't<00:14:31.079><c> have</c><00:14:31.440><c> any</c><00:14:31.759><c> react</c><00:14:32.240><c> use</c><00:14:32.720><c> State</c><00:14:33.120><c> hooks</c><00:14:33.880><c> use</c> 00:14:34.189 --> 00:14:34.199 align:start position:0% don't have any react use State hooks use 00:14:34.199 --> 00:14:35.949 align:start position:0% don't have any react use State hooks use action<00:14:34.440><c> form</c><00:14:34.680><c> is</c><00:14:34.800><c> handling</c><00:14:35.199><c> my</c><00:14:35.360><c> entire</c><00:14:35.639><c> form</c> 00:14:35.949 --> 00:14:35.959 align:start position:0% action form is handling my entire form 00:14:35.959 --> 00:14:38.629 align:start position:0% action form is handling my entire form state<00:14:36.199><c> for</c><00:14:36.440><c> me</c><00:14:36.680><c> now</c><00:14:37.120><c> in</c><00:14:37.279><c> this</c><00:14:37.480><c> case</c><00:14:38.199><c> my</c><00:14:38.320><c> form</c> 00:14:38.629 --> 00:14:38.639 align:start position:0% state for me now in this case my form 00:14:38.639 --> 00:14:41.710 align:start position:0% state for me now in this case my form state<00:14:38.959><c> is</c><00:14:39.079><c> a</c><00:14:39.240><c> single</c><00:14:39.639><c> input</c><00:14:40.600><c> use</c><00:14:40.920><c> action</c><00:14:41.199><c> form</c> 00:14:41.710 --> 00:14:41.720 align:start position:0% state is a single input use action form 00:14:41.720 --> 00:14:44.509 align:start position:0% state is a single input use action form is<00:14:42.199><c> really</c><00:14:42.519><c> powerful</c><00:14:43.000><c> when</c><00:14:43.120><c> you</c><00:14:43.279><c> get</c><00:14:43.440><c> to</c><00:14:44.120><c> large</c> 00:14:44.509 --> 00:14:44.519 align:start position:0% is really powerful when you get to large 00:14:44.519 --> 00:14:46.590 align:start position:0% is really powerful when you get to large forms<00:14:45.079><c> or</c><00:14:45.240><c> nested</c><00:14:45.639><c> data</c><00:14:45.880><c> models</c><00:14:46.240><c> if</c><00:14:46.320><c> you</c><00:14:46.399><c> want</c> 00:14:46.590 --> 00:14:46.600 align:start position:0% forms or nested data models if you want 00:14:46.600 --> 00:14:48.310 align:start position:0% forms or nested data models if you want an<00:14:46.759><c> example</c><00:14:47.040><c> of</c><00:14:47.160><c> that</c><00:14:47.279><c> check</c><00:14:47.399><c> out</c><00:14:47.560><c> our</c><00:14:47.839><c> product</c> 00:14:48.310 --> 00:14:48.320 align:start position:0% an example of that check out our product 00:14:48.320 --> 00:14:51.350 align:start position:0% an example of that check out our product quiz<00:14:48.680><c> template</c><00:14:49.120><c> or</c><00:14:49.720><c> tutorial</c><00:14:50.720><c> and</c><00:14:50.880><c> use</c><00:14:51.120><c> action</c> 00:14:51.350 --> 00:14:51.360 align:start position:0% quiz template or tutorial and use action 00:14:51.360 --> 00:14:53.470 align:start position:0% quiz template or tutorial and use action form<00:14:52.040><c> it</c><00:14:52.160><c> comes</c><00:14:52.360><c> with</c><00:14:52.480><c> a</c><00:14:52.639><c> submit</c><00:14:53.199><c> that</c><00:14:53.320><c> is</c> 00:14:53.470 --> 00:14:53.480 align:start position:0% form it comes with a submit that is 00:14:53.480 --> 00:14:56.470 align:start position:0% form it comes with a submit that is being<00:14:53.839><c> called</c><00:14:54.240><c> it's</c><00:14:54.360><c> a</c><00:14:54.519><c> function</c><00:14:55.360><c> that</c><00:14:55.600><c> fires</c> 00:14:56.470 --> 00:14:56.480 align:start position:0% being called it's a function that fires 00:14:56.480 --> 00:14:58.629 align:start position:0% being called it's a function that fires this<00:14:56.880><c> API</c><00:14:57.440><c> so</c><00:14:57.600><c> that's</c><00:14:57.720><c> going</c><00:14:57.800><c> to</c><00:14:57.880><c> be</c><00:14:58.040><c> api.</c> 00:14:58.629 --> 00:14:58.639 align:start position:0% this API so that's going to be api. 00:14:58.639 --> 00:15:01.389 align:start position:0% this API so that's going to be api. shopy<00:14:59.079><c> shop.</c><00:14:59.600><c> saave</c><00:15:00.120><c> prepurchase</c><00:15:00.600><c> product</c> 00:15:01.389 --> 00:15:01.399 align:start position:0% shopy shop. saave prepurchase product 00:15:01.399 --> 00:15:03.550 align:start position:0% shopy shop. saave prepurchase product that's<00:15:01.600><c> my</c><00:15:01.800><c> custom</c><00:15:02.160><c> action</c><00:15:02.759><c> so</c><00:15:02.959><c> whenever</c><00:15:03.199><c> I</c><00:15:03.480><c> go</c> 00:15:03.550 --> 00:15:03.560 align:start position:0% that's my custom action so whenever I go 00:15:03.560 --> 00:15:05.629 align:start position:0% that's my custom action so whenever I go ahead<00:15:03.759><c> and</c><00:15:03.920><c> hit</c><00:15:04.079><c> my</c><00:15:04.240><c> button</c><00:15:04.519><c> submit</c><00:15:04.839><c> my</c><00:15:04.959><c> form</c> 00:15:05.629 --> 00:15:05.639 align:start position:0% ahead and hit my button submit my form 00:15:05.639 --> 00:15:07.990 align:start position:0% ahead and hit my button submit my form it<00:15:05.759><c> fires</c><00:15:06.120><c> my</c><00:15:06.320><c> custom</c><00:15:06.639><c> action</c><00:15:07.480><c> and</c><00:15:07.600><c> it</c><00:15:07.720><c> is</c> 00:15:07.990 --> 00:15:08.000 align:start position:0% it fires my custom action and it is 00:15:08.000 --> 00:15:10.150 align:start position:0% it fires my custom action and it is passing<00:15:08.360><c> in</c><00:15:08.720><c> the</c><00:15:08.920><c> ID</c><00:15:09.560><c> which</c><00:15:09.680><c> is</c><00:15:09.800><c> going</c><00:15:09.880><c> to</c><00:15:10.000><c> be</c> 00:15:10.150 --> 00:15:10.160 align:start position:0% passing in the ID which is going to be 00:15:10.160 --> 00:15:13.590 align:start position:0% passing in the ID which is going to be the<00:15:10.320><c> ID</c><00:15:10.680><c> of</c><00:15:10.800><c> the</c><00:15:10.959><c> shop</c><00:15:11.839><c> and</c><00:15:12.199><c> the</c><00:15:12.519><c> product</c><00:15:12.880><c> ID</c> 00:15:13.590 --> 00:15:13.600 align:start position:0% the ID of the shop and the product ID 00:15:13.600 --> 00:15:15.870 align:start position:0% the ID of the shop and the product ID and<00:15:13.720><c> I'm</c><00:15:13.839><c> doing</c><00:15:14.120><c> some</c><00:15:14.320><c> little</c><00:15:15.000><c> Wizardry</c><00:15:15.639><c> down</c> 00:15:15.870 --> 00:15:15.880 align:start position:0% and I'm doing some little Wizardry down 00:15:15.880 --> 00:15:17.749 align:start position:0% and I'm doing some little Wizardry down here<00:15:16.079><c> to</c><00:15:16.320><c> just</c><00:15:16.519><c> watch</c><00:15:16.720><c> for</c><00:15:16.959><c> changes</c><00:15:17.399><c> on</c><00:15:17.560><c> the</c> 00:15:17.749 --> 00:15:17.759 align:start position:0% here to just watch for changes on the 00:15:17.759 --> 00:15:20.110 align:start position:0% here to just watch for changes on the pre-purchase<00:15:18.519><c> product</c><00:15:19.120><c> that's</c><00:15:19.320><c> the</c><00:15:19.639><c> custom</c> 00:15:20.110 --> 00:15:20.120 align:start position:0% pre-purchase product that's the custom 00:15:20.120 --> 00:15:22.670 align:start position:0% pre-purchase product that's the custom field<00:15:20.680><c> on</c><00:15:20.920><c> my</c><00:15:21.120><c> model</c><00:15:21.959><c> and</c><00:15:22.079><c> I'm</c><00:15:22.240><c> just</c><00:15:22.360><c> setting</c> 00:15:22.670 --> 00:15:22.680 align:start position:0% field on my model and I'm just setting 00:15:22.680 --> 00:15:25.350 align:start position:0% field on my model and I'm just setting that<00:15:22.839><c> value</c><00:15:23.160><c> to</c><00:15:23.360><c> product</c><00:15:23.959><c> ID</c><00:15:24.959><c> so</c><00:15:25.160><c> that</c> 00:15:25.350 --> 00:15:25.360 align:start position:0% that value to product ID so that 00:15:25.360 --> 00:15:27.870 align:start position:0% that value to product ID so that whenever<00:15:25.680><c> I</c><00:15:25.800><c> change</c><00:15:26.040><c> it</c><00:15:26.240><c> in</c><00:15:26.399><c> the</c><00:15:26.759><c> input</c><00:15:27.759><c> I'm</c> 00:15:27.870 --> 00:15:27.880 align:start position:0% whenever I change it in the input I'm 00:15:27.880 --> 00:15:30.110 align:start position:0% whenever I change it in the input I'm setting<00:15:28.319><c> that</c><00:15:28.440><c> up</c><00:15:28.600><c> as</c><00:15:28.720><c> a</c><00:15:29.040><c> product</c><00:15:29.360><c> ID</c><00:15:29.680><c> and</c><00:15:29.839><c> not</c> 00:15:30.110 --> 00:15:30.120 align:start position:0% setting that up as a product ID and not 00:15:30.120 --> 00:15:32.749 align:start position:0% setting that up as a product ID and not as<00:15:30.279><c> the</c><00:15:30.480><c> pre-</c><00:15:30.720><c> purchased</c><00:15:31.120><c> product</c> 00:15:32.749 --> 00:15:32.759 align:start position:0% as the pre- purchased product 00:15:32.759 --> 00:15:34.949 align:start position:0% as the pre- purchased product field<00:15:33.759><c> the</c><00:15:33.880><c> other</c><00:15:34.040><c> thing</c><00:15:34.199><c> to</c><00:15:34.319><c> point</c><00:15:34.519><c> out</c><00:15:34.800><c> is</c> 00:15:34.949 --> 00:15:34.959 align:start position:0% field the other thing to point out is 00:15:34.959 --> 00:15:36.509 align:start position:0% field the other thing to point out is that<00:15:35.199><c> because</c><00:15:35.480><c> Polaris</c><00:15:35.880><c> is</c><00:15:36.000><c> a</c><00:15:36.120><c> controlled</c> 00:15:36.509 --> 00:15:36.519 align:start position:0% that because Polaris is a controlled 00:15:36.519 --> 00:15:37.829 align:start position:0% that because Polaris is a controlled component<00:15:36.959><c> Library</c><00:15:37.319><c> I'm</c><00:15:37.440><c> using</c><00:15:37.680><c> this</c> 00:15:37.829 --> 00:15:37.839 align:start position:0% component Library I'm using this 00:15:37.839 --> 00:15:39.790 align:start position:0% component Library I'm using this controller<00:15:38.319><c> component</c><00:15:38.800><c> I</c><00:15:38.880><c> am</c><00:15:39.040><c> importing</c><00:15:39.519><c> this</c> 00:15:39.790 --> 00:15:39.800 align:start position:0% controller component I am importing this 00:15:39.800 --> 00:15:42.509 align:start position:0% controller component I am importing this from<00:15:39.959><c> my</c><00:15:40.120><c> gadg</c><00:15:40.360><c> in</c><00:15:40.560><c> react</c><00:15:41.360><c> Library</c><00:15:42.360><c> I'm</c> 00:15:42.509 --> 00:15:42.519 align:start position:0% from my gadg in react Library I'm 00:15:42.519 --> 00:15:44.389 align:start position:0% from my gadg in react Library I'm passing<00:15:42.759><c> in</c><00:15:42.880><c> a</c><00:15:43.079><c> name</c><00:15:43.480><c> I</c><00:15:43.600><c> got</c><00:15:43.759><c> my</c><00:15:43.920><c> model</c><00:15:44.279><c> and</c> 00:15:44.389 --> 00:15:44.399 align:start position:0% passing in a name I got my model and 00:15:44.399 --> 00:15:47.550 align:start position:0% passing in a name I got my model and then<00:15:45.079><c> field</c><00:15:46.079><c> and</c><00:15:46.440><c> this</c><00:15:46.560><c> is</c><00:15:46.720><c> what</c><00:15:46.920><c> handles</c><00:15:47.440><c> all</c> 00:15:47.550 --> 00:15:47.560 align:start position:0% then field and this is what handles all 00:15:47.560 --> 00:15:49.629 align:start position:0% then field and this is what handles all of<00:15:47.720><c> my</c><00:15:47.839><c> form</c><00:15:48.160><c> state</c><00:15:48.480><c> for</c><00:15:48.680><c> me</c><00:15:48.920><c> so</c><00:15:49.079><c> I</c><00:15:49.240><c> just</c><00:15:49.440><c> pass</c> 00:15:49.629 --> 00:15:49.639 align:start position:0% of my form state for me so I just pass 00:15:49.639 --> 00:15:51.670 align:start position:0% of my form state for me so I just pass in<00:15:49.800><c> this</c><00:15:50.000><c> control</c><00:15:50.680><c> this</c><00:15:50.759><c> is</c><00:15:50.959><c> coming</c><00:15:51.519><c> right</c> 00:15:51.670 --> 00:15:51.680 align:start position:0% in this control this is coming right 00:15:51.680 --> 00:15:53.430 align:start position:0% in this control this is coming right from<00:15:51.839><c> my</c><00:15:52.000><c> use</c><00:15:52.240><c> action</c><00:15:52.519><c> form</c> 00:15:53.430 --> 00:15:53.440 align:start position:0% from my use action form 00:15:53.440 --> 00:15:56.030 align:start position:0% from my use action form hook<00:15:54.440><c> and</c><00:15:54.600><c> then</c><00:15:54.800><c> in</c><00:15:54.959><c> my</c><00:15:55.120><c> render</c><00:15:55.600><c> I</c><00:15:55.720><c> get</c><00:15:55.880><c> my</c> 00:15:56.030 --> 00:15:56.040 align:start position:0% hook and then in my render I get my 00:15:56.040 --> 00:15:58.990 align:start position:0% hook and then in my render I get my field<00:15:56.880><c> I'm</c><00:15:57.000><c> just</c><00:15:57.240><c> pulling</c><00:15:57.560><c> out</c><00:15:57.759><c> the</c><00:15:57.959><c> ref</c><00:15:58.399><c> polar</c> 00:15:58.990 --> 00:15:59.000 align:start position:0% field I'm just pulling out the ref polar 00:15:59.000 --> 00:16:01.350 align:start position:0% field I'm just pulling out the ref polar doesn't<00:15:59.240><c> like</c><00:15:59.440><c> refs</c><00:16:00.399><c> uh</c><00:16:00.519><c> spreading</c><00:16:00.920><c> the</c><00:16:01.040><c> field</c> 00:16:01.350 --> 00:16:01.360 align:start position:0% doesn't like refs uh spreading the field 00:16:01.360 --> 00:16:02.990 align:start position:0% doesn't like refs uh spreading the field props<00:16:01.720><c> and</c><00:16:01.839><c> this</c><00:16:01.959><c> is</c><00:16:02.120><c> taking</c><00:16:02.399><c> care</c><00:16:02.560><c> of</c><00:16:02.759><c> things</c> 00:16:02.990 --> 00:16:03.000 align:start position:0% props and this is taking care of things 00:16:03.000 --> 00:16:06.189 align:start position:0% props and this is taking care of things like<00:16:03.199><c> my</c><00:16:03.319><c> onchange</c><00:16:04.120><c> my</c><00:16:04.360><c> value</c><00:16:04.880><c> my</c><00:16:05.079><c> name</c><00:16:05.880><c> all</c><00:16:06.040><c> of</c> 00:16:06.189 --> 00:16:06.199 align:start position:0% like my onchange my value my name all of 00:16:06.199 --> 00:16:07.629 align:start position:0% like my onchange my value my name all of the<00:16:06.360><c> default</c><00:16:06.680><c> Fields</c><00:16:07.040><c> you</c><00:16:07.199><c> need</c><00:16:07.360><c> for</c><00:16:07.480><c> your</c> 00:16:07.629 --> 00:16:07.639 align:start position:0% the default Fields you need for your 00:16:07.639 --> 00:16:09.749 align:start position:0% the default Fields you need for your form<00:16:08.399><c> it'll</c><00:16:08.680><c> be</c><00:16:08.800><c> taken</c><00:16:09.079><c> care</c><00:16:09.240><c> of</c><00:16:09.480><c> which</c><00:16:09.600><c> is</c> 00:16:09.749 --> 00:16:09.759 align:start position:0% form it'll be taken care of which is 00:16:09.759 --> 00:16:11.389 align:start position:0% form it'll be taken care of which is great<00:16:10.079><c> and</c><00:16:10.160><c> then</c><00:16:10.319><c> I</c><00:16:10.399><c> am</c><00:16:10.639><c> passing</c><00:16:10.959><c> in</c><00:16:11.160><c> my</c> 00:16:11.389 --> 00:16:11.399 align:start position:0% great and then I am passing in my 00:16:11.399 --> 00:16:14.069 align:start position:0% great and then I am passing in my products<00:16:11.880><c> as</c><00:16:12.240><c> options</c><00:16:13.240><c> so</c><00:16:13.480><c> that's</c><00:16:13.639><c> my</c><00:16:13.800><c> entire</c> 00:16:14.069 --> 00:16:14.079 align:start position:0% products as options so that's my entire 00:16:14.079 --> 00:16:15.749 align:start position:0% products as options so that's my entire front<00:16:14.319><c> end</c><00:16:14.880><c> now</c><00:16:15.040><c> we</c><00:16:15.160><c> can</c><00:16:15.240><c> get</c><00:16:15.360><c> to</c><00:16:15.480><c> the</c><00:16:15.600><c> good</c> 00:16:15.749 --> 00:16:15.759 align:start position:0% front end now we can get to the good 00:16:15.759 --> 00:16:17.269 align:start position:0% front end now we can get to the good stuff<00:16:16.000><c> so</c><00:16:16.120><c> I</c><00:16:16.199><c> can</c><00:16:16.319><c> see</c><00:16:16.440><c> that</c><00:16:16.600><c> this</c><00:16:16.720><c> works</c><00:16:17.079><c> now</c><00:16:17.199><c> I</c> 00:16:17.269 --> 00:16:17.279 align:start position:0% stuff so I can see that this works now I 00:16:17.279 --> 00:16:20.590 align:start position:0% stuff so I can see that this works now I want<00:16:17.399><c> to</c><00:16:17.560><c> build</c><00:16:17.839><c> my</c><00:16:18.360><c> extension</c><00:16:19.360><c> so</c><00:16:19.880><c> let's</c><00:16:20.120><c> go</c> 00:16:20.590 --> 00:16:20.600 align:start position:0% want to build my extension so let's go 00:16:20.600 --> 00:16:24.269 align:start position:0% want to build my extension so let's go ahead<00:16:21.600><c> I</c><00:16:21.759><c> am</c><00:16:21.959><c> going</c><00:16:22.360><c> to</c><00:16:23.360><c> open</c><00:16:23.600><c> up</c><00:16:23.800><c> my</c><00:16:23.959><c> Gadget</c> 00:16:24.269 --> 00:16:24.279 align:start position:0% ahead I am going to open up my Gadget 00:16:24.279 --> 00:16:28.069 align:start position:0% ahead I am going to open up my Gadget command<00:16:24.680><c> pallet</c><00:16:25.160><c> it's</c><00:16:25.360><c> just</c><00:16:25.680><c> command</c><00:16:26.639><c> p</c><00:16:27.639><c> and</c><00:16:28.000><c> I</c> 00:16:28.069 --> 00:16:28.079 align:start position:0% command pallet it's just command p and I 00:16:28.079 --> 00:16:31.509 align:start position:0% command pallet it's just command p and I can<00:16:28.240><c> go</c><00:16:28.319><c> ahead</c><00:16:28.519><c> and</c><00:16:28.600><c> run</c><00:16:29.120><c> yarn</c> 00:16:31.509 --> 00:16:31.519 align:start position:0% can go ahead and run yarn 00:16:31.519 --> 00:16:34.030 align:start position:0% can go ahead and run yarn ad<00:16:32.519><c> Shopify</c> 00:16:34.030 --> 00:16:34.040 align:start position:0% ad Shopify 00:16:34.040 --> 00:16:38.509 align:start position:0% ad Shopify app<00:16:35.040><c> and</c><00:16:35.880><c> Shopify</c> 00:16:38.509 --> 00:16:38.519 align:start position:0% app and Shopify 00:16:38.519 --> 00:16:41.870 align:start position:0% app and Shopify CLI<00:16:39.519><c> so</c><00:16:39.720><c> normally</c><00:16:40.519><c> what</c><00:16:40.680><c> you</c><00:16:40.880><c> do</c><00:16:41.360><c> or</c><00:16:41.560><c> what</c><00:16:41.680><c> you</c> 00:16:41.870 --> 00:16:41.880 align:start position:0% CLI so normally what you do or what you 00:16:41.880 --> 00:16:43.430 align:start position:0% CLI so normally what you do or what you could<00:16:42.079><c> do</c><00:16:42.279><c> with</c><00:16:42.519><c> this</c><00:16:42.720><c> or</c><00:16:42.920><c> what</c><00:16:43.040><c> you</c><00:16:43.160><c> did</c> 00:16:43.430 --> 00:16:43.440 align:start position:0% could do with this or what you did 00:16:43.440 --> 00:16:44.670 align:start position:0% could do with this or what you did before<00:16:43.759><c> if</c><00:16:43.880><c> you've</c><00:16:44.040><c> built</c><00:16:44.240><c> an</c><00:16:44.319><c> extension</c> 00:16:44.670 --> 00:16:44.680 align:start position:0% before if you've built an extension 00:16:44.680 --> 00:16:46.509 align:start position:0% before if you've built an extension before<00:16:45.000><c> with</c><00:16:45.240><c> Gadget</c><00:16:45.600><c> is</c><00:16:45.720><c> you</c><00:16:45.839><c> would</c><00:16:46.079><c> go</c><00:16:46.240><c> ahead</c> 00:16:46.509 --> 00:16:46.519 align:start position:0% before with Gadget is you would go ahead 00:16:46.519 --> 00:16:49.269 align:start position:0% before with Gadget is you would go ahead and<00:16:46.639><c> create</c><00:16:46.880><c> a</c><00:16:47.040><c> new</c><00:16:47.199><c> shopi</c><00:16:47.759><c> CLI</c><00:16:48.319><c> app</c><00:16:49.000><c> it</c><00:16:49.120><c> would</c> 00:16:49.269 --> 00:16:49.279 align:start position:0% and create a new shopi CLI app it would 00:16:49.279 --> 00:16:51.749 align:start position:0% and create a new shopi CLI app it would include<00:16:49.720><c> these</c><00:16:50.399><c> dependencies</c><00:16:51.399><c> and</c><00:16:51.519><c> you</c><00:16:51.600><c> would</c> 00:16:51.749 --> 00:16:51.759 align:start position:0% include these dependencies and you would 00:16:51.759 --> 00:16:53.309 align:start position:0% include these dependencies and you would build<00:16:52.000><c> your</c><00:16:52.199><c> extension</c><00:16:52.639><c> separately</c><00:16:53.120><c> from</c> 00:16:53.309 --> 00:16:53.319 align:start position:0% build your extension separately from 00:16:53.319 --> 00:16:54.509 align:start position:0% build your extension separately from Gadget<00:16:53.680><c> I'm</c><00:16:53.800><c> actually</c><00:16:53.959><c> going</c><00:16:54.079><c> to</c><00:16:54.160><c> build</c><00:16:54.399><c> my</c> 00:16:54.509 --> 00:16:54.519 align:start position:0% Gadget I'm actually going to build my 00:16:54.519 --> 00:16:56.749 align:start position:0% Gadget I'm actually going to build my extension<00:16:55.000><c> in</c><00:16:55.160><c> my</c><00:16:55.399><c> Gadget</c><00:16:55.839><c> app</c><00:16:56.319><c> and</c><00:16:56.399><c> the</c><00:16:56.519><c> main</c> 00:16:56.749 --> 00:16:56.759 align:start position:0% extension in my Gadget app and the main 00:16:56.759 --> 00:16:58.550 align:start position:0% extension in my Gadget app and the main benefit<00:16:57.079><c> to</c><00:16:57.319><c> this</c><00:16:57.560><c> is</c><00:16:57.680><c> that</c><00:16:57.839><c> now</c><00:16:58.000><c> that</c><00:16:58.199><c> Gadget</c> 00:16:58.550 --> 00:16:58.560 align:start position:0% benefit to this is that now that Gadget 00:16:58.560 --> 00:17:00.949 align:start position:0% benefit to this is that now that Gadget has<00:16:58.920><c> Source</c><00:16:59.240><c> control</c><00:16:59.639><c> support</c><00:17:00.360><c> I</c><00:17:00.440><c> can</c><00:17:00.600><c> manage</c> 00:17:00.949 --> 00:17:00.959 align:start position:0% has Source control support I can manage 00:17:00.959 --> 00:17:03.590 align:start position:0% has Source control support I can manage my<00:17:01.160><c> entire</c><00:17:01.560><c> app</c><00:17:01.839><c> and</c><00:17:02.000><c> my</c><00:17:02.120><c> shopy</c><00:17:02.639><c> extensions</c><00:17:03.319><c> in</c> 00:17:03.590 --> 00:17:03.600 align:start position:0% my entire app and my shopy extensions in 00:17:03.600 --> 00:17:06.990 align:start position:0% my entire app and my shopy extensions in one<00:17:04.199><c> nice</c><00:17:04.640><c> little</c><00:17:05.079><c> neat</c><00:17:05.679><c> package</c><00:17:06.480><c> one</c><00:17:06.679><c> code</c> 00:17:06.990 --> 00:17:07.000 align:start position:0% one nice little neat package one code 00:17:07.000 --> 00:17:09.189 align:start position:0% one nice little neat package one code base<00:17:07.439><c> so</c><00:17:07.720><c> that</c><00:17:07.880><c> is</c><00:17:08.079><c> great</c><00:17:08.679><c> so</c><00:17:08.839><c> that's</c><00:17:09.000><c> what</c><00:17:09.079><c> I'm</c> 00:17:09.189 --> 00:17:09.199 align:start position:0% base so that is great so that's what I'm 00:17:09.199 --> 00:17:10.870 align:start position:0% base so that is great so that's what I'm doing<00:17:09.480><c> I'm</c><00:17:09.600><c> just</c><00:17:09.760><c> installing</c><00:17:10.160><c> my</c><00:17:10.280><c> shopy</c><00:17:10.760><c> app</c> 00:17:10.870 --> 00:17:10.880 align:start position:0% doing I'm just installing my shopy app 00:17:10.880 --> 00:17:14.069 align:start position:0% doing I'm just installing my shopy app and<00:17:11.000><c> shopy</c><00:17:11.760><c> CLI</c><00:17:12.760><c> mpm</c><00:17:13.240><c> packages</c><00:17:13.640><c> so</c><00:17:13.799><c> I</c><00:17:13.839><c> can</c><00:17:13.959><c> go</c> 00:17:14.069 --> 00:17:14.079 align:start position:0% and shopy CLI mpm packages so I can go 00:17:14.079 --> 00:17:16.270 align:start position:0% and shopy CLI mpm packages so I can go ahead<00:17:14.280><c> and</c><00:17:14.439><c> generate</c><00:17:14.880><c> my</c><00:17:15.079><c> extensions</c><00:17:15.880><c> here</c><00:17:16.120><c> in</c> 00:17:16.270 --> 00:17:16.280 align:start position:0% ahead and generate my extensions here in 00:17:16.280 --> 00:17:18.270 align:start position:0% ahead and generate my extensions here in my<00:17:16.520><c> Gadget</c> 00:17:18.270 --> 00:17:18.280 align:start position:0% my Gadget 00:17:18.280 --> 00:17:20.909 align:start position:0% my Gadget project<00:17:19.280><c> I</c><00:17:19.360><c> will</c><00:17:19.559><c> have</c><00:17:19.640><c> to</c><00:17:19.799><c> make</c><00:17:19.919><c> some</c><00:17:20.199><c> edits</c> 00:17:20.909 --> 00:17:20.919 align:start position:0% project I will have to make some edits 00:17:20.919 --> 00:17:23.189 align:start position:0% project I will have to make some edits to<00:17:21.199><c> my</c><00:17:21.439><c> package</c><00:17:21.799><c> Json</c><00:17:22.280><c> file</c><00:17:22.880><c> I'm</c><00:17:23.000><c> just</c><00:17:23.120><c> going</c> 00:17:23.189 --> 00:17:23.199 align:start position:0% to my package Json file I'm just going 00:17:23.199 --> 00:17:25.990 align:start position:0% to my package Json file I'm just going to<00:17:23.319><c> leave</c><00:17:23.559><c> this</c><00:17:23.679><c> for</c><00:17:24.240><c> now</c><00:17:25.240><c> so</c><00:17:25.559><c> the</c><00:17:25.679><c> first</c><00:17:25.880><c> thing</c> 00:17:25.990 --> 00:17:26.000 align:start position:0% to leave this for now so the first thing 00:17:26.000 --> 00:17:28.950 align:start position:0% to leave this for now so the first thing I'll<00:17:26.160><c> need</c><00:17:26.280><c> to</c><00:17:26.439><c> do</c><00:17:27.000><c> is</c><00:17:27.280><c> add</c><00:17:27.600><c> uh</c><00:17:27.760><c> workspaces</c><00:17:28.480><c> and</c> 00:17:28.950 --> 00:17:28.960 align:start position:0% I'll need to do is add uh workspaces and 00:17:28.960 --> 00:17:31.390 align:start position:0% I'll need to do is add uh workspaces and trusted<00:17:29.799><c> dependencies</c><00:17:30.799><c> I'm</c><00:17:30.919><c> just</c><00:17:31.080><c> going</c><00:17:31.160><c> to</c> 00:17:31.390 --> 00:17:31.400 align:start position:0% trusted dependencies I'm just going to 00:17:31.400 --> 00:17:35.230 align:start position:0% trusted dependencies I'm just going to paste<00:17:31.679><c> these</c><00:17:31.799><c> at</c><00:17:31.919><c> the</c><00:17:32.080><c> bottom</c><00:17:32.760><c> here</c><00:17:34.240><c> fantastic</c> 00:17:35.230 --> 00:17:35.240 align:start position:0% paste these at the bottom here fantastic 00:17:35.240 --> 00:17:37.110 align:start position:0% paste these at the bottom here fantastic once<00:17:35.520><c> again</c><00:17:35.960><c> these</c><00:17:36.160><c> are</c><00:17:36.400><c> in</c><00:17:36.559><c> the</c><00:17:36.760><c> written</c> 00:17:37.110 --> 00:17:37.120 align:start position:0% once again these are in the written 00:17:37.120 --> 00:17:38.950 align:start position:0% once again these are in the written tutorials<00:17:37.679><c> if</c><00:17:37.760><c> you</c><00:17:37.880><c> want</c><00:17:38.000><c> to</c><00:17:38.240><c> copy</c><00:17:38.600><c> paste</c> 00:17:38.950 --> 00:17:38.960 align:start position:0% tutorials if you want to copy paste 00:17:38.960 --> 00:17:41.230 align:start position:0% tutorials if you want to copy paste directly<00:17:39.799><c> I'm</c><00:17:39.960><c> also</c><00:17:40.120><c> going</c><00:17:40.200><c> to</c><00:17:40.440><c> add</c><00:17:40.880><c> the</c> 00:17:41.230 --> 00:17:41.240 align:start position:0% directly I'm also going to add the 00:17:41.240 --> 00:17:45.070 align:start position:0% directly I'm also going to add the default<00:17:42.240><c> scripts</c><00:17:42.880><c> included</c><00:17:43.600><c> with</c><00:17:43.919><c> Shopify</c> 00:17:45.070 --> 00:17:45.080 align:start position:0% default scripts included with Shopify 00:17:45.080 --> 00:17:48.430 align:start position:0% default scripts included with Shopify apps<00:17:46.080><c> I</c><00:17:46.160><c> am</c><00:17:46.400><c> just</c><00:17:46.559><c> going</c><00:17:46.640><c> to</c><00:17:47.080><c> expand</c><00:17:47.600><c> this</c><00:17:48.000><c> save</c> 00:17:48.430 --> 00:17:48.440 align:start position:0% apps I am just going to expand this save 00:17:48.440 --> 00:17:51.750 align:start position:0% apps I am just going to expand this save those<00:17:49.000><c> and</c><00:17:49.400><c> I</c><00:17:49.520><c> am</c><00:17:49.840><c> good</c><00:17:50.160><c> to</c><00:17:50.520><c> go</c><00:17:51.440><c> now</c><00:17:51.559><c> what</c><00:17:51.679><c> I</c> 00:17:51.750 --> 00:17:51.760 align:start position:0% those and I am good to go now what I 00:17:51.760 --> 00:17:53.110 align:start position:0% those and I am good to go now what I need<00:17:51.919><c> to</c><00:17:52.000><c> do</c><00:17:52.120><c> in</c><00:17:52.200><c> order</c><00:17:52.400><c> to</c><00:17:52.559><c> actually</c><00:17:52.760><c> generate</c> 00:17:53.110 --> 00:17:53.120 align:start position:0% need to do in order to actually generate 00:17:53.120 --> 00:17:54.909 align:start position:0% need to do in order to actually generate my<00:17:53.280><c> extension</c><00:17:53.720><c> is</c><00:17:53.880><c> pull</c><00:17:54.120><c> down</c><00:17:54.280><c> my</c><00:17:54.440><c> code</c><00:17:54.640><c> to</c><00:17:54.799><c> my</c> 00:17:54.909 --> 00:17:54.919 align:start position:0% my extension is pull down my code to my 00:17:54.919 --> 00:17:56.470 align:start position:0% my extension is pull down my code to my local<00:17:55.159><c> machine</c><00:17:55.480><c> and</c><00:17:55.600><c> I'm</c><00:17:55.679><c> going</c><00:17:55.760><c> to</c><00:17:55.840><c> use</c><00:17:56.000><c> ggt</c> 00:17:56.470 --> 00:17:56.480 align:start position:0% local machine and I'm going to use ggt 00:17:56.480 --> 00:17:57.990 align:start position:0% local machine and I'm going to use ggt to<00:17:56.600><c> do</c><00:17:56.760><c> that</c><00:17:56.919><c> so</c><00:17:57.039><c> I</c><00:17:57.120><c> have</c><00:17:57.240><c> this</c><00:17:57.400><c> little</c><00:17:57.600><c> Cloud</c> 00:17:57.990 --> 00:17:58.000 align:start position:0% to do that so I have this little Cloud 00:17:58.000 --> 00:18:00.710 align:start position:0% to do that so I have this little Cloud icon<00:17:58.919><c> I'm</c><00:17:59.000><c> just</c><00:17:59.120><c> GNA</c><00:17:59.520><c> copy</c><00:17:59.919><c> this</c> 00:18:00.710 --> 00:18:00.720 align:start position:0% icon I'm just GNA copy this 00:18:00.720 --> 00:18:04.750 align:start position:0% icon I'm just GNA copy this command<00:18:01.720><c> ggt</c><00:18:02.240><c> is</c><00:18:02.400><c> Gadget</c><00:18:02.799><c> CLI</c><00:18:03.360><c> tool</c><00:18:04.360><c> and</c><00:18:04.600><c> what</c> 00:18:04.750 --> 00:18:04.760 align:start position:0% command ggt is Gadget CLI tool and what 00:18:04.760 --> 00:18:07.230 align:start position:0% command ggt is Gadget CLI tool and what it<00:18:04.960><c> does</c><00:18:05.480><c> is</c><00:18:05.640><c> it</c><00:18:05.840><c> pulls</c><00:18:06.240><c> your</c><00:18:06.440><c> Gadget</c><00:18:06.919><c> project</c> 00:18:07.230 --> 00:18:07.240 align:start position:0% it does is it pulls your Gadget project 00:18:07.240 --> 00:18:08.909 align:start position:0% it does is it pulls your Gadget project down<00:18:07.400><c> to</c><00:18:07.520><c> your</c><00:18:07.679><c> local</c><00:18:08.000><c> machine</c><00:18:08.520><c> and</c><00:18:08.640><c> then</c> 00:18:08.909 --> 00:18:08.919 align:start position:0% down to your local machine and then 00:18:08.919 --> 00:18:11.470 align:start position:0% down to your local machine and then while<00:18:09.120><c> it's</c><00:18:09.280><c> running</c><00:18:09.960><c> while</c><00:18:10.200><c> this</c><00:18:10.440><c> ggt</c><00:18:11.080><c> Dev</c> 00:18:11.470 --> 00:18:11.480 align:start position:0% while it's running while this ggt Dev 00:18:11.480 --> 00:18:13.470 align:start position:0% while it's running while this ggt Dev command<00:18:12.320><c> is</c><00:18:12.440><c> running</c><00:18:12.760><c> in</c><00:18:12.880><c> the</c><00:18:13.000><c> background</c><00:18:13.360><c> you</c> 00:18:13.470 --> 00:18:13.480 align:start position:0% command is running in the background you 00:18:13.480 --> 00:18:15.190 align:start position:0% command is running in the background you see<00:18:13.640><c> it</c><00:18:13.720><c> will</c><00:18:13.840><c> just</c><00:18:14.000><c> stay</c><00:18:14.200><c> running</c><00:18:15.039><c> any</c> 00:18:15.190 --> 00:18:15.200 align:start position:0% see it will just stay running any 00:18:15.200 --> 00:18:17.270 align:start position:0% see it will just stay running any changes<00:18:15.600><c> I</c><00:18:15.720><c> make</c><00:18:15.960><c> locally</c><00:18:16.440><c> or</c><00:18:16.600><c> in</c><00:18:16.760><c> my</c><00:18:16.960><c> Gadget</c> 00:18:17.270 --> 00:18:17.280 align:start position:0% changes I make locally or in my Gadget 00:18:17.280 --> 00:18:20.590 align:start position:0% changes I make locally or in my Gadget editor<00:18:18.080><c> will</c><00:18:18.799><c> be</c><00:18:19.280><c> pushed</c><00:18:19.799><c> to</c><00:18:20.039><c> the</c><00:18:20.240><c> other</c> 00:18:20.590 --> 00:18:20.600 align:start position:0% editor will be pushed to the other 00:18:20.600 --> 00:18:22.029 align:start position:0% editor will be pushed to the other location<00:18:21.080><c> so</c><00:18:21.240><c> it</c><00:18:21.280><c> will</c><00:18:21.440><c> keep</c><00:18:21.640><c> everything</c><00:18:21.880><c> in</c> 00:18:22.029 --> 00:18:22.039 align:start position:0% location so it will keep everything in 00:18:22.039 --> 00:18:24.149 align:start position:0% location so it will keep everything in SEC<00:18:22.400><c> means</c><00:18:22.720><c> I</c><00:18:22.880><c> can</c><00:18:23.080><c> develop</c><00:18:23.400><c> my</c><00:18:23.520><c> Gadget</c><00:18:23.840><c> apps</c> 00:18:24.149 --> 00:18:24.159 align:start position:0% SEC means I can develop my Gadget apps 00:18:24.159 --> 00:18:25.990 align:start position:0% SEC means I can develop my Gadget apps locally<00:18:25.159><c> so</c><00:18:25.280><c> I'm</c><00:18:25.360><c> just</c><00:18:25.480><c> going</c><00:18:25.559><c> to</c><00:18:25.679><c> open</c><00:18:25.840><c> up</c> 00:18:25.990 --> 00:18:26.000 align:start position:0% locally so I'm just going to open up 00:18:26.000 --> 00:18:27.549 align:start position:0% locally so I'm just going to open up another<00:18:26.320><c> tab</c><00:18:26.559><c> here</c><00:18:26.679><c> let's</c><00:18:26.919><c> make</c><00:18:27.039><c> this</c><00:18:27.120><c> a</c><00:18:27.240><c> bit</c> 00:18:27.549 --> 00:18:27.559 align:start position:0% another tab here let's make this a bit 00:18:27.559 --> 00:18:31.190 align:start position:0% another tab here let's make this a bit bigger<00:18:28.559><c> and</c><00:18:28.880><c> so</c><00:18:29.320><c> if</c><00:18:29.600><c> I</c><00:18:29.919><c> change</c><00:18:30.360><c> directory</c><00:18:30.880><c> into</c> 00:18:31.190 --> 00:18:31.200 align:start position:0% bigger and so if I change directory into 00:18:31.200 --> 00:18:35.390 align:start position:0% bigger and so if I change directory into my<00:18:31.440><c> app</c><00:18:31.840><c> pre</c><00:18:32.159><c> purchase</c><00:18:32.600><c> V1</c><00:18:33.559><c> tutorial</c><00:18:34.559><c> I</c><00:18:34.640><c> can</c><00:18:34.840><c> go</c> 00:18:35.390 --> 00:18:35.400 align:start position:0% my app pre purchase V1 tutorial I can go 00:18:35.400 --> 00:18:38.430 align:start position:0% my app pre purchase V1 tutorial I can go ahead<00:18:36.600><c> and</c><00:18:37.600><c> I</c><00:18:37.679><c> am</c><00:18:37.840><c> actually</c><00:18:38.000><c> going</c><00:18:38.120><c> to</c><00:18:38.200><c> do</c><00:18:38.320><c> a</c> 00:18:38.430 --> 00:18:38.440 align:start position:0% ahead and I am actually going to do a 00:18:38.440 --> 00:18:40.630 align:start position:0% ahead and I am actually going to do a bit<00:18:38.600><c> more</c><00:18:38.799><c> setup</c><00:18:39.200><c> first</c><00:18:39.840><c> a</c><00:18:39.960><c> bit</c><00:18:40.080><c> more</c><00:18:40.240><c> setup</c> 00:18:40.630 --> 00:18:40.640 align:start position:0% bit more setup first a bit more setup 00:18:40.640 --> 00:18:42.830 align:start position:0% bit more setup first a bit more setup I'm<00:18:40.799><c> just</c><00:18:40.919><c> going</c><00:18:41.000><c> to</c><00:18:41.159><c> open</c><00:18:41.400><c> my</c> 00:18:42.830 --> 00:18:42.840 align:start position:0% I'm just going to open my 00:18:42.840 --> 00:18:45.870 align:start position:0% I'm just going to open my editor<00:18:43.840><c> and</c><00:18:44.200><c> copy</c><00:18:44.520><c> this</c><00:18:44.760><c> over</c><00:18:45.080><c> here</c><00:18:45.400><c> so</c><00:18:45.559><c> we</c><00:18:45.679><c> got</c> 00:18:45.870 --> 00:18:45.880 align:start position:0% editor and copy this over here so we got 00:18:45.880 --> 00:18:48.950 align:start position:0% editor and copy this over here so we got vs<00:18:46.400><c> code</c><00:18:47.400><c> so</c><00:18:47.600><c> this</c><00:18:47.679><c> is</c><00:18:47.840><c> my</c><00:18:48.039><c> Gadget</c><00:18:48.400><c> app</c><00:18:48.720><c> you</c><00:18:48.799><c> can</c> 00:18:48.950 --> 00:18:48.960 align:start position:0% vs code so this is my Gadget app you can 00:18:48.960 --> 00:18:50.630 align:start position:0% vs code so this is my Gadget app you can see<00:18:49.159><c> I've</c><00:18:49.280><c> got</c><00:18:49.400><c> a</c><00:18:49.880><c> settings.</c> 00:18:50.630 --> 00:18:50.640 align:start position:0% see I've got a settings. 00:18:50.640 --> 00:18:59.110 align:start position:0% see I've got a settings. gadget.storage.extract 00:18:59.110 --> 00:18:59.120 align:start position:0% 00:18:59.120 --> 00:19:01.510 align:start position:0% I<00:18:59.240><c> do</c><00:18:59.440><c> have</c><00:18:59.640><c> a</c><00:19:00.120><c> scheme</c><00:19:00.480><c> of</c><00:19:00.679><c> files</c><00:19:01.000><c> now</c><00:19:01.120><c> for</c><00:19:01.360><c> my</c> 00:19:01.510 --> 00:19:01.520 align:start position:0% I do have a scheme of files now for my 00:19:01.520 --> 00:19:03.190 align:start position:0% I do have a scheme of files now for my model<00:19:01.799><c> so</c><00:19:02.000><c> I</c><00:19:02.159><c> can</c><00:19:02.360><c> use</c><00:19:02.520><c> Source</c><00:19:02.840><c> control</c><00:19:03.120><c> to</c> 00:19:03.190 --> 00:19:03.200 align:start position:0% model so I can use Source control to 00:19:03.200 --> 00:19:05.230 align:start position:0% model so I can use Source control to manage<00:19:03.480><c> my</c><00:19:03.600><c> whole</c><00:19:03.840><c> Gadget</c><00:19:04.200><c> app</c><00:19:04.919><c> what</c><00:19:05.039><c> I</c><00:19:05.120><c> want</c> 00:19:05.230 --> 00:19:05.240 align:start position:0% manage my whole Gadget app what I want 00:19:05.240 --> 00:19:06.990 align:start position:0% manage my whole Gadget app what I want to<00:19:05.400><c> go</c><00:19:05.559><c> ahead</c><00:19:05.720><c> and</c><00:19:05.960><c> add</c><00:19:06.240><c> in</c><00:19:06.320><c> order</c><00:19:06.520><c> to</c><00:19:06.640><c> support</c> 00:19:06.990 --> 00:19:07.000 align:start position:0% to go ahead and add in order to support 00:19:07.000 --> 00:19:10.029 align:start position:0% to go ahead and add in order to support extensions<00:19:07.720><c> is</c><00:19:07.880><c> at</c><00:19:08.000><c> the</c><00:19:08.120><c> root</c><00:19:08.400><c> level</c><00:19:08.679><c> a</c><00:19:08.960><c> do</c> 00:19:10.029 --> 00:19:10.039 align:start position:0% extensions is at the root level a do 00:19:10.039 --> 00:19:12.549 align:start position:0% extensions is at the root level a do ignore<00:19:11.039><c> helps</c><00:19:11.280><c> if</c><00:19:11.400><c> I</c><00:19:11.559><c> spell</c><00:19:11.799><c> it</c><00:19:11.960><c> correctly</c> 00:19:12.549 --> 00:19:12.559 align:start position:0% ignore helps if I spell it correctly 00:19:12.559 --> 00:19:14.789 align:start position:0% ignore helps if I spell it correctly let's<00:19:12.760><c> go</c><00:19:12.840><c> ahead</c><00:19:13.000><c> and</c><00:19:13.120><c> rename</c> 00:19:14.789 --> 00:19:14.799 align:start position:0% let's go ahead and rename 00:19:14.799 --> 00:19:18.430 align:start position:0% let's go ahead and rename this<00:19:15.799><c> ignore</c><00:19:16.799><c> beautiful</c><00:19:17.799><c> and</c><00:19:17.960><c> then</c><00:19:18.280><c> I'm</c> 00:19:18.430 --> 00:19:18.440 align:start position:0% this ignore beautiful and then I'm 00:19:18.440 --> 00:19:19.470 align:start position:0% this ignore beautiful and then I'm actually<00:19:18.679><c> just</c><00:19:18.799><c> going</c><00:19:18.919><c> to</c><00:19:19.039><c> go</c><00:19:19.159><c> ahead</c><00:19:19.320><c> and</c> 00:19:19.470 --> 00:19:19.480 align:start position:0% actually just going to go ahead and 00:19:19.480 --> 00:19:23.950 align:start position:0% actually just going to go ahead and paste<00:19:20.320><c> this</c><00:19:21.320><c> extensions</c><00:19:22.240><c> star</c> 00:19:23.950 --> 00:19:23.960 align:start position:0% paste this extensions star 00:19:23.960 --> 00:19:27.510 align:start position:0% paste this extensions star slist<00:19:24.960><c> and</c><00:19:25.520><c> this</c><00:19:26.080><c> do</c><00:19:26.320><c> ignore</c><00:19:26.720><c> file</c><00:19:27.080><c> just</c><00:19:27.200><c> means</c> 00:19:27.510 --> 00:19:27.520 align:start position:0% slist and this do ignore file just means 00:19:27.520 --> 00:19:30.110 align:start position:0% slist and this do ignore file just means that<00:19:27.960><c> any</c><00:19:28.240><c> folders</c><00:19:28.840><c> defined</c><00:19:29.159><c> in</c><00:19:29.360><c> here</c><00:19:29.919><c> will</c> 00:19:30.110 --> 00:19:30.120 align:start position:0% that any folders defined in here will 00:19:30.120 --> 00:19:32.470 align:start position:0% that any folders defined in here will not<00:19:30.320><c> be</c><00:19:30.480><c> synced</c><00:19:31.039><c> as</c><00:19:31.200><c> part</c><00:19:31.360><c> of</c><00:19:31.480><c> that</c><00:19:31.640><c> ggt</c><00:19:32.120><c> Dev</c> 00:19:32.470 --> 00:19:32.480 align:start position:0% not be synced as part of that ggt Dev 00:19:32.480 --> 00:19:35.149 align:start position:0% not be synced as part of that ggt Dev command<00:19:33.360><c> the</c><00:19:33.520><c> Syntax</c><00:19:34.120><c> for</c><00:19:34.400><c> this</c><00:19:34.520><c> do</c><00:19:34.720><c> ignore</c><00:19:35.039><c> is</c> 00:19:35.149 --> 00:19:35.159 align:start position:0% command the Syntax for this do ignore is 00:19:35.159 --> 00:19:36.909 align:start position:0% command the Syntax for this do ignore is the<00:19:35.280><c> exact</c><00:19:35.559><c> same</c><00:19:35.720><c> as</c><00:19:36.039><c> G</c> 00:19:36.909 --> 00:19:36.919 align:start position:0% the exact same as G 00:19:36.919 --> 00:19:39.029 align:start position:0% the exact same as G ignore<00:19:37.919><c> so</c><00:19:38.159><c> that's</c><00:19:38.360><c> great</c><00:19:38.559><c> so</c><00:19:38.679><c> now</c><00:19:38.799><c> when</c><00:19:38.919><c> I</c> 00:19:39.029 --> 00:19:39.039 align:start position:0% ignore so that's great so now when I 00:19:39.039 --> 00:19:41.149 align:start position:0% ignore so that's great so now when I actually<00:19:39.240><c> build</c><00:19:39.520><c> my</c><00:19:39.679><c> extensions</c><00:19:40.640><c> I</c><00:19:40.720><c> won't</c><00:19:40.960><c> get</c> 00:19:41.149 --> 00:19:41.159 align:start position:0% actually build my extensions I won't get 00:19:41.159 --> 00:19:43.590 align:start position:0% actually build my extensions I won't get all<00:19:41.280><c> of</c><00:19:41.480><c> the</c><00:19:41.840><c> distribution</c><00:19:42.600><c> files</c><00:19:43.120><c> synced</c><00:19:43.480><c> up</c> 00:19:43.590 --> 00:19:43.600 align:start position:0% all of the distribution files synced up 00:19:43.600 --> 00:19:44.990 align:start position:0% all of the distribution files synced up to<00:19:43.720><c> my</c><00:19:43.880><c> Gadget</c><00:19:44.159><c> app</c><00:19:44.360><c> which</c><00:19:44.480><c> is</c><00:19:44.600><c> okay</c><00:19:44.880><c> because</c> 00:19:44.990 --> 00:19:45.000 align:start position:0% to my Gadget app which is okay because 00:19:45.000 --> 00:19:46.590 align:start position:0% to my Gadget app which is okay because shopy<00:19:45.440><c> is</c><00:19:45.559><c> actually</c><00:19:45.720><c> going</c><00:19:45.799><c> to</c><00:19:45.919><c> host</c><00:19:46.159><c> my</c> 00:19:46.590 --> 00:19:46.600 align:start position:0% shopy is actually going to host my 00:19:46.600 --> 00:19:49.110 align:start position:0% shopy is actually going to host my extension<00:19:47.600><c> so</c><00:19:47.760><c> I'll</c><00:19:47.919><c> go</c><00:19:48.039><c> ahead</c><00:19:48.480><c> go</c><00:19:48.679><c> back</c><00:19:48.799><c> to</c><00:19:48.960><c> my</c> 00:19:49.110 --> 00:19:49.120 align:start position:0% extension so I'll go ahead go back to my 00:19:49.120 --> 00:19:51.230 align:start position:0% extension so I'll go ahead go back to my editor<00:19:50.120><c> and</c><00:19:50.320><c> I'm</c><00:19:50.440><c> going</c><00:19:50.520><c> to</c><00:19:50.720><c> generate</c><00:19:51.080><c> my</c> 00:19:51.230 --> 00:19:51.240 align:start position:0% editor and I'm going to generate my 00:19:51.240 --> 00:19:52.909 align:start position:0% editor and I'm going to generate my extension<00:19:51.720><c> I'm</c><00:19:51.840><c> just</c><00:19:51.960><c> going</c><00:19:52.039><c> to</c><00:19:52.200><c> straight</c><00:19:52.480><c> up</c> 00:19:52.909 --> 00:19:52.919 align:start position:0% extension I'm just going to straight up 00:19:52.919 --> 00:19:55.909 align:start position:0% extension I'm just going to straight up copy<00:19:53.280><c> this</c><00:19:53.960><c> command</c><00:19:54.960><c> and</c><00:19:55.039><c> so</c><00:19:55.200><c> this</c><00:19:55.280><c> is</c><00:19:55.440><c> using</c> 00:19:55.909 --> 00:19:55.919 align:start position:0% copy this command and so this is using 00:19:55.919 --> 00:19:58.990 align:start position:0% copy this command and so this is using yarn<00:19:56.480><c> generate</c><00:19:57.159><c> extension</c><00:19:58.159><c> I'm</c><00:19:58.679><c> selecting</c> 00:19:58.990 --> 00:19:59.000 align:start position:0% yarn generate extension I'm selecting 00:19:59.000 --> 00:20:01.110 align:start position:0% yarn generate extension I'm selecting this<00:19:59.200><c> checkout</c><00:19:59.600><c> UI</c><00:19:59.960><c> template</c><00:20:00.480><c> and</c><00:20:00.679><c> calling</c><00:20:00.919><c> it</c> 00:20:01.110 --> 00:20:01.120 align:start position:0% this checkout UI template and calling it 00:20:01.120 --> 00:20:02.630 align:start position:0% this checkout UI template and calling it pre<00:20:01.440><c> purchase</c> 00:20:02.630 --> 00:20:02.640 align:start position:0% pre purchase 00:20:02.640 --> 00:20:05.270 align:start position:0% pre purchase EXT<00:20:03.640><c> I</c><00:20:03.720><c> want</c><00:20:03.799><c> to</c><00:20:03.960><c> select</c><00:20:04.240><c> the</c><00:20:04.320><c> same</c><00:20:04.559><c> Partners</c> 00:20:05.270 --> 00:20:05.280 align:start position:0% EXT I want to select the same Partners 00:20:05.280 --> 00:20:07.990 align:start position:0% EXT I want to select the same Partners organization<00:20:06.280><c> and</c><00:20:06.720><c> app</c><00:20:07.000><c> so</c><00:20:07.159><c> I</c><00:20:07.240><c> do</c><00:20:07.440><c> not</c><00:20:07.679><c> want</c><00:20:07.799><c> to</c> 00:20:07.990 --> 00:20:08.000 align:start position:0% organization and app so I do not want to 00:20:08.000 --> 00:20:09.590 align:start position:0% organization and app so I do not want to create<00:20:08.280><c> a</c><00:20:08.400><c> new</c><00:20:08.600><c> app</c><00:20:08.760><c> I</c><00:20:08.840><c> want</c><00:20:08.919><c> to</c><00:20:09.039><c> connect</c><00:20:09.320><c> to</c><00:20:09.440><c> an</c> 00:20:09.590 --> 00:20:09.600 align:start position:0% create a new app I want to connect to an 00:20:09.600 --> 00:20:11.710 align:start position:0% create a new app I want to connect to an existing<00:20:10.039><c> app</c><00:20:10.880><c> and</c><00:20:11.080><c> I</c><00:20:11.159><c> want</c><00:20:11.240><c> to</c><00:20:11.360><c> select</c><00:20:11.600><c> the</c> 00:20:11.710 --> 00:20:11.720 align:start position:0% existing app and I want to select the 00:20:11.720 --> 00:20:14.590 align:start position:0% existing app and I want to select the app<00:20:11.880><c> I</c><00:20:12.000><c> use</c><00:20:12.200><c> to</c><00:20:12.360><c> connect</c><00:20:12.960><c> Gadget</c><00:20:13.320><c> to</c><00:20:13.520><c> my</c> 00:20:14.590 --> 00:20:14.600 align:start position:0% app I use to connect Gadget to my 00:20:14.600 --> 00:20:17.470 align:start position:0% app I use to connect Gadget to my Shopify 00:20:17.470 --> 00:20:17.480 align:start position:0% Shopify 00:20:17.480 --> 00:20:19.909 align:start position:0% Shopify store<00:20:18.480><c> and</c><00:20:18.600><c> I'll</c><00:20:18.760><c> select</c><00:20:19.000><c> JavaScript</c><00:20:19.520><c> y</c><00:20:19.799><c> as</c> 00:20:19.909 --> 00:20:19.919 align:start position:0% store and I'll select JavaScript y as 00:20:19.919 --> 00:20:23.390 align:start position:0% store and I'll select JavaScript y as the 00:20:23.390 --> 00:20:23.400 align:start position:0% 00:20:23.400 --> 00:20:25.110 align:start position:0% language 00:20:25.110 --> 00:20:25.120 align:start position:0% language 00:20:25.120 --> 00:20:28.270 align:start position:0% language and<00:20:26.120><c> you</c><00:20:26.240><c> can</c><00:20:26.400><c> see</c><00:20:26.799><c> I</c><00:20:26.960><c> now</c><00:20:27.280><c> have</c><00:20:27.520><c> an</c><00:20:27.760><c> extensions</c> 00:20:28.270 --> 00:20:28.280 align:start position:0% and you can see I now have an extensions 00:20:28.280 --> 00:20:30.909 align:start position:0% and you can see I now have an extensions folder<00:20:28.880><c> here</c><00:20:29.120><c> in</c><00:20:29.280><c> my</c><00:20:29.480><c> local</c><00:20:29.840><c> Gadget</c><00:20:30.280><c> project</c> 00:20:30.909 --> 00:20:30.919 align:start position:0% folder here in my local Gadget project 00:20:30.919 --> 00:20:34.270 align:start position:0% folder here in my local Gadget project and<00:20:31.200><c> if</c><00:20:31.320><c> I</c><00:20:31.480><c> flip</c><00:20:31.840><c> back</c><00:20:32.240><c> to</c><00:20:32.559><c> my</c><00:20:33.559><c> Gadget</c><00:20:33.960><c> editor</c> 00:20:34.270 --> 00:20:34.280 align:start position:0% and if I flip back to my Gadget editor 00:20:34.280 --> 00:20:36.430 align:start position:0% and if I flip back to my Gadget editor in<00:20:34.400><c> the</c><00:20:34.559><c> web</c><00:20:34.960><c> I</c><00:20:35.120><c> have</c><00:20:35.360><c> my</c><00:20:35.600><c> extensions</c><00:20:36.080><c> folder</c> 00:20:36.430 --> 00:20:36.440 align:start position:0% in the web I have my extensions folder 00:20:36.440 --> 00:20:37.789 align:start position:0% in the web I have my extensions folder here<00:20:36.640><c> so</c><00:20:36.799><c> that's</c><00:20:36.960><c> great</c><00:20:37.120><c> so</c><00:20:37.240><c> now</c><00:20:37.360><c> I</c><00:20:37.440><c> can</c><00:20:37.600><c> either</c> 00:20:37.789 --> 00:20:37.799 align:start position:0% here so that's great so now I can either 00:20:37.799 --> 00:20:40.190 align:start position:0% here so that's great so now I can either choose<00:20:38.000><c> to</c><00:20:38.159><c> develop</c><00:20:38.520><c> locally</c><00:20:39.360><c> or</c><00:20:39.640><c> here</c><00:20:39.840><c> in</c><00:20:40.000><c> the</c> 00:20:40.190 --> 00:20:40.200 align:start position:0% choose to develop locally or here in the 00:20:40.200 --> 00:20:42.590 align:start position:0% choose to develop locally or here in the gadget<00:20:40.600><c> editor</c><00:20:41.559><c> I'll</c><00:20:41.880><c> uh</c><00:20:42.039><c> I'll</c><00:20:42.159><c> stick</c><00:20:42.400><c> to</c> 00:20:42.590 --> 00:20:42.600 align:start position:0% gadget editor I'll uh I'll stick to 00:20:42.600 --> 00:20:45.510 align:start position:0% gadget editor I'll uh I'll stick to local<00:20:43.000><c> for</c><00:20:43.240><c> now</c><00:20:44.120><c> really</c><00:20:44.360><c> all</c><00:20:44.480><c> I</c><00:20:44.640><c> need</c><00:20:44.799><c> to</c><00:20:44.919><c> do</c><00:20:45.200><c> is</c> 00:20:45.510 --> 00:20:45.520 align:start position:0% local for now really all I need to do is 00:20:45.520 --> 00:20:47.350 align:start position:0% local for now really all I need to do is modify<00:20:46.159><c> my</c><00:20:46.400><c> extension</c><00:20:46.880><c> now</c><00:20:47.039><c> so</c><00:20:47.159><c> I</c><00:20:47.200><c> can</c><00:20:47.320><c> go</c> 00:20:47.350 --> 00:20:47.360 align:start position:0% modify my extension now so I can go 00:20:47.360 --> 00:20:49.750 align:start position:0% modify my extension now so I can go ahead<00:20:47.520><c> and</c><00:20:47.640><c> open</c><00:20:47.799><c> my</c><00:20:47.960><c> extensions</c><00:20:48.480><c> file</c><00:20:49.400><c> I</c><00:20:49.520><c> have</c> 00:20:49.750 --> 00:20:49.760 align:start position:0% ahead and open my extensions file I have 00:20:49.760 --> 00:20:52.110 align:start position:0% ahead and open my extensions file I have this<00:20:50.159><c> tommel</c><00:20:51.080><c> and</c><00:20:51.200><c> this</c><00:20:51.280><c> is</c><00:20:51.440><c> my</c><00:20:51.640><c> extension</c> 00:20:52.110 --> 00:20:52.120 align:start position:0% this tommel and this is my extension 00:20:52.120 --> 00:20:54.510 align:start position:0% this tommel and this is my extension configuration<00:20:52.919><c> file</c><00:20:53.919><c> I'm</c><00:20:54.039><c> going</c><00:20:54.120><c> to</c><00:20:54.280><c> paste</c> 00:20:54.510 --> 00:20:54.520 align:start position:0% configuration file I'm going to paste 00:20:54.520 --> 00:20:56.390 align:start position:0% configuration file I'm going to paste something<00:20:54.799><c> over</c><00:20:55.000><c> it</c><00:20:55.360><c> but</c><00:20:55.679><c> the</c><00:20:55.799><c> only</c><00:20:56.080><c> real</c> 00:20:56.390 --> 00:20:56.400 align:start position:0% something over it but the only real 00:20:56.400 --> 00:20:59.630 align:start position:0% something over it but the only real change<00:20:57.240><c> is</c><00:20:57.440><c> that</c><00:20:57.720><c> I</c><00:20:57.840><c> am</c><00:20:58.120><c> passing</c><00:20:58.440><c> in</c><00:20:58.640><c> in</c><00:20:59.400><c> my</c> 00:20:59.630 --> 00:20:59.640 align:start position:0% change is that I am passing in in my 00:20:59.640 --> 00:21:03.310 align:start position:0% change is that I am passing in in my meta<00:20:59.960><c> field</c><00:21:00.480><c> as</c><00:21:00.799><c> input</c><00:21:01.320><c> to</c><00:21:01.600><c> my</c><00:21:02.159><c> extension</c><00:21:03.159><c> uh</c> 00:21:03.310 --> 00:21:03.320 align:start position:0% meta field as input to my extension uh 00:21:03.320 --> 00:21:05.830 align:start position:0% meta field as input to my extension uh the<00:21:03.480><c> rest</c><00:21:03.760><c> is</c><00:21:03.919><c> all</c><00:21:04.159><c> just</c><00:21:04.679><c> standard</c><00:21:05.280><c> boiler</c> 00:21:05.830 --> 00:21:05.840 align:start position:0% the rest is all just standard boiler 00:21:05.840 --> 00:21:08.630 align:start position:0% the rest is all just standard boiler plate<00:21:06.840><c> included</c><00:21:07.640><c> when</c><00:21:07.880><c> I</c><00:21:08.039><c> generate</c><00:21:08.480><c> my</c> 00:21:08.630 --> 00:21:08.640 align:start position:0% plate included when I generate my 00:21:08.640 --> 00:21:11.269 align:start position:0% plate included when I generate my extension<00:21:09.159><c> no</c><00:21:09.360><c> other</c><00:21:09.960><c> changes</c><00:21:10.960><c> now</c><00:21:11.080><c> I'm</c><00:21:11.200><c> going</c> 00:21:11.269 --> 00:21:11.279 align:start position:0% extension no other changes now I'm going 00:21:11.279 --> 00:21:14.669 align:start position:0% extension no other changes now I'm going to<00:21:11.440><c> go</c><00:21:11.559><c> ahead</c><00:21:11.720><c> and</c><00:21:11.919><c> copy</c><00:21:12.240><c> code</c><00:21:13.000><c> into</c><00:21:13.679><c> my</c> 00:21:14.669 --> 00:21:14.679 align:start position:0% to go ahead and copy code into my 00:21:14.679 --> 00:21:16.669 align:start position:0% to go ahead and copy code into my checkout<00:21:15.159><c> jsx</c><00:21:15.880><c> file</c><00:21:16.159><c> do</c><00:21:16.240><c> you</c><00:21:16.320><c> want</c><00:21:16.480><c> I'll</c> 00:21:16.669 --> 00:21:16.679 align:start position:0% checkout jsx file do you want I'll 00:21:16.679 --> 00:21:18.070 align:start position:0% checkout jsx file do you want I'll actually<00:21:16.840><c> go</c><00:21:16.919><c> ahead</c><00:21:17.080><c> and</c><00:21:17.159><c> start</c><00:21:17.440><c> my</c><00:21:17.600><c> extension</c> 00:21:18.070 --> 00:21:18.080 align:start position:0% actually go ahead and start my extension 00:21:18.080 --> 00:21:20.870 align:start position:0% actually go ahead and start my extension first<00:21:18.440><c> just</c><00:21:18.600><c> so</c><00:21:18.760><c> we</c><00:21:18.880><c> can</c><00:21:19.200><c> see</c><00:21:20.200><c> what</c><00:21:20.400><c> this</c><00:21:20.600><c> looks</c> 00:21:20.870 --> 00:21:20.880 align:start position:0% first just so we can see what this looks 00:21:20.880 --> 00:21:22.950 align:start position:0% first just so we can see what this looks like<00:21:21.039><c> so</c><00:21:21.200><c> if</c><00:21:21.279><c> I</c><00:21:21.400><c> go</c><00:21:21.520><c> ahead</c><00:21:21.679><c> and</c><00:21:21.760><c> run</c><00:21:21.960><c> yarn</c> 00:21:22.950 --> 00:21:22.960 align:start position:0% like so if I go ahead and run yarn 00:21:22.960 --> 00:21:25.870 align:start position:0% like so if I go ahead and run yarn Dev<00:21:23.960><c> this</c><00:21:24.120><c> will</c><00:21:24.400><c> go</c><00:21:24.600><c> ahead</c><00:21:25.000><c> and</c><00:21:25.200><c> start</c><00:21:25.640><c> my</c> 00:21:25.870 --> 00:21:25.880 align:start position:0% Dev this will go ahead and start my 00:21:25.880 --> 00:21:28.909 align:start position:0% Dev this will go ahead and start my Shopify<00:21:26.720><c> app</c><00:21:27.360><c> I</c><00:21:27.440><c> want</c><00:21:27.600><c> to</c><00:21:27.799><c> select</c><00:21:28.279><c> the</c><00:21:28.679><c> same</c> 00:21:28.909 --> 00:21:28.919 align:start position:0% Shopify app I want to select the same 00:21:28.919 --> 00:21:32.269 align:start position:0% Shopify app I want to select the same development<00:21:29.360><c> store</c><00:21:29.799><c> I</c><00:21:29.960><c> used</c><00:21:30.799><c> to</c><00:21:31.799><c> set</c><00:21:32.000><c> up</c><00:21:32.120><c> my</c> 00:21:32.269 --> 00:21:32.279 align:start position:0% development store I used to set up my 00:21:32.279 --> 00:21:33.789 align:start position:0% development store I used to set up my Gadget<00:21:32.559><c> connection</c><00:21:33.000><c> so</c><00:21:33.159><c> that</c><00:21:33.279><c> was</c><00:21:33.400><c> test</c><00:21:33.640><c> with</c> 00:21:33.789 --> 00:21:33.799 align:start position:0% Gadget connection so that was test with 00:21:33.799 --> 00:21:38.789 align:start position:0% Gadget connection so that was test with sample 00:21:38.789 --> 00:21:38.799 align:start position:0% 00:21:38.799 --> 00:21:41.350 align:start position:0% data<00:21:39.799><c> and</c><00:21:39.960><c> if</c><00:21:40.080><c> I</c><00:21:40.279><c> open</c><00:21:40.520><c> up</c> 00:21:41.350 --> 00:21:41.360 align:start position:0% data and if I open up 00:21:41.360 --> 00:21:45.990 align:start position:0% data and if I open up this<00:21:42.360><c> copy</c><00:21:43.080><c> my</c><00:21:43.640><c> pre-purchase</c> 00:21:45.990 --> 00:21:46.000 align:start position:0% this copy my pre-purchase 00:21:46.000 --> 00:21:49.630 align:start position:0% this copy my pre-purchase extension<00:21:47.000><c> URL</c><00:21:47.720><c> and</c><00:21:47.960><c> paste</c><00:21:48.200><c> it</c><00:21:48.360><c> in</c><00:21:48.600><c> here</c><00:21:49.279><c> I</c><00:21:49.400><c> see</c> 00:21:49.630 --> 00:21:49.640 align:start position:0% extension URL and paste it in here I see 00:21:49.640 --> 00:21:53.510 align:start position:0% extension URL and paste it in here I see this<00:21:49.720><c> is</c><00:21:49.840><c> going</c><00:21:49.919><c> to</c><00:21:50.039><c> be</c><00:21:50.200><c> my</c><00:21:50.400><c> default</c><00:21:51.360><c> extension</c> 00:21:53.510 --> 00:21:53.520 align:start position:0% this is going to be my default extension 00:21:53.520 --> 00:21:57.110 align:start position:0% this is going to be my default extension which<00:21:54.520><c> is</c><00:21:55.120><c> just</c><00:21:55.480><c> a</c><00:21:55.760><c> banner</c><00:21:56.159><c> so</c><00:21:56.320><c> it's</c><00:21:56.480><c> this</c><00:21:56.760><c> pre-</c> 00:21:57.110 --> 00:21:57.120 align:start position:0% which is just a banner so it's this pre- 00:21:57.120 --> 00:21:59.149 align:start position:0% which is just a banner so it's this pre- purchase<00:21:57.559><c> extension</c><00:21:58.120><c> here</c><00:21:58.679><c> so</c><00:21:58.880><c> let's</c><00:21:59.039><c> go</c> 00:21:59.149 --> 00:21:59.159 align:start position:0% purchase extension here so let's go 00:21:59.159 --> 00:22:02.269 align:start position:0% purchase extension here so let's go ahead<00:21:59.440><c> and</c><00:21:59.679><c> update</c><00:22:00.159><c> this</c><00:22:00.400><c> now</c><00:22:01.039><c> I'll</c><00:22:01.240><c> just</c><00:22:01.559><c> copy</c> 00:22:02.269 --> 00:22:02.279 align:start position:0% ahead and update this now I'll just copy 00:22:02.279 --> 00:22:05.350 align:start position:0% ahead and update this now I'll just copy a<00:22:02.440><c> bit</c><00:22:02.600><c> more</c><00:22:02.840><c> code</c><00:22:03.279><c> go</c><00:22:03.480><c> back</c><00:22:03.600><c> to</c><00:22:03.760><c> my</c><00:22:03.960><c> local</c><00:22:04.400><c> file</c> 00:22:05.350 --> 00:22:05.360 align:start position:0% a bit more code go back to my local file 00:22:05.360 --> 00:22:06.950 align:start position:0% a bit more code go back to my local file and<00:22:05.480><c> you</c><00:22:05.600><c> see</c><00:22:05.840><c> this</c><00:22:05.919><c> is</c><00:22:06.080><c> just</c><00:22:06.200><c> a</c><00:22:06.320><c> banner</c><00:22:06.799><c> right</c> 00:22:06.950 --> 00:22:06.960 align:start position:0% and you see this is just a banner right 00:22:06.960 --> 00:22:10.269 align:start position:0% and you see this is just a banner right now<00:22:07.240><c> so</c><00:22:07.400><c> if</c><00:22:07.520><c> I</c><00:22:07.720><c> paste</c><00:22:08.000><c> over</c><00:22:08.360><c> this</c><00:22:09.360><c> flip</c><00:22:09.760><c> back</c><00:22:10.159><c> I</c> 00:22:10.269 --> 00:22:10.279 align:start position:0% now so if I paste over this flip back I 00:22:10.279 --> 00:22:13.149 align:start position:0% now so if I paste over this flip back I see<00:22:10.640><c> I</c><00:22:10.760><c> am</c><00:22:11.000><c> now</c><00:22:11.279><c> being</c><00:22:11.679><c> offered</c><00:22:12.440><c> my</c><00:22:12.760><c> product</c> 00:22:13.149 --> 00:22:13.159 align:start position:0% see I am now being offered my product 00:22:13.159 --> 00:22:15.990 align:start position:0% see I am now being offered my product that<00:22:13.279><c> I</c><00:22:13.480><c> select</c><00:22:14.080><c> in</c><00:22:14.279><c> my</c><00:22:14.559><c> admin</c><00:22:14.919><c> app</c><00:22:15.159><c> so</c><00:22:15.400><c> let's</c> 00:22:15.990 --> 00:22:16.000 align:start position:0% that I select in my admin app so let's 00:22:16.000 --> 00:22:18.789 align:start position:0% that I select in my admin app so let's mix<00:22:16.360><c> this</c><00:22:16.520><c> up</c><00:22:16.760><c> let's</c><00:22:16.960><c> go</c><00:22:17.200><c> oxygen</c><00:22:17.799><c> press</c> 00:22:18.789 --> 00:22:18.799 align:start position:0% mix this up let's go oxygen press 00:22:18.799 --> 00:22:21.029 align:start position:0% mix this up let's go oxygen press save<00:22:19.799><c> so</c><00:22:20.000><c> that</c><00:22:20.159><c> was</c><00:22:20.360><c> saved</c><00:22:20.720><c> it's</c><00:22:20.840><c> going</c><00:22:20.960><c> to</c> 00:22:21.029 --> 00:22:21.039 align:start position:0% save so that was saved it's going to 00:22:21.039 --> 00:22:22.830 align:start position:0% save so that was saved it's going to save<00:22:21.240><c> to</c><00:22:21.400><c> that</c><00:22:21.520><c> shop</c><00:22:21.799><c> by</c><00:22:21.960><c> metafield</c><00:22:22.559><c> and</c><00:22:22.679><c> if</c><00:22:22.760><c> I</c> 00:22:22.830 --> 00:22:22.840 align:start position:0% save to that shop by metafield and if I 00:22:22.840 --> 00:22:25.149 align:start position:0% save to that shop by metafield and if I go<00:22:22.960><c> ahead</c><00:22:23.120><c> and</c><00:22:23.200><c> refresh</c><00:22:23.640><c> this</c><00:22:23.880><c> page</c><00:22:24.880><c> I</c><00:22:24.960><c> see</c> 00:22:25.149 --> 00:22:25.159 align:start position:0% go ahead and refresh this page I see 00:22:25.159 --> 00:22:27.909 align:start position:0% go ahead and refresh this page I see that<00:22:25.400><c> oxygen</c><00:22:25.960><c> is</c><00:22:26.159><c> now</c><00:22:26.360><c> being</c><00:22:26.640><c> offered</c><00:22:27.480><c> that's</c> 00:22:27.909 --> 00:22:27.919 align:start position:0% that oxygen is now being offered that's 00:22:27.919 --> 00:22:29.549 align:start position:0% that oxygen is now being offered that's fantastic<00:22:28.520><c> so</c><00:22:28.640><c> I</c><00:22:28.720><c> know</c><00:22:28.840><c> my</c><00:22:29.000><c> extension</c><00:22:29.360><c> is</c> 00:22:29.549 --> 00:22:29.559 align:start position:0% fantastic so I know my extension is 00:22:29.559 --> 00:22:32.549 align:start position:0% fantastic so I know my extension is working<00:22:30.159><c> if</c><00:22:30.240><c> I</c><00:22:30.400><c> click</c><00:22:30.799><c> add</c><00:22:31.600><c> it's</c><00:22:31.840><c> added</c><00:22:32.120><c> to</c><00:22:32.320><c> my</c> 00:22:32.549 --> 00:22:32.559 align:start position:0% working if I click add it's added to my 00:22:32.559 --> 00:22:36.510 align:start position:0% working if I click add it's added to my cart<00:22:33.559><c> so</c><00:22:33.840><c> let's</c><00:22:34.200><c> go</c><00:22:34.400><c> ahead</c><00:22:34.760><c> and</c><00:22:35.080><c> check</c><00:22:35.760><c> out</c><00:22:36.080><c> our</c> 00:22:36.510 --> 00:22:36.520 align:start position:0% cart so let's go ahead and check out our 00:22:36.520 --> 00:22:38.590 align:start position:0% cart so let's go ahead and check out our extension<00:22:36.919><c> go</c><00:22:37.200><c> quickly</c><00:22:37.640><c> I</c><00:22:37.720><c> will</c><00:22:37.880><c> be</c><00:22:38.200><c> perfectly</c> 00:22:38.590 --> 00:22:38.600 align:start position:0% extension go quickly I will be perfectly 00:22:38.600 --> 00:22:40.110 align:start position:0% extension go quickly I will be perfectly honest<00:22:38.919><c> a</c><00:22:39.039><c> lot</c><00:22:39.159><c> of</c><00:22:39.279><c> this</c><00:22:39.440><c> code</c><00:22:39.640><c> is</c><00:22:39.799><c> taken</c> 00:22:40.110 --> 00:22:40.120 align:start position:0% honest a lot of this code is taken 00:22:40.120 --> 00:22:42.029 align:start position:0% honest a lot of this code is taken directly<00:22:40.440><c> from</c><00:22:40.600><c> Shop's</c><00:22:41.159><c> own</c><00:22:41.400><c> pre-</c><00:22:41.679><c> purchase</c> 00:22:42.029 --> 00:22:42.039 align:start position:0% directly from Shop's own pre- purchase 00:22:42.039 --> 00:22:43.669 align:start position:0% directly from Shop's own pre- purchase tutorial<00:22:42.559><c> so</c><00:22:42.679><c> there's</c><00:22:42.880><c> not</c><00:22:43.039><c> a</c><00:22:43.159><c> lot</c><00:22:43.279><c> of</c> 00:22:43.669 --> 00:22:43.679 align:start position:0% tutorial so there's not a lot of 00:22:43.679 --> 00:22:45.990 align:start position:0% tutorial so there's not a lot of differences<00:22:44.679><c> I'm</c><00:22:44.799><c> using</c><00:22:45.120><c> the</c><00:22:45.240><c> shopy</c><00:22:45.720><c> UI</c> 00:22:45.990 --> 00:22:46.000 align:start position:0% differences I'm using the shopy UI 00:22:46.000 --> 00:22:49.029 align:start position:0% differences I'm using the shopy UI extensions<00:22:46.480><c> react</c><00:22:47.000><c> checkout</c><00:22:47.919><c> package</c><00:22:48.760><c> and</c><00:22:48.919><c> I</c> 00:22:49.029 --> 00:22:49.039 align:start position:0% extensions react checkout package and I 00:22:49.039 --> 00:22:51.230 align:start position:0% extensions react checkout package and I am<00:22:49.159><c> just</c><00:22:49.320><c> pulling</c><00:22:49.799><c> all</c><00:22:49.960><c> of</c><00:22:50.159><c> their</c><00:22:50.400><c> checkout</c><00:22:50.799><c> UI</c> 00:22:51.230 --> 00:22:51.240 align:start position:0% am just pulling all of their checkout UI 00:22:51.240 --> 00:22:53.990 align:start position:0% am just pulling all of their checkout UI components<00:22:51.799><c> that</c><00:22:51.960><c> I</c><00:22:52.080><c> need</c><00:22:52.840><c> as</c><00:22:53.000><c> well</c><00:22:53.240><c> as</c><00:22:53.440><c> some</c> 00:22:53.990 --> 00:22:54.000 align:start position:0% components that I need as well as some 00:22:54.000 --> 00:22:57.669 align:start position:0% components that I need as well as some react<00:22:55.080><c> hooks</c><00:22:56.080><c> um</c><00:22:56.440><c> these</c><00:22:56.640><c> do</c><00:22:56.880><c> not</c><00:22:57.039><c> use</c><00:22:57.320><c> default</c> 00:22:57.669 --> 00:22:57.679 align:start position:0% react hooks um these do not use default 00:22:57.679 --> 00:22:59.590 align:start position:0% react hooks um these do not use default players<00:22:58.039><c> components</c><00:22:58.600><c> they're</c><00:22:58.799><c> their</c><00:22:59.000><c> own</c><00:22:59.440><c> set</c> 00:22:59.590 --> 00:22:59.600 align:start position:0% players components they're their own set 00:22:59.600 --> 00:23:01.149 align:start position:0% players components they're their own set of<00:22:59.799><c> components</c><00:23:00.320><c> so</c><00:23:00.559><c> just</c><00:23:00.679><c> something</c><00:23:00.919><c> to</c><00:23:01.039><c> be</c> 00:23:01.149 --> 00:23:01.159 align:start position:0% of components so just something to be 00:23:01.159 --> 00:23:03.950 align:start position:0% of components so just something to be aware<00:23:01.400><c> of</c><00:23:02.320><c> quickly</c><00:23:02.640><c> walking</c><00:23:02.960><c> through</c><00:23:03.279><c> here</c> 00:23:03.950 --> 00:23:03.960 align:start position:0% aware of quickly walking through here 00:23:03.960 --> 00:23:07.149 align:start position:0% aware of quickly walking through here I'm<00:23:04.120><c> using</c><00:23:04.640><c> apply</c><00:23:05.159><c> cart</c><00:23:05.480><c> line</c><00:23:05.760><c> changes</c><00:23:06.679><c> to</c><00:23:06.960><c> go</c> 00:23:07.149 --> 00:23:07.159 align:start position:0% I'm using apply cart line changes to go 00:23:07.159 --> 00:23:09.110 align:start position:0% I'm using apply cart line changes to go ahead<00:23:07.600><c> and</c><00:23:07.880><c> actually</c><00:23:08.159><c> make</c><00:23:08.360><c> the</c><00:23:08.520><c> change</c><00:23:08.919><c> when</c> 00:23:09.110 --> 00:23:09.120 align:start position:0% ahead and actually make the change when 00:23:09.120 --> 00:23:11.789 align:start position:0% ahead and actually make the change when I<00:23:09.279><c> add</c><00:23:09.520><c> that</c><00:23:09.720><c> item</c><00:23:09.960><c> to</c><00:23:10.080><c> the</c><00:23:10.360><c> cart</c><00:23:11.360><c> this</c><00:23:11.480><c> is</c><00:23:11.640><c> my</c> 00:23:11.789 --> 00:23:11.799 align:start position:0% I add that item to the cart this is my 00:23:11.799 --> 00:23:13.549 align:start position:0% I add that item to the cart this is my use<00:23:12.159><c> app</c><00:23:12.360><c> meta</c><00:23:12.600><c> fields</c><00:23:12.880><c> and</c><00:23:13.000><c> I'm</c><00:23:13.120><c> getting</c><00:23:13.360><c> my</c> 00:23:13.549 --> 00:23:13.559 align:start position:0% use app meta fields and I'm getting my 00:23:13.559 --> 00:23:15.630 align:start position:0% use app meta fields and I'm getting my pre-<00:23:13.880><c> purchase</c><00:23:14.480><c> product</c><00:23:14.960><c> so</c><00:23:15.120><c> this</c><00:23:15.200><c> is</c><00:23:15.320><c> how</c><00:23:15.480><c> I'm</c> 00:23:15.630 --> 00:23:15.640 align:start position:0% pre- purchase product so this is how I'm 00:23:15.640 --> 00:23:18.110 align:start position:0% pre- purchase product so this is how I'm actually<00:23:15.880><c> getting</c><00:23:16.200><c> my</c><00:23:16.360><c> meta</c><00:23:16.679><c> field</c><00:23:17.159><c> into</c><00:23:17.640><c> my</c> 00:23:18.110 --> 00:23:18.120 align:start position:0% actually getting my meta field into my 00:23:18.120 --> 00:23:21.310 align:start position:0% actually getting my meta field into my app<00:23:19.120><c> I've</c><00:23:19.279><c> got</c><00:23:19.400><c> a</c><00:23:19.520><c> bunch</c><00:23:19.720><c> of</c><00:23:20.000><c> react</c><00:23:20.480><c> state</c><00:23:21.200><c> that</c> 00:23:21.310 --> 00:23:21.320 align:start position:0% app I've got a bunch of react state that 00:23:21.320 --> 00:23:24.269 align:start position:0% app I've got a bunch of react state that I'm<00:23:21.440><c> setting</c><00:23:21.720><c> up</c><00:23:22.080><c> here</c><00:23:23.080><c> inside</c><00:23:23.360><c> a</c><00:23:23.520><c> use</c><00:23:23.840><c> effect</c> 00:23:24.269 --> 00:23:24.279 align:start position:0% I'm setting up here inside a use effect 00:23:24.279 --> 00:23:25.990 align:start position:0% I'm setting up here inside a use effect when<00:23:24.400><c> I</c><00:23:24.600><c> actually</c><00:23:24.840><c> get</c><00:23:25.039><c> my</c><00:23:25.200><c> meta</c><00:23:25.440><c> field</c><00:23:25.679><c> in</c><00:23:25.799><c> as</c> 00:23:25.990 --> 00:23:26.000 align:start position:0% when I actually get my meta field in as 00:23:26.000 --> 00:23:28.669 align:start position:0% when I actually get my meta field in as input<00:23:26.799><c> uh</c><00:23:26.960><c> if</c><00:23:27.039><c> it</c><00:23:27.240><c> exists</c><00:23:27.919><c> I'm</c><00:23:28.080><c> actually</c><00:23:28.279><c> just</c> 00:23:28.669 --> 00:23:28.679 align:start position:0% input uh if it exists I'm actually just 00:23:28.679 --> 00:23:30.909 align:start position:0% input uh if it exists I'm actually just querying<00:23:29.400><c> the</c><00:23:29.520><c> storefront</c><00:23:30.159><c> so</c><00:23:30.320><c> I</c><00:23:30.440><c> can</c><00:23:30.600><c> query</c> 00:23:30.909 --> 00:23:30.919 align:start position:0% querying the storefront so I can query 00:23:30.919 --> 00:23:33.110 align:start position:0% querying the storefront so I can query the<00:23:31.000><c> storefront</c><00:23:31.520><c> this</c><00:23:31.640><c> query</c><00:23:31.960><c> is</c><00:23:32.159><c> coming</c> 00:23:33.110 --> 00:23:33.120 align:start position:0% the storefront this query is coming 00:23:33.120 --> 00:23:37.149 align:start position:0% the storefront this query is coming right<00:23:33.559><c> from</c><00:23:33.880><c> my</c><00:23:34.039><c> use</c><00:23:34.400><c> API</c><00:23:35.279><c> hook</c><00:23:35.960><c> that</c><00:23:36.559><c> Shopify</c> 00:23:37.149 --> 00:23:37.159 align:start position:0% right from my use API hook that Shopify 00:23:37.159 --> 00:23:39.070 align:start position:0% right from my use API hook that Shopify provides<00:23:37.440><c> for</c><00:23:37.600><c> me</c><00:23:38.320><c> and</c><00:23:38.440><c> I'm</c><00:23:38.559><c> just</c><00:23:38.720><c> grabbing</c> 00:23:39.070 --> 00:23:39.080 align:start position:0% provides for me and I'm just grabbing 00:23:39.080 --> 00:23:40.750 align:start position:0% provides for me and I'm just grabbing the<00:23:39.240><c> very</c><00:23:39.480><c> first</c><00:23:39.720><c> variant</c><00:23:40.120><c> and</c><00:23:40.279><c> the</c><00:23:40.480><c> very</c> 00:23:40.750 --> 00:23:40.760 align:start position:0% the very first variant and the very 00:23:40.760 --> 00:23:43.110 align:start position:0% the very first variant and the very first<00:23:41.159><c> image</c><00:23:41.600><c> for</c><00:23:41.840><c> this</c><00:23:42.120><c> product</c><00:23:42.720><c> normally</c><00:23:43.039><c> if</c> 00:23:43.110 --> 00:23:43.120 align:start position:0% first image for this product normally if 00:23:43.120 --> 00:23:44.710 align:start position:0% first image for this product normally if you're<00:23:43.279><c> building</c><00:23:43.679><c> this</c><00:23:43.880><c> for</c><00:23:44.159><c> a</c><00:23:44.360><c> you</c><00:23:44.480><c> know</c> 00:23:44.710 --> 00:23:44.720 align:start position:0% you're building this for a you know 00:23:44.720 --> 00:23:46.149 align:start position:0% you're building this for a you know production<00:23:45.200><c> system</c><00:23:45.520><c> you</c><00:23:45.720><c> probably</c><00:23:45.960><c> want</c><00:23:46.080><c> to</c> 00:23:46.149 --> 00:23:46.159 align:start position:0% production system you probably want to 00:23:46.159 --> 00:23:48.190 align:start position:0% production system you probably want to be<00:23:46.279><c> able</c><00:23:46.440><c> to</c><00:23:46.640><c> choose</c><00:23:46.960><c> the</c><00:23:47.159><c> image</c><00:23:47.760><c> choose</c><00:23:48.039><c> the</c> 00:23:48.190 --> 00:23:48.200 align:start position:0% be able to choose the image choose the 00:23:48.200 --> 00:23:50.549 align:start position:0% be able to choose the image choose the variant<00:23:48.480><c> you're</c><00:23:48.679><c> offering</c><00:23:49.159><c> or</c><00:23:49.320><c> showing</c><00:23:49.720><c> to</c> 00:23:50.549 --> 00:23:50.559 align:start position:0% variant you're offering or showing to 00:23:50.559 --> 00:23:52.830 align:start position:0% variant you're offering or showing to Shoppers<00:23:51.080><c> in</c><00:23:51.200><c> the</c><00:23:51.360><c> checkout</c><00:23:52.240><c> right</c><00:23:52.400><c> now</c><00:23:52.720><c> I'm</c> 00:23:52.830 --> 00:23:52.840 align:start position:0% Shoppers in the checkout right now I'm 00:23:52.840 --> 00:23:54.950 align:start position:0% Shoppers in the checkout right now I'm just<00:23:53.000><c> grabbing</c><00:23:53.320><c> the</c><00:23:53.440><c> first</c><00:23:53.679><c> ones</c><00:23:54.559><c> and</c><00:23:54.760><c> I'm</c> 00:23:54.950 --> 00:23:54.960 align:start position:0% just grabbing the first ones and I'm 00:23:54.960 --> 00:23:59.029 align:start position:0% just grabbing the first ones and I'm passing<00:23:55.279><c> in</c><00:23:55.559><c> my</c><00:23:55.679><c> meta</c><00:23:56.000><c> field</c><00:23:56.320><c> value</c><00:23:56.840><c> as</c><00:23:57.440><c> input</c> 00:23:59.029 --> 00:23:59.039 align:start position:0% passing in my meta field value as input 00:23:59.039 --> 00:24:00.230 align:start position:0% passing in my meta field value as input so<00:23:59.200><c> what</c><00:23:59.320><c> this</c><00:23:59.400><c> is</c><00:23:59.520><c> going</c><00:23:59.600><c> to</c><00:23:59.679><c> do</c><00:23:59.840><c> is</c><00:23:59.960><c> going</c><00:24:00.039><c> to</c> 00:24:00.230 --> 00:24:00.240 align:start position:0% so what this is going to do is going to 00:24:00.240 --> 00:24:02.430 align:start position:0% so what this is going to do is going to get<00:24:00.400><c> me</c><00:24:00.559><c> my</c><00:24:00.760><c> product</c><00:24:01.120><c> variant</c><00:24:01.840><c> which</c><00:24:02.039><c> has</c><00:24:02.240><c> the</c> 00:24:02.430 --> 00:24:02.440 align:start position:0% get me my product variant which has the 00:24:02.440 --> 00:24:05.789 align:start position:0% get me my product variant which has the price<00:24:02.919><c> and</c><00:24:03.200><c> an</c><00:24:03.400><c> image</c><00:24:03.720><c> I</c><00:24:03.799><c> can</c><00:24:04.360><c> show</c><00:24:05.360><c> I'm</c><00:24:05.559><c> also</c> 00:24:05.789 --> 00:24:05.799 align:start position:0% price and an image I can show I'm also 00:24:05.799 --> 00:24:07.950 align:start position:0% price and an image I can show I'm also using<00:24:06.080><c> use</c><00:24:06.400><c> cart</c><00:24:06.640><c> lines</c><00:24:06.880><c> to</c><00:24:07.120><c> grab</c><00:24:07.400><c> the</c><00:24:07.600><c> cart</c> 00:24:07.950 --> 00:24:07.960 align:start position:0% using use cart lines to grab the cart 00:24:07.960 --> 00:24:09.950 align:start position:0% using use cart lines to grab the cart lines<00:24:08.559><c> there</c><00:24:08.679><c> is</c><00:24:08.799><c> a</c><00:24:08.919><c> little</c><00:24:09.159><c> loading</c><00:24:09.559><c> block</c> 00:24:09.950 --> 00:24:09.960 align:start position:0% lines there is a little loading block 00:24:09.960 --> 00:24:11.870 align:start position:0% lines there is a little loading block here<00:24:10.520><c> I'm</c><00:24:10.679><c> using</c><00:24:10.919><c> the</c><00:24:11.080><c> cart</c><00:24:11.320><c> lines</c><00:24:11.559><c> to</c><00:24:11.720><c> check</c> 00:24:11.870 --> 00:24:11.880 align:start position:0% here I'm using the cart lines to check 00:24:11.880 --> 00:24:13.630 align:start position:0% here I'm using the cart lines to check to<00:24:12.039><c> see</c><00:24:12.400><c> if</c><00:24:12.600><c> the</c><00:24:12.799><c> product</c><00:24:13.080><c> being</c><00:24:13.240><c> offered</c><00:24:13.520><c> is</c> 00:24:13.630 --> 00:24:13.640 align:start position:0% to see if the product being offered is 00:24:13.640 --> 00:24:15.029 align:start position:0% to see if the product being offered is already<00:24:13.799><c> in</c><00:24:13.919><c> the</c><00:24:14.039><c> cart</c><00:24:14.320><c> if</c><00:24:14.480><c> it's</c><00:24:14.640><c> not</c><00:24:14.919><c> I'm</c> 00:24:15.029 --> 00:24:15.039 align:start position:0% already in the cart if it's not I'm 00:24:15.039 --> 00:24:17.310 align:start position:0% already in the cart if it's not I'm returning<00:24:15.480><c> null</c><00:24:16.480><c> same</c><00:24:16.679><c> with</c><00:24:16.840><c> if</c><00:24:17.000><c> things</c><00:24:17.159><c> are</c> 00:24:17.310 --> 00:24:17.320 align:start position:0% returning null same with if things are 00:24:17.320 --> 00:24:19.230 align:start position:0% returning null same with if things are done<00:24:17.600><c> loading</c><00:24:18.080><c> I'm</c><00:24:18.240><c> returning</c><00:24:18.720><c> null</c><00:24:19.080><c> or</c> 00:24:19.230 --> 00:24:19.240 align:start position:0% done loading I'm returning null or 00:24:19.240 --> 00:24:21.029 align:start position:0% done loading I'm returning null or there's<00:24:19.440><c> no</c><00:24:19.640><c> product</c><00:24:19.960><c> selected</c><00:24:20.640><c> when</c><00:24:20.799><c> I</c> 00:24:21.029 --> 00:24:21.039 align:start position:0% there's no product selected when I 00:24:21.039 --> 00:24:22.470 align:start position:0% there's no product selected when I return<00:24:21.200><c> null</c><00:24:21.440><c> on</c><00:24:21.600><c> extension</c><00:24:21.960><c> it</c><00:24:22.039><c> just</c><00:24:22.159><c> means</c> 00:24:22.470 --> 00:24:22.480 align:start position:0% return null on extension it just means 00:24:22.480 --> 00:24:24.390 align:start position:0% return null on extension it just means don't<00:24:22.720><c> draw</c><00:24:23.000><c> the</c><00:24:23.159><c> extension</c><00:24:23.799><c> so</c><00:24:24.000><c> that's</c><00:24:24.159><c> how</c><00:24:24.320><c> I</c> 00:24:24.390 --> 00:24:24.400 align:start position:0% don't draw the extension so that's how I 00:24:24.400 --> 00:24:27.350 align:start position:0% don't draw the extension so that's how I can<00:24:24.559><c> just</c><00:24:24.919><c> Escape</c><00:24:25.360><c> early</c><00:24:26.240><c> not</c><00:24:26.520><c> actually</c><00:24:26.799><c> draw</c> 00:24:27.350 --> 00:24:27.360 align:start position:0% can just Escape early not actually draw 00:24:27.360 --> 00:24:29.990 align:start position:0% can just Escape early not actually draw anything<00:24:28.679><c> finally</c><00:24:29.000><c> I've</c><00:24:29.120><c> got</c><00:24:29.279><c> my</c><00:24:29.480><c> product</c><00:24:29.880><c> I'm</c> 00:24:29.990 --> 00:24:30.000 align:start position:0% anything finally I've got my product I'm 00:24:30.000 --> 00:24:32.430 align:start position:0% anything finally I've got my product I'm just<00:24:30.159><c> grabbing</c><00:24:30.640><c> my</c><00:24:30.840><c> images</c><00:24:31.399><c> title</c><00:24:31.799><c> and</c> 00:24:32.430 --> 00:24:32.440 align:start position:0% just grabbing my images title and 00:24:32.440 --> 00:24:35.510 align:start position:0% just grabbing my images title and variance<00:24:33.440><c> I</c><00:24:33.640><c> am</c><00:24:34.039><c> getting</c><00:24:34.440><c> my</c><00:24:34.640><c> image</c><00:24:34.919><c> URL</c><00:24:35.399><c> I'm</c> 00:24:35.510 --> 00:24:35.520 align:start position:0% variance I am getting my image URL I'm 00:24:35.520 --> 00:24:38.070 align:start position:0% variance I am getting my image URL I'm also<00:24:35.760><c> providing</c><00:24:36.080><c> a</c><00:24:36.200><c> default</c><00:24:36.720><c> here</c><00:24:37.559><c> and</c><00:24:37.720><c> then</c> 00:24:38.070 --> 00:24:38.080 align:start position:0% also providing a default here and then 00:24:38.080 --> 00:24:42.510 align:start position:0% also providing a default here and then I'm<00:24:38.279><c> just</c><00:24:38.440><c> using</c><00:24:39.080><c> my</c><00:24:40.120><c> checkout</c><00:24:41.520><c> components</c> 00:24:42.510 --> 00:24:42.520 align:start position:0% I'm just using my checkout components 00:24:42.520 --> 00:24:45.470 align:start position:0% I'm just using my checkout components I've<00:24:42.679><c> got</c><00:24:42.919><c> my</c><00:24:43.279><c> image</c><00:24:44.159><c> I've</c><00:24:44.399><c> got</c><00:24:44.679><c> my</c><00:24:45.039><c> product</c> 00:24:45.470 --> 00:24:45.480 align:start position:0% I've got my image I've got my product 00:24:45.480 --> 00:24:48.430 align:start position:0% I've got my image I've got my product title<00:24:46.080><c> I've</c><00:24:46.279><c> got</c><00:24:46.520><c> my</c><00:24:46.880><c> price</c><00:24:47.720><c> and</c><00:24:47.840><c> then</c><00:24:48.000><c> I</c><00:24:48.159><c> have</c> 00:24:48.430 --> 00:24:48.440 align:start position:0% title I've got my price and then I have 00:24:48.440 --> 00:24:51.029 align:start position:0% title I've got my price and then I have my<00:24:48.799><c> ADD</c><00:24:49.200><c> button</c><00:24:49.799><c> here</c><00:24:50.399><c> the</c><00:24:50.520><c> interesting</c><00:24:50.880><c> part</c> 00:24:51.029 --> 00:24:51.039 align:start position:0% my ADD button here the interesting part 00:24:51.039 --> 00:24:53.389 align:start position:0% my ADD button here the interesting part about<00:24:51.200><c> the</c><00:24:51.320><c> add</c><00:24:51.520><c> button</c><00:24:51.760><c> is</c><00:24:51.880><c> in</c><00:24:52.080><c> on</c><00:24:52.480><c> press</c><00:24:53.159><c> I</c><00:24:53.240><c> am</c> 00:24:53.389 --> 00:24:53.399 align:start position:0% about the add button is in on press I am 00:24:53.399 --> 00:24:55.909 align:start position:0% about the add button is in on press I am using<00:24:53.679><c> that</c><00:24:53.960><c> apply</c><00:24:54.440><c> cart</c><00:24:54.840><c> lines</c><00:24:55.240><c> change</c> 00:24:55.909 --> 00:24:55.919 align:start position:0% using that apply cart lines change 00:24:55.919 --> 00:24:58.470 align:start position:0% using that apply cart lines change function<00:24:56.320><c> that</c><00:24:56.480><c> came</c><00:24:56.720><c> from</c><00:24:56.880><c> the</c><00:24:57.039><c> hook</c><00:24:58.000><c> I</c><00:24:58.120><c> am</c> 00:24:58.470 --> 00:24:58.480 align:start position:0% function that came from the hook I am 00:24:58.480 --> 00:25:00.389 align:start position:0% function that came from the hook I am adding<00:24:58.679><c> a</c><00:24:58.799><c> cart</c><00:24:59.080><c> line</c><00:24:59.399><c> I'm</c><00:24:59.559><c> just</c><00:24:59.799><c> adding</c><00:25:00.159><c> my</c> 00:25:00.389 --> 00:25:00.399 align:start position:0% adding a cart line I'm just adding my 00:25:00.399 --> 00:25:02.510 align:start position:0% adding a cart line I'm just adding my variant<00:25:01.039><c> I'm</c><00:25:01.159><c> setting</c><00:25:01.399><c> it</c><00:25:01.520><c> to</c><00:25:01.640><c> a</c><00:25:01.760><c> quantity</c><00:25:02.279><c> of</c> 00:25:02.510 --> 00:25:02.520 align:start position:0% variant I'm setting it to a quantity of 00:25:02.520 --> 00:25:05.110 align:start position:0% variant I'm setting it to a quantity of one<00:25:03.480><c> and</c><00:25:03.720><c> that</c><00:25:03.880><c> is</c><00:25:04.159><c> that</c><00:25:04.480><c> if</c><00:25:04.600><c> I</c><00:25:04.720><c> do</c><00:25:04.880><c> have</c><00:25:05.000><c> an</c> 00:25:05.110 --> 00:25:05.120 align:start position:0% one and that is that if I do have an 00:25:05.120 --> 00:25:06.669 align:start position:0% one and that is that if I do have an error<00:25:05.480><c> I</c><00:25:05.559><c> am</c><00:25:05.679><c> going</c><00:25:05.760><c> to</c><00:25:05.880><c> go</c><00:25:06.000><c> ahead</c><00:25:06.159><c> and</c><00:25:06.399><c> show</c> 00:25:06.669 --> 00:25:06.679 align:start position:0% error I am going to go ahead and show 00:25:06.679 --> 00:25:09.510 align:start position:0% error I am going to go ahead and show that<00:25:06.880><c> error</c><00:25:07.200><c> as</c><00:25:07.360><c> well</c><00:25:07.559><c> as</c><00:25:07.799><c> log</c><00:25:08.080><c> it</c><00:25:08.799><c> so</c><00:25:09.120><c> that</c><00:25:09.320><c> is</c> 00:25:09.510 --> 00:25:09.520 align:start position:0% that error as well as log it so that is 00:25:09.520 --> 00:25:12.269 align:start position:0% that error as well as log it so that is the<00:25:09.720><c> endtoend</c><00:25:10.200><c> app</c><00:25:10.880><c> build</c><00:25:11.880><c> we've</c><00:25:12.080><c> already</c> 00:25:12.269 --> 00:25:12.279 align:start position:0% the endtoend app build we've already 00:25:12.279 --> 00:25:14.029 align:start position:0% the endtoend app build we've already gone<00:25:12.440><c> through</c><00:25:12.600><c> the</c><00:25:12.760><c> demo</c><00:25:13.200><c> and</c><00:25:13.360><c> we've</c><00:25:13.600><c> seen</c> 00:25:14.029 --> 00:25:14.039 align:start position:0% gone through the demo and we've seen 00:25:14.039 --> 00:25:16.750 align:start position:0% gone through the demo and we've seen that<00:25:14.159><c> it</c><00:25:14.440><c> does</c><00:25:14.760><c> indeed</c><00:25:15.200><c> work</c><00:25:16.120><c> I</c><00:25:16.200><c> can</c><00:25:16.399><c> also</c><00:25:16.640><c> go</c> 00:25:16.750 --> 00:25:16.760 align:start position:0% that it does indeed work I can also go 00:25:16.760 --> 00:25:18.990 align:start position:0% that it does indeed work I can also go ahead<00:25:17.120><c> and</c><00:25:17.600><c> deploy</c><00:25:18.039><c> my</c><00:25:18.240><c> extension</c><00:25:18.679><c> let's</c><00:25:18.840><c> walk</c> 00:25:18.990 --> 00:25:19.000 align:start position:0% ahead and deploy my extension let's walk 00:25:19.000 --> 00:25:20.590 align:start position:0% ahead and deploy my extension let's walk through<00:25:19.200><c> this</c><00:25:19.399><c> really</c><00:25:19.600><c> quickly</c><00:25:20.320><c> I'm</c><00:25:20.399><c> going</c><00:25:20.520><c> to</c> 00:25:20.590 --> 00:25:20.600 align:start position:0% through this really quickly I'm going to 00:25:20.600 --> 00:25:21.669 align:start position:0% through this really quickly I'm going to go<00:25:20.720><c> ahead</c><00:25:20.880><c> and</c> 00:25:21.669 --> 00:25:21.679 align:start position:0% go ahead and 00:25:21.679 --> 00:25:24.549 align:start position:0% go ahead and stop<00:25:22.679><c> Shopify</c><00:25:23.320><c> does</c><00:25:23.559><c> host</c><00:25:23.880><c> all</c><00:25:24.000><c> of</c><00:25:24.120><c> your</c> 00:25:24.549 --> 00:25:24.559 align:start position:0% stop Shopify does host all of your 00:25:24.559 --> 00:25:27.310 align:start position:0% stop Shopify does host all of your extensions<00:25:25.440><c> so</c><00:25:25.600><c> I</c><00:25:25.679><c> can</c><00:25:25.799><c> just</c><00:25:25.960><c> go</c><00:25:26.120><c> yarn</c> 00:25:27.310 --> 00:25:27.320 align:start position:0% extensions so I can just go yarn 00:25:27.320 --> 00:25:29.310 align:start position:0% extensions so I can just go yarn deploy 00:25:29.310 --> 00:25:29.320 align:start position:0% deploy 00:25:29.320 --> 00:25:30.750 align:start position:0% deploy this<00:25:29.440><c> will</c><00:25:29.640><c> actually</c><00:25:29.960><c> push</c><00:25:30.200><c> my</c><00:25:30.360><c> extension</c> 00:25:30.750 --> 00:25:30.760 align:start position:0% this will actually push my extension 00:25:30.760 --> 00:25:31.990 align:start position:0% this will actually push my extension code<00:25:31.159><c> to</c> 00:25:31.990 --> 00:25:32.000 align:start position:0% code to 00:25:32.000 --> 00:25:34.669 align:start position:0% code to Shopify<00:25:33.000><c> in</c><00:25:33.200><c> this</c><00:25:33.360><c> case</c><00:25:33.640><c> include</c><00:25:34.000><c> Shopify</c><00:25:34.480><c> app</c> 00:25:34.669 --> 00:25:34.679 align:start position:0% Shopify in this case include Shopify app 00:25:34.679 --> 00:25:37.310 align:start position:0% Shopify in this case include Shopify app toml<00:25:35.159><c> configuration</c><00:25:35.640><c> on</c><00:25:35.960><c> deploy</c><00:25:36.960><c> it</c><00:25:37.080><c> doesn't</c> 00:25:37.310 --> 00:25:37.320 align:start position:0% toml configuration on deploy it doesn't 00:25:37.320 --> 00:25:39.029 align:start position:0% toml configuration on deploy it doesn't really<00:25:37.480><c> matter</c><00:25:37.720><c> what</c><00:25:37.840><c> you</c><00:25:38.000><c> pick</c><00:25:38.559><c> Gadget</c><00:25:38.960><c> is</c> 00:25:39.029 --> 00:25:39.039 align:start position:0% really matter what you pick Gadget is 00:25:39.039 --> 00:25:41.789 align:start position:0% really matter what you pick Gadget is going<00:25:39.159><c> to</c><00:25:39.320><c> manage</c><00:25:39.880><c> your</c><00:25:40.559><c> Shopify</c><00:25:41.200><c> connection</c> 00:25:41.789 --> 00:25:41.799 align:start position:0% going to manage your Shopify connection 00:25:41.799 --> 00:25:44.630 align:start position:0% going to manage your Shopify connection anyways<00:25:42.520><c> and</c><00:25:42.799><c> how</c><00:25:43.200><c> that</c><00:25:43.640><c> app</c><00:25:43.840><c> is</c><00:25:44.000><c> defined</c><00:25:44.520><c> in</c> 00:25:44.630 --> 00:25:44.640 align:start position:0% anyways and how that app is defined in 00:25:44.640 --> 00:25:47.029 align:start position:0% anyways and how that app is defined in terms<00:25:44.880><c> of</c><00:25:45.159><c> Scopes</c><00:25:46.039><c> so</c><00:25:46.279><c> it</c><00:25:46.399><c> doesn't</c><00:25:46.720><c> really</c> 00:25:47.029 --> 00:25:47.039 align:start position:0% terms of Scopes so it doesn't really 00:25:47.039 --> 00:25:48.830 align:start position:0% terms of Scopes so it doesn't really matter<00:25:47.520><c> if</c><00:25:47.640><c> you</c><00:25:47.799><c> push</c><00:25:48.000><c> or</c><00:25:48.159><c> don't</c><00:25:48.399><c> push</c><00:25:48.720><c> I'm</c> 00:25:48.830 --> 00:25:48.840 align:start position:0% matter if you push or don't push I'm 00:25:48.840 --> 00:25:51.310 align:start position:0% matter if you push or don't push I'm just<00:25:48.960><c> going</c><00:25:49.080><c> to</c><00:25:49.200><c> select</c><00:25:49.840><c> yes</c><00:25:50.840><c> and</c><00:25:51.039><c> I</c><00:25:51.159><c> will</c> 00:25:51.310 --> 00:25:51.320 align:start position:0% just going to select yes and I will 00:25:51.320 --> 00:25:53.590 align:start position:0% just going to select yes and I will release<00:25:51.640><c> my</c><00:25:51.799><c> extension</c><00:25:52.360><c> as</c><00:25:52.520><c> a</c><00:25:52.640><c> new</c> 00:25:53.590 --> 00:25:53.600 align:start position:0% release my extension as a new 00:25:53.600 --> 00:25:56.789 align:start position:0% release my extension as a new version<00:25:54.600><c> and</c><00:25:54.760><c> now</c><00:25:54.880><c> if</c><00:25:55.000><c> I</c><00:25:55.159><c> go</c><00:25:55.320><c> ahead</c><00:25:56.240><c> into</c><00:25:56.559><c> my</c> 00:25:56.789 --> 00:25:56.799 align:start position:0% version and now if I go ahead into my 00:25:56.799 --> 00:25:59.029 align:start position:0% version and now if I go ahead into my store<00:25:57.559><c> let's</c> 00:25:59.029 --> 00:25:59.039 align:start position:0% store let's 00:25:59.039 --> 00:26:00.350 align:start position:0% store let's go<00:25:59.200><c> to</c> 00:26:00.350 --> 00:26:00.360 align:start position:0% go to 00:26:00.360 --> 00:26:02.149 align:start position:0% go to settings<00:26:01.360><c> check</c> 00:26:02.149 --> 00:26:02.159 align:start position:0% settings check 00:26:02.159 --> 00:26:04.750 align:start position:0% settings check out 00:26:04.750 --> 00:26:04.760 align:start position:0% out 00:26:04.760 --> 00:26:07.230 align:start position:0% out customize<00:26:05.760><c> and</c><00:26:05.919><c> this</c><00:26:06.000><c> is</c><00:26:06.120><c> my</c><00:26:06.360><c> checkout</c><00:26:06.799><c> editor</c> 00:26:07.230 --> 00:26:07.240 align:start position:0% customize and this is my checkout editor 00:26:07.240 --> 00:26:09.389 align:start position:0% customize and this is my checkout editor I<00:26:07.320><c> can</c><00:26:07.399><c> go</c><00:26:07.520><c> to</c><00:26:07.720><c> add</c><00:26:08.000><c> app</c><00:26:08.279><c> Block</c><00:26:08.799><c> and</c><00:26:08.919><c> I</c><00:26:09.000><c> see</c><00:26:09.279><c> this</c> 00:26:09.389 --> 00:26:09.399 align:start position:0% I can go to add app Block and I see this 00:26:09.399 --> 00:26:12.110 align:start position:0% I can go to add app Block and I see this is<00:26:09.559><c> my</c><00:26:09.760><c> app</c><00:26:10.000><c> Block</c><00:26:10.880><c> I</c><00:26:10.960><c> can</c><00:26:11.200><c> click</c><00:26:11.399><c> on</c><00:26:11.559><c> it</c><00:26:11.760><c> it</c><00:26:11.880><c> is</c> 00:26:12.110 --> 00:26:12.120 align:start position:0% is my app Block I can click on it it is 00:26:12.120 --> 00:26:14.789 align:start position:0% is my app Block I can click on it it is added<00:26:12.440><c> to</c><00:26:12.640><c> my</c><00:26:13.120><c> page</c><00:26:14.120><c> I'm</c><00:26:14.240><c> just</c><00:26:14.360><c> going</c><00:26:14.440><c> to</c><00:26:14.600><c> go</c> 00:26:14.789 --> 00:26:14.799 align:start position:0% added to my page I'm just going to go 00:26:14.799 --> 00:26:16.950 align:start position:0% added to my page I'm just going to go back<00:26:15.039><c> here</c><00:26:15.320><c> I</c><00:26:15.399><c> can</c><00:26:15.600><c> actually</c><00:26:16.039><c> hover</c><00:26:16.520><c> and</c><00:26:16.679><c> I</c><00:26:16.760><c> can</c> 00:26:16.950 --> 00:26:16.960 align:start position:0% back here I can actually hover and I can 00:26:16.960 --> 00:26:19.430 align:start position:0% back here I can actually hover and I can drag<00:26:17.360><c> this</c><00:26:17.559><c> around</c><00:26:17.919><c> if</c><00:26:18.080><c> I</c><00:26:18.200><c> want</c><00:26:18.880><c> if</c><00:26:19.000><c> I</c><00:26:19.120><c> want</c><00:26:19.240><c> to</c> 00:26:19.430 --> 00:26:19.440 align:start position:0% drag this around if I want if I want to 00:26:19.440 --> 00:26:21.149 align:start position:0% drag this around if I want if I want to move<00:26:19.640><c> it</c><00:26:19.799><c> in</c><00:26:20.039><c> different</c><00:26:20.399><c> places</c><00:26:20.840><c> now</c><00:26:21.000><c> it's</c> 00:26:21.149 --> 00:26:21.159 align:start position:0% move it in different places now it's 00:26:21.159 --> 00:26:23.389 align:start position:0% move it in different places now it's down<00:26:21.320><c> at</c><00:26:21.480><c> the</c><00:26:21.600><c> bottom</c><00:26:22.000><c> here</c><00:26:22.799><c> I</c><00:26:22.880><c> can</c><00:26:23.000><c> move</c><00:26:23.159><c> it</c><00:26:23.240><c> to</c> 00:26:23.389 --> 00:26:23.399 align:start position:0% down at the bottom here I can move it to 00:26:23.399 --> 00:26:25.230 align:start position:0% down at the bottom here I can move it to my<00:26:23.520><c> order</c><00:26:23.840><c> summary</c><00:26:24.320><c> maybe</c><00:26:24.559><c> I</c><00:26:24.679><c> want</c><00:26:24.799><c> it</c><00:26:25.039><c> right</c> 00:26:25.230 --> 00:26:25.240 align:start position:0% my order summary maybe I want it right 00:26:25.240 --> 00:26:28.510 align:start position:0% my order summary maybe I want it right up<00:26:25.559><c> here</c><00:26:26.559><c> uh</c><00:26:26.919><c> that</c><00:26:27.080><c> looks</c><00:26:27.360><c> good</c><00:26:27.480><c> to</c><00:26:27.640><c> me</c><00:26:27.799><c> if</c><00:26:27.880><c> I'm</c> 00:26:28.510 --> 00:26:28.520 align:start position:0% up here uh that looks good to me if I'm 00:26:28.520 --> 00:26:30.630 align:start position:0% up here uh that looks good to me if I'm with<00:26:28.640><c> this</c><00:26:28.799><c> location</c><00:26:29.200><c> I</c><00:26:29.279><c> can</c><00:26:29.520><c> press</c><00:26:29.840><c> save</c><00:26:30.520><c> and</c> 00:26:30.630 --> 00:26:30.640 align:start position:0% with this location I can press save and 00:26:30.640 --> 00:26:34.029 align:start position:0% with this location I can press save and I<00:26:30.799><c> want</c><00:26:30.919><c> to</c><00:26:31.120><c> actually</c><00:26:31.399><c> go</c><00:26:31.840><c> visit</c><00:26:32.279><c> my</c> 00:26:34.029 --> 00:26:34.039 align:start position:0% I want to actually go visit my 00:26:34.039 --> 00:26:36.830 align:start position:0% I want to actually go visit my store<00:26:35.039><c> if</c><00:26:35.159><c> I</c><00:26:35.320><c> just</c><00:26:35.440><c> go</c><00:26:35.559><c> to</c><00:26:35.720><c> my</c><00:26:35.840><c> store</c><00:26:36.159><c> here</c><00:26:36.600><c> and</c> 00:26:36.830 --> 00:26:36.840 align:start position:0% store if I just go to my store here and 00:26:36.840 --> 00:26:38.310 align:start position:0% store if I just go to my store here and run<00:26:37.080><c> through</c><00:26:37.320><c> a</c><00:26:37.480><c> quick</c> 00:26:38.310 --> 00:26:38.320 align:start position:0% run through a quick 00:26:38.320 --> 00:26:40.149 align:start position:0% run through a quick checkout<00:26:39.320><c> oh</c><00:26:39.480><c> there's</c><00:26:39.640><c> already</c><00:26:39.840><c> some</c><00:26:40.000><c> things</c> 00:26:40.149 --> 00:26:40.159 align:start position:0% checkout oh there's already some things 00:26:40.159 --> 00:26:42.870 align:start position:0% checkout oh there's already some things in<00:26:40.279><c> my</c><00:26:40.919><c> cart</c><00:26:41.919><c> I'm</c><00:26:42.000><c> going</c><00:26:42.120><c> to</c><00:26:42.279><c> remove</c><00:26:42.679><c> the</c> 00:26:42.870 --> 00:26:42.880 align:start position:0% in my cart I'm going to remove the 00:26:42.880 --> 00:26:46.190 align:start position:0% in my cart I'm going to remove the oxygen<00:26:43.279><c> snowboard</c><00:26:43.919><c> and</c><00:26:44.080><c> check</c><00:26:44.760><c> out</c><00:26:45.760><c> and</c><00:26:45.919><c> I</c><00:26:46.000><c> can</c> 00:26:46.190 --> 00:26:46.200 align:start position:0% oxygen snowboard and check out and I can 00:26:46.200 --> 00:26:49.149 align:start position:0% oxygen snowboard and check out and I can see<00:26:47.000><c> there</c><00:26:47.120><c> we</c><00:26:47.320><c> go</c><00:26:48.000><c> my</c><00:26:48.320><c> Dev</c><00:26:48.600><c> command</c><00:26:48.960><c> isn't</c> 00:26:49.149 --> 00:26:49.159 align:start position:0% see there we go my Dev command isn't 00:26:49.159 --> 00:26:50.830 align:start position:0% see there we go my Dev command isn't running<00:26:49.480><c> so</c><00:26:49.640><c> this</c><00:26:49.720><c> is</c><00:26:49.919><c> actually</c><00:26:50.159><c> my</c><00:26:50.320><c> deployed</c> 00:26:50.830 --> 00:26:50.840 align:start position:0% running so this is actually my deployed 00:26:50.840 --> 00:26:52.909 align:start position:0% running so this is actually my deployed extension<00:26:51.360><c> in</c><00:26:51.520><c> my</c><00:26:51.720><c> checkout</c><00:26:52.320><c> and</c><00:26:52.520><c> I</c><00:26:52.600><c> can</c><00:26:52.799><c> go</c> 00:26:52.909 --> 00:26:52.919 align:start position:0% extension in my checkout and I can go 00:26:52.919 --> 00:26:56.029 align:start position:0% extension in my checkout and I can go ahead<00:26:53.080><c> and</c><00:26:53.320><c> add</c><00:26:53.520><c> it</c><00:26:53.799><c> to</c><00:26:54.039><c> my</c><00:26:54.640><c> card</c><00:26:55.640><c> that</c><00:26:55.760><c> was</c><00:26:55.880><c> our</c> 00:26:56.029 --> 00:26:56.039 align:start position:0% ahead and add it to my card that was our 00:26:56.039 --> 00:26:58.830 align:start position:0% ahead and add it to my card that was our end<00:26:56.200><c> to</c><00:26:56.320><c> end</c><00:26:56.559><c> app</c><00:26:56.880><c> tutorial</c><00:26:57.880><c> if</c><00:26:58.000><c> you</c><00:26:58.399><c> have</c><00:26:58.559><c> any</c> 00:26:58.830 --> 00:26:58.840 align:start position:0% end to end app tutorial if you have any 00:26:58.840 --> 00:27:00.230 align:start position:0% end to end app tutorial if you have any questions<00:26:59.200><c> you</c><00:26:59.279><c> can</c><00:26:59.440><c> check</c><00:26:59.600><c> out</c><00:26:59.760><c> our</c><00:26:59.919><c> written</c> 00:27:00.230 --> 00:27:00.240 align:start position:0% questions you can check out our written 00:27:00.240 --> 00:27:02.830 align:start position:0% questions you can check out our written tutorial<00:27:01.240><c> or</c><00:27:01.640><c> ask</c><00:27:01.880><c> us</c><00:27:02.120><c> questions</c><00:27:02.520><c> in</c><00:27:02.640><c> our</c> 00:27:02.830 --> 00:27:02.840 align:start position:0% tutorial or ask us questions in our 00:27:02.840 --> 00:27:04.389 align:start position:0% tutorial or ask us questions in our developer<00:27:03.320><c> Discord</c><00:27:03.679><c> we're</c><00:27:03.880><c> always</c><00:27:04.120><c> hanging</c> 00:27:04.389 --> 00:27:04.399 align:start position:0% developer Discord we're always hanging 00:27:04.399 --> 00:27:06.990 align:start position:0% developer Discord we're always hanging around<00:27:04.799><c> and</c><00:27:05.039><c> happy</c><00:27:05.320><c> to</c><00:27:05.559><c> help</c><00:27:06.240><c> until</c><00:27:06.520><c> next</c><00:27:06.720><c> time</c> 00:27:06.990 --> 00:27:07.000 align:start position:0% around and happy to help until next time 00:27:07.000 --> 00:27:08.430 align:start position:0% around and happy to help until next time I<00:27:07.120><c> hope</c><00:27:07.240><c> we</c><00:27:07.399><c> keep</c><00:27:07.520><c> building</c><00:27:07.799><c> more</c><00:27:07.960><c> on</c><00:27:08.120><c> coding</c> 00:27:08.430 --> 00:27:08.440 align:start position:0% I hope we keep building more on coding 00:27:08.440 --> 00:27:11.679 align:start position:0% I hope we keep building more on coding less<00:27:08.880><c> with</c><00:27:09.120><c> Gadget</c>