Fayyaz Ahmed | Shopify Developer
내용
[subtitle-meta] lang=en auto=True
hi everyone welcome back to my channel
in this video we will learn how to fetch
products from a Shopify store in our
custom nodejs app so before
uh diving into the code make sure you
have
uh access access scope of right products
so in the Shopify do. custom. do- ab.
tumble write the scope to right uh
products and then run the
command Shopify app deployed that will
over write the settings and now let's go
to the app then go to the route and then
click on the
app.jsx copy this
one this is the sidebar link and we will
copy that to create a new route new
route link and we name that products
and
uh products over here then we will
create a new file in the routes
app. products.
j s
x in this file we are going to call some
module uh some uh reative
modules so let me just copy and paste
the modules we need we need user let
user use loader data use fetcher form
remix run react then we need Json from
react uh remix run node and aate from
Shopify server to tigate our request
then
Polaris Polaris modules uh the component
of Polaris page layout text card Etc so
the these are the components we need
then we will write the loader function
loader function runs automatically when
we when we load the page and in this
loader
function we
will have the request object and we will
authenticate our request with the with
the
admin and then with that admin we can
make the graphical query and we will
fetch the first 10
products and in that product we will
have the ID handle status Imes Etc this
is the simple graphical query and then
we will get the response and we will
pass that response to our react react
page so this will run on the back end
and now let's write the front end
code in the front end code we will have
uh export
function we we have a products and here
we get the data from user uh use loader
data which is coming from here all the
products and we save that here then we
have a fetcher for the delete products
and then we have a product variable we
save the data data. products. edges on
here then we will Loop through these
products product. map and we'll pass the
node as the
product and in that array we will have a
thumbnail in the thumbnail we pass the
product image then product title product
status then product variance as is IM uh
price to show the price then we have the
addit button in the edit button we are
just simply redirecting the product to
the uh actual product page in the admin
and for deleting we are using this
delete handle delete function to delete
the
product and here in the return function
we are showing the full page layout then
card and the product list then the data
table this will display all the products
we have six text field and image title
status prize and edit so let's save
that and go to our
store and go to the custom app it takes
some time to
load authenticating our
request so don't worry about the code I
will uh give you this code in the in the
description so it is
loading sometime if it doesn't load you
can press B
again from the command prompt
and then your app will be noted quickly
then click on the
products and now you can see we have
first 10 products of our
store and if I go back here and make uh
products you will
see we we have the 20% products
now and if I change
to five
products save that and you will notice
we have five
products and this is how you can fetch
the products from your Shopify store in
the next video we will see how to edit
and delete the
products
from our custom M so thank you for
watching and I will see you in the next
video
원문 자막 펼치기
WEBVTT Kind: captions Language: en 00:00:00.440 --> 00:00:02.629 align:start position:0% hi<00:00:00.640><c> everyone</c><00:00:01.319><c> welcome</c><00:00:01.680><c> back</c><00:00:01.839><c> to</c><00:00:01.959><c> my</c><00:00:02.159><c> channel</c> 00:00:02.629 --> 00:00:02.639 align:start position:0% hi everyone welcome back to my channel 00:00:02.639 --> 00:00:05.710 align:start position:0% hi everyone welcome back to my channel in<00:00:02.879><c> this</c><00:00:03.120><c> video</c><00:00:03.560><c> we</c><00:00:03.679><c> will</c><00:00:03.879><c> learn</c><00:00:04.319><c> how</c><00:00:04.600><c> to</c><00:00:05.319><c> fetch</c> 00:00:05.710 --> 00:00:05.720 align:start position:0% in this video we will learn how to fetch 00:00:05.720 --> 00:00:08.190 align:start position:0% in this video we will learn how to fetch products<00:00:06.080><c> from</c><00:00:06.279><c> a</c><00:00:06.440><c> Shopify</c><00:00:07.040><c> store</c><00:00:07.520><c> in</c><00:00:07.720><c> our</c> 00:00:08.190 --> 00:00:08.200 align:start position:0% products from a Shopify store in our 00:00:08.200 --> 00:00:13.829 align:start position:0% products from a Shopify store in our custom<00:00:09.200><c> nodejs</c><00:00:10.040><c> app</c><00:00:11.360><c> so</c><00:00:12.360><c> before</c> 00:00:13.829 --> 00:00:13.839 align:start position:0% custom nodejs app so before 00:00:13.839 --> 00:00:16.670 align:start position:0% custom nodejs app so before uh<00:00:14.839><c> diving</c><00:00:15.240><c> into</c><00:00:15.440><c> the</c><00:00:15.599><c> code</c><00:00:15.839><c> make</c><00:00:16.119><c> sure</c><00:00:16.359><c> you</c> 00:00:16.670 --> 00:00:16.680 align:start position:0% uh diving into the code make sure you 00:00:16.680 --> 00:00:17.870 align:start position:0% uh diving into the code make sure you have 00:00:17.870 --> 00:00:17.880 align:start position:0% have 00:00:17.880 --> 00:00:22.590 align:start position:0% have uh<00:00:18.880><c> access</c><00:00:19.680><c> access</c><00:00:20.119><c> scope</c><00:00:20.600><c> of</c><00:00:20.840><c> right</c><00:00:21.600><c> products</c> 00:00:22.590 --> 00:00:22.600 align:start position:0% uh access access scope of right products 00:00:22.600 --> 00:00:27.830 align:start position:0% uh access access scope of right products so<00:00:23.080><c> in</c><00:00:23.359><c> the</c><00:00:24.119><c> Shopify</c><00:00:24.960><c> do.</c><00:00:25.680><c> custom.</c><00:00:26.480><c> do-</c><00:00:27.320><c> ab.</c> 00:00:27.830 --> 00:00:27.840 align:start position:0% so in the Shopify do. custom. do- ab. 00:00:27.840 --> 00:00:31.870 align:start position:0% so in the Shopify do. custom. do- ab. tumble<00:00:28.760><c> write</c><00:00:29.080><c> the</c><00:00:29.320><c> scope</c><00:00:29.640><c> to</c><00:00:30.119><c> right</c><00:00:30.880><c> uh</c> 00:00:31.870 --> 00:00:31.880 align:start position:0% tumble write the scope to right uh 00:00:31.880 --> 00:00:34.630 align:start position:0% tumble write the scope to right uh products<00:00:32.559><c> and</c><00:00:32.800><c> then</c><00:00:33.200><c> run</c><00:00:33.559><c> the</c> 00:00:34.630 --> 00:00:34.640 align:start position:0% products and then run the 00:00:34.640 --> 00:00:37.709 align:start position:0% products and then run the command<00:00:35.640><c> Shopify</c><00:00:36.520><c> app</c><00:00:36.800><c> deployed</c><00:00:37.399><c> that</c><00:00:37.520><c> will</c> 00:00:37.709 --> 00:00:37.719 align:start position:0% command Shopify app deployed that will 00:00:37.719 --> 00:00:41.709 align:start position:0% command Shopify app deployed that will over<00:00:38.000><c> write</c><00:00:38.280><c> the</c><00:00:39.399><c> settings</c><00:00:40.399><c> and</c><00:00:40.879><c> now</c><00:00:41.280><c> let's</c><00:00:41.559><c> go</c> 00:00:41.709 --> 00:00:41.719 align:start position:0% over write the settings and now let's go 00:00:41.719 --> 00:00:45.470 align:start position:0% over write the settings and now let's go to<00:00:42.399><c> the</c><00:00:43.399><c> app</c><00:00:43.760><c> then</c><00:00:43.920><c> go</c><00:00:44.039><c> to</c><00:00:44.160><c> the</c><00:00:44.320><c> route</c><00:00:44.960><c> and</c><00:00:45.280><c> then</c> 00:00:45.470 --> 00:00:45.480 align:start position:0% to the app then go to the route and then 00:00:45.480 --> 00:00:48.270 align:start position:0% to the app then go to the route and then click<00:00:45.719><c> on</c><00:00:45.879><c> the</c> 00:00:48.270 --> 00:00:48.280 align:start position:0% click on the 00:00:48.280 --> 00:00:50.470 align:start position:0% click on the app.jsx<00:00:49.280><c> copy</c><00:00:49.640><c> this</c> 00:00:50.470 --> 00:00:50.480 align:start position:0% app.jsx copy this 00:00:50.480 --> 00:00:53.389 align:start position:0% app.jsx copy this one<00:00:51.480><c> this</c><00:00:51.600><c> is</c><00:00:51.760><c> the</c><00:00:51.960><c> sidebar</c><00:00:52.399><c> link</c><00:00:52.879><c> and</c><00:00:53.039><c> we</c><00:00:53.160><c> will</c> 00:00:53.389 --> 00:00:53.399 align:start position:0% one this is the sidebar link and we will 00:00:53.399 --> 00:00:56.750 align:start position:0% one this is the sidebar link and we will copy<00:00:53.760><c> that</c><00:00:54.559><c> to</c><00:00:54.760><c> create</c><00:00:55.000><c> a</c><00:00:55.160><c> new</c><00:00:55.480><c> route</c><00:00:56.480><c> new</c> 00:00:56.750 --> 00:00:56.760 align:start position:0% copy that to create a new route new 00:00:56.760 --> 00:01:03.029 align:start position:0% copy that to create a new route new route<00:00:57.280><c> link</c><00:00:58.280><c> and</c><00:00:58.519><c> we</c><00:00:58.800><c> name</c><00:00:59.120><c> that</c><00:00:59.399><c> products</c> 00:01:03.029 --> 00:01:03.039 align:start position:0% 00:01:03.039 --> 00:01:06.710 align:start position:0% and 00:01:06.710 --> 00:01:06.720 align:start position:0% 00:01:06.720 --> 00:01:10.590 align:start position:0% uh<00:01:07.720><c> products</c><00:01:08.280><c> over</c><00:01:08.960><c> here</c><00:01:09.960><c> then</c><00:01:10.280><c> we</c><00:01:10.400><c> will</c> 00:01:10.590 --> 00:01:10.600 align:start position:0% uh products over here then we will 00:01:10.600 --> 00:01:13.230 align:start position:0% uh products over here then we will create<00:01:10.840><c> a</c><00:01:10.960><c> new</c><00:01:11.240><c> file</c><00:01:11.600><c> in</c><00:01:11.759><c> the</c><00:01:11.920><c> routes</c> 00:01:13.230 --> 00:01:13.240 align:start position:0% create a new file in the routes 00:01:13.240 --> 00:01:16.149 align:start position:0% create a new file in the routes app.<00:01:14.600><c> products.</c> 00:01:16.149 --> 00:01:16.159 align:start position:0% app. products. 00:01:16.159 --> 00:01:18.230 align:start position:0% app. products. j<00:01:17.159><c> s</c> 00:01:18.230 --> 00:01:18.240 align:start position:0% j s 00:01:18.240 --> 00:01:22.429 align:start position:0% j s x<00:01:19.240><c> in</c><00:01:19.479><c> this</c><00:01:19.720><c> file</c><00:01:20.400><c> we</c><00:01:20.560><c> are</c><00:01:20.799><c> going</c><00:01:21.079><c> to</c><00:01:21.600><c> call</c><00:01:22.040><c> some</c> 00:01:22.429 --> 00:01:22.439 align:start position:0% x in this file we are going to call some 00:01:22.439 --> 00:01:26.830 align:start position:0% x in this file we are going to call some module<00:01:23.840><c> uh</c><00:01:24.840><c> some</c><00:01:25.479><c> uh</c><00:01:25.799><c> reative</c> 00:01:26.830 --> 00:01:26.840 align:start position:0% module uh some uh reative 00:01:26.840 --> 00:01:31.429 align:start position:0% module uh some uh reative modules<00:01:28.280><c> so</c><00:01:29.280><c> let</c><00:01:29.479><c> me</c><00:01:29.640><c> just</c><00:01:29.960><c> copy</c><00:01:30.240><c> and</c><00:01:30.479><c> paste</c> 00:01:31.429 --> 00:01:31.439 align:start position:0% modules so let me just copy and paste 00:01:31.439 --> 00:01:34.230 align:start position:0% modules so let me just copy and paste the<00:01:31.680><c> modules</c><00:01:32.119><c> we</c><00:01:32.280><c> need</c><00:01:32.920><c> we</c><00:01:33.040><c> need</c><00:01:33.280><c> user</c><00:01:33.640><c> let</c> 00:01:34.230 --> 00:01:34.240 align:start position:0% the modules we need we need user let 00:01:34.240 --> 00:01:37.950 align:start position:0% the modules we need we need user let user<00:01:35.240><c> use</c><00:01:35.600><c> loader</c><00:01:36.079><c> data</c><00:01:36.479><c> use</c><00:01:36.759><c> fetcher</c><00:01:37.159><c> form</c> 00:01:37.950 --> 00:01:37.960 align:start position:0% user use loader data use fetcher form 00:01:37.960 --> 00:01:42.149 align:start position:0% user use loader data use fetcher form remix<00:01:38.880><c> run</c><00:01:39.240><c> react</c><00:01:40.240><c> then</c><00:01:40.399><c> we</c><00:01:40.560><c> need</c><00:01:40.920><c> Json</c><00:01:41.520><c> from</c> 00:01:42.149 --> 00:01:42.159 align:start position:0% remix run react then we need Json from 00:01:42.159 --> 00:01:46.709 align:start position:0% remix run react then we need Json from react<00:01:43.159><c> uh</c><00:01:43.320><c> remix</c><00:01:43.920><c> run</c><00:01:44.399><c> node</c><00:01:45.320><c> and</c><00:01:45.520><c> aate</c><00:01:46.320><c> from</c> 00:01:46.709 --> 00:01:46.719 align:start position:0% react uh remix run node and aate from 00:01:46.719 --> 00:01:49.910 align:start position:0% react uh remix run node and aate from Shopify<00:01:47.320><c> server</c><00:01:47.719><c> to</c><00:01:48.000><c> tigate</c><00:01:48.479><c> our</c><00:01:48.920><c> request</c> 00:01:49.910 --> 00:01:49.920 align:start position:0% Shopify server to tigate our request 00:01:49.920 --> 00:01:51.350 align:start position:0% Shopify server to tigate our request then 00:01:51.350 --> 00:01:51.360 align:start position:0% then 00:01:51.360 --> 00:01:54.990 align:start position:0% then Polaris<00:01:52.360><c> Polaris</c><00:01:53.159><c> modules</c><00:01:54.159><c> uh</c><00:01:54.320><c> the</c><00:01:54.479><c> component</c> 00:01:54.990 --> 00:01:55.000 align:start position:0% Polaris Polaris modules uh the component 00:01:55.000 --> 00:01:59.630 align:start position:0% Polaris Polaris modules uh the component of<00:01:55.360><c> Polaris</c><00:01:56.360><c> page</c><00:01:56.719><c> layout</c><00:01:57.159><c> text</c><00:01:57.520><c> card</c><00:01:58.320><c> Etc</c><00:01:59.320><c> so</c> 00:01:59.630 --> 00:01:59.640 align:start position:0% of Polaris page layout text card Etc so 00:01:59.640 --> 00:02:02.270 align:start position:0% of Polaris page layout text card Etc so the<00:01:59.880><c> these</c><00:02:00.000><c> are</c><00:02:00.119><c> the</c><00:02:00.280><c> components</c><00:02:00.799><c> we</c><00:02:01.280><c> need</c> 00:02:02.270 --> 00:02:02.280 align:start position:0% the these are the components we need 00:02:02.280 --> 00:02:04.550 align:start position:0% the these are the components we need then<00:02:02.479><c> we</c><00:02:02.600><c> will</c><00:02:02.840><c> write</c><00:02:03.200><c> the</c><00:02:03.600><c> loader</c><00:02:04.079><c> function</c> 00:02:04.550 --> 00:02:04.560 align:start position:0% then we will write the loader function 00:02:04.560 --> 00:02:07.430 align:start position:0% then we will write the loader function loader<00:02:05.000><c> function</c><00:02:05.680><c> runs</c><00:02:06.280><c> automatically</c><00:02:07.079><c> when</c> 00:02:07.430 --> 00:02:07.440 align:start position:0% loader function runs automatically when 00:02:07.440 --> 00:02:11.710 align:start position:0% loader function runs automatically when we<00:02:08.440><c> when</c><00:02:08.679><c> we</c><00:02:09.640><c> load</c><00:02:10.039><c> the</c><00:02:10.280><c> page</c><00:02:10.959><c> and</c><00:02:11.280><c> in</c><00:02:11.520><c> this</c> 00:02:11.710 --> 00:02:11.720 align:start position:0% we when we load the page and in this 00:02:11.720 --> 00:02:13.150 align:start position:0% we when we load the page and in this loader 00:02:13.150 --> 00:02:13.160 align:start position:0% loader 00:02:13.160 --> 00:02:15.229 align:start position:0% loader function<00:02:14.160><c> we</c> 00:02:15.229 --> 00:02:15.239 align:start position:0% function we 00:02:15.239 --> 00:02:19.030 align:start position:0% function we will<00:02:16.239><c> have</c><00:02:16.440><c> the</c><00:02:16.640><c> request</c><00:02:17.360><c> object</c><00:02:18.360><c> and</c><00:02:18.720><c> we</c><00:02:18.840><c> will</c> 00:02:19.030 --> 00:02:19.040 align:start position:0% will have the request object and we will 00:02:19.040 --> 00:02:22.710 align:start position:0% will have the request object and we will authenticate<00:02:19.760><c> our</c><00:02:20.120><c> request</c><00:02:21.000><c> with</c><00:02:21.480><c> the</c><00:02:22.480><c> with</c> 00:02:22.710 --> 00:02:22.720 align:start position:0% authenticate our request with the with 00:02:22.720 --> 00:02:24.150 align:start position:0% authenticate our request with the with the 00:02:24.150 --> 00:02:24.160 align:start position:0% the 00:02:24.160 --> 00:02:27.910 align:start position:0% the admin<00:02:25.160><c> and</c><00:02:25.440><c> then</c><00:02:26.239><c> with</c><00:02:26.440><c> that</c><00:02:26.720><c> admin</c><00:02:27.360><c> we</c><00:02:27.480><c> can</c> 00:02:27.910 --> 00:02:27.920 align:start position:0% admin and then with that admin we can 00:02:27.920 --> 00:02:30.070 align:start position:0% admin and then with that admin we can make<00:02:28.160><c> the</c><00:02:28.319><c> graphical</c><00:02:28.959><c> query</c><00:02:29.480><c> and</c><00:02:29.879><c> we</c><00:02:29.959><c> will</c> 00:02:30.070 --> 00:02:30.080 align:start position:0% make the graphical query and we will 00:02:30.080 --> 00:02:31.949 align:start position:0% make the graphical query and we will fetch<00:02:30.400><c> the</c><00:02:30.560><c> first</c><00:02:31.040><c> 10</c> 00:02:31.949 --> 00:02:31.959 align:start position:0% fetch the first 10 00:02:31.959 --> 00:02:35.110 align:start position:0% fetch the first 10 products<00:02:32.959><c> and</c><00:02:33.879><c> in</c><00:02:34.120><c> that</c><00:02:34.360><c> product</c><00:02:34.720><c> we</c><00:02:34.800><c> will</c> 00:02:35.110 --> 00:02:35.120 align:start position:0% products and in that product we will 00:02:35.120 --> 00:02:38.190 align:start position:0% products and in that product we will have<00:02:35.319><c> the</c><00:02:35.519><c> ID</c><00:02:35.959><c> handle</c><00:02:36.440><c> status</c><00:02:36.959><c> Imes</c><00:02:37.480><c> Etc</c><00:02:38.080><c> this</c> 00:02:38.190 --> 00:02:38.200 align:start position:0% have the ID handle status Imes Etc this 00:02:38.200 --> 00:02:40.830 align:start position:0% have the ID handle status Imes Etc this is<00:02:38.319><c> the</c><00:02:38.519><c> simple</c><00:02:38.879><c> graphical</c><00:02:39.480><c> query</c><00:02:40.440><c> and</c><00:02:40.640><c> then</c> 00:02:40.830 --> 00:02:40.840 align:start position:0% is the simple graphical query and then 00:02:40.840 --> 00:02:43.509 align:start position:0% is the simple graphical query and then we<00:02:40.920><c> will</c><00:02:41.159><c> get</c><00:02:41.360><c> the</c><00:02:41.599><c> response</c><00:02:42.480><c> and</c><00:02:43.080><c> we</c><00:02:43.200><c> will</c> 00:02:43.509 --> 00:02:43.519 align:start position:0% we will get the response and we will 00:02:43.519 --> 00:02:48.790 align:start position:0% we will get the response and we will pass<00:02:43.920><c> that</c><00:02:44.440><c> response</c><00:02:45.440><c> to</c><00:02:46.040><c> our</c><00:02:47.360><c> react</c><00:02:48.360><c> react</c> 00:02:48.790 --> 00:02:48.800 align:start position:0% pass that response to our react react 00:02:48.800 --> 00:02:52.589 align:start position:0% pass that response to our react react page<00:02:49.760><c> so</c><00:02:50.080><c> this</c><00:02:50.480><c> will</c><00:02:50.760><c> run</c><00:02:51.239><c> on</c><00:02:51.440><c> the</c><00:02:51.640><c> back</c><00:02:51.840><c> end</c> 00:02:52.589 --> 00:02:52.599 align:start position:0% page so this will run on the back end 00:02:52.599 --> 00:02:55.750 align:start position:0% page so this will run on the back end and<00:02:52.840><c> now</c><00:02:53.040><c> let's</c><00:02:53.319><c> write</c><00:02:53.720><c> the</c><00:02:54.599><c> front</c><00:02:54.920><c> end</c> 00:02:55.750 --> 00:02:55.760 align:start position:0% and now let's write the front end 00:02:55.760 --> 00:02:59.149 align:start position:0% and now let's write the front end code<00:02:56.760><c> in</c><00:02:56.920><c> the</c><00:02:57.040><c> front</c><00:02:57.280><c> end</c><00:02:57.560><c> code</c><00:02:58.159><c> we</c><00:02:58.319><c> will</c><00:02:58.680><c> have</c> 00:02:59.149 --> 00:02:59.159 align:start position:0% code in the front end code we will have 00:02:59.159 --> 00:03:01.630 align:start position:0% code in the front end code we will have uh<00:02:59.920><c> export</c> 00:03:01.630 --> 00:03:01.640 align:start position:0% uh export 00:03:01.640 --> 00:03:05.670 align:start position:0% uh export function<00:03:02.640><c> we</c><00:03:03.319><c> we</c><00:03:03.480><c> have</c><00:03:03.599><c> a</c><00:03:03.799><c> products</c><00:03:04.680><c> and</c><00:03:05.480><c> here</c> 00:03:05.670 --> 00:03:05.680 align:start position:0% function we we have a products and here 00:03:05.680 --> 00:03:09.309 align:start position:0% function we we have a products and here we<00:03:05.840><c> get</c><00:03:06.040><c> the</c><00:03:06.239><c> data</c><00:03:06.640><c> from</c><00:03:06.879><c> user</c><00:03:07.640><c> uh</c><00:03:07.959><c> use</c><00:03:08.799><c> loader</c> 00:03:09.309 --> 00:03:09.319 align:start position:0% we get the data from user uh use loader 00:03:09.319 --> 00:03:11.309 align:start position:0% we get the data from user uh use loader data<00:03:09.599><c> which</c><00:03:09.760><c> is</c><00:03:09.920><c> coming</c><00:03:10.239><c> from</c><00:03:10.640><c> here</c><00:03:10.959><c> all</c><00:03:11.120><c> the</c> 00:03:11.309 --> 00:03:11.319 align:start position:0% data which is coming from here all the 00:03:11.319 --> 00:03:13.949 align:start position:0% data which is coming from here all the products<00:03:12.159><c> and</c><00:03:12.319><c> we</c><00:03:12.480><c> save</c><00:03:12.879><c> that</c><00:03:13.239><c> here</c><00:03:13.680><c> then</c><00:03:13.840><c> we</c> 00:03:13.949 --> 00:03:13.959 align:start position:0% products and we save that here then we 00:03:13.959 --> 00:03:17.110 align:start position:0% products and we save that here then we have<00:03:14.080><c> a</c><00:03:14.200><c> fetcher</c><00:03:15.040><c> for</c><00:03:15.280><c> the</c><00:03:15.440><c> delete</c><00:03:16.120><c> products</c> 00:03:17.110 --> 00:03:17.120 align:start position:0% have a fetcher for the delete products 00:03:17.120 --> 00:03:19.229 align:start position:0% have a fetcher for the delete products and<00:03:17.360><c> then</c><00:03:17.519><c> we</c><00:03:17.680><c> have</c><00:03:17.840><c> a</c><00:03:18.000><c> product</c><00:03:18.360><c> variable</c><00:03:19.080><c> we</c> 00:03:19.229 --> 00:03:19.239 align:start position:0% and then we have a product variable we 00:03:19.239 --> 00:03:23.110 align:start position:0% and then we have a product variable we save<00:03:19.640><c> the</c><00:03:20.280><c> data</c><00:03:21.280><c> data.</c><00:03:21.840><c> products.</c><00:03:22.400><c> edges</c><00:03:22.760><c> on</c> 00:03:23.110 --> 00:03:23.120 align:start position:0% save the data data. products. edges on 00:03:23.120 --> 00:03:25.830 align:start position:0% save the data data. products. edges on here<00:03:24.080><c> then</c><00:03:24.319><c> we</c><00:03:24.440><c> will</c><00:03:24.680><c> Loop</c><00:03:25.040><c> through</c><00:03:25.400><c> these</c> 00:03:25.830 --> 00:03:25.840 align:start position:0% here then we will Loop through these 00:03:25.840 --> 00:03:29.229 align:start position:0% here then we will Loop through these products<00:03:26.840><c> product.</c><00:03:27.560><c> map</c><00:03:28.159><c> and</c><00:03:28.360><c> we'll</c><00:03:28.680><c> pass</c><00:03:29.000><c> the</c> 00:03:29.229 --> 00:03:29.239 align:start position:0% products product. map and we'll pass the 00:03:29.239 --> 00:03:30.990 align:start position:0% products product. map and we'll pass the node<00:03:29.560><c> as</c><00:03:29.799><c> the</c> 00:03:30.990 --> 00:03:31.000 align:start position:0% node as the 00:03:31.000 --> 00:03:33.750 align:start position:0% node as the product<00:03:32.000><c> and</c><00:03:32.239><c> in</c><00:03:32.439><c> that</c><00:03:32.760><c> array</c><00:03:33.080><c> we</c><00:03:33.159><c> will</c><00:03:33.400><c> have</c><00:03:33.560><c> a</c> 00:03:33.750 --> 00:03:33.760 align:start position:0% product and in that array we will have a 00:03:33.760 --> 00:03:35.910 align:start position:0% product and in that array we will have a thumbnail<00:03:34.360><c> in</c><00:03:34.480><c> the</c><00:03:34.680><c> thumbnail</c><00:03:35.159><c> we</c><00:03:35.360><c> pass</c><00:03:35.720><c> the</c> 00:03:35.910 --> 00:03:35.920 align:start position:0% thumbnail in the thumbnail we pass the 00:03:35.920 --> 00:03:39.149 align:start position:0% thumbnail in the thumbnail we pass the product<00:03:36.519><c> image</c><00:03:37.519><c> then</c><00:03:37.840><c> product</c><00:03:38.200><c> title</c><00:03:38.760><c> product</c> 00:03:39.149 --> 00:03:39.159 align:start position:0% product image then product title product 00:03:39.159 --> 00:03:42.390 align:start position:0% product image then product title product status<00:03:39.720><c> then</c><00:03:40.000><c> product</c><00:03:40.599><c> variance</c><00:03:41.200><c> as</c><00:03:41.439><c> is</c><00:03:41.799><c> IM</c><00:03:42.200><c> uh</c> 00:03:42.390 --> 00:03:42.400 align:start position:0% status then product variance as is IM uh 00:03:42.400 --> 00:03:45.589 align:start position:0% status then product variance as is IM uh price<00:03:43.319><c> to</c><00:03:43.480><c> show</c><00:03:43.720><c> the</c><00:03:43.920><c> price</c><00:03:44.400><c> then</c><00:03:44.640><c> we</c><00:03:45.080><c> have</c><00:03:45.360><c> the</c> 00:03:45.589 --> 00:03:45.599 align:start position:0% price to show the price then we have the 00:03:45.599 --> 00:03:48.229 align:start position:0% price to show the price then we have the addit<00:03:46.000><c> button</c><00:03:47.000><c> in</c><00:03:47.120><c> the</c><00:03:47.280><c> edit</c><00:03:47.560><c> button</c><00:03:47.920><c> we</c><00:03:48.040><c> are</c> 00:03:48.229 --> 00:03:48.239 align:start position:0% addit button in the edit button we are 00:03:48.239 --> 00:03:51.069 align:start position:0% addit button in the edit button we are just<00:03:48.439><c> simply</c><00:03:48.799><c> redirecting</c><00:03:49.560><c> the</c><00:03:49.799><c> product</c><00:03:50.159><c> to</c> 00:03:51.069 --> 00:03:51.079 align:start position:0% just simply redirecting the product to 00:03:51.079 --> 00:03:54.830 align:start position:0% just simply redirecting the product to the<00:03:52.079><c> uh</c><00:03:52.280><c> actual</c><00:03:52.720><c> product</c><00:03:53.159><c> page</c><00:03:53.879><c> in</c><00:03:54.000><c> the</c><00:03:54.159><c> admin</c> 00:03:54.830 --> 00:03:54.840 align:start position:0% the uh actual product page in the admin 00:03:54.840 --> 00:03:57.190 align:start position:0% the uh actual product page in the admin and<00:03:55.079><c> for</c><00:03:55.319><c> deleting</c><00:03:55.920><c> we</c><00:03:56.040><c> are</c><00:03:56.360><c> using</c><00:03:56.799><c> this</c> 00:03:57.190 --> 00:03:57.200 align:start position:0% and for deleting we are using this 00:03:57.200 --> 00:03:59.990 align:start position:0% and for deleting we are using this delete<00:03:58.200><c> handle</c><00:03:58.599><c> delete</c><00:03:59.000><c> function</c><00:03:59.319><c> to</c><00:03:59.480><c> delete</c> 00:03:59.990 --> 00:04:00.000 align:start position:0% delete handle delete function to delete 00:04:00.000 --> 00:04:00.750 align:start position:0% delete handle delete function to delete the 00:04:00.750 --> 00:04:00.760 align:start position:0% the 00:04:00.760 --> 00:04:05.190 align:start position:0% the product<00:04:01.840><c> and</c><00:04:03.000><c> here</c><00:04:04.000><c> in</c><00:04:04.159><c> the</c><00:04:04.439><c> return</c><00:04:04.720><c> function</c> 00:04:05.190 --> 00:04:05.200 align:start position:0% product and here in the return function 00:04:05.200 --> 00:04:07.750 align:start position:0% product and here in the return function we<00:04:05.319><c> are</c><00:04:05.480><c> showing</c><00:04:05.840><c> the</c><00:04:06.000><c> full</c><00:04:06.319><c> page</c><00:04:06.680><c> layout</c><00:04:07.400><c> then</c> 00:04:07.750 --> 00:04:07.760 align:start position:0% we are showing the full page layout then 00:04:07.760 --> 00:04:10.470 align:start position:0% we are showing the full page layout then card<00:04:08.239><c> and</c><00:04:08.400><c> the</c><00:04:08.560><c> product</c><00:04:08.920><c> list</c><00:04:09.760><c> then</c><00:04:09.959><c> the</c><00:04:10.159><c> data</c> 00:04:10.470 --> 00:04:10.480 align:start position:0% card and the product list then the data 00:04:10.480 --> 00:04:13.309 align:start position:0% card and the product list then the data table<00:04:10.920><c> this</c><00:04:11.200><c> will</c><00:04:11.480><c> display</c><00:04:11.920><c> all</c><00:04:12.120><c> the</c><00:04:12.319><c> products</c> 00:04:13.309 --> 00:04:13.319 align:start position:0% table this will display all the products 00:04:13.319 --> 00:04:16.870 align:start position:0% table this will display all the products we<00:04:13.760><c> have</c><00:04:14.280><c> six</c><00:04:14.760><c> text</c><00:04:15.040><c> field</c><00:04:15.519><c> and</c><00:04:15.879><c> image</c><00:04:16.359><c> title</c> 00:04:16.870 --> 00:04:16.880 align:start position:0% we have six text field and image title 00:04:16.880 --> 00:04:22.030 align:start position:0% we have six text field and image title status<00:04:17.320><c> prize</c><00:04:17.799><c> and</c><00:04:18.280><c> edit</c><00:04:19.280><c> so</c><00:04:19.919><c> let's</c><00:04:20.239><c> save</c> 00:04:22.030 --> 00:04:22.040 align:start position:0% status prize and edit so let's save 00:04:22.040 --> 00:04:26.590 align:start position:0% status prize and edit so let's save that<00:04:23.040><c> and</c><00:04:23.320><c> go</c><00:04:23.759><c> to</c><00:04:24.880><c> our</c> 00:04:26.590 --> 00:04:26.600 align:start position:0% that and go to our 00:04:26.600 --> 00:04:30.469 align:start position:0% that and go to our store<00:04:27.600><c> and</c><00:04:27.800><c> go</c><00:04:27.960><c> to</c><00:04:28.160><c> the</c><00:04:28.520><c> custom</c><00:04:28.960><c> app</c><00:04:30.039><c> it</c><00:04:30.199><c> takes</c> 00:04:30.469 --> 00:04:30.479 align:start position:0% store and go to the custom app it takes 00:04:30.479 --> 00:04:32.189 align:start position:0% store and go to the custom app it takes some<00:04:30.759><c> time</c><00:04:31.039><c> to</c> 00:04:32.189 --> 00:04:32.199 align:start position:0% some time to 00:04:32.199 --> 00:04:36.310 align:start position:0% some time to load<00:04:33.479><c> authenticating</c><00:04:34.479><c> our</c> 00:04:36.310 --> 00:04:36.320 align:start position:0% load authenticating our 00:04:36.320 --> 00:04:39.189 align:start position:0% load authenticating our request<00:04:37.320><c> so</c><00:04:37.759><c> don't</c><00:04:37.960><c> worry</c><00:04:38.240><c> about</c><00:04:38.520><c> the</c><00:04:38.680><c> code</c><00:04:39.080><c> I</c> 00:04:39.189 --> 00:04:39.199 align:start position:0% request so don't worry about the code I 00:04:39.199 --> 00:04:44.790 align:start position:0% request so don't worry about the code I will<00:04:39.639><c> uh</c><00:04:40.240><c> give</c><00:04:40.400><c> you</c><00:04:40.680><c> this</c><00:04:41.000><c> code</c><00:04:41.440><c> in</c><00:04:41.759><c> the</c><00:04:42.759><c> in</c><00:04:42.919><c> the</c> 00:04:44.790 --> 00:04:44.800 align:start position:0% will uh give you this code in the in the 00:04:44.800 --> 00:04:48.310 align:start position:0% will uh give you this code in the in the description<00:04:45.800><c> so</c><00:04:46.400><c> it</c><00:04:46.520><c> is</c> 00:04:48.310 --> 00:04:48.320 align:start position:0% description so it is 00:04:48.320 --> 00:04:51.550 align:start position:0% description so it is loading<00:04:49.320><c> sometime</c><00:04:50.120><c> if</c><00:04:50.320><c> it</c><00:04:50.479><c> doesn't</c><00:04:50.880><c> load</c><00:04:51.440><c> you</c> 00:04:51.550 --> 00:04:51.560 align:start position:0% loading sometime if it doesn't load you 00:04:51.560 --> 00:04:53.590 align:start position:0% loading sometime if it doesn't load you can<00:04:51.840><c> press</c><00:04:52.160><c> B</c> 00:04:53.590 --> 00:04:53.600 align:start position:0% can press B 00:04:53.600 --> 00:05:05.670 align:start position:0% can press B again<00:04:54.600><c> from</c><00:04:54.880><c> the</c><00:04:55.080><c> command</c><00:04:55.440><c> prompt</c> 00:05:05.670 --> 00:05:05.680 align:start position:0% 00:05:05.680 --> 00:05:09.350 align:start position:0% and<00:05:06.680><c> then</c><00:05:06.880><c> your</c><00:05:07.120><c> app</c><00:05:07.360><c> will</c><00:05:07.560><c> be</c><00:05:07.880><c> noted</c><00:05:08.360><c> quickly</c> 00:05:09.350 --> 00:05:09.360 align:start position:0% and then your app will be noted quickly 00:05:09.360 --> 00:05:12.990 align:start position:0% and then your app will be noted quickly then<00:05:09.560><c> click</c><00:05:09.759><c> on</c><00:05:09.919><c> the</c> 00:05:12.990 --> 00:05:13.000 align:start position:0% 00:05:13.000 --> 00:05:15.710 align:start position:0% products<00:05:14.000><c> and</c><00:05:14.240><c> now</c><00:05:14.440><c> you</c><00:05:14.560><c> can</c><00:05:14.720><c> see</c><00:05:15.039><c> we</c><00:05:15.240><c> have</c> 00:05:15.710 --> 00:05:15.720 align:start position:0% products and now you can see we have 00:05:15.720 --> 00:05:17.990 align:start position:0% products and now you can see we have first<00:05:15.960><c> 10</c><00:05:16.240><c> products</c><00:05:16.880><c> of</c><00:05:17.120><c> our</c> 00:05:17.990 --> 00:05:18.000 align:start position:0% first 10 products of our 00:05:18.000 --> 00:05:22.309 align:start position:0% first 10 products of our store<00:05:19.000><c> and</c><00:05:19.160><c> if</c><00:05:19.319><c> I</c><00:05:19.479><c> go</c><00:05:19.759><c> back</c><00:05:20.080><c> here</c><00:05:20.639><c> and</c><00:05:21.520><c> make</c><00:05:22.160><c> uh</c> 00:05:22.309 --> 00:05:22.319 align:start position:0% store and if I go back here and make uh 00:05:22.319 --> 00:05:24.870 align:start position:0% store and if I go back here and make uh 20 00:05:24.870 --> 00:05:24.880 align:start position:0% 00:05:24.880 --> 00:05:27.309 align:start position:0% products<00:05:25.880><c> you</c><00:05:26.039><c> will</c> 00:05:27.309 --> 00:05:27.319 align:start position:0% products you will 00:05:27.319 --> 00:05:30.670 align:start position:0% products you will see<00:05:28.319><c> we</c><00:05:28.720><c> we</c><00:05:28.880><c> have</c><00:05:29.080><c> the</c><00:05:29.240><c> 20%</c><00:05:29.720><c> products</c> 00:05:30.670 --> 00:05:30.680 align:start position:0% see we we have the 20% products 00:05:30.680 --> 00:05:33.390 align:start position:0% see we we have the 20% products now<00:05:31.680><c> and</c><00:05:31.919><c> if</c><00:05:32.039><c> I</c><00:05:32.240><c> change</c> 00:05:33.390 --> 00:05:33.400 align:start position:0% now and if I change 00:05:33.400 --> 00:05:35.550 align:start position:0% now and if I change to<00:05:34.400><c> five</c> 00:05:35.550 --> 00:05:35.560 align:start position:0% to five 00:05:35.560 --> 00:05:38.990 align:start position:0% to five products<00:05:36.560><c> save</c><00:05:37.080><c> that</c><00:05:38.080><c> and</c><00:05:38.280><c> you</c><00:05:38.360><c> will</c><00:05:38.600><c> notice</c> 00:05:38.990 --> 00:05:39.000 align:start position:0% products save that and you will notice 00:05:39.000 --> 00:05:40.590 align:start position:0% products save that and you will notice we<00:05:39.160><c> have</c><00:05:39.400><c> five</c> 00:05:40.590 --> 00:05:40.600 align:start position:0% we have five 00:05:40.600 --> 00:05:44.070 align:start position:0% we have five products<00:05:41.960><c> and</c><00:05:42.960><c> this</c><00:05:43.120><c> is</c><00:05:43.319><c> how</c><00:05:43.479><c> you</c><00:05:43.600><c> can</c><00:05:43.759><c> fetch</c> 00:05:44.070 --> 00:05:44.080 align:start position:0% products and this is how you can fetch 00:05:44.080 --> 00:05:46.390 align:start position:0% products and this is how you can fetch the<00:05:44.280><c> products</c><00:05:44.639><c> from</c><00:05:44.840><c> your</c><00:05:45.039><c> Shopify</c><00:05:45.680><c> store</c><00:05:46.280><c> in</c> 00:05:46.390 --> 00:05:46.400 align:start position:0% the products from your Shopify store in 00:05:46.400 --> 00:05:48.749 align:start position:0% the products from your Shopify store in the<00:05:46.600><c> next</c><00:05:46.840><c> video</c><00:05:47.240><c> we</c><00:05:47.319><c> will</c><00:05:47.560><c> see</c><00:05:47.919><c> how</c><00:05:48.080><c> to</c><00:05:48.360><c> edit</c> 00:05:48.749 --> 00:05:48.759 align:start position:0% the next video we will see how to edit 00:05:48.759 --> 00:05:50.390 align:start position:0% the next video we will see how to edit and<00:05:48.960><c> delete</c><00:05:49.400><c> the</c> 00:05:50.390 --> 00:05:50.400 align:start position:0% and delete the 00:05:50.400 --> 00:05:51.950 align:start position:0% and delete the products 00:05:51.950 --> 00:05:51.960 align:start position:0% products 00:05:51.960 --> 00:05:55.870 align:start position:0% products from<00:05:52.960><c> our</c><00:05:53.440><c> custom</c><00:05:54.120><c> M</c><00:05:55.120><c> so</c><00:05:55.360><c> thank</c><00:05:55.520><c> you</c><00:05:55.639><c> for</c> 00:05:55.870 --> 00:05:55.880 align:start position:0% from our custom M so thank you for 00:05:55.880 --> 00:05:57.790 align:start position:0% from our custom M so thank you for watching<00:05:56.319><c> and</c><00:05:56.560><c> I</c><00:05:56.639><c> will</c><00:05:56.800><c> see</c><00:05:57.000><c> you</c><00:05:57.160><c> in</c><00:05:57.280><c> the</c><00:05:57.520><c> next</c> 00:05:57.790 --> 00:05:57.800 align:start position:0% watching and I will see you in the next 00:05:57.800 --> 00:06:00.800 align:start position:0% watching and I will see you in the next video