Skip to content

Quick Start

Jump to bottom
vinespring edited this page Mar 24, 2015 · 15 revisions

This document walks through the steps required for a basic JavaScript integration with the VineSpring e-commerce platform.

Assumptions

  1. You have a website (either live or in development) with a domain or subdomain name.
  2. You have familiarity with HTML and CSS.
  3. You have an active account with VineSpring, and it's pointing to the domain you're trying to integrate with.

Reference the VS script in your template

Place this near the bottom of your template.

<script type="text/javascript" src="https://platform.vinespring.com/scripts/2.0/all.js"></script>

Add an “account links” area

The account links provide the user with a login/account link, and a cart link with current item count. It’s recommended to fix this div in the upper right corner of the page, but this certainly isn’t mandatory. Choose the spot that best meshes with your design. The primary goal is to make them easily accessible to the site visitor from every page.

Add the following HTML to your template, and position with CSS accordingly.

<div data-vsPlugin="accountLinks"></div>

Create an account area

The account area allows the user to log in, view order history, change their password, and manage their account profile.

  1. Create a page at the root of your domain called /account.
  2. Add the following HTML to that page.
<div data-vsPlugin="account">
	<noscript>
		JavaScript is required to view and purchase on our site.
		Please <a href="http://www.enable-javascript.com/" target="_blank">enable this feature in your browser.</a>
	</noscript>
	<!--[if lte IE 7]>
		To ensure security and usability, this site requires at least Internet Explorer 8 to function properly. 
		Please view our site in a <a href="http://www.google.com/chrome">different browser</a>, 
		or upgrade to the latest version of <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>.
	<![endif]-->
</div>

Create a cart/checkout page

The cart/checkout page displays the user’s current cart contents, allows them to see shipping rates, and easily complete their order on the same page.

  1. Create a page at the root of your domain called /cart.
  2. Add the following HTML to that page.
<div data-vsPlugin="cart">
	<noscript>
		JavaScript is required to view and purchase on our site.
		Please <a href="http://www.enable-javascript.com/" target="_blank">enable this feature in your browser.</a>
	</noscript>
	<!--[if lte IE 7]>
		To ensure security and usability, this site requires at least Internet Explorer 8 to function properly. 
		Please view our site in a <a href="http://www.google.com/chrome">different browser</a>, 
		or upgrade to the latest version of <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>.
	<![endif]-->
</div>

Create a user registration page

  1. Create a page at the root of your domain called /register.
  2. Add the following HTML to that page.
<div data-vsPlugin="registration">
	<noscript>
		JavaScript is required to view and purchase our products. 
		Please <a href="http://www.enable-javascript.com/" target="_blank">enable this feature in your browser.</a>
	</noscript>
	<!--[if lte IE 7]>
		To ensure security and usability, this site requires at least Internet Explorer 8 to function properly. 
		Please view our site in a <a href="http://www.google.com/chrome">different browser</a>, 
		or upgrade to the latest version of <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>.
	<![endif]-->
</div>

Create a product list page

A "product list" displays several wines on a single page. It showcases several wines, and allows the customer to add one or more to cart.

  1. Create a page where products will be listed. This can go at any URL (/store, /wines, etc).
  2. Add the following HTML to that page.
<div data-vsPlugin="productList">
	<noscript>
		JavaScript is required to view and purchase our products. 
		Please <a href="http://www.enable-javascript.com/" target="_blank">enable this feature in your browser.</a>
	</noscript>
	<!--[if lte IE 7]>
		To ensure security and usability, this site requires at least Internet Explorer 8 to function properly. 
		Please view our site in a <a href="http://www.google.com/chrome">different browser</a>, 
		or upgrade to the latest version of <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>.
	<![endif]-->
</div>

Create a product detail page

A "product detail" page showcases a single item. It gives the customer more information about a particular wine they are interested in, and allows them to add to cart. It also comes with a default layout, but can be easily overridden.

  1. Create a page called "detail" a directory below your "product list" page. For example, if you created your product list page at /wines, then create your page at /wines/detail.
  2. Add the following HTML to that page.
<div data-vsPlugin="productDetail">
	<noscript>
		JavaScript is required to view and purchase our products. 
		Please <a href="http://www.enable-javascript.com/" target="_blank">enable this feature in your browser.</a>
	</noscript>
	<!--[if lte IE 7]>
		To ensure security and usability, this site requires at least Internet Explorer 8 to function properly. 
		Please view our site in a <a href="http://www.google.com/chrome">different browser</a>, 
		or upgrade to the latest version of <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>.
	<![endif]-->
</div>

Done. What's next?

Check out our styling overview.

Clone this wiki locally