This is one of my pet project, i was trying to create a customized ( not exactly ) Shopify Store Admin Panel ( don’t ask me why – just to get used with Shopify APIs ).
It has been designed as a Single page Java Script Driven Application. Most of the logic have been built by using Java Script, I followed the Convention Over Configuration Approach.
Technologies
- PHP5 for Server Side Logic
- JS & jQuery for Client Side Logic
- Foundation 4 for Responsive Skeleton & Styles
It is a fully hand coded Java Script with 1 Primary Module, 6 Context Modules and 2 Components.
Primary Module
- suSwPanel Object ( client/scripts/swpanel.js )This is a Master control panel object, which initiate and maintain all context objects also handles all communication with SwPanel Server Side Module.
Context Modules
- products ( client/scripts/model/swpanel/product.js )Render Product View and handles all products related Events
- inventory ( client/scripts/model/swpanel/inventory.js )Render Inventory View and handles all inventory related Events
- collections ( client/scripts/model/swpanel/collection.js )Render Collection View and handles all collection related Events
- orders ( client/scripts/model/swpanel/order.js )Render Order View and handles all Order related Events
- customers ( client/scripts/model/swpanel/customer.js )Render Customer View and handles all customers related Events
- dashboard ( client/scripts/model/swpanel/dashboard.js )Render Dashboard View
Custom Components
- swGrid ( client/scripts/utils/grid.js )Render the Archive & Sub Archive View for all Context
- swDropDown ( client/scripts/utils/dropdown-paginate.js )Render Dropdown View for Context
Configuration
- swPanel-Config ( client/scripts/swpanel-config.js )The key object which has all configuration related to Contexts
It does almost all the things which can be done by Shopify Official Store Admin ( only in these five contexts Product, Inventory, Collection, Order and Customer )
Products
Views
- Archive Products
- Single Product
- New Product
Actions
- Create new Product
- Update Products
- Delete Products
- Add Variants
- Update Variants
- Remove Variants
- Add or Remove Collections
- Add or Remove Images
- Add or Remove Tags
- Add Product Types & Vendors
Inventory
Views
- Archive Variants
Actions
- Add or Set Quantity
Collections
Views
- Archive Collections
- Single Collection
- New Collection
Actions
- Create new Collection
- Update Collections
- Delete Collections
- Add or Remove Products
- Add Feature Images
Order
Views
- Archive Orders
- Single Order
Actions
- Full fill Order
- Mark as Payment Received
- Cancel Order
Customer
Views
- Archive Customers
- Single Customer
Dashboard
Views
- Just shows Counts of Product, Order, Collection and Customer
- List recent store’s activity
If you install this application in your (test) shop, this application will install four magic .liquid template files in your current theme’s templates directory and one magic .liquid snippet file at your current theme’s snippets directory. If you wanna know why please read this article.
Demo
User : demo
Pass : password
