Thank you very much, Mike, and thanks everyone for joining us today. This is Understanding Drupal at Badcom 2020, online edition. The slide deck and everything that I'm going to show today is already available. So you don't have to take a lot of notes. You have all the resources already available. Let's start by thinking about why would we want to use React. And there are many reasons, but I want to just give you some. First, because React has this philosophy of learning once and applying everywhere. And by that it means that you can use the same library to write applications against different platforms. For example, the web, mobile applications, VR applications, desktop, and so on. In fact, there are around 25 React renders. These are the ones responsible for taking your React code and modifying it for the specific target platform. And in that URL you will see 25 or so. So this holds true. Once you learn React, you are able to reuse that knowledge for different applications. Also, React can be implemented in an incremental fashion. For example, if your project is too big and it is not possible or feasible for you to go, you know, in one go, one big transformation, what you can do is start modifying, you know, pieces by pieces. Let's say that you have a block on your sidebar and that is the first part that you convert into React. After doing so, everything goes well.   And you can apply this incremental approach to either go full-blown the couple with everything being rendered by React or stop at any time and have a hybrid approach where Drupal gives you some of the markup and React takes over part of the page. I, in particular, have used this approach of having a hybrid system in a project where the site was powered by Drupal but there was a checkout experience and that was a React application.  Also, React has a great developer experience. For one, there is a small API surface, so there are not a lot of things to remember. You can literally create the whole documentation, official documentation for React in an afternoon. And when doing so, you will be very well equipped for, you know, attacking any React project. Also, contrary to other frameworks, React do not add, you know, extra templating or concepts to the language. This is using basic constructs in the JavaScript language. So, this also has an implication. The better that you become a React, the better you become a JavaScript developer and then you can take this knowledge to apply it to a View project, to an Angular project, to a Vanilla JS project, and so on. For example, you don't need to know a new templating language, you just write JavaScript. There is also great error reporting and developer tools as we're going to see during that demo. As of today, it is very easy to get started. Back in the day, you will have to do a lot of server setup to start with React. But today, there are services like on package, on sandbox, and others that literally with little to no effort, you get React set up so that you can start writing code. And one of the things that I am most impressed by React is that, you know, everything evolves, Drupal evolves, React evolves, technology in general evolves. But in the case of React in particular, when there are API changes, many times the core team releases something that is called a code mode. And this is an application that you execute via the command line that is going to read your source code and modify it to accommodate to the new syntax. We have similar tools in Drupal to do the same, like to go, for example, from Drupal 7 to Drupal 8 syntax or even from things that have been deprecated in Drupal 8 to the new ways of doing that in Drupal 9. So it is certainly not something you need to react. But what I want to point out is that you have these extra tools at your disposal to make that upgrade process to newer version easy. As I mentioned, this is mostly a live demo, and of course, nothing can go wrong, right? The repository is publicly available on GitHub. And it is actually written as a workshop. So I'm going to go briefly over that. But basically what we're going to work on today is going from React elements to React components and then to full applications. So let's switch to that already. I will be using this code. One second here. I will be using this code with a political light server that allows me to every time that I save the file, my browser is going to reload with the changes. The application that I'm going to show today is the one that we see on the right. As you can see, it's relatively straightforward, but the whole point is focusing on learning the real concepts and not necessarily having a beautiful design for the application. In this case, what you can do is you can vote on different frameworks. And the application is going to sort itself based on the number of votes. This is the repository that I mentioned. And as you can see, this is like a step-by-step guide. You can go and there will be comments explaining what are the tasks to do for each of the steps. And in the next one, you will have the solution. So after this session, you can take a look at the code and try to do the exercises yourselves. And we're going to get started right away with the demo. What we see here is the output of the static page on my left. So we're going to start by doing this incremental approach. We're going to just change one line that is going to be powered by React. In the whole page, only one line is going to be powered by React. And that particular one is going to be the one that says vote for your favorite one. In the HTML document, we're going to follow a three-step process. The first step is going to be include the React library. The second step is going to be create a mounting point for the React application. And the third step is going to be actually including the JavaScript file that contains my application. So let's go one by one. In this particular case, I'm going to include from my local repository. I have the libraries configured locally in case something goes wrong. But in this particular case, this React.development.js is the React library by itself. But remember that this is the core package. And on top of this, we need a renderer. In this particular case, because we are writing a web application, we need that DOM renderer, which is another package that also needs to be included. So we do that. And we have the core package and then React DOM. Now, what we said is that we wanted to replace this section. So I'm going to remove this and include a div with an ID of React-app. The ID can be anything that you want. In fact, it doesn't have to be a div and it doesn't have to be an ID. But the point is you need something to hold onto. And in this case, this is where I'm going to mount my React application. And finally, at the very bottom, I am going to include the script tag for my script. This is where I'm going to be writing my application. If I save this, I can verify that both for your favorite text has disappeared. And this is expected because I literally removed that from my HTML and instead put an empty div. Now I'm going to switch to JavaScript. On my HTML, this is everything that I had to do. In JavaScript, we are also going to follow a three-step process. The first one is create a React element. Then get a reference to the DOM where we are going to mount the React application. And the last one is going to be using the renderer. Write the element into the mounting point. So let's go one by one. In this particular case, I am going to create a constant called element. And I'm going to use the React dot create element function. And the way that this works is that it expects at least three parameters. The first one is the HTML tag that I want to render before I had a P tag. So that's what I'm going to do here. The second is we're going to leave as new for now. And the third one is the text that you want to render. I'm going to say, and that doesn't do anything because that's just creating the variable in memory. The second step is going to get a hold of that mounting point in the HTML. You can do this in many ways. For the sake of this example, I'm going to use document get element by ID. So again, I'm going to create a const.  And the ID that I had used before was react dash KPP. Finally, I'm going to combine the two, if you will, using my renderer, which is provided by reactdom. I call the render function. And what do I want to do with it?  And if I click save, we can see now that the text is appearing here. Now, if I were to see inspect my source code in the in the depth for the editor, you can see that in my header, which is the, you know, that part of the backup. I have an ID with an ID of react app.  So, so far so good. I have something there. Now let's try to get some of the functionality that we lost. Remember that the words your favorite were in bold and everything was uppercase. So let's see how we can do that. One functionality that react dot create element provide is that in fact you can pass more than three elements, you can pass, you know, any number of elements for that matter. And in this particular case, let me show you something. If I have it like this, for the record, I have a blogging called prettier that every time that I say it is going to format my code automatically. So if you think if you see the things jumping around is because the previous blogging is doing its magic. But in this particular case, what I wanted to demonstrate is that the text that I had before that was one string. Now it is three. So the way that is going to work is that, you know, they are just going to be concatenated. And by clicking save here, you can see that I get the same result. Not, not, not into fancy, nothing to shape. But this is going to be the building block for the next part, which is coming up with the strong tech. So react elements are channel kind of atoms in, you know, in the, in the, in the world. Those are the smart as components that you can interact with in group in react. And one thing is that you can combine them to create molecules and then you know the analogy like full living beings and stuff. But in this particular case, what I want to do is create another react element inside. In this case is going to be a strong tax. I'm going to pass no for now. And then I'm going to close the parentheses there for proper syntax. And now I am getting my, my bold text. And if I were to open the depth tools I want for saving some time, you will see that it will be, you know, wrapped in a strong element. So what we can see here is that for one, you can create react elements, but also you can nest them. And this is trying to simulate the hierarchical structure of an HTML page. The other thing that we had was that we had everything uppercase in that line. And this was achieved by adding class to that particular p-tag. And this is where the second element in the create element function comes into place. We can pass an object. So instead of passing no, I can pass an object. And that object, if I specify a property called class name, and then, you know, the value, this is, this class is going to be applied to the element. So if I say, and I inspect my source code, I can see that here the header, the deep, the class is being applied and everything else as expected. And in CSS, I am putting everything in uppercase. One thing that I want to point out is that as you can see in the rendered code, it is class, but in your code in JavaScript, you have class name. The reason for this is that ultimately this script is a JavaScript file. And in the language of JavaScript, the word class is a reserve keyword. So if you were to use that, it would produce a, you know, a clash. React has some, you know, backup procedures to interpret that, but it is better to use class name. Otherwise, you are going to get some warnings in your console. But just by doing this, you know, three steps, create one element, nest another one, and then apply a class. We basically got the same result from the very beginning. And again, react elements are kind of like the basic building blocks of a react application. But you might be thinking, well, this is kind of weird. Why do I need to create this complex structure of nested function calls in JavaScript? This is not very user friendly. If I were to have a big application, this is going to become pretty easy. And because of this, the React team came up with something that is called JSX, which is a syntax very similar to HTML. And this is how it looks like. I'm going to replace my React element from here. And this is a syntax. So as you can see, it's very, very similar than regular HTML with a caveat of using class name instead of class. So the properties that you otherwise pass in the second parameter, those become like HTML attributes, if you will. Now, I just saved this file, and you can see on my right that the line is gone. So what is going on here? If I were to open again my DevTools, you will see that I have an error. It says uncut syntax error expected expression got the angle bracket. Ultimately, this is a JavaScript file. And having an angle bracket like this in a JavaScript file is not valid. It's not valid syntax. So the whole thing just doesn't work. It is worth pointing out that HTML is very resilient. And if it doesn't understand something, it just like continues rendering the rest of the page. That is why instead of getting a completely blank page, we only have that particular line missing, the line that is being rendered by the React application. But that being said, the React application is gone. It's not working. So what can we do to fix this? We definitely want to use this syntax because it's easier to read and to maintain. What we need to do is apply a transformation method. There are many ways to do this, but one of the most popular is using a library called Babel. So that's what I'm going to do here. I'm going to go back to my HTML and import the library. And again, I have it in my custom repository. If I click save, you can see that the error still appears. So just having Babel loaded in the page doesn't do anything. You also need to instruct it in some way that the specific script files need to be transformed by Babel. You need to do that explicitly. And the way to do it is where you include the script, like in this particular line. I'm going to add another attribute in this case type equals x slash Babel. And by doing so, I am instructing the library that has already been loaded into the page that, hey, I want you to apply your transformations to this particular file. And as you can see, I got my line working again. But if I look at my console, the syntax error is gone, but now I get a warning. And the warning says you are using the in browser Babel transformer. This is not recommended for production use because you don't want to be, you know, giving the responsibility to your visitors browsers to do the transformations. And another alternative to this is pre-compiled the files. For example, you can use Webpack to create a bundle and then ship the production bundle into your client. And then, you know, you don't get this one. But for today's demo, this should suffice. We're going to, you know, allow this for now. Now we can see how we can use KSX and this is working. Let's say that we are happy with the results that we are getting so far, and we want to continue transforming our application little by little. In this time, I want to render the whole header section into in react. So I am literally going to my HTML and copy and paste from here to here. I'm going to do a little bit of formatting.  And that's it. As you can see, like again, little by little copying and pasting. If you can open the DevTools to see if there were errors, I know for a fact that this time there were none. And now all my header is being rendered by react. Okay. The next concept after working with react elements that you need to know about is react components. And a react component is very useful for different reasons that we're going to see throughout the demo. But the way that they work is like this. You have a function and that function needs to start with a capital letter. For now we're not going to pass any parameters into the function. And then you need to return something. What is that something that you need to return the react element one react element that you want rendered by this component. So following your approach of copying and pasting, we're going to do the same. I'm going to literally take all of this and put it in here. And then I don't need this anymore. Now this is my react component. What I had before was an element. This is a react component. So why do I need to do I also need to update my render function instead of printing something that no longer exists. I need to print the element and the way that you do it is like this. You call the component as if it were an html tag. So I'm going to click save here and we can verify that everything is working. Now, I mentioned that the component needs to start with capital letter. So basically there are other things that you can do if you don't want to do that, but it's usually the best practice.  You notice that in this case, we have a header html element, and we have a header component. So why does the react framework distinguish between what is a native html tag and what is a custom react component. It's not very fine if the first letter of the component name is a capital letter. So that's how it can tell them apart. My header lowercase is my regular html file tag. My header with capital h is my react component. So far so good. We are happy. We want to continue making changes. So what I'm going to do now is create a new component to hold the data for the candidate list for the whole candidate list. So in this particular case, I'm going to follow the same approach. I'm going to have a function in this case named candidate list. I'm going to return something. And why is that something that I want to return? I'm going to go to my html and literally copy and paste everything. And as you can see, by now, my html is very, very thin. It's mostly a shell, an empty shell like a deep and then the script that I'm going to load. So I'm going to save this. I'm going to go to my html here. I'm going to go to my JS file. I'm going to paste a code. Now, my IDE is already gelling at me. Let's try to do something instead of rendering the header. I'm going to render my component and see what happens. I'm going to click save. And it gives me a blank page. If I open my console, I will see that I have an error. I'm going to add this. Add adjacent JSX elements must be wrapped in an enclosing tag. There is an assumption by react that an element can only return one root component. And in this case, I have a h2 and I have a section side by side adjacent to each other. And that goes against pre-access expectations. What can you fix this? One way would be to have a wrapping element, for example, a deep, but having elements doing nothing other than complying with react expectation is not semantic markup. And we should strive to have semantic markup in our applications. So to accommodate for this, the React team provides a special component that is called react fragment. When rendered to the page, it doesn't produce any HTML markup. It is just like an empty shell, again, that when you need to return adjacent components, you wrap both of them or as many as you have in the React element component. Excuse me, the React fragment component. Now, we have seen something already here, but if I look at my console, I get some errors. And this is what I had described before, invalid on property class. Did you mean class name? So we can already see that the framework itself is being super useful. It is not only identifying the error, but also giving me the solution. The problem is that, as I mentioned, class is a reserved keyword in the language. So I actually need to use class name. By changing that and clicking save, those words are gone. And now I have, you know, my working application. I want to mention something brief about the React fragment component. It has an alternative syntax, which is like this, those opening and closing ankle brackets. And that is to start. And at the very end, you put a slash like if it were a self-closing track. I highly recommend that you avoid this. Even though it is valid syntax, it is kind of confusing. Someone else on your team might come to this code and think, hey, did they really forgot to specify the tag to use? And there is no need to be fancy and apply all the shortcuts or the extra syntax. It is better to have readable code. And your feature self is going to thank you for that when you come a year later trying to fix a bug. So in general, aim for readability instead of just trying to apply every possible cool trick. So good so far. We're going to restore our header. And in order to do this, we're going to add a new component. In this case, the component name is going to be rating up. And as you can see, I am using a react fragment because I want to return side by side my header and my candidate list. And now I take the component name, add it to the renderer, click save. And that's it. Again, getting the result from the very beginning, but now everything is being rendered by the react application. So far, you know, it is nice to know all about this, but it's not that impressive, right? We are just moving code from an HTML file to a JavaScript file. So what can we do? One of the benefits of components is that they are reusable. So for example, I'm going to create a new component called candidate. I'm going to put it here. And as you remember, I need to return something. And what is it that I'm going to return? I'm going to return the markup for the react candidate. And now what I can do is actually use the component itself. Okay, now that I have the component, what I'm going, sorry, I put it in the wrong place should be down here. Now that I have the component, I can reuse it as many times as I want. So let's say that I want to render three times the same component. That's what I get three times react as an option. But okay, good, I can reuse component, but that is not super useful because I am rendering the exact same thing over and over. It would be nice if we could make the components dynamic and that is what we're going to do next. They are allowed to receive something that is called properties. The way that properties work is like this. When you call the component, you pass the properties as if they were HTML attributes, name, year, image URL. Now, the things that you pass here are going to become properties in an object passed to the function. So the function is going to receive an object. In this case, I'm going to call that object props, but it's common. And in here, I am going to have instead of rendering the hard coded name, I'm going to say props.name. The name here corresponds to the attribute like value that I have here. Then I do something similar for the year. And something similar for the source. Notice that the properties that I pass to the element do not need to match one to one to the HTML attributes. Like in this case, the image tag has a SRC attribute, but the property that is received, it is called image underscore URL. So they don't have to be the same. One thing that I want to mention, every time that we access an angle bracket like this, it understands that hey, I need to switch from reading this file as JavaScript to reading the file as JSX. So the syntax is different. But when it encounters an opening curly bracket, it switches back to JavaScript. So what we have inside the curly brackets is JavaScript. And in this particular case, it's a JavaScript expression that is going to be interpreted and printed to the HTML in this case. In particular, the name attribute of the props property. Because this is just JavaScript, you can actually do clever things like this, for example, you can, for the attribute, you can have a template literal. So something like this for a second. That is called template literal. And what we're going to do is take the same name and add a space and a logo, and this is going to be used as my attribute, because we all know that accessibility should be, you know, considered when creating an application. Now that we have here, I'm going to save. And we will see that my first element renders properly, it has the framework name, the year and the image. And if I were to look for the attribute, it will also be there. But we have this, you know, undefined logo released in without a year and no framework. The reason is because now our component expects some properties to be passed to it. But when I render it down below, there are two instances where I don't do it. So I just need to update my, my call to the components to include that information. So for each of them view an angular, I pass year and image URL. And because I have this, I can safely remove the, the markup from below. Save. And now we come back to a working example. So what have we just done. We created a component and this time we passed properties to the component. Those properties are sent as if they were regular HTML attributes. And when the component receives them is going to be an object. But like the first argument to the function is going to be an object and whatever name we use there we use inside the function. So in addition to the curly brackets in JSX, let's react, know that what comes next is JavaScript. It is no longer JSX, but JavaScript. So we can have JavaScript expressions. And in this case, again, accessing the properties. And in this case, using a template. Now, we might want to have some safety guards around this. Because last time we, we got some undefined logo text on the screen because we were calling the, we were calling the components without the necessary, the required properties. So there are different approaches to work around this. One of them is using a library called prop types. So I'm switching back to my HTML to include the library. In this case, I have it again in my local code, and it is called prop types. When I have this prop size library, but I can use the following. After my component, I can have this. So the component name, remember capitalization is important. I have a capital letter here dot prop types. And then I assign an object to that. And in this particular case, I say that I want to have a name, a year and an image URL. I'm going to switch this to a string for now. The final example switches this to a number. But for now I'm going to switch to a string. So what do prop types do for you? For one, it allows you to specify what properties are expected to be received, like the name, year, name, year and image URL. This corresponds to what we have here. Also, what type of data is expected. In this case, all of them are strings, even though this is a year, but see that there are quotes around that. So ultimately JavaScript is going to consider this string. As I mentioned before, the final example has a different approach. So you can actually specify, for example, a number. And you can tell if the properties required or not by appending dot is required at the very end. So by doing so, if I were to come back to my example and remove some of these, let's say the image URL, the year and the name, if I click save. The page itself, you know, is just going to hide some of the things. But if I go to the console, you will see that I get errors. In particular, it says, well, a warning warning, failed prop type, the pro image URL is might as required, but its value is undefined. So it is already checking for missing properties. One thing that I want to point out about this prop types library is that the errors are only going to be logged to the console when you are working on the development target to put it that way. You can configure, as I said before, for example, Webpack to create a bundle that is meant to use in production. And when that is the case, a prop type won't do anything. This is mostly like to help yourself while developing, to have some safeguards. But when you produce a production bundle for the application, the prop type library will not lock anything to the console because you don't want those messages to leak to your production application. This is mostly as a development tool. Another thing that I want to mention is that if you need more sophisticated type checking, you can use TypeScript, for example. In this case, we're not going to get into that. Ideally, you learn concepts in isolation to understand what they are responsible for, and TypeScript is its own presentation. So for now, we're going to stick to prop types. And as we approach the end of the session, I want to fix the mistakes that I introduced by having all the components that are required there. I am back to my state from before and the errors are gone. Okay, one thing that I want to switch back for now we have mentioned components, how you can pass properties to them, how can you have dynamic elements in your components. I want to give a short overview of the final application so you have a sense of what other things are possible. And for that, I am going to once again load the final version with the buttons. One of the things that we wanted to simulate in this final version in the full version is calling an external API. So we have a function called fetch data that is supposed to mimic that. You call an API and you get a JSON response. That's something that we have here. Now, what do you do when you need to interact with an external API? There are many things, but for this particular example, I want to introduce the concept of something that is called react hooks. So there are many hooks. One of them is called use effect. So when I call use effect, it works in this case as an anonymous function. And inside the function, I am calling my fetch data function from before. So this is trying to simulate my external API call. For anything that has a side effect, it is recommended to use the use effect hook. So in this particular case, I call the API, I store the data in a constant, and then I apply some functions. These functions are going to be responsible for, in my particular case, sorting the application based on the number of votes. Mauricio, I'm giving you your five minute notice. Okay. Thank you very much. And in addition to that, once we have that data, we come to the bottom and we use the data to call a regular map function in JavaScript. And we are rendering the same candidate component from before, but instead of having it hard coded, now it is dynamic. So if my API returns two or three or 10 elements, all of them are going to be mapped. And the last thing to mention here is that the numbers are stored in a placeholder called a state that each component has. Again, there is a hook for that called use a state to manage your application state. Now I would like to switch to the presentation again. The demo went for the most part well. So that was good. In the slide deck, there are more information for your reference. I would like to thank the organizers for the opportunity to present and invite you to check that sessions that are coming in about 15 minutes. And there is also a coffee break so make sure to check the program for what's next. I'm from Indonesia, I go by dinner con online. I am from Nicaragua, beautiful tropical paradise in Central America. I work with a character doing Drupal react Python WordPress. If you like what you learned today, I prepared a course on the topic you can visit that website for more information and everything the code example is open source. If you don't get a course you can check the full application and as you saw there are step by step instructions on how to set it up. Thank you very much. That is my to the handle my email does light deck is the first link below and a feedback form with five anonymous questions if you would like to provide feedback, it would be great. So thank you very much for joining me today. Are there any questions. I haven't seen any questions a couple comments and you address them immediately afterwards so. Okay, excellent. Well, I hope that you enjoy the rest of your conference. And thank you very much for learning with us today.


Great news for anyone dropshipping on the Facebook marketplace or for anyone who's thought about it and now has a good reason to do so. Full automation is finally ready for the Facebook marketplace and in this video I'm going to show you guys how you can dropship on the Facebook marketplace with full automation when it comes to price and stock monitoring, importing your product and everything else that comes along with it. I will show you how to connect your stores, import products and do everything else along the way. So watch just quick intro and let's go. What's up everybody? Hope you're all having a wonderful day today. My name is Liran from AutoDS. I'm the content manager and I've also been dropshipping for the last several years and in this video I'm going to talk about the Facebook marketplace, how to dropship on it, but more importantly because we have covered that before, more importantly how to add full automation to our Facebook marketplace so we can really scale our stores and do so like we've been doing on other selling channels like eBay, Shopify and more that we have coming soon. So let's go ahead and get started with the Facebook marketplace, how to dropship on it, how to automate it. Let's begin. One quick thing before we do that, if you are new to our channel, this is the part where you need to subscribe to always stay updated on all of the latest and all of the hottest topics that we have coming out in the dropshipping world in every selling channel that you can think of. So many suppliers and marketplaces, so much new content coming out every week. Hit that subscribe button, enable those notifications and let's go. So first things first, you want to start dropshipping on the Facebook marketplace. There's a thousand and one reasons why you want to do that. It's very profitable, a very untapped marketplace. I'm not going to get into the reasons why we have blog articles about it, we have videos about it. Let's go ahead with the connection process. So first things first on the Autodesk platform, click on settings, then click on plans and add-ons and make sure that you have the Facebook marketplace plan active. Once you got that, you can start adding your first Facebook star. So here on the top left on your stores, click on that and then click on add star and you will be able to connect your first Facebook star. So click on that and go through the process. I already connected my store, so we're going to start with that, my Facebook star. Now, the next step is to download and install the Autodesk Facebook dropshipping helper extension. So here it is over here and I'm going to leave a link to it right under this video so you can download and install it really fast and easy. Once you have that installed, you'll see it here as you see on my screen on the top right and if I click on it, I can choose which store I would like to connect to the Facebook extension. So in this case, it's a store called my Facebook store. I'm going to click on next. Then we've got the sync range. This is how far back I want to go where Autodesk will check all of the listings that I have on my store, on my Autodesk store that's not on my Facebook marketplace store yet. So I can go as far back as 24 hours or seven days and Autodesk will check all of the products that I have, see what's missing. Let me know that I have it on my account but not on my Facebook marketplace and then we can go ahead and start synchronizing those products. So in this case, I'll leave it as is and I'll click on sync now. Now we got to the logs page. So this is where I can see all of the changes that are happening on my Facebook marketplace store. For example, if the supplier changed the price or the stock quantity, I will see those changes here. And of course, those changes will automatically get implemented on my store automatically through Autodesk through the Facebook extension. So here you can clear the log or you can download the log and you can simply get to the logs by clicking on the extension and clicking on this log button over here. Another thing that I want to show you is if you click on this wheel icon over here, it'll take you to the settings for this extension. And here you can tell the extension how often you want it to update your prices and your stock when your suppliers make changes from their side. So here you can tell the extension not to sync at all to sync every one hour. So every hour scan all of my products through my supplier stores, see what's in stock, see what's not updated accordingly and the prices as well. So we can do it every one hour, every three hours, every 12 hours or every 24 hours, whatever suits you best. In this case, I'm going to leave it on one hour, click on update. And that is how that is done. The scheduler just got started, as we can see on the left side. And we know when exactly it's going to start the synchronization process. So that is how you get to it when it comes to the Autodesk settings for the Chrome extension, and also for the synchronization range. So we got the sync range, we got the price and stock monitoring. Let's move forward. Now if you want to know what are the best products to sell on your store, we already have a video and an article regarding the best Facebook marketplace categories to sell. Over there, you'll have all of the categories and you also have the best selling products, how to find best selling products on the Facebook marketplace. So I won't mention it again, go to our blog page, go to our YouTube channel and check out the content that we have on Facebook. So what I'm going to do is really quickly choose a product to sell. So I'm on Amazon and once again, you can choose any one of the 25 supplies suppliers that Autodesk supports, I'm just going with one of my personal favorites. So in the Amazon bestsellers, I'm just going to go into a category that's fit for the drop shipping business model products that can and will sell. Let's just go for this example, this kitchen scale. Okay, so here's the product at $8.99. What I'm going to do is simply copy the URL, head over to Autodesk, click on add products on the left side. And here I'm going to enter that URL. The supplier is Amazon, the region is the United States, go ahead and click add as a draft item is being added to the drafts. Let's click to track the progress. So it's going to take me to the drafts page. And as you see here on the top, it already began the process of importing the products to the drafts page, and it'll be available in just a couple of seconds. Now the drafts creation process is complete. And you can see it here on top of our drafts page. So what I'm going to do now is click on this arrow to open up the item editor. And here you can optimize the product's title, the description, the variants, images, and so forth. But what I'm going to do now is click on variants because here is where we need to hover over this copy button and click on it. As you see, it says copied to clipboard. So now I know that the products variants were copied. Now what I'm going to do is head over to the Facebook marketplace on the left side. I'm going to click on create new listing on the listing type. I'll choose item for sale. And as you see, I have a button here, paste from AutoDS. This is available from the AutoDS Facebook helper extension that we downloaded and installed. And on top of that, you can see that we have a dropdown menu with a product, some floor lamp. So what this is, is a product that we have on the Facebook store on AutoDS that wasn't uploaded to Facebook yet. So if I would want to import this product from AutoDS to Facebook, I would simply choose it. This is what you do when you connect AutoDS to Facebook for the first time. And you have products that are not listed on Facebook yet, but you have added them on AutoDS. And if you guys are wondering once again, where it's getting the information from, it's from the variants column that I showed you a minute ago, where we hovered over the copy button and we left clicked on it. So now all of the variants information is copied to the clipboard. Back to the Facebook marketplace, we're going to click on paste info from AutoDS. Now what's happening is all of the products information are slowly being transferred from AutoDS to Facebook. So you can see here that the products title has already transferred itself. The products details have also transferred from AutoDS to here to our the Facebook marketplace.  So we can see here on the left side that they're being uploaded.  So as you can see over here, it pretty much finished the first part of the upload process. So let's see exactly what it did. And that's exactly how long it took, by the way, just about 10 seconds from clicking that button, we already have our first draft here. We didn't have to download all of the products images one by one. But let's continue and get to the actual automation settings besides the product imported that we just saw, which is already really good. Nice enough as it is as you see over here, it took care of all of the line breaks, it split into paragraphs, you can try to touch it up some more fine tune a little a little bit more. I would definitely optimize the products title, so it won't be exactly the same with the brand's name and all of that. So let's start from the left side over here. So we pasted all of the information, all of the products images are here and well. Next, we can change the products title. So I would just optimize that a little bit, delete the brand. So this is a food kitchen scale. Better yet, it is a kitchen scale, digital grams and ounces leave that definitely not for weight loss, I wouldn't say it's for weight loss for food weight, baking, cooking, and let's just leave Kettle there. The price is $13. So let's go back to the price that we had to the supplier. It was $8.99 and auto DS automatically added my personal profit range, what I would like to profit from this product. I know that the Facebook marketplace is going to charge me with a 5% transaction fee. But besides that, the rest of the profit is yours to be had. So in this case, I'm going to leave it as it is at $13 in the category you already have recommended categories that Facebook added here. So I'm just going to click on kitchen scales and it automatically added it to that category. The condition is new. And here in the products description, you can start editing the products description to just make it a little bit more readable and make it look a little bit better for the viewer. So here I would add a line break here to also here and you can see the changes being implemented on the right side. Just make it look better, make it more readable. And once you're done with that, continue scrolling down in the brand, you can write branded or you can actually write the brand's name, do whatever is good for you. The SKU can be left blank. Then I'm going to click on next. Now we're at the products location. So the location I'll leave it at Atlanta. So if you're dropshipping on the Facebook marketplace, you drop shipping to a US audience, you drop shipping products from the US to get fast shipping and be able to ship it with UPS or USPS or FedEx, the shipping companies that Facebook wants to see and they can track it and it's also for your own protection. So you can leave the product location at any place in the US, but the delivery method do make sure that you enable the shipping options as you can see over here. So we got shipping and local pickup shipping option. We're not going to use a prepaid shipping label, but we will use your own shipping label. So click on that. The shipping rate is absolutely free. So we're going to enable free shipping. You can do it by clicking in this box, turn on free shipping for buyers. Okay. And that pretty much sums that up. Now we can go ahead and click on next. Now, if you don't have the shipping settings, you might not be from the US and you won't be able to see shipping options at this time. We're always focused and keeping our eyes on everything that we can and cannot do on the Facebook marketplace. So if you're dropshipping internationally, the Facebook marketplace may not be the right place for you at this time. This might improve later and I will definitely keep you guys updated on that. Now let's go back. Now in the next screen, Facebook is asking me if I would like to allow the buyer to make an offer. So the price right now is $13 or $14. So this way they will be able to make an offer and then you can choose if you want to accept that offer or decline it. That is absolutely up to you. So I will definitely turn this feature on because I do want to see more people trying to negotiate with me and this way I will be able to close more sales. So over here, the minimum price I'll consider in this case, let's say $10. Let's go with that. Click on next. And now it's asking me where I would like to list this product. So of course I'm going to list it publicly on the marketplace. I enable shipping options, which means all of the 50 states in the US are going to see this listing, which means many people are going to see it and many people are going to buy it because there's absolutely no competition at this time. Next, you can also list this product to different Facebook groups and I definitely recommend to do this to get more people to see your product. Once you're done, go ahead and click on publish and that is all there is to it. AutoDS will automatically monitor the price and the stocks for this item and for every other product that you upload to the Facebook marketplace, so you can now have hundreds to thousands of listings and every time the supplier changes the stock or the price on one of them, you don't have to do anything as long as you have the extension right here. It's synchronizing with all of your suppliers, all of the prices and all of the stock and you don't have to do anything. The prices will change automatically according to your profit margin settings on AutoDS. Another great feature that I would like to show you guys is using the address copier for your orders on the Facebook marketplace. So every time you get an order and you have to fulfill it on your supplier's website with this little feature, you can simply in one click copy all of the customer's address from the Facebook marketplace and paste it on your supplier's website to save yourself a lot of time when fulfilling your orders. Let me show you exactly how that is done. For this feature, you need the AutoDS Chrome Helper Drop Shipping Extension. So we are talking about two extensions in this video. One is the AutoDS Facebook Drop Shipping Helper Extension and the other is the AutoDS Helper Chrome Drop Shipping Extension without the word Facebook in it. I'm going to leave the link to both of those extensions right under this video so you'll know exactly where to get it and this is exactly how it works. Once you download and install the extension, you'll also see it up here. So this is the regular AutoDS Helper Chrome Extension, not the Facebook one. Now in order for this feature to work, you need to enable your Facebook marketplace subscription on AutoDS. So if that wasn't obvious enough, you need to have that subscription in order for these features to work.  I'm going to show you how you can copy that address, all of the customer's details in just the click of a button. So this is an order, one of the orders that I have on my Facebook marketplace account. This is the product that I'm selling, I'm getting it from Amazon. Here is the product on Amazon. So the first thing that I'm going to do is add this product to my cart. I'll click on add to cart and I will mark it as a gift. So the receiver won't see how much this product cost and they'll get it in gift packaging. Then I'll click on proceed to check out. Now here I need to paste the customer's address. So as you see here, we have a paste button and that is available from the AutoDS Chrome drop shipping extension. In order to paste, I need something to paste, something that I copied from. So let's go back to the order and this is an order that I already shipped out, but it's just in one example of how you can do it. So open up your order details on the Facebook marketplace like this order here and as you see here on top of the order details, you have a copy with AutoDS link. So I'm going to click on that address copied as you can see here on the bottom right. Now I'm going to head back to Amazon to the cart that I just left. Then I'm going to click on paste. Now I'm not doing anything and I'm letting the extension work its magic. As you can see, it's filling in the country, the customer's name, the address, city, state, zip code, everything that we have on the order details from Facebook. Now in this case, we don't have a phone number. The customer didn't leave a phone number on the order details. So we can just write down nine, nine times one, two, three, four, five, six, seven, eight, nine, use this address and continue to check out. So all of that was done with just one click instead of me having to go line by line filling in the customer's name, the address and everything else. This will save you a lot of time, especially when you've got 10, 20, 30 plus orders per day. So use the extension, enjoy this feature. Let's move on with the Facebook marketplace tool that we have here ready for you at AutoDS. So once again, it is now finally comfortable and easy to dropship on the Facebook marketplace. And once again, it is a very profitable marketplace to dropship on because it is untapped because not a lot of dropshippers are dropshipping on it. And those few that are doing it are definitely reaping their rewards. Soon I will also start recording case studies for my Facebook marketplace account so you guys can learn every step of the way of everything that I'm doing, where I'm getting my products from, how much I'm selling them for, which products are selling, everything in 100% full transparency. So you guys will definitely enjoy that. Now, once you publish this product to your store, go back to the drafts page and import it to your Facebook store. So I'm going to click on the import button. And now the product is being imported from the drafts page to the products page. And soon I will see it there. So it only took a couple of seconds. Let's click on products now. And as you can see, it's right up here. So now the product is live on my Facebook store. This is where I'm getting it from the source ID from Amazon. This is the products URL on Facebook. And this is the store where I published it too. So now the product stock and price are both being monitored. And once again, this is how easy it is. You can go ahead and add tens to hundreds to even thousands of products to the Facebook marketplace, start selling, start making those profits at business automation so that you can scale the right way. Another tip for you guys is if you would like to get updates on every time one of the prices or stocks is changing from your Facebook marketplace store, you can click on settings on the left side on auto DS, click on notifications and enable stock and price monitoring updates over here. Then make sure that your email address is written over here in the notify to email. And in the digital email frequency, you can choose how often you would like to be updated. So let's do it on a daily basis and click on save. That way you'll also be notified to your email. But don't worry, whatever changes are being made, they will automatically get implemented on your Facebook store. So this is just an FYI for your information that pretty much sums up how to use the Facebook marketplace dropshipping tool to import products to your store, how to do the import process, how to connect your Facebook store to begin with, how to find a product really quickly to sell on your store imported and most importantly, start monitoring your prices and your stock. So full automation. It's finally here. Enjoy it guys. Let me know if you have any questions or comments and I will happily answer them below. Do not forget to subscribe to a YouTube channel to always stay updated on all of the latest features that we have coming out and so much more. See you in the future videos.


I started to feel pain in my neck, something that I was not used to ever with sports and being an athlete. I also had heart flutters. Something wasn't right. I knew my body. My wife, Denise, let me know to go to the doctor for a physical, which most guys do not do all the time. There they found a heart murmur. Went for further tests. The rest was a leaky aortic valve. At the time, they didn't know that it was caused by me having a faulty valve and born with a faulty valve. So first I met with Dr. Wang. He recommended the surgery, so I'm thankful to him to put me into Dr. Griffith's hands. Matt came to see me because his aortic valve, and that's the main valve that lets blood relieve the heart, but not come back to the heart. That valve was leaking on Matt, and you could hear it with your stethoscope, like a garden of us that was almost pinched in half. And over time, that extra leak back into Matt's heart caused Matt's heart to get a little bit enlarged, and we could begin to see that in some sense, Matt was beginning to suffer a little bit because his heart was getting big, and we know that if we let that go on too long, we can never fix that problem because the heart will be irreversibly injured. Speaking to Dr. Griffith, we're both risk takers, and once he mentioned there was a new valve on the tissue side, I didn't want to go mechanical because I didn't want to have to take blood thinners, I didn't want to have a tick that I could hear, just wasn't something I wanted to be reminded of every minute, so we went with the tissue valve and that was my choice. When I talked to Dr. Griffith, he had mentioned to me, hey, there's a new valve, or a new and improved valve. What do you think? It's a tissue valve, it has, it's called inspirus, it has, you know, special stuff coating on it, it can be replaced easily without going back in, it lasts longer than the eight to ten years of a tissue valve. What do you think? It took me about five seconds to say I'm in. I was excited about being the first one. I told a million people. And that valve became available to us at the University of Maryland Medical Center and just two other centers in the entire country on the day Matt's implant occurred. So we were basically right up there with the front of the team, you know, giving a patient an opportunity for the newest of the new, and the new heart valve is treated differently than the old heart valve tissue, and the tissue treatment is called Resilia. But basically it's a treatment that helps to increase the durability of that leaflet working in Matt. I was up and walking the night of in ICU. Something I was told that nobody's done. I can thank my ICU nurse, Monica. An angel, the greatest person. We walked around ICU. Everybody was watching me and saying, what are you doing? But I wanted to get to the next phase, right, as a plan. I knew what I needed to do to get to that next step and be out of ICU and be able to see my family and friends and come visit me. I would say at three months I felt amazing. I've begun to play softball again. I play with my children all the time in rough house. I have my strength back. I've lost some weight, eating a lot better. And just overall, no pain in my neck. I can do things carefree and freely without having to worry about any pain. It's really just an amazing thing, an amazing thing. I don't even think about what's happening with my heart. I just think about how good I feel and that I can do the things I want to do. The only thing that matters to me is my family. So thinking about my wife and doing things with her and having great times and really those boys are everything. And to be here healthy for them and to have them and playing with me and wrestling with me and have it no other way.