Last updated: Nov. 2, 2016
Step 9: Package, Upload, and Test Your Element
We’re done with all the coding, so now it’s time to package up the element, create the app center listing and demo site and a test site, and test it out!
- Navigate to the PriceChart directory, select all the contents, and create a zip file.
Be sure to create a zip from the contents of the PriceChart directory and not OF the PriceChart directory.
- In a web browser, navigate to www.dev.weebly.com and open the Dev Admin portal by clicking Developer Login.
- Click Price Chart to open the app’s manage page.
- Click Upload New Version.
- Click Upload New Zip and select the zip file you just created and upload.
- Fill out the App Store Listing fields as follows:
* Short Description: Create easy to read price charts
* Key Features: Create any number of plans and features | Multiple layouts | Configurable color scheme
* Long Description: You can create price charts the reflect your price plans. Choose any number of charts and plans
- For the graphic assets, upload the files from the assets directory you downloaded and unzipped from Git.
- Click Save Draft.
Your element now appears in the Version History area.
- Click the Pricing at the top of the page. Click the first Add Plan link and enter Free as the plan name. Select Free for the Plan Type and click Save.
- Hover over Get started and click Edit. Replace Get Started with Any number of plans and features, and remove the description text. Select Included from the dropdown. Click Done and then click Save.
- Click Versions at the top of the page to return to the version overview.
- Click the Create a Demo Site link. This creates a new site where you can build a page to showcase your app (you cannot change the domain of the site, but you can change the name). The site automatically has this version of the price chart app installed. Click Edit Site and create a page using the price chart element. Note that a tutorial opens because this is the first time it's being used (you can find out more about creating a tutorial here). Dismiss the tutorial and view the element's settings, including the tooltip you created. Add another element or two and then click Publish.
- Navigate back to the Dev Admin portal and on the Versions page, click View in App Center. A new tab opens and displays what your element will look like once posted to the App Center. Scroll down to view the features, descriptions, and price plan. Click the Live Demo button to view the demo site.
- Back on the Dev Admin portal tab, click Install to Site, choose Weebly Developer Test Site, and click Install. Go through the onboarding process by choosing a template and theme and then click Start Editing. Your developer test site now has the Price Chart app installed as well.
© 2015-2016, Weebly, Inc.