Code Monkey home page Code Monkey logo

method's Introduction

Volusion-AngularJS Theme

Volusion theme for the AngularJS Framework

Build Status Dependency Status Views Built with Grunt

Introduction

You can use any front-end framework or libraries you want on the Volusion platform, as long as you interface with the Volusion API. This AngularJS theme project, however, has been created in aim to streamline the design and development of themes available in the Volusion theme store. This project is intended to get you up and running in no time, so you can focus on what matters most.

Getting started

First, you need a GitHub account. A free account will do you just fine.

Installation

Next, unless you're a git wizard (a gizard?), you'll want to also install a git client. There are a number to choose from, but the official GitHub ones are actually pretty nice.

Windows Pro Tip: In the GitHub for Windows client, select Tools >> Options and change your default shell to Git Bash. Select your project, hit the Tools and Options button and then "open a shell here" or just hit the back tick key ``` as a shortcut. You now have an excellent Git shell with your Git credentials already stored.

Another Windows Pro Tip: Add "C:\Users\xxx\AppData\Local\GitHub\PortableGit_xxx\bin" to your PATH user environment variable to gain access to common *nix commands in your Windows Command Prompt without installing msysgit or cygwin.

See also: Set Up Git · GitHub Help

Fork it

If you scroll all the way to the top of this page, you'll see a Fork button. Click it! After a moment, you will be forwarded to your fork of this project. That's it!

See also: Fork A Repo · GitHub Help

Clone it

Now, in the right pane, you'll see a "Clone in Desktop" button. Click it! Your git client will be started and the cloning process will start.

See also: Fork a Repo, Step 2: Clone your fork · GitHub Help

Create a branch

As a general practice, you want to stay off the main "master" branch of the repository. This means you'll need to create a new branch for your theme and work on top of that.

In the client

Click the branch button at the top where it says "master" and type the name of your theme in the text box. Hit ENTER or click the "+ create branch: xxx" button to create and switch to your new branch.

In the shell

$ git checkout -b my-theme
Switched to branch 'my-theme'

To build

grunt serve (to develop and preview with livereload)

grunt build:dist (Build for production which hardcodes the API urls to relative paths of /api/v1/ so you won't be able to preview it)

grunt build:samplestore (or just "grunt" or just "grunt build" to build to dist which hardcodes the API urls to http://www.samplestore.io/api/v1/. Then to preview it you'll want to setup a web server to serve dist. We'd welcome a PR to support grunt serve:dist and eliminate the need for a seperate web server)

grunt build:mybox (this mybox alias you'll find in the gruntfile, which you can customize to build to a specific api, such as the merchant site you're designing the theme for)

License

TBD © Volusion, Inc.

Bitdeli Badge

method's People

Contributors

brad-sobie avatar carsonreinke avatar fox-volusion avatar foxbuchele avatar hippee-lee avatar jednano avatar kevinsproles avatar oseibonsu avatar prabinv avatar tsanko avatar tylertadej avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

method's Issues

When and How to Send Messages

I believe we all agreed on a hybrid approach to sending messages. @kevinsproles agreed that at least the add to cart command should send a message. @prabinv and I have been discussing how we might want to standardize the sending of messages, not only for ourselves, but when 3rd-party components are involved. Here is what we are thinking.

We could create some kind of service that may, if one decides, stand in-between the vnApi service and whatever service is calling the API. The purpose of this service would be to establish a standard for sending messages in relation to API requests, specifically. Here's how it would work for the Cart service.

foo.beforeSend('VN_ADD_TO_CART', data);
// Prepare cart data for XHR request.
foo.send('VN_ADD_TO_CART', data);

The foo service would be the one sending specific messages in relation to different points in the XHR response. The beforeSend method would send the following message:

$rootScope.$emit('VN_ADD_TO_CART_BEFORE', data);

As you can see, it appends _BEFORE to the original message.

The send method would send 3 messages, similar to jQuery.ajax:

$rootScope.$emit('VN_ADD_TO_CART_COMPLETE', {
  status: 'success|notmodified|error|timeout|abort|parseerrror'
});

$rootScope.$emit('VN_ADD_TO_CART_SUCCESS', {
  warningMessages: [];
  infoMessages: [];
});

$rootScope.$emit('VN_ADD_TO_CART_FAIL', {
  status: 'notmodified|error|timeout|abort|parseerror',
  errorMessages: [];
  warningMessages: [];
  infoMessages: [];
});

The interfaces could be described as such:

interface ICompleted {
  status: string; // success|notmodified|error|timeout|abort|parseerror
}

interface ISucceeded extends ICompleted {
  warningMessages: string[];
  infoMessages: string[];
}

interface IFailed extends ISucceeded {
  errorMessages: string[];
}

NOTE: @prabinv says an AngularJS Interceptor might be more appropriate than a service here.

Looping in @hippee-lee @tsanko @texasag

Stop Breaking the Build!

I thought we had all agreed to submit pull requests from now on. This has not been the case. @tsanko and @hippee-lee have both broken the build by pushing commits w/o running a test locally or submitting a PR for Travis CI to run the build. This is not acceptable.

Please refer to #31 for more details on the process.

Process

You might find it helpful to add some bash aliases that I've accumulated over time.

Just a recap on what was said over the stand-up, with respect to process. Since we haven't been pushing directly upstream, the process is this:

First, Create a fork of method, if you haven't already.

I find it helpful to set master to track upstream, like so:

$ git remote -v
$ git remote add upstream https://github.com/volusion-angular-themes/method.git
$ co -b foo
$ gb -D master
$ co -b master --track upstream/master
$ gb -D foo
$ pull

This way, master is always set to track upstream. Since you shouldn't be working on master directly, master will always have clean pulls. I know how to set tracking directly, but I just find this method easier to remember.

Once master is set to track upstream/master, you'll want to work on a feature branch:

$ co -b fix-something

When you're done with your commits, do a blam, as seen in the aliases referred to above. This will push your local branch to your remote origin (not upstream). From here, just go to https://github.com/volusion-angular-themes/method and see that there's a new green button that says "Compare & pull request". Make sure your branch is set to be merged into upstream/master and submit the request.

Refresh the page and you'll see a little orange dot. This dot represents your TravisCI build. You can open it up in a new tab to monitor it, but when it's done, it'll give you the green merge button, if successful.

Let me know of any other process questions here.

Looping in @hippee-lee @tsanko

Put All Templates in $templateCache?

I'd like to spark a discussion about why or why not to store all templates in $templateCache. There are pros and cons to either approach. If the templates build up to a significant size, it could lead to an initial page-load performance hit. Clicking between pages, however, if all templates were in $templateCache, would be faster than waiting for a page request.

Thoughts? @prabinv @kevinsproles @texasag @hippee-lee @tsanko

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.