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
update and delete products from our
Shopify custom app.
So,
in app.j- in app.product.jsx,
uh we
we have the model component from
Polaris.
And then we have
few use states like uh active and set
active state. Then we have editing a
product state.
Then we have title and set title state
and the price
and the set price state
and
toaster, which will show us the message
when we update the product. And then we
have
uh handle model change and toggle
toaster functions.
And then handle added function.
Here we will call these use state hooks.
And
then we have handle delete function
where we will submit the delete request
at app.product app/products/delete
file. And similarly for updating the
product, we will send the request
app.dat.product.edit
file. Then we have use effect to reload
the products again.
And in the bottom, we have uh
model
model code open active on click handle
model change.
And on cancel, handle model change
again.
And similarly for the delete uh
button,
uh this is the for the this is the model
code where we will show the price and
title.
And
now let's go to the app.
product.edit file. This file you need to
create for the for
editing the product. So, here we have uh
two
component
uh two modules
like JSON and authentication for
making the request and we have a
action
function.
This will handle our request for uh
editing and we will get the
admin
credentials and then we have the forms
data which is coming from product page.
We will have the ID, title, and variant
ID and price and we save them into a
variable then we
will make the graph QL query to update
the product.
And in the graph QL query we will pass
the mutation update product
and product ID and product title.
In the case of price update, we will
we will handle that with this query.
And here are the variables we have ID
and title then we have ID and price.
So, we can also update the price and we
can also update the
title.
And then we have the response I will we
will return the response. Similarly for
deleting the product, we need
app.products.delete
file
and it is
Here we have the same function action
function and will handle the request.
And we will get the request
uh admin credentials.
Then we have the form data and we need
only product ID to delete the product.
And this is the graph QL query
for deleting the product and after that
we will s-
return the success message.
And
I will share this code with you and
let's try to run this code
on Power App.
And
if I click on the first product, our
pop-up will open and here we can update
the title. Let's say new title.
And save that.
Once you save,
uh a pop-up will a toaster will open.
Product updated successfully and you
will see we have a new title.
And if I update again
and remove the new title
and update.
Now you can see we have the old title
back. Now let's try to update the price.
Right now it's
30 and let's make it 50.
Save that.
And as you can see now we have a price
50.
And let's try to change both of them
together.
Uh test and 50 and this should be 100.
Add.
And as you can see the title is changed,
the price is changed.
Now let's try to delete this product.
Click delete.
And as you can see that product is no
longer here.
So this is how you can update and delete
products from your custom Shopify app.
Thank you for watching
and I'll see you in the next video.
원문 자막 펼치기
WEBVTT Kind: captions Language: en 00:00:00.680 --> 00:00:02.910 align:start position:0% Hi<00:00:00.880><c> everyone,</c><00:00:01.480><c> welcome</c><00:00:01.840><c> back</c><00:00:02.040><c> to</c><00:00:02.120><c> my</c><00:00:02.320><c> channel.</c> 00:00:02.910 --> 00:00:02.920 align:start position:0% Hi everyone, welcome back to my channel. 00:00:02.920 --> 00:00:05.710 align:start position:0% Hi everyone, welcome back to my channel. In<00:00:03.120><c> this</c><00:00:03.360><c> video,</c><00:00:03.960><c> we</c><00:00:04.200><c> will</c><00:00:04.400><c> learn</c><00:00:05.360><c> how</c><00:00:05.600><c> to</c> 00:00:05.710 --> 00:00:05.720 align:start position:0% In this video, we will learn how to 00:00:05.720 --> 00:00:07.870 align:start position:0% In this video, we will learn how to update<00:00:06.120><c> and</c><00:00:06.280><c> delete</c><00:00:06.640><c> products</c><00:00:07.080><c> from</c><00:00:07.440><c> our</c> 00:00:07.870 --> 00:00:07.880 align:start position:0% update and delete products from our 00:00:07.880 --> 00:00:10.710 align:start position:0% update and delete products from our Shopify<00:00:08.720><c> custom</c><00:00:09.360><c> app.</c> 00:00:10.710 --> 00:00:10.720 align:start position:0% Shopify custom app. 00:00:10.720 --> 00:00:14.190 align:start position:0% Shopify custom app. So, 00:00:14.190 --> 00:00:14.200 align:start position:0% 00:00:14.200 --> 00:00:18.710 align:start position:0% in<00:00:14.440><c> app.j-</c><00:00:15.400><c> in</c><00:00:15.640><c> app.product.jsx,</c> 00:00:18.710 --> 00:00:18.720 align:start position:0% 00:00:18.720 --> 00:00:20.190 align:start position:0% uh<00:00:19.040><c> we</c> 00:00:20.190 --> 00:00:20.200 align:start position:0% uh we 00:00:20.200 --> 00:00:22.230 align:start position:0% uh we we<00:00:20.360><c> have</c><00:00:20.600><c> the</c><00:00:20.720><c> model</c><00:00:21.120><c> component</c><00:00:21.800><c> from</c> 00:00:22.230 --> 00:00:22.240 align:start position:0% we have the model component from 00:00:22.240 --> 00:00:24.070 align:start position:0% we have the model component from Polaris. 00:00:24.070 --> 00:00:24.080 align:start position:0% Polaris. 00:00:24.080 --> 00:00:28.190 align:start position:0% Polaris. And<00:00:24.960><c> then</c><00:00:25.240><c> we</c><00:00:25.440><c> have</c> 00:00:28.190 --> 00:00:28.200 align:start position:0% And then we have 00:00:28.200 --> 00:00:31.310 align:start position:0% And then we have few<00:00:28.560><c> use</c><00:00:28.800><c> states</c><00:00:29.320><c> like</c><00:00:30.160><c> uh</c><00:00:30.240><c> active</c><00:00:30.720><c> and</c><00:00:31.080><c> set</c> 00:00:31.310 --> 00:00:31.320 align:start position:0% few use states like uh active and set 00:00:31.320 --> 00:00:33.910 align:start position:0% few use states like uh active and set active<00:00:32.040><c> state.</c><00:00:32.599><c> Then</c><00:00:32.880><c> we</c><00:00:33.000><c> have</c><00:00:33.320><c> editing</c><00:00:33.840><c> a</c> 00:00:33.910 --> 00:00:33.920 align:start position:0% active state. Then we have editing a 00:00:33.920 --> 00:00:36.230 align:start position:0% active state. Then we have editing a product<00:00:34.960><c> state.</c> 00:00:36.230 --> 00:00:36.240 align:start position:0% product state. 00:00:36.240 --> 00:00:38.470 align:start position:0% product state. Then<00:00:36.480><c> we</c><00:00:36.600><c> have</c><00:00:36.760><c> title</c><00:00:37.400><c> and</c><00:00:37.640><c> set</c><00:00:37.840><c> title</c><00:00:38.160><c> state</c> 00:00:38.470 --> 00:00:38.480 align:start position:0% Then we have title and set title state 00:00:38.480 --> 00:00:40.110 align:start position:0% Then we have title and set title state and<00:00:38.600><c> the</c><00:00:38.680><c> price</c> 00:00:40.110 --> 00:00:40.120 align:start position:0% and the price 00:00:40.120 --> 00:00:41.950 align:start position:0% and the price and<00:00:40.400><c> the</c><00:00:40.480><c> set</c><00:00:40.680><c> price</c><00:00:40.960><c> state</c> 00:00:41.950 --> 00:00:41.960 align:start position:0% and the set price state 00:00:41.960 --> 00:00:43.150 align:start position:0% and the set price state and 00:00:43.150 --> 00:00:43.160 align:start position:0% and 00:00:43.160 --> 00:00:45.670 align:start position:0% and toaster,<00:00:43.960><c> which</c><00:00:44.200><c> will</c><00:00:44.360><c> show</c><00:00:44.600><c> us</c><00:00:45.080><c> the</c><00:00:45.240><c> message</c> 00:00:45.670 --> 00:00:45.680 align:start position:0% toaster, which will show us the message 00:00:45.680 --> 00:00:48.230 align:start position:0% toaster, which will show us the message when<00:00:45.840><c> we</c><00:00:46.000><c> update</c><00:00:46.360><c> the</c><00:00:46.480><c> product.</c><00:00:47.520><c> And</c><00:00:47.920><c> then</c><00:00:48.080><c> we</c> 00:00:48.230 --> 00:00:48.240 align:start position:0% when we update the product. And then we 00:00:48.240 --> 00:00:50.670 align:start position:0% when we update the product. And then we have 00:00:50.670 --> 00:00:50.680 align:start position:0% have 00:00:50.680 --> 00:00:52.950 align:start position:0% have uh<00:00:51.120><c> handle</c><00:00:51.440><c> model</c><00:00:51.760><c> change</c><00:00:52.240><c> and</c><00:00:52.520><c> toggle</c> 00:00:52.950 --> 00:00:52.960 align:start position:0% uh handle model change and toggle 00:00:52.960 --> 00:00:54.550 align:start position:0% uh handle model change and toggle toaster<00:00:53.320><c> functions.</c> 00:00:54.550 --> 00:00:54.560 align:start position:0% toaster functions. 00:00:54.560 --> 00:00:57.550 align:start position:0% toaster functions. And<00:00:54.800><c> then</c><00:00:55.120><c> handle</c><00:00:55.880><c> added</c><00:00:56.240><c> function.</c> 00:00:57.550 --> 00:00:57.560 align:start position:0% And then handle added function. 00:00:57.560 --> 00:01:01.230 align:start position:0% And then handle added function. Here<00:00:57.840><c> we</c><00:00:57.960><c> will</c><00:00:58.160><c> call</c><00:00:58.480><c> these</c><00:00:58.920><c> use</c><00:00:59.720><c> state</c><00:01:00.320><c> hooks.</c> 00:01:01.230 --> 00:01:01.240 align:start position:0% Here we will call these use state hooks. 00:01:01.240 --> 00:01:02.510 align:start position:0% Here we will call these use state hooks. And 00:01:02.510 --> 00:01:02.520 align:start position:0% And 00:01:02.520 --> 00:01:05.790 align:start position:0% And then<00:01:02.880><c> we</c><00:01:03.000><c> have</c><00:01:03.440><c> handle</c><00:01:03.840><c> delete</c><00:01:04.360><c> function</c> 00:01:05.790 --> 00:01:05.800 align:start position:0% then we have handle delete function 00:01:05.800 --> 00:01:08.550 align:start position:0% then we have handle delete function where<00:01:06.080><c> we</c><00:01:06.200><c> will</c><00:01:06.400><c> submit</c><00:01:06.880><c> the</c><00:01:07.480><c> delete</c><00:01:07.960><c> request</c> 00:01:08.550 --> 00:01:08.560 align:start position:0% where we will submit the delete request 00:01:08.560 --> 00:01:12.390 align:start position:0% where we will submit the delete request at<00:01:08.760><c> app.product</c><00:01:10.000><c> app/products/delete</c> 00:01:12.390 --> 00:01:12.400 align:start position:0% at app.product app/products/delete 00:01:12.400 --> 00:01:15.390 align:start position:0% at app.product app/products/delete file.<00:01:13.360><c> And</c><00:01:13.600><c> similarly</c><00:01:14.320><c> for</c><00:01:14.840><c> updating</c><00:01:15.320><c> the</c> 00:01:15.390 --> 00:01:15.400 align:start position:0% file. And similarly for updating the 00:01:15.400 --> 00:01:18.030 align:start position:0% file. And similarly for updating the product,<00:01:15.960><c> we</c><00:01:16.080><c> will</c><00:01:16.280><c> send</c><00:01:16.640><c> the</c><00:01:17.360><c> request</c> 00:01:18.030 --> 00:01:18.040 align:start position:0% product, we will send the request 00:01:18.040 --> 00:01:21.190 align:start position:0% product, we will send the request app.dat.product.edit 00:01:21.190 --> 00:01:21.200 align:start position:0% 00:01:21.200 --> 00:01:23.750 align:start position:0% file.<00:01:22.120><c> Then</c><00:01:22.320><c> we</c><00:01:22.440><c> have</c><00:01:22.640><c> use</c><00:01:22.880><c> effect</c><00:01:23.320><c> to</c><00:01:23.400><c> reload</c> 00:01:23.750 --> 00:01:23.760 align:start position:0% file. Then we have use effect to reload 00:01:23.760 --> 00:01:25.590 align:start position:0% file. Then we have use effect to reload the<00:01:23.840><c> products</c><00:01:24.400><c> again.</c> 00:01:25.590 --> 00:01:25.600 align:start position:0% the products again. 00:01:25.600 --> 00:01:29.710 align:start position:0% the products again. And<00:01:26.720><c> in</c><00:01:26.880><c> the</c><00:01:26.960><c> bottom,</c><00:01:27.960><c> we</c><00:01:28.240><c> have</c><00:01:29.000><c> uh</c> 00:01:29.710 --> 00:01:29.720 align:start position:0% And in the bottom, we have uh 00:01:29.720 --> 00:01:30.870 align:start position:0% And in the bottom, we have uh model 00:01:30.870 --> 00:01:30.880 align:start position:0% model 00:01:30.880 --> 00:01:33.670 align:start position:0% model model<00:01:31.200><c> code</c><00:01:31.640><c> open</c><00:01:32.120><c> active</c><00:01:32.720><c> on</c><00:01:32.960><c> click</c><00:01:33.320><c> handle</c> 00:01:33.670 --> 00:01:33.680 align:start position:0% model code open active on click handle 00:01:33.680 --> 00:01:35.110 align:start position:0% model code open active on click handle model<00:01:34.000><c> change.</c> 00:01:35.110 --> 00:01:35.120 align:start position:0% model change. 00:01:35.120 --> 00:01:38.310 align:start position:0% model change. And<00:01:35.720><c> on</c><00:01:35.960><c> cancel,</c><00:01:37.200><c> handle</c><00:01:37.760><c> model</c><00:01:38.040><c> change</c> 00:01:38.310 --> 00:01:38.320 align:start position:0% And on cancel, handle model change 00:01:38.320 --> 00:01:39.550 align:start position:0% And on cancel, handle model change again. 00:01:39.550 --> 00:01:39.560 align:start position:0% again. 00:01:39.560 --> 00:01:42.790 align:start position:0% again. And<00:01:39.920><c> similarly</c><00:01:40.520><c> for</c><00:01:40.760><c> the</c><00:01:40.880><c> delete</c><00:01:41.960><c> uh</c> 00:01:42.790 --> 00:01:42.800 align:start position:0% And similarly for the delete uh 00:01:42.800 --> 00:01:45.110 align:start position:0% And similarly for the delete uh button, 00:01:45.110 --> 00:01:45.120 align:start position:0% button, 00:01:45.120 --> 00:01:47.870 align:start position:0% button, uh<00:01:45.800><c> this</c><00:01:46.000><c> is</c><00:01:46.120><c> the</c><00:01:46.240><c> for</c><00:01:46.440><c> the</c><00:01:46.880><c> this</c><00:01:47.120><c> is</c><00:01:47.240><c> the</c><00:01:47.360><c> model</c> 00:01:47.870 --> 00:01:47.880 align:start position:0% uh this is the for the this is the model 00:01:47.880 --> 00:01:49.750 align:start position:0% uh this is the for the this is the model code<00:01:48.280><c> where</c><00:01:48.520><c> we</c><00:01:48.680><c> will</c><00:01:48.880><c> show</c><00:01:49.080><c> the</c><00:01:49.240><c> price</c><00:01:49.600><c> and</c> 00:01:49.750 --> 00:01:49.760 align:start position:0% code where we will show the price and 00:01:49.760 --> 00:01:50.950 align:start position:0% code where we will show the price and title. 00:01:50.950 --> 00:01:50.960 align:start position:0% title. 00:01:50.960 --> 00:01:53.630 align:start position:0% title. And 00:01:53.630 --> 00:01:53.640 align:start position:0% 00:01:53.640 --> 00:01:57.030 align:start position:0% now<00:01:54.280><c> let's</c><00:01:54.520><c> go</c><00:01:54.680><c> to</c><00:01:54.840><c> the</c><00:01:55.480><c> app.</c> 00:01:57.030 --> 00:01:57.040 align:start position:0% now let's go to the app. 00:01:57.040 --> 00:01:59.830 align:start position:0% now let's go to the app. product.edit<00:01:58.080><c> file.</c><00:01:58.840><c> This</c><00:01:59.160><c> file</c><00:01:59.440><c> you</c><00:01:59.560><c> need</c><00:01:59.760><c> to</c> 00:01:59.830 --> 00:01:59.840 align:start position:0% product.edit file. This file you need to 00:01:59.840 --> 00:02:01.910 align:start position:0% product.edit file. This file you need to create<00:02:00.160><c> for</c><00:02:00.480><c> the</c><00:02:00.840><c> for</c> 00:02:01.910 --> 00:02:01.920 align:start position:0% create for the for 00:02:01.920 --> 00:02:06.790 align:start position:0% create for the for editing<00:02:02.400><c> the</c><00:02:02.680><c> product.</c><00:02:03.760><c> So,</c><00:02:04.440><c> here</c><00:02:04.800><c> we</c><00:02:04.960><c> have</c><00:02:05.680><c> uh</c> 00:02:06.790 --> 00:02:06.800 align:start position:0% editing the product. So, here we have uh 00:02:06.800 --> 00:02:08.070 align:start position:0% editing the product. So, here we have uh two 00:02:08.070 --> 00:02:08.080 align:start position:0% two 00:02:08.080 --> 00:02:09.389 align:start position:0% two component 00:02:09.389 --> 00:02:09.399 align:start position:0% component 00:02:09.399 --> 00:02:11.310 align:start position:0% component uh<00:02:09.679><c> two</c><00:02:10.200><c> modules</c> 00:02:11.310 --> 00:02:11.320 align:start position:0% uh two modules 00:02:11.320 --> 00:02:13.910 align:start position:0% uh two modules like<00:02:11.520><c> JSON</c><00:02:11.920><c> and</c><00:02:12.080><c> authentication</c><00:02:12.880><c> for</c> 00:02:13.910 --> 00:02:13.920 align:start position:0% like JSON and authentication for 00:02:13.920 --> 00:02:16.550 align:start position:0% like JSON and authentication for making<00:02:14.240><c> the</c><00:02:14.360><c> request</c><00:02:15.040><c> and</c><00:02:15.280><c> we</c><00:02:15.400><c> have</c><00:02:15.640><c> a</c> 00:02:16.550 --> 00:02:16.560 align:start position:0% making the request and we have a 00:02:16.560 --> 00:02:17.870 align:start position:0% making the request and we have a action 00:02:17.870 --> 00:02:17.880 align:start position:0% action 00:02:17.880 --> 00:02:19.550 align:start position:0% action function. 00:02:19.550 --> 00:02:19.560 align:start position:0% function. 00:02:19.560 --> 00:02:21.630 align:start position:0% function. This<00:02:19.840><c> will</c><00:02:20.400><c> handle</c><00:02:20.800><c> our</c><00:02:20.959><c> request</c><00:02:21.400><c> for</c><00:02:21.600><c> uh</c> 00:02:21.630 --> 00:02:21.640 align:start position:0% This will handle our request for uh 00:02:21.640 --> 00:02:24.390 align:start position:0% This will handle our request for uh editing<00:02:22.360><c> and</c><00:02:22.720><c> we</c><00:02:22.840><c> will</c><00:02:23.040><c> get</c><00:02:23.360><c> the</c> 00:02:24.390 --> 00:02:24.400 align:start position:0% editing and we will get the 00:02:24.400 --> 00:02:25.790 align:start position:0% editing and we will get the admin 00:02:25.790 --> 00:02:25.800 align:start position:0% admin 00:02:25.800 --> 00:02:27.910 align:start position:0% admin credentials<00:02:26.600><c> and</c><00:02:26.840><c> then</c><00:02:27.040><c> we</c><00:02:27.200><c> have</c><00:02:27.440><c> the</c><00:02:27.560><c> forms</c> 00:02:27.910 --> 00:02:27.920 align:start position:0% credentials and then we have the forms 00:02:27.920 --> 00:02:31.150 align:start position:0% credentials and then we have the forms data<00:02:28.240><c> which</c><00:02:28.480><c> is</c><00:02:28.600><c> coming</c><00:02:28.959><c> from</c><00:02:29.600><c> product</c><00:02:30.040><c> page.</c> 00:02:31.150 --> 00:02:31.160 align:start position:0% data which is coming from product page. 00:02:31.160 --> 00:02:33.150 align:start position:0% data which is coming from product page. We<00:02:31.240><c> will</c><00:02:31.400><c> have</c><00:02:31.600><c> the</c><00:02:31.800><c> ID,</c><00:02:32.200><c> title,</c><00:02:32.640><c> and</c><00:02:32.800><c> variant</c> 00:02:33.150 --> 00:02:33.160 align:start position:0% We will have the ID, title, and variant 00:02:33.160 --> 00:02:35.590 align:start position:0% We will have the ID, title, and variant ID<00:02:33.440><c> and</c><00:02:33.640><c> price</c><00:02:34.200><c> and</c><00:02:34.360><c> we</c><00:02:34.480><c> save</c><00:02:34.840><c> them</c><00:02:35.200><c> into</c><00:02:35.560><c> a</c> 00:02:35.590 --> 00:02:35.600 align:start position:0% ID and price and we save them into a 00:02:35.600 --> 00:02:37.630 align:start position:0% ID and price and we save them into a variable<00:02:36.200><c> then</c><00:02:36.520><c> we</c> 00:02:37.630 --> 00:02:37.640 align:start position:0% variable then we 00:02:37.640 --> 00:02:39.790 align:start position:0% variable then we will<00:02:37.840><c> make</c><00:02:38.080><c> the</c><00:02:38.200><c> graph</c><00:02:38.480><c> QL</c><00:02:38.760><c> query</c><00:02:39.160><c> to</c><00:02:39.360><c> update</c> 00:02:39.790 --> 00:02:39.800 align:start position:0% will make the graph QL query to update 00:02:39.800 --> 00:02:41.870 align:start position:0% will make the graph QL query to update the<00:02:40.520><c> product.</c> 00:02:41.870 --> 00:02:41.880 align:start position:0% the product. 00:02:41.880 --> 00:02:43.949 align:start position:0% the product. And<00:02:42.240><c> in</c><00:02:42.360><c> the</c><00:02:42.440><c> graph</c><00:02:42.720><c> QL</c><00:02:43.000><c> query</c><00:02:43.320><c> we</c><00:02:43.480><c> will</c><00:02:43.680><c> pass</c> 00:02:43.949 --> 00:02:43.959 align:start position:0% And in the graph QL query we will pass 00:02:43.959 --> 00:02:46.030 align:start position:0% And in the graph QL query we will pass the<00:02:44.080><c> mutation</c><00:02:44.520><c> update</c><00:02:44.840><c> product</c> 00:02:46.030 --> 00:02:46.040 align:start position:0% the mutation update product 00:02:46.040 --> 00:02:48.949 align:start position:0% the mutation update product and<00:02:46.200><c> product</c><00:02:46.640><c> ID</c><00:02:46.920><c> and</c><00:02:47.080><c> product</c><00:02:47.440><c> title.</c> 00:02:48.949 --> 00:02:48.959 align:start position:0% and product ID and product title. 00:02:48.959 --> 00:02:53.030 align:start position:0% and product ID and product title. In<00:02:49.120><c> the</c><00:02:49.200><c> case</c><00:02:49.800><c> of</c><00:02:50.520><c> price</c><00:02:51.320><c> update,</c><00:02:51.840><c> we</c><00:02:51.959><c> will</c> 00:02:53.030 --> 00:02:53.040 align:start position:0% In the case of price update, we will 00:02:53.040 --> 00:02:56.590 align:start position:0% In the case of price update, we will we<00:02:53.200><c> will</c><00:02:54.000><c> handle</c><00:02:54.400><c> that</c><00:02:54.840><c> with</c><00:02:55.040><c> this</c><00:02:55.320><c> query.</c> 00:02:56.590 --> 00:02:56.600 align:start position:0% we will handle that with this query. 00:02:56.600 --> 00:03:00.070 align:start position:0% we will handle that with this query. And<00:02:57.040><c> here</c><00:02:57.280><c> are</c><00:02:57.480><c> the</c><00:02:58.080><c> variables</c><00:02:58.800><c> we</c><00:02:58.959><c> have</c><00:02:59.760><c> ID</c> 00:03:00.070 --> 00:03:00.080 align:start position:0% And here are the variables we have ID 00:03:00.080 --> 00:03:02.949 align:start position:0% And here are the variables we have ID and<00:03:00.280><c> title</c><00:03:00.720><c> then</c><00:03:00.920><c> we</c><00:03:01.040><c> have</c><00:03:01.280><c> ID</c><00:03:01.519><c> and</c><00:03:01.680><c> price.</c> 00:03:02.949 --> 00:03:02.959 align:start position:0% and title then we have ID and price. 00:03:02.959 --> 00:03:05.470 align:start position:0% and title then we have ID and price. So,<00:03:03.320><c> we</c><00:03:03.480><c> can</c><00:03:03.800><c> also</c><00:03:04.200><c> update</c><00:03:04.519><c> the</c><00:03:04.600><c> price</c><00:03:05.120><c> and</c><00:03:05.360><c> we</c> 00:03:05.470 --> 00:03:05.480 align:start position:0% So, we can also update the price and we 00:03:05.480 --> 00:03:08.470 align:start position:0% So, we can also update the price and we can<00:03:05.720><c> also</c><00:03:06.040><c> update</c><00:03:06.440><c> the</c> 00:03:08.470 --> 00:03:08.480 align:start position:0% can also update the 00:03:08.480 --> 00:03:09.830 align:start position:0% can also update the title. 00:03:09.830 --> 00:03:09.840 align:start position:0% title. 00:03:09.840 --> 00:03:12.710 align:start position:0% title. And<00:03:10.640><c> then</c><00:03:10.840><c> we</c><00:03:11.000><c> have</c><00:03:11.200><c> the</c><00:03:11.280><c> response</c><00:03:11.880><c> I</c><00:03:12.040><c> will</c><00:03:12.560><c> we</c> 00:03:12.710 --> 00:03:12.720 align:start position:0% And then we have the response I will we 00:03:12.720 --> 00:03:15.470 align:start position:0% And then we have the response I will we will<00:03:12.920><c> return</c><00:03:13.280><c> the</c><00:03:13.400><c> response.</c><00:03:13.800><c> Similarly</c><00:03:14.440><c> for</c> 00:03:15.470 --> 00:03:15.480 align:start position:0% will return the response. Similarly for 00:03:15.480 --> 00:03:17.470 align:start position:0% will return the response. Similarly for deleting<00:03:15.959><c> the</c><00:03:16.080><c> product,</c><00:03:16.640><c> we</c><00:03:16.800><c> need</c> 00:03:17.470 --> 00:03:17.480 align:start position:0% deleting the product, we need 00:03:17.480 --> 00:03:19.750 align:start position:0% deleting the product, we need app.products.delete 00:03:19.750 --> 00:03:19.760 align:start position:0% app.products.delete 00:03:19.760 --> 00:03:20.870 align:start position:0% app.products.delete file 00:03:20.870 --> 00:03:20.880 align:start position:0% file 00:03:20.880 --> 00:03:23.750 align:start position:0% file and<00:03:21.760><c> it</c><00:03:21.880><c> is</c> 00:03:23.750 --> 00:03:23.760 align:start position:0% and it is 00:03:23.760 --> 00:03:25.790 align:start position:0% and it is Here<00:03:23.959><c> we</c><00:03:24.160><c> have</c><00:03:24.440><c> the</c><00:03:24.600><c> same</c><00:03:25.000><c> function</c><00:03:25.480><c> action</c> 00:03:25.790 --> 00:03:25.800 align:start position:0% Here we have the same function action 00:03:25.800 --> 00:03:28.830 align:start position:0% Here we have the same function action function<00:03:26.360><c> and</c><00:03:26.640><c> will</c><00:03:26.800><c> handle</c><00:03:27.280><c> the</c><00:03:27.360><c> request.</c> 00:03:28.830 --> 00:03:28.840 align:start position:0% function and will handle the request. 00:03:28.840 --> 00:03:31.190 align:start position:0% function and will handle the request. And<00:03:29.120><c> we</c><00:03:29.239><c> will</c><00:03:29.440><c> get</c><00:03:29.680><c> the</c><00:03:29.800><c> request</c> 00:03:31.190 --> 00:03:31.200 align:start position:0% And we will get the request 00:03:31.200 --> 00:03:33.350 align:start position:0% And we will get the request uh<00:03:31.640><c> admin</c><00:03:32.080><c> credentials.</c> 00:03:33.350 --> 00:03:33.360 align:start position:0% uh admin credentials. 00:03:33.360 --> 00:03:35.190 align:start position:0% uh admin credentials. Then<00:03:33.560><c> we</c><00:03:33.720><c> have</c><00:03:33.880><c> the</c><00:03:34.000><c> form</c><00:03:34.320><c> data</c><00:03:34.680><c> and</c><00:03:34.880><c> we</c><00:03:34.959><c> need</c> 00:03:35.190 --> 00:03:35.200 align:start position:0% Then we have the form data and we need 00:03:35.200 --> 00:03:37.949 align:start position:0% Then we have the form data and we need only<00:03:35.440><c> product</c><00:03:35.880><c> ID</c><00:03:36.200><c> to</c><00:03:36.360><c> delete</c><00:03:36.760><c> the</c><00:03:36.880><c> product.</c> 00:03:37.949 --> 00:03:37.959 align:start position:0% only product ID to delete the product. 00:03:37.959 --> 00:03:40.190 align:start position:0% only product ID to delete the product. And<00:03:38.160><c> this</c><00:03:38.360><c> is</c><00:03:38.480><c> the</c><00:03:38.560><c> graph</c><00:03:38.880><c> QL</c><00:03:39.120><c> query</c> 00:03:40.190 --> 00:03:40.200 align:start position:0% And this is the graph QL query 00:03:40.200 --> 00:03:42.910 align:start position:0% And this is the graph QL query for<00:03:40.480><c> deleting</c><00:03:41.000><c> the</c><00:03:41.440><c> product</c><00:03:42.160><c> and</c><00:03:42.360><c> after</c><00:03:42.600><c> that</c> 00:03:42.910 --> 00:03:42.920 align:start position:0% for deleting the product and after that 00:03:42.920 --> 00:03:44.070 align:start position:0% for deleting the product and after that we<00:03:43.080><c> will</c><00:03:43.480><c> s-</c> 00:03:44.070 --> 00:03:44.080 align:start position:0% we will s- 00:03:44.080 --> 00:03:46.229 align:start position:0% we will s- return<00:03:44.400><c> the</c><00:03:44.480><c> success</c><00:03:44.920><c> message.</c> 00:03:46.229 --> 00:03:46.239 align:start position:0% return the success message. 00:03:46.239 --> 00:03:47.470 align:start position:0% return the success message. And 00:03:47.470 --> 00:03:47.480 align:start position:0% And 00:03:47.480 --> 00:03:49.229 align:start position:0% And I<00:03:47.560><c> will</c><00:03:47.640><c> share</c><00:03:47.880><c> this</c><00:03:48.080><c> code</c><00:03:48.320><c> with</c><00:03:48.519><c> you</c><00:03:49.040><c> and</c> 00:03:49.229 --> 00:03:49.239 align:start position:0% I will share this code with you and 00:03:49.239 --> 00:03:52.350 align:start position:0% I will share this code with you and let's<00:03:49.519><c> try</c><00:03:49.920><c> to</c><00:03:50.160><c> run</c><00:03:50.440><c> this</c><00:03:50.720><c> code</c> 00:03:52.350 --> 00:03:52.360 align:start position:0% let's try to run this code 00:03:52.360 --> 00:03:55.190 align:start position:0% let's try to run this code on<00:03:52.960><c> Power</c><00:03:53.640><c> App.</c> 00:03:55.190 --> 00:03:55.200 align:start position:0% on Power App. 00:03:55.200 --> 00:03:56.310 align:start position:0% on Power App. And 00:03:56.310 --> 00:03:56.320 align:start position:0% And 00:03:56.320 --> 00:03:58.070 align:start position:0% And if<00:03:56.440><c> I</c><00:03:56.480><c> click</c><00:03:56.720><c> on</c><00:03:56.800><c> the</c><00:03:56.920><c> first</c><00:03:57.160><c> product,</c><00:03:57.840><c> our</c> 00:03:58.070 --> 00:03:58.080 align:start position:0% if I click on the first product, our 00:03:58.080 --> 00:04:00.350 align:start position:0% if I click on the first product, our pop-up<00:03:58.480><c> will</c><00:03:58.640><c> open</c><00:03:59.040><c> and</c><00:03:59.320><c> here</c><00:03:59.600><c> we</c><00:03:59.840><c> can</c><00:04:00.000><c> update</c> 00:04:00.350 --> 00:04:00.360 align:start position:0% pop-up will open and here we can update 00:04:00.360 --> 00:04:04.390 align:start position:0% pop-up will open and here we can update the<00:04:01.080><c> title.</c><00:04:01.480><c> Let's</c><00:04:01.720><c> say</c><00:04:02.360><c> new</c><00:04:02.600><c> title.</c> 00:04:04.390 --> 00:04:04.400 align:start position:0% the title. Let's say new title. 00:04:04.400 --> 00:04:06.270 align:start position:0% the title. Let's say new title. And<00:04:04.640><c> save</c><00:04:04.960><c> that.</c> 00:04:06.270 --> 00:04:06.280 align:start position:0% And save that. 00:04:06.280 --> 00:04:08.990 align:start position:0% And save that. Once<00:04:06.520><c> you</c><00:04:06.640><c> save,</c> 00:04:08.990 --> 00:04:09.000 align:start position:0% Once you save, 00:04:09.000 --> 00:04:11.870 align:start position:0% Once you save, uh<00:04:09.600><c> a</c><00:04:09.680><c> pop-up</c><00:04:10.120><c> will</c><00:04:10.560><c> a</c><00:04:10.600><c> toaster</c><00:04:11.000><c> will</c><00:04:11.200><c> open.</c> 00:04:11.870 --> 00:04:11.880 align:start position:0% uh a pop-up will a toaster will open. 00:04:11.880 --> 00:04:13.630 align:start position:0% uh a pop-up will a toaster will open. Product<00:04:12.240><c> updated</c><00:04:12.560><c> successfully</c><00:04:13.240><c> and</c><00:04:13.480><c> you</c> 00:04:13.630 --> 00:04:13.640 align:start position:0% Product updated successfully and you 00:04:13.640 --> 00:04:16.069 align:start position:0% Product updated successfully and you will<00:04:13.800><c> see</c><00:04:14.240><c> we</c><00:04:14.400><c> have</c><00:04:14.600><c> a</c><00:04:14.640><c> new</c><00:04:14.840><c> title.</c> 00:04:16.069 --> 00:04:16.079 align:start position:0% will see we have a new title. 00:04:16.079 --> 00:04:19.150 align:start position:0% will see we have a new title. And<00:04:16.920><c> if</c><00:04:17.160><c> I</c><00:04:17.239><c> update</c><00:04:17.600><c> again</c> 00:04:19.150 --> 00:04:19.160 align:start position:0% And if I update again 00:04:19.160 --> 00:04:21.750 align:start position:0% And if I update again and<00:04:19.400><c> remove</c><00:04:19.799><c> the</c><00:04:19.959><c> new</c><00:04:20.160><c> title</c> 00:04:21.750 --> 00:04:21.760 align:start position:0% and remove the new title 00:04:21.760 --> 00:04:25.510 align:start position:0% and remove the new title and<00:04:22.040><c> update.</c> 00:04:25.510 --> 00:04:25.520 align:start position:0% 00:04:25.520 --> 00:04:27.710 align:start position:0% Now<00:04:25.720><c> you</c><00:04:25.840><c> can</c><00:04:26.000><c> see</c><00:04:26.240><c> we</c><00:04:26.400><c> have</c><00:04:26.720><c> the</c><00:04:27.120><c> old</c><00:04:27.400><c> title</c> 00:04:27.710 --> 00:04:27.720 align:start position:0% Now you can see we have the old title 00:04:27.720 --> 00:04:30.870 align:start position:0% Now you can see we have the old title back.<00:04:28.320><c> Now</c><00:04:28.440><c> let's</c><00:04:28.720><c> try</c><00:04:28.960><c> to</c><00:04:29.120><c> update</c><00:04:29.400><c> the</c><00:04:29.560><c> price.</c> 00:04:30.870 --> 00:04:30.880 align:start position:0% back. Now let's try to update the price. 00:04:30.880 --> 00:04:32.110 align:start position:0% back. Now let's try to update the price. Right<00:04:31.080><c> now</c><00:04:31.200><c> it's</c> 00:04:32.110 --> 00:04:32.120 align:start position:0% Right now it's 00:04:32.120 --> 00:04:36.670 align:start position:0% Right now it's 30<00:04:32.640><c> and</c><00:04:32.840><c> let's</c><00:04:33.040><c> make</c><00:04:33.320><c> it</c><00:04:33.480><c> 50.</c> 00:04:36.670 --> 00:04:36.680 align:start position:0% 00:04:36.680 --> 00:04:40.470 align:start position:0% Save<00:04:37.000><c> that.</c> 00:04:40.470 --> 00:04:40.480 align:start position:0% 00:04:40.480 --> 00:04:42.990 align:start position:0% And<00:04:41.320><c> as</c><00:04:41.480><c> you</c><00:04:41.560><c> can</c><00:04:41.760><c> see</c><00:04:41.960><c> now</c><00:04:42.160><c> we</c><00:04:42.280><c> have</c><00:04:42.480><c> a</c><00:04:42.720><c> price</c> 00:04:42.990 --> 00:04:43.000 align:start position:0% And as you can see now we have a price 00:04:43.000 --> 00:04:44.150 align:start position:0% And as you can see now we have a price 50. 00:04:44.150 --> 00:04:44.160 align:start position:0% 50. 00:04:44.160 --> 00:04:46.110 align:start position:0% 50. And<00:04:44.320><c> let's</c><00:04:44.560><c> try</c><00:04:44.840><c> to</c><00:04:45.160><c> change</c><00:04:45.520><c> both</c><00:04:45.760><c> of</c><00:04:45.880><c> them</c> 00:04:46.110 --> 00:04:46.120 align:start position:0% And let's try to change both of them 00:04:46.120 --> 00:04:47.430 align:start position:0% And let's try to change both of them together. 00:04:47.430 --> 00:04:47.440 align:start position:0% together. 00:04:47.440 --> 00:04:52.230 align:start position:0% together. Uh<00:04:47.800><c> test</c><00:04:48.560><c> and</c><00:04:48.840><c> 50</c><00:04:49.720><c> and</c><00:04:49.960><c> this</c><00:04:50.080><c> should</c><00:04:50.320><c> be</c><00:04:50.440><c> 100.</c> 00:04:52.230 --> 00:04:52.240 align:start position:0% Uh test and 50 and this should be 100. 00:04:52.240 --> 00:04:56.150 align:start position:0% Uh test and 50 and this should be 100. Add. 00:04:56.150 --> 00:04:56.160 align:start position:0% 00:04:56.160 --> 00:04:58.030 align:start position:0% And<00:04:56.360><c> as</c><00:04:56.520><c> you</c><00:04:56.600><c> can</c><00:04:56.800><c> see</c><00:04:57.080><c> the</c><00:04:57.240><c> title</c><00:04:57.560><c> is</c><00:04:57.680><c> changed,</c> 00:04:58.030 --> 00:04:58.040 align:start position:0% And as you can see the title is changed, 00:04:58.040 --> 00:04:59.750 align:start position:0% And as you can see the title is changed, the<00:04:58.120><c> price</c><00:04:58.440><c> is</c><00:04:58.600><c> changed.</c> 00:04:59.750 --> 00:04:59.760 align:start position:0% the price is changed. 00:04:59.760 --> 00:05:02.870 align:start position:0% the price is changed. Now<00:04:59.919><c> let's</c><00:05:00.200><c> try</c><00:05:00.480><c> to</c><00:05:01.120><c> delete</c><00:05:01.480><c> this</c><00:05:01.680><c> product.</c> 00:05:02.870 --> 00:05:02.880 align:start position:0% Now let's try to delete this product. 00:05:02.880 --> 00:05:07.270 align:start position:0% Now let's try to delete this product. Click<00:05:03.200><c> delete.</c> 00:05:07.270 --> 00:05:07.280 align:start position:0% 00:05:07.280 --> 00:05:09.990 align:start position:0% And<00:05:07.800><c> as</c><00:05:08.000><c> you</c><00:05:08.120><c> can</c><00:05:08.320><c> see</c><00:05:08.880><c> that</c><00:05:09.160><c> product</c><00:05:09.640><c> is</c><00:05:09.800><c> no</c> 00:05:09.990 --> 00:05:10.000 align:start position:0% And as you can see that product is no 00:05:10.000 --> 00:05:11.390 align:start position:0% And as you can see that product is no longer<00:05:10.320><c> here.</c> 00:05:11.390 --> 00:05:11.400 align:start position:0% longer here. 00:05:11.400 --> 00:05:13.909 align:start position:0% longer here. So<00:05:11.919><c> this</c><00:05:12.160><c> is</c><00:05:12.360><c> how</c><00:05:12.600><c> you</c><00:05:12.760><c> can</c><00:05:13.080><c> update</c><00:05:13.480><c> and</c><00:05:13.600><c> delete</c> 00:05:13.909 --> 00:05:13.919 align:start position:0% So this is how you can update and delete 00:05:13.919 --> 00:05:17.310 align:start position:0% So this is how you can update and delete products<00:05:14.480><c> from</c><00:05:14.760><c> your</c><00:05:15.040><c> custom</c><00:05:15.600><c> Shopify</c><00:05:16.160><c> app.</c> 00:05:17.310 --> 00:05:17.320 align:start position:0% products from your custom Shopify app. 00:05:17.320 --> 00:05:19.110 align:start position:0% products from your custom Shopify app. Thank<00:05:17.480><c> you</c><00:05:17.560><c> for</c><00:05:17.720><c> watching</c> 00:05:19.110 --> 00:05:19.120 align:start position:0% Thank you for watching 00:05:19.120 --> 00:05:23.320 align:start position:0% Thank you for watching and<00:05:19.640><c> I'll</c><00:05:19.880><c> see</c><00:05:20.120><c> you</c><00:05:20.440><c> in</c><00:05:20.560><c> the</c><00:05:20.640><c> next</c><00:05:20.919><c> video.</c>