↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

virto-commerce

eCommerce TypeScript

Vue Storefront Next VirtoCommerce Integration

Disclaimer: This project is still in beta phase.

  • Documentation (WIP)
  • Demo (WIP)

This repository is a monorepo containing three projects:

  • api-client – communicates with a backend;
  • 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.

The integration is already configured to work with VirtoCommerce live demo site https://demo.virtocommerce.com.

Supported features

Category Page

  • 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.
  • I want to open the specific category so I can see products inside.
  • I want to use pagination in the category page so I don’t have to load all the products within the category at once.
  • I want to see the prices on the category page so I know how much do I need to pay for the product.
  • I want to see the discounts on the category page so I can be attracted by lower prices.

Navigation

  • 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

  • I want to open a product page so I can see the details of the product.
  • I want to add a product to the cart so I can buy that in the next step.
  • 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.
  • I want to see the product gallery so I can see how the product looks like.
  • I want to see the prices on the product page so I know how much do I need to pay for the product.
  • 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

  • I want to open the cart so I can see the current state of my shopping basket.
  • I can see the totals in the cart so I know the values before I decide on placing an order.
  • I want to remove the product from the cart As I do not want to buy it any longer.
  • 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

  • I want to see the thank you page so I am sure the order was placed successfully.

User Management

  • I want to login as a customer So I can access My Account details and continue shopping as a recognized user.
  • 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.
  • I want to see the history of my orders (list) So I can track the status of my shopping experiences.
  • 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

  • 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

  • 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 
//Set with the url where target VC platform is running. 
//The VSF/next application plays a reverse-proxy for all incoming graphql requests and proxy to specified url where vc platform is running.
//This is mandatory to avoid CORS issues and for more flexible  routing settings for VC platform endpoints.
const vcUpstreamEndpointUri = "https://admin-demo.virtocommerce.com";
  1. Install all required dependencies: 
yarn install
  1. (optional) Then you can verify if everything works properly by building all three projects: 
yarn build
  1. If everything built properly, you can start creating your new integration with: 
yarn dev


↑