Skip to content
Guides and sample code for basic plug-in functions
Branch: master
Clone or download
Latest commit ca9c5d4 Jun 28, 2019

README.md

Arcadier

If you are not familiar with Arcadier’s system or creation of Plug-Ins, then you have come to the right place to learn all you need to become a plug-in developer. We have documentation on our:

We have Github repositories for:

And finally, to test and play with our system:

These little code snippets and their descriptions aim at showing you how to create very basic functions that are expected out of Plug-Ins, like

  • Adding front-end changes to our pages
  • Creating new pages
  • Choosing the type of user you would like the code to execucte for
  • Calling API's
  • Storing data in back-end
  • Fetching data from the back-end

Feel free to Ctrl+C, Ctrl+V them or suggest improvement them through pull-requests. Our developers don't have ego issues.

Creating your first Plug-In on Sandbox

This tutorial will allow you to understand the process of creating, uploading, and using Plug-Ins in your sandbox marketplace. To begin, you will need a Developer's account for sandbox. This account will allow you to create your Plug-Ins, upload your code, restrict access and visibility, and edit your Plug-In details. To obtain one, please contact devsupport@arcadier.com.

Once you have received your info, visit the Developer's dashboard to login to your own dashboard. After logging-in, your dashboard will display a list of your available Plug-Ins. To create a new Plug-In, click on “Add Package” on the top right corner of the page.

Screen Shot 2019-06-28 at 2 36 51 PM

Give the Plug-In an appropriate name and description and click on “Save” to create it.

Screen Shot 2019-06-25 at 11 01 00 AM

Screen Shot 2019-06-25 at 11 01 27 AM

Now the Plug-In should appear in the bottom of the Developer's dashboard. Click on the edit button on its right to upload the Plug-In’s code.

Screen Shot 2019-06-28 at 2 37 17 PM

This should direct you to a page that allows you to edit the details of the Plug-In. Keep this page steady as we will return to it once we finish the code.

Screen Shot 2019-06-25 at 11 02 38 AM


In order to upload a code, you have to have a code to begin with. First of all, we will need a locating folder for our code file. To avoid any issues with our software, the structure of your internal folder should follow a specific outline. Begin by creating a folder and naming it something parallel to the function of the Plug-In. In this example, we will name the root folder “Hello World”. Inside this root folder, create two folders named “admin” and “user” and in BOTH folders, create three folders named “html”, “css”, and “scripts”. You may follow the pictures below as a guideline.

Screen Shot 2019-06-24 at 4

Screen Shot 2019-06-24 at 5

Respectively, the “admin” folder contains the Plug-In’s code that alters the admin’s page where as the “user” folder contains code that corresponds to the user’s page (Merchant, Buyer, Admin, etc.).

Once we have this set up, let’s start by coding the simplest “Hello World” on the marketplace admin dashboard using any basic text editor.

<!-- header begin -->
<link rel = "stylesheet" type = "text/css" href = "css/style.css">
<!-- header end -->

<div>
	<p id = "banner-message">
		Hello World
	</p>
	<button>
		Click me!
	</button>
</div>

<!-- footer begin -->
<script type = "text/javascript" src = "scripts/script.js"></script>
<!-- footer end -->

Save the code above as “index.html” inside the “html” folder of “admin”.

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
});

Save the code above as “script.js” inside the “scripts” folder of “admin”.

body {
	background: #20262E;
	padding: 20px;
	font-family: Helvetica;
  }
  
  #banner-message {
	background: #fff;
	border-radius: 4px;
	padding: 20px;
	font-size: 25px;
	text-align: center;
	transition: all 0.2s;
	margin: 0 auto;
	width: 300px;
  }
  
  button {
	background: #0084ff;
	border: none;
	border-radius: 5px;
	padding: 8px 14px;
	font-size: 15px;
	color: #fff;
  }
  
  #banner-message.alt {
	background: #0084ff;
	color: #fff;
	margin-top: 40px;
	width: 200px;
  }
  
  #banner-message.alt button {
	background: #fff;
	color: #000;
  }

Save the code above as “style.css” inside the “css” folder of “admin”.

Understandably, the “user” folder is empty for now. However, zip the “admin” and “user” together in a single .zip folder. Do not pay unnecessary attention to the name of the .zip file.

Screen Shot 2019-06-25 at 10

Screen Shot 2019-06-25 at 400


Going back to the Package Details page, upload that .zip file on the Developer Dashboard by clicking on the blue “Upload” button under the “File Management” tab. Once the Package Name, Package Description, and File Management are all completed, click “Save” and the Plug-In will be available in your sandbox marketplace.

Screen Shot 2019-06-28 at 2 37 33 PM

Make sure that the Plug-In is set to “Show” and “Enable”.

Screen Shot 2019-06-28 at 2 37 17 PM

Login on the Admin Portal of your sandbox marketplace. Navigate to Plug-Ins on the left pane. Under the “Available” tab, find your “Hello World” Plug-In.

Screen Shot 2019-06-25 at 11 04 13 AM

Screen Shot 2019-06-25 at 11 05 56 AM

Install the Plug-In and this should redirect you to the completed page of Hello World.

Screen Shot 2019-06-25 at 11 06 09 AM

Check to see that the button does indeed change the background color of your “Hello World” text to blue.

Screen Shot 2019-06-28 at 2 50 38 PM

Screen Shot 2019-06-28 at 2 50 54 PM

You can now create multiple Plug-Ins based on your own unique codes!

You can’t perform that action at this time.