• Stars
    star
    361
  • Rank 117,957 (Top 3 %)
  • Language
    PHP
  • Created over 11 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Angular.js application using Magento as the backend API

Moa

Note: Those updating from 0.2.8 to 0.3.0 need to run: composer dump-autoload from api/ and update the new config.json file.

Tired of Magento's lack of unit testing? Configuration over convention? Use of Prototype.js? Badly written JavaScript? Untested third-party modules? Likewise! Moa brings Magento into the 21st century.

Angular, Magento, Laravel

Heapshots: Moa uses HeapDump to take memory snapshots. Send a kill -USR2 <pid> where <pid> is your Node.js process ID.

Getting Started

  • Install all dependencies: npm install, bower install;
  • Install Laravel dependencies: composer install from api/;
  • Configure a new Magento store, or specify the URL, and file path to your existing Magento store by editing the config.json file.
  • Update config.json.sample with your own paths, and hostnames; rename config.json.sample to config.json
  • Run grunt
  • (Optionally): Cache products using php artisan products from api/;
  • Initialise the Node.js instance: node node/server.js;
  • Open example.com/Magento-on-Angular/store/ in your browser;
  • You may need to update the base_url in Magento Admin > Configuration > Web if you did a fresh installation of Magento.

Optionally, you may prefer to structure your config and folders in the manner described in this wiki page: https://github.com/Wildhoney/Magento-on-Angular/wiki/Preferred-Folder-Structure-and-Config

If things are not working correctly, take a look at api/public/attributes/color for any Laravel/Magento issues. Please don't spend too much time debugging โ€“ file a bug!

Unit Testing

All unit tests for both JavaScript and PHP can be run from the terminal: grunt test.

  • Run PHPUnit tests only: grunt php-test
  • Run Jasmine tests only: grunt js-test
  • PHP specific unit tests are available with the phpunit command from the /api/ directory;
  • JavaScript specific unit tests are available via the URL /store/tests/;

Generating Products

Since your product collection might be a little slow because of Magento's EAV database structure, Moa allows you to create a cache key via the terminal instead โ€“ however a cached copy will still be generated if you access it via your browser.

In order to generate a cache for the product collection, you can run php artisan products from the terminal. Once completed, the normal API method via the browser will use this cache key.

Redis

Please note that by default the cache is using plain old file cache. If you want to use Redis, change the configuration on line 18 of api/app/config/cache.php from file to redis. More information on the cache configuration is available on http://laravel.com/docs/cache#configuration.

Directory Structure

At first glance the directories may seem over-complicated. However there's method in all of the madness!

  • api contains the Laravel framework which interfaces with Magento;
  • dist contains production-ready minified JS/CSS files for Moa;
  • node contains Node.js server for delivering products via Snapshot;
  • store contains the actual Angular.js Moa application;

Laravel API

If you prefer to use another JS framework such as Ember or Meteor, then you're more than welcome to use the API in isolation. Below we've documented the URLs and their purposes:

  • /products โ€“ fetch all the products;
  • /product/5 โ€“ fetch a product with the ID of 5;
  • /categories โ€“ fetch all the categories and their sub-categories;
  • /basket โ€“ fetch all of the items in the basket;
  • /basket/add/2/4 โ€“ add an item to the basket with product ID 2 and quantity 4;
  • /basket/remove/2 โ€“ Remove an item from the basket;
  • /attributes/color โ€“ fetch attributes by name;
  • /currencies โ€“ fetch a list of currencies and their conversion rates;
  • /account โ€“ fetch details of currently logged in user;
  • /account/login โ€“ login a user;
  • /account/logout โ€“ logout a user;
  • /account/register โ€“ create a new user account;

Specification

  • Angular.js front-end for one-page functionality;
  • Laravel API for interacting with Magento;
  • Separation of concerns with API being separate from Magento installation;
  • Lazy-loaded product collection with Snapshot.js;
  • Simplified PHP back-end REST API;
  • Implement Spreedly as the payment gateway;
  • Front-end and back-end tests with >90% unit-test code coverage;
  • Abides by the rules to make it Google crawlable;
  • Socket.io (WebSockets) for instant product availability;
  • Standardised modules: Facebook Connect, Gift Wrapping, et cetera...;
  • GZipped data packages from back-end API;
  • Real-time currency converter using Google Calculator API;
  • Crossfilter for super-fast filtering across all models;

More Repositories

1

ReactShadow

๐Ÿ”ฐ Utilise Shadow DOM in React with all the benefits of style encapsulation.
JavaScript
1,303
star
2

Leaflet.FreeDraw

๐ŸŒ FreeDraw allows the free-hand drawing of shapes on your Leaflet.js map layer โ€“ providing an intuitive and familiar UX for creating geospatial boundaries similar to Zoopla and others. Included out-of-the-box is the concaving of polygons, polygon merging and simplifying, as well as the ability to add edges and modify existing shapes.
JavaScript
526
star
3

Maple.js

Maple.js is a React webcomponents based framework mixing ES6 with Custom Elements, HTML Imports and Shadow DOM. It has in-built support for SASS and JSX, including a Gulp task for vulcanizing your project.
JavaScript
431
star
4

Legofy

Legofy your images with retina support using SVG.
JavaScript
301
star
5

ngDroplet

Angular.js HTML5 file uploading with drag & drop and image/file preview.
JavaScript
287
star
6

Switzerland

๐Ÿ‡จ๐Ÿ‡ญSwitzerland takes a functional approach to Web Components by applying middleware to your components. Supports Redux, attribute mutations, CSS variables, React-esque setState/state, etcโ€ฆ out-of-the-box, along with Shadow DOM for style encapsulation and Custom Elements for interoperability.
TypeScript
268
star
7

ngVideo

Modularised ~13KB HTML5 audio/video implementation using Angular.js
JavaScript
227
star
8

Keo

Plain functions for a more functional Deku approach to creating stateless React components, with functional goodies such as compose, memoize, etc... for free.
JavaScript
227
star
9

Standalone

Create framework agnostic components that are truly reusable and interoperable with all the benefits of the React ecosystem โ€“ using the HTML5 custom elements API to extend HTML's vocabulary.
JavaScript
206
star
10

Snapshot.js

Node.js app for slicing and dicing ~100,000 models in <5ms with easy sorting, paginating, and filtering.
JavaScript
202
star
11

EmberDroplet

Ember.js HTML5 file uploading with drag & drop and image/file preview.
JavaScript
198
star
12

EmberSockets

Socket.io (WebSockets) integrated with Ember.js' observer pattern.
JavaScript
136
star
13

Dory

Dory is a responsive, universal, GitHub collaborated blogging platform built on React and powered by Express. By combining awesome features such as automatic RSS generation, HTML5 offline support, push notifications, with a powerful development environment using hot reloading, SASS and Markdown, Dory allows developers to quickly dive into the depths of blogging.
JavaScript
128
star
14

Interpose

Apply stylesheet variables to your React components for use in your stylesheets. Interpose reduces the clutter of React components by bridging the gap between JS and CSS without resorting to complicating your components with CSS logic.
JavaScript
126
star
15

Mocktail

๐Ÿน Mock all of your ES6 module components with Mocktail using dependency injection.
JavaScript
103
star
16

ngCrossfilter

Usual Angular.js style filtering and sorting with a twist of Crossfilter for improved performance.
JavaScript
87
star
17

ngContextMenu

Handcraft your very own context menus for a richer UX!
JavaScript
80
star
18

gulp-processhtml

Process html files at build time to modify them depending on the release environment
JavaScript
77
star
19

L.Pather

Branching from Leaflet.FreeDraw, L.Pather is a freehand polyline creator that simplifies the polyline for mutability.
JavaScript
69
star
20

Freelancer

๐Ÿ‘” An implementation of on-the-fly defined WebWorkers that are created inline using data URIs, rather than separate physical files โ€” for the benefit of all humanity.
JavaScript
67
star
21

Amelie

HTML5 audio visualiser experiment using D3 with a curious Amelie theme.
JavaScript
57
star
22

ngRangeSlider

Multi-handle range slider utilising the native HTML5 input range elements.
JavaScript
54
star
23

EmberCrossfilter

Instead of using Ember DataStore, EmberCrossfilter provides a basic architecture for creating Ember models with Crossfilter; which allows for much quicker sorting and filtering.
JavaScript
48
star
24

DetectFont

Detect which font your system has cherry-picked from font-family.
JavaScript
41
star
25

CloudConvert

Easy-to-use Node.js implementation of the CloudConvert API.
JavaScript
38
star
26

Redecorate

Simple module for reducing immutable nested properties in Redux applications.
JavaScript
27
star
27

ngPourOver

PourOver wrapper for Angular.js with super-quick filtering and sorting.
JavaScript
27
star
28

ReactDelayed

Small component for delaying the mounting and unmounting of a child component for CSS animation purposes.
JavaScript
21
star
29

ngImgur

Take your favourite cat picture, and upload it to Imgur.com w/ Angular!
JavaScript
17
star
30

RedisCache

Simple Node.js based Redis cache for storing large collections of data.
JavaScript
16
star
31

ngRoundabout

Three-dimensional HTML5 carousel implemented in Angular.js.
JavaScript
14
star
32

ReactCrossfilter

Crossfilter.js implemented as a mixin for ultra-fast filtering and sorting techniques baked into React.js components.
JavaScript
13
star
33

ngDonut

Lightweight and extensible Angular implementation of the D3 donut graph.
JavaScript
11
star
34

Readlint

๐Ÿ“™Lint all of the code examples in your README documentation using shared configs.
JavaScript
10
star
35

ngObelisk

Easily use Obelisk to create animations using Angular.js.
JavaScript
10
star
36

ngTeleport

Move a section of the DOM and inherit the scope of the target node.
JavaScript
9
star
37

Webmonkey

๐Ÿ™Š Robust and versatile headless monkey testing for the modern web with reproducible steps, error alerts, strategy sharing and many other good things.
JavaScript
9
star
38

Formv

๐Ÿ—ณReact form validation using the validation native to all recent browsers. Also includes support for handling API validation messages, success messages, memoized and nested form state, and super easy styling.
JavaScript
9
star
39

Taskfile

๐Ÿ“ฆ Yet another attempt at a simple task runner for npm with parallelisation support using bash commands via YAML.
JavaScript
8
star
40

EarthApp

Three.js w/ Angular implementation of planet earth using SketchUp for the models.
JavaScript
7
star
41

EmberRickshaw

Rickshaw faรงade for Ember which allows automatic redrawing of graphs using Ember's observer pattern.
JavaScript
7
star
42

Memoria

Extensible form storage for memorising user inputs with local storage. Never lose your form data ever again!
JavaScript
7
star
43

Koi

Koi is a time aware interactive bird written in THREE.js with voice recognition, and an artificial IQ.
JavaScript
6
star
44

Pellucid

Experimental module using HTML5's Custom Elements that creates a crystalline blurred background.
JavaScript
6
star
45

Catwalk

Intuitive and fast relational CRUD interface for modelling relationships using vanilla objects written in ES6.
JavaScript
6
star
46

Mapleify

Mapleify is a build tool for Maple.js; it uses Polymer's vulcanize to process HTML imports with a little twist of Maple specific logic for HTML Import paths, and the processing of SASS/JSX documents.
JavaScript
6
star
47

Bi-cycle

Bi-cycle assists in making infinite carousels and sliders by handling the index logic for you.
JavaScript
5
star
48

Openroulette

Openroulette is a Chatroulette implementation built using the WebRTC component.
JavaScript
4
star
49

Vik

CLI Semver autoincrement with major, minor, and patch.
JavaScript
4
star
50

Draught

Drawing tool in ES6 for creating diagrams using D3 with an extensible event driven architecture.
JavaScript
4
star
51

Maducer

An experimental map-reduce concurrency over web workers using shared array buffer for handling large datasets.
JavaScript
3
star
52

OrderlyQueue

Implementation of a promise-based FIFO queuing system using ES2017 async generators.
JavaScript
3
star
53

AnsibleAlexa

Development deployment using Vagrant w/ Ansible provisioner.
PHP
3
star
54

Canvas-Background

A super useful function for applying a background colour to a canvas element before invoking toDataURL.
JavaScript
3
star
55

MayBee

Safe chaining of object properties and functions using ES2015 Proxy.
JavaScript
3
star
56

Angularise

Deferred compilation of Angular.js templates for applications that render HTML from asynchronous processes.
JavaScript
3
star
57

PointerEvents

Allow the emulation of pointer events for browsers without native support, such as Internet Explorer.
JavaScript
3
star
58

Instamap

โœˆ๏ธ Towards the end of 2016, Instagram removed the Photo Maps feature. Instagram says it was unused, but we remember! Instamap brings it back for good, open-source and ad-free.
JavaScript
3
star
59

mundus-meus

Leaflet.js & Angular.js mapping tool for finding entities based on your location.
JavaScript
2
star
60

Typified

๐Ÿ—ผAn experimental implementation of first class functional types using pure ES at runtime, inspired by Haskell, PureScript and Idris.
JavaScript
2
star
61

Banter.js

Angular based real-time app for communicating with customers via IRC. Individual customers connect to a common IRC channel, giving staff members the ability to see all customers' messages, with the ability to respond directly and individually.
JavaScript
2
star
62

UMLApp

JavaScript
2
star
63

Needle.js

Angular.js style dependency injection using reflection.
JavaScript
2
star
64

Biutiful

๐ŸŒฟ Biutiful transform ES imports into browser usable ECMAScript imports.
JavaScript
2
star
65

Shift.js

Use the shift key to select a range of elements, such as checkboxes.
JavaScript
2
star
66

Lenin

Diagram tool using D3 providing a set of common functions for easy integration and extensibility.
JavaScript
2
star
67

UploadButton

UploadButton is a tiny module for a custom stylable upload button. Using HTML5's Custom Element API and Shadow DOM for encapsulation.
JavaScript
2
star
68

Tail.cat

Modern e-mail client and SMTP/POP server using MongoDB, Ruby, Angular
JavaScript
2
star
69

Tessellate

Small vanilla JavaScript module for gracefully removing floating elements from the page.
JavaScript
2
star
70

PolymerDroplet

Polymer.js adaptation of my popular EmberDroplet module for Ember.js.
JavaScript
2
star
71

DjangoExceptions

Handle and parse Django REST Framework validation messages with aplomb.
JavaScript
2
star
72

Moggy

Miniature ~2kb library that brings immutability to existing prototype functions employing the principle of least astonishment.
JavaScript
2
star
73

NodeURLImports

Transform browser URL imports into Node compatible import/require statements using local dependencies.
JavaScript
2
star
74

Viewport

Determine how much of an element is visible in the viewport.
JavaScript
1
star
75

ReduxLocal

Redux helper for maintaining pseudo-local state in a single tree.
JavaScript
1
star
76

Tdo

Terminal based todo app for managing today's tasks with gentle reminders
Rust
1
star
77

Tidal.js

Socket.io benchmarking with realtime web-based statistics.
JavaScript
1
star
78

Memor

Use memoization for Rust functions to increase performance
Rust
1
star
79

Kiwi.js

DRY interface for Angular.js tests in Jasmine/Karma.
JavaScript
1
star
80

Workex

1
star
81

Funkel

Simple and lightweight functional toolset inspired by Clojure using import.
JavaScript
1
star
82

StickyRice

๐Ÿš React implementation to allow the natural position sticky behaviour in table headers and other elements
JavaScript
1
star
83

Hylian

Quick and easy doubly and singly linked immutable list implementation that allows for inserting, removing and shifting.
JavaScript
1
star
84

DeveloperInk

Facilitates the use of ZURB's Ink for developers using the CLI with SASS, Email Testing, Compilation, etc... ๐Ÿ™
CSS
1
star
85

WeakTree

๐ŸŒฒWeakMap implementation that allows for composite keys in a tree formation.
JavaScript
1
star
86

Mareos

MapReduce over WebSockets using Goroutines.
Go
1
star
87

SetOrder

Tiny module for sorting by a set order, using a custom sort function for omitting explicits.
JavaScript
1
star
88

Paramo

๐ŸŒตSwiss-army knife of stringifying, parsing and manipulating URL parameters by applying types to the parameters.
JavaScript
1
star
89

ava-webcomponents

Utility middleware for testing web components in AVA via Puppeteer.
JavaScript
1
star
90

Regrowth

๐Ÿ”ฌRegrowth is a monstrous laboratory experiment in container queries brought to life.
JavaScript
1
star
91

Cinematic.js

Experimental module for video sequence scrolling with zero dependencies.
JavaScript
1
star
92

Termtodo

Todo app for the terminal for keeping reminders for later
Rust
1
star
93

Honey.js

Simple JavaScript library with auto-updating templates.
JavaScript
1
star
94

ReactAutolist

Browser native implementation of autocomplete using the datalist element.
JavaScript
1
star
95

Relayed

Convenient Node.js app for circumventing CORS issues when developing on localhost.
JavaScript
1
star
96

Doogle

Node.js app for taking HTML snapshots of JavaScript pages to make your dynamic apps Google crawlable.
JavaScript
1
star
97

gulp-envy

Gulp plugin for transferring your chosen environment variables to objects, with module loader, globals, angular, and other strategies.
1
star
98

redux-nest

Redux middleware for wrapping store in a Proxy to help with complex nested states.
JavaScript
1
star
99

Async

Yet another simple Promises/A+ compliant async flow control using ES6 generators.
JavaScript
1
star
100

TravelMap

๐ŸŒ Pin visited locations on a simple-to-use map, as well as future places you'd love to see. Then share with the world!
Python
1
star