Creating your First Plug-In
Now that you have all the necessary knowledge, you can build your own plug-in! Do note that your plug-in file should be in the format of 3 folders: CSS, HTML, and JS.
This guide article will walk you through the internal structure of your plug-in’s folder and will show you how to alter your User interface through the plug-in you create. By the end of this guide, you will know the difference between an Admin interface and User interfaces
Admin Portal Plug-In
For the coding of the plug-in, we highly recommend that the specific structure of your root folder complies with Arcadier's Plug-In structure. In this example, we have the "Hello World" root folder with two subfolders called Admin and User. The difference between these two folders is that code inside of the Admin folder affects only the Admin’s interface, whereas code inside of the User folder affects the User's interface such as Merchants and Buyers.
Additionally inside of each subfolder, there are an additional three subfolders called css, html, and scripts - the three main coding languages that comply with Arcadier’s platform. For this guide, we will only focus on the Admin interface side, so leave the three subfolders under User interface side completely empty
Once you have the structure of your folder set up, open up any coding editor app of your choice and initialize the three files called style.css, index.html, and script.js. These three files under your Admin folder should be placed in the css, html, and scripts subfolders respectively. These three files combined will create our "Hello World" plug-in
The style.css code refers to the styling of the page, such as how the elements will be displayed
The index.html code refers to the contents of the page
The script.js code refers to the function and purpose of the different elements
You can find these codes on Arcadier's GitHub page.
Altering user interface through Plug-In
Inside the root folder, there will be an Admin and User folder. For this particular guide, we will focus solely on the User folder
Both your Admin and User folders each contain three subfolders called css, html, and scripts
All of these codes will be placed under the default User folder
In the image below, the highlighted line of code determines which page in your Marketplace will contain the button:
In the image below, the highlighted line of code will locate a specific section in your Marketplace's homepage for you to alter the button’s placement:
In order for you to get these two variables to work, right-click anywhere on your Marketplace's homepage followed by selecting Inspect to view the rendered html page. From there, you will view the various divisions. The homepage example has a class of page-home - the body of code declared to locate that specific class
To place your button at a specific location, make sure the arrow function is enabled in order to correspond the relevant divisions to their elements
In the example above, our specific location is the Categories division. When you hover over the Category tabs, it will show you the division having two classes - a section and a section-category
Once you have understood and modified your code, upload your code onto your Developer's Dashboard. Compress and .zip the Admin and User files together
Check that all corresponding details are correct. Click on Save and Click on Enable to allow all Users to see the new changes
To find and install your new plug-in, simply click the Plug-ins tab in your Admin dashboard, and your plug-in will be available under the "Available" tab
Upon installing the plug-in, you will see an html error message, but do not worry. This is because the newly-installed plug-in is trying to fetch the html content from your empty Admin folder. To rectify and alter this page, create your own html file under the html folder inside your Admin folder.
Once you have your new plug-in installed, go to your User Interface and click on the button you have created to test if the plug-in functions the way it should. If it is successful, you now know how to alter the User's interface through the use of plug-ins