No description, website, or topics provided.
JavaScript CSS HTML C#
Latest commit 2c8a24f Dec 20, 2016 @tatarincev tatarincev committed on GitHub Merge pull request #2 from Skrypt/master
Fixing Angular Credit Card and some CSS fixes.
Permalink
Failed to load latest commit information.
VirtoCommerce.JavaScriptShoppingCart.Test
VirtoCommerce.JavaScriptShoppingCart.Web
.gitignore
Jenkinsfile
README.md Fix read.me Nov 25, 2016
VirtoCommerce.JavaScriptShoppingCart.sln Remake the module structrure Sep 7, 2016

README.md

VirtoCommerce.JavascriptShoppingCart

VirtoCommerce.JavascriptShoppingCart module represents checkout which can be used on any site.

Selling online is by no means an easy task. We are always thinking how we can help you to sell more. Your Storefront or Mobile application are only ones of your possible sales channels. Right now VirtoCommerce makes it easy to add ecommerce functionality to share and sell your products on any website.

vcsalechannels

You have designed an awesome blog with Wordpress or other platform, and now you can start making money by adding easy-to-use VirtoCommerce JavaScriptShoppingCart. It works by offering a small piece of code, which can be implemented on your site to turn any element into a Buy button.

Installation

  1. Installing the module:

  2. Setting up security

    In VC Manager go to Configuration -> Security -> Roles -> Create Security Role. This role allows access to Cart module web api.

    createjavascriptshoppingcartsecurityrole

    Then in VC Manager go to Configuration -> Security -> Users and create a user who has JavaScriptShoppingCart security role created in the previous step.

    createjavascriptshoppingcartsecurityuser

    When you have created the user you should open API Key widget and create Simple Api Key.

    createjavascriptshoppingcartsecuritysimplekey

  3. Including JS/CSS files

    Open a page on your site which you want to add ecommerce functionality and include the VirtoCommerce JavaScriptShoppingCart javascript and CSS files before the closing head tag.

    <link href="http://demo.virtocommerce.com/admin/styles/vc-shopping-cart" rel="stylesheet">
    <script type="text/javascript" src="http://demo.virtocommerce.com/admin/scripts/vc-shopping-cart"></script>

    JavaScriptShoppingCart build using AngularJS. You should add ng-app and ng-controller to html and body tags accordingly. Also there is a special component “vc-cart” which handle all operations with shopping cart. You should add all required setting to this component which include: cart name, api-key, store-id, api-url, currency-code, culture.

    <html ng-app="virtoCommerce.cartModule">
    ...
    <body ng-controller="virtoCommerce.cartModule.cartController">
    ...
    <vc-cart name="default" api-key="1fdbd73305bb4a3389fceed7feb9bab1" store-id="Clothing" api-url="http://demo.virtocommerce.com/admin/" currency-code="USD" culture="en-us"/>
  4. Defining products

    Now that you have included the files, you simply need to define the products on your website. A product is described using a simple HTML syntax.

    <button id="buyButton" type="button" class="javascript-shoppingcart-add-item btn" ng-click="carts.default.addLineItem({name: 'Handcrafted lamp', quantity: 1, listPrice: 250.00', currency: 'USD', productId: '1', sku: 'PH1231G2', catalogId: 'Hand-made', imageUrl: https://virtocommercedemo1.blob.core.windows.net/catalog/1435269990000_1163371.jpg'}); openCheckout();">Buy the lamp</button>

    In parameters you should provide the required product information: name, quantity, listPrice, currency, productId, sku, catalogId, imageUrl.

Customization

The best way to customize VirtoCommerce JavaScript Shopping Cart is to fork the repository and start working from it.

After cloning the repository, you will have the following files tree:

scriptstructure

VirtoCommerce JavaScript Shopping Cart has a component-based application structure. Various components can be adjusted to your needs in Scripts/Checkout folder. In addition, you can adjust Content/checkout.css file that contains all styles.

Wordpress JavaScript Shopping Cart Setup

Wordpress.org is the most popular CMS. This section aims to demonstrate the simplicity of Virtocommerce JavaScript Shopping Cart that will let you transform your Wordpress.org website into a full-fledged e-commerce platform.

We assume that you already have a WordPress.org site installed and that you know the basics.

First of all, you'll need to add the Virtocommerce JavaScript Shopping Cart JavaScript file and stylesheet to your template.

Add them in the header.php file located in /wp-content/themes/{your_theme}/header.php.

wordpress

Then you should create a blog post and add buy button.

worpderss-create-blog-post

Now, if you navigate to this blog post, you should be able to buy it!

You should have something that looks like this:

wordpress-blog-post

When you click the button you will see a modal which contain standard checkout with all available steps.

wordpress-checkout

License

Copyright (c) Virtosoftware Ltd. All rights reserved.

Licensed under the Virto Commerce Open Software License (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://virtocommerce.com/opensourcelicense

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.