Skip to content
This repository has been archived by the owner on Apr 16, 2022. It is now read-only.

Commit

Permalink
Apply the existing integration
Browse files Browse the repository at this point in the history
  • Loading branch information
tatarincev committed Feb 8, 2021
1 parent cee0f5e commit b1ea206
Show file tree
Hide file tree
Showing 73 changed files with 8,537 additions and 926 deletions.
111 changes: 103 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
![Vue Storefront](https://camo.githubusercontent.com/48c886ac0703e3a46bc0ec963e20f126337229fc/68747470733a2f2f643968687267346d6e767a6f772e636c6f756466726f6e742e6e65742f7777772e76756573746f726566726f6e742e696f2f32383062313964302d6c6f676f2d76735f3062793032633062793032633030303030302e6a7067)

# Boilerplate for Vue Storefront Next

<a href="https://slack.vuestorefront.io">![Branch Develop](https://img.shields.io/badge/community%20chat-slack-FF1493.svg)</a>
# Vue Storefront Next VirtoCommerce Integration

> **Disclaimer:** This project is still in beta phase.
This repository is a starting point for creating new integrations for [Vue Storefront Next](https://github.com/DivanteLtd/vue-storefront/tree/next).

* [Documentation](https://docs-next.vuestorefront.io/integrate/ecommerce.html#scope) (WIP)
* [Documentation]() (WIP)
* [Demo]() (WIP)


This repository is a monorepo containing three projects:
Expand All @@ -17,11 +15,108 @@ This repository is a monorepo containing three projects:
* **composables** - exposes composable functions used to retrieve data using `api-client` and to map them to universal data formats using `getters`;
* **theme** - `nuxt` project that glues everything together. It extends our core theme and uses `composables` to retrieve data.

## How to start?

1. Change all `@vue-storefront/boilerplate` strings to your integration name (eg `@vue-storefront/super-ecomm`)
The integration is already configured to work with VirtoCommerce live demo site https://demo.virtocommerce.com.

![image](https://user-images.githubusercontent.com/7566324/106896935-eb45a800-66fa-11eb-9c8c-e6af159ea7cb.png)

# Supported features

### Category Page

- [x] I want to see a category tree so I can understand the structure of eCommerce's offer.
- [ ] I want to use filters in category page so I can limit the products visible in the category page.
- [ ] I want to use sorting in the category page so I can change the order of the products to find these easily.
- [x] I want to open the specific category so I can see products inside.
- [x] I want to use pagination in the category page so I don't have to load all the products within the category at once.
- [x] I want to see the prices on the category page so I know how much do I need to pay for the product.
- [x] I want to see the discounts on the category page so I can be attracted by lower prices.

### Navigation

- [x] I want to see the category tree so I can go through the page structure.
- [ ] I want to see breadcrumbs so I can see where I am.

### Product Page

- [x] I want to open a product page so I can see the details of the product.
- [x] I want to add a product to the cart so I can buy that in the next step.
- [x] I want to edit the quantity of the product before adding it to the cart.
- [ ] I want to change the variants of the product so I can easily switch between versions of the same master product.
- [x] I want to see the product gallery so I can see how the product looks like.
- [x] I want to see the prices on the product page so I know how much do I need to pay for the product.
- [x] I want to see the discounts on the product page so I can be attracted by lower prices.
- [ ] I want to have properties pre-selected (like colour, size) when opening the Variant Product Page.
- [ ] I want to see cross-sellings / related under the product.

### Cart

- [x] I want to open the cart so I can see the current state of my shopping basket.
- [x] I can see the totals in the cart so I know the values before I decide on placing an order.
- [x] I want to remove the product from the cart As I do not want to buy it any longer.
- [x] I want to edit the quantity of the product in a Cart Page.

### Checkout (WIP)
- [] I want to proceed to the checkout So I can place the order
- [] I want to be redirected to the thank you page after placing an order.
- [] I want to create a guest order.
- [] I want to select shipping address.
- [] I want to select billing address.
- [] I want to select a payment method.
- [] I want to select a shipping method.
- [ ] I want to apply coupon code.
- [ ] I want to proceed my payment with external service.
### Thank You Page

2. Install all required dependencies:
- [] I want to see the thank you page so I am sure the order was placed successfully.

### User Management

- [x] I want to login as a customer So I can access My Account details and continue shopping as a recognized user.
- [x] I want to logout.
- [ ] I want to register as a new customer So I can later log in to My Account.
- [ ] I want to reset the password So I can get a new one when I forgot the current one.

### Address Management

- [ ] I want to add a new address to the list of my addresses So later I can easily place the orders.
- [ ] I want to delete the existing address from the list of my addresses As I don't want to use it.
- [ ] I want to edit the details of my address So I can fix the eventual mistakes that I made.
- [ ] I want to mark the existing address as default shipping address So I do not have to choose it every order.
- [ ] I want to mark the existing address as default billing address So I do not have to choose it every order.
- [x] I want to see the history of my orders (list) So I can track the status of my shopping experiences.
- [x] I want to see the history of my orders (details) So I can track the status of my shopping experiences.

### Prices / Tax
- [ ] I want to see the prices in the right currency and with applied tax.
- [ ] I want to see applied taxes depending on the selected country / area so I can display price properly.

### Multistores / Currencies / I18n

- [x] I want to change the language of the shop so I can easily understand the content.
- [ ] I want to see translated STATIC content to the language that I set so I can finally read the site in the language that I know.
- [ ] I want to see translated DYNAMIC content to the language that I set so I can finally read the site in the language that I know.
- [ ] I want to change the currency.
- [ ] I want to change the country.

### SEO / SSR
- [x] I want to have pages pre-rendered on server-side.
- [ ] I want to have pretty urls.


## How to start?

1. Open theme/nuxt.config.js
2. Change this line, set the uri where is your Virto platform is running
```JS
//Set with the url where target VC platform is running.
//The VSF/next application is plays a revers-proxy for all incoming requests and proxy to specified url
//this is required to avoid of issues with CORS and in the future hiding the user sensitive data from the client along with
//more flexible routing settings
const vcUpstreamEndpointUri = "https://admin-demo.virtocommerce.com";
```

3. Install all required dependencies:

```sh
yarn install
Expand Down
13 changes: 13 additions & 0 deletions packages/api-client/graphql.codegen.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"schema": "http://localhost:10645/graphql",
"documents": "./src/api/**/*.(graphql|gql|ts)",
"generates": {
"./src/graphql/types.ts": {
"plugins": [
{ "add": { "content": "// This file was generated. Do not edit manually.\n/* eslint-disable */\n" } },
"typescript",
"typescript-operations"
]
}
}
}
18 changes: 17 additions & 1 deletion packages/api-client/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@vue-storefront/boilerplate-api",
"name": "@vue-storefront/virtocommerce-api",
"version": "0.0.1",
"private": true,
"sideEffects": false,
Expand All @@ -13,6 +13,22 @@
"prepublish": "yarn build"
},
"dependencies": {
"@graphql-codegen/add": "^2.0.1",
"@graphql-codegen/cli": "1.17.8",
"@graphql-codegen/typescript": "1.17.8",
"@graphql-codegen/typescript-operations": "1.17.8",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-context": "^1.0.20",
"apollo-link-error": "^1.1.13",
"apollo-link-http": "^1.5.17",
"client-oauth2": "^4.3.3",
"graphql": "^14.5.8",
"graphql-tag": "^2.10.1",
"isomorphic-fetch": "^2.2.1",
"rollup-plugin-graphql": "^0.1.0",
"js-cookie": "^2.2.1",
"@vue-storefront/core": "^2.2.1"
},
"files": [
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import gql from 'graphql-tag';

export default gql`
mutation AddOrUpdateCartPayment($command: InputAddOrUpdateCartPaymentType!) {
addOrUpdateCartPayment(command: $command) {
name
}
}
`;


25 changes: 25 additions & 0 deletions packages/api-client/src/api/addOrUpdateCartPayment/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {
AddOrUpdateCartPaymentMutation,
AddOrUpdateCartPaymentMutationVariables,
CartType,
InputPaymentType
} from '../../graphql/types';
import mutationDocument from './addOrUpdateCartPaymentMutation';

const addOrUpdateCartPayment = async ({ config, client }, cart: CartType, payment: InputPaymentType): Promise<void> => {
const { store, getUserId, currency, locale } = config;
const { data } = await client.mutate({
mutation: mutationDocument,
variables: {
command: {
payment: payment,
storeId: store,
userId: getUserId(),
currency: currency,
language: locale,
}
}
});
};

export default addOrUpdateCartPayment;
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import gql from 'graphql-tag';

export default gql`
mutation AddOrUpdateCartShpment($command: InputAddOrUpdateCartShipmentType!) {
addOrUpdateCartShipment(command: $command) {
name
}
}
`;


25 changes: 25 additions & 0 deletions packages/api-client/src/api/addOrUpdateCartShipment/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {
AddOrUpdateCartShpmentMutation,
AddOrUpdateCartShpmentMutationVariables,
CartType,
InputShipmentType
} from '../../graphql/types';
import mutationDocument from './addOrUpdateCartShipmentMutation';

const addOrUpdateCartShipment = async ({ config, client }, cart: CartType, shipment: InputShipmentType): Promise<void> => {
const { store, getUserId, currency, locale } = config;
const { data } = await client.mutate({
mutation: mutationDocument,
variables: {
command: {
shipment: shipment,
storeId: store,
userId: getUserId(),
currency: currency,
language: locale,
},
}
});
};

export default addOrUpdateCartShipment;
12 changes: 12 additions & 0 deletions packages/api-client/src/api/addToCart/addToCartMutation.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import gql from 'graphql-tag';

export default gql`
mutation AddItem($command: InputAddItemType!) {
addItem(command: $command) {
name,
itemsQuantity
}
}
`;


27 changes: 27 additions & 0 deletions packages/api-client/src/api/addToCart/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import {
CartType,
Product,
AddItemMutation,
AddItemMutationVariables,
} from '../../graphql/types';
import mutationDocument from './addToCartMutation';

const addToCart = async ({ config, client }, cart: CartType, product: Product, qty: number): Promise<CartType> => {
const { store, getUserId, currency, locale } = config;
const { data } = await client.mutate({
mutation: mutationDocument,
variables: {
command: {
productId: product.id,
quantity: qty,
storeId: store,
userId: getUserId(),
currency: currency,
language: locale,
},
}
});
return data?.addItem;
};

export default addToCart;
9 changes: 9 additions & 0 deletions packages/api-client/src/api/clearCart/clearCartMutation.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import gql from 'graphql-tag';

export default gql`
mutation ClearCart($command: InputClearCartType!) {
clearCart(command: $command) {
itemsCount
}
}
`;
23 changes: 23 additions & 0 deletions packages/api-client/src/api/clearCart/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import {
CartType,
ClearCartMutation,
ClearCartMutationVariables,
} from '../../graphql/types';
import mutationDocument from './clearCartMutation';

const clearCart = async ({ config, client }, cart: CartType): Promise<void> => {
const { store, getUserId, currency, locale } = config;
const { data } = await client.mutate({
mutation: mutationDocument,
variables: {
command: {
storeId: store,
userId: getUserId(),
currency: currency,
language: locale,
},
}
});
};

export default clearCart;
Loading

0 comments on commit b1ea206

Please sign in to comment.