Product pages are essential components of any ecommerce platform, regardless of product type. In this post, we will build an ecommerce product page using Vue.js and Kendo UI.
You’ve probably visited several ecommerce sites over the years, so you know how important the product pages are.
A product page is a portion of an ecommerce website that contains information about a particular product. This data could include descriptions, images, pricing, check-out information and reviews, among other things. Ensuring the product page is designed well is key to a good ecommerce site. Luckily, today there are many helpful tools for creating a beautiful ecommerce UI.
Choosing a library for a project might be difficult; however, the library you use will be determined by the type of project you are building.
Kendo UI appears to be the ideal option here because it comes with pre-built components that will be useful in the project.
Kendo UI is an HTML5 user interface framework for creating dynamic and high-performance websites and apps. It comes with a plethora of UI widgets, making creation a breeze.
Kendo UI is self-contained and can be used with many frameworks: React, Vue, jQuery and Angular. Visit the documentation for Kendo UI to get started.
Because of its ready-to-use UI components, it improves scalability and flexibility. By adding only a few lines of code to advanced components like charts, schedules and calendars, Kendo UI has been streamlined to the bare minimum, increasing the urge to use it as a go-to library. In this article, we will build an ecommerce product page using Kendo UI for Vue. Without further ado, let’s dive in.
To follow along with this tutorial, you will need to have:
Let’s start with installing Vue CLI with the command below.
yarn global add @vue/cli
Next, we need to use the following Vue CLI command to create a project. Enter the command below in your terminal.
vue create product-page
The above command will construct a starter template and create a folder called product-page.
Kendo UI for Vue must be installed after creating a starting template because we will use it in the project. Open your terminal and enter the following command to install Kendo UI for Vue.
yarn add @progress/kendo-theme-default @progress/kendo-vue-buttons @progress/kendo-vue-layout
After installation, we need to perform one crucial thing for our program to function correctly. You must navigate to the base of your application, which is your project directory’s main.js file, and add the following code:
We’ll be creating a simple product page that will be informative for any new users who come to the page. The image below shows the design we will be creating in this project.
When writing code, there is one thing you must always keep in mind: the way you structure your code. The scalability of a program is aided by code structure.
For this post, we will be dividing the UI development into three sections—Header Section, Body Section and Cart Section, starting with the header section.
Create a folder called layouts inside the folder src, a sub-folder called Header, and a file called Header.vue inside that subfolder. Inside the file, paste the code below.
All of the application’s required navigation links are arranged inside this Header component. The HTML header tag was intended to act as a container for all other HTML tags included within it. The logo, navigation links and a search field are all included. Internal styling is used in this case, and it is only applied to that component.
If you’ve observed that your output isn’t appearing, it’s because you didn’t link the child component to the parent component. Create a folder called pages inside the src folder, and then a file called Product.vue inside the folder. This Product component accepts all other components that are supplied to it later. Inside the file, paste the code below.
The Header component was imported into the Product component to be rendered, as you can see. Connect the Product component to the main App.vue component, the foundation for all other components. Paste the code below into the App.vue file.
The Product component was imported and registered for use in this instance. You are no longer required to do anything; all other components will be linked to Product.vue, the foundation component.
Using the command below, you can now run your application.
yarn serve
The image below shows our current progress.
The layout is divided into two portions based on the design (left and right). The images on the left are continually changing. Inside the Product.vue file, paste the following code.
The images are retrieved from the assets folder. You can use any set of images, just make sure they are referenced from the assets folder.
The nth-of-type(n) selector matches every element in its parent—the nth-child of a specific type. A number, a keyword or a formula can all be used as n. The image below shows our current progress.
The avatar is a layout component imported directly from @progress/kendo-vue-layout. It has superpowers for displaying images, icons or initials representing people or other entities. The image below shows our current progress.
The right part of the page provides the product name, description and helpful information for the end user. Inside the Product.vue file, update the code with the following:
A parent div was created in the code above to enclose the two-sided parts and render them side by side. It uses grid and flex rules, but in this case, the flex pattern seems more straightforward in this section.
The k-button is a button component imported directly from @progress/kendo-vue-buttons. It is magical for creating buttons quickly. The image below shows our current progress.
The product page application comes to a close with this section. Create a folder called Cart inside the components folder, and then a file called Cart.vue inside the created folder. The Cart component will be passed into the Product component to make rendering easier. Paste the code below into the created file.
The Cart component acts as a counter for any products that the user has added. It maintains track of user products and their quantities.
By the end of this session, we understood what product pages are, why they’re essential in web applications, and how to add a product page section to a web application. I hope you found this guide as beneficial as I did writing it.
Chinedu is a tech enthusiast focused on full-stack JavaScript and Infrastructure engineering.