Skip to content
Last update: August 27, 2024

Overview

Virto Commerce Frontend is a single-page web application (SPA) with a fresh look on ecommerce solutions. This is where common B2B and B2C scenarios are combined with the most bleeding-edge technologies to deliver blazing-fast and fully functional solutions. It implements common business use cases needed for a vast majority of projects we build.

Virto Commerce Frontend is designed to be used as-is within the actual Virto Commerce Platform. You can modify it by implementing desired components, pages, and shared logic to correspond with your project goals.

Deploy Frontend Application

As of July 2024, Virto Commerce Storefront and Theme have been replaced with the Frontend Application.

Note

Current users now have the following options:

  1. Migrate to the new storefrontless architecture on your own or with our assistance.
  2. Continue using the Storefront with the 1.62 version, which will receive updates until the end of 2024. After that, while it will still be possible to use the Storefront, no further updates will be provided.

The primary objective of the new Virto Commerce Frontend Architecture is to simplify and expedite the development of ecommerce solutions based on the Virto Commerce Platform. This architecture replaces the custom vc-storefront with a standard load balancer, such as nginx or Azure Load Balancer. All business logic previously handled by vc-storefront is now integrated into the Platform through XAPI modules. This change ensures that developing business logic for client applications is now consistent with platform development.

Virto Commerce Frontend (B2B-Theme 2.x) is now a Single Page Application (SPA) stored in static resources. The load balancer is configured to route requests from the client machine to both static content and XAPI endpoints. Additionally, this architecture supports the integration and utilization of third-party SPA applications.

Frontend application

Storefront demo site

Technologies used

  • Vue3: Progressive frontend framework with its key features allowing one to build fast applications.

  • TypeScript: All components and composables have type definitions, so that IDE could help you build clean and working code.

  • TailwindCSS: The most popular and growing CSS framework providing wonderful flexible structure to speed up styling.

  • Husky + ESLint + Prettier: Autoformat, check, and fix your code and prevent ugly code style within repository.

  • Vite: Faster than Webpack, it is used to develop code with HMR benefits and build for production.

  • GraphQL : Use flexible GraphQL queries and mutations to safely work with back end.

Key non-functional features

  • Development Performance: Achieve rapid development using the most effective solution. Deploy the SPA in seconds and start modifying code with HMR features.

  • Client Performance: Reach and maintain high performance metrics as provided by Google PageSpeed Insights.

  • Atomic Design Pattern: Base the UI on Atoms, Molecules, and Organisms, combined within Pages and shared Components for high code reusability.

  • Fully Responsive: Ensure the application works seamlessly on multiple devices, from desktops to mobile phones, providing an excellent UI and UX.

  • Simple Styling and Customization: Use TailwindCSS for straightforward and convenient CSS usage, minimizing code and leveraging a highly customizable framework.

  • Fully Aligned with Virto Commerce Platform: Integrate the SPA with the Virto Commerce Platform to support all common B2B and B2C scenarios.

Key functionalities

The key functionalities include: