User Guide - WgtTelia/Telia-e-shop-front-end GitHub Wiki

Introduction

This guide provides a comprehensive overview of the features and functionalities of the Telia e-shop. It explains the available filters, sorting options, product details, and step-by-step instructions for placing orders, aiming to create an efficient and seamless shopping experience.

Main Page

The main page of the e-shop at https://telia-web-shop.netlify.app/ is designed to provide easy access to products and navigation options across different devices. The layout is responsive, adapting to mobile, tablet, and desktop screens.

wiki_main_paig

Mobile and Tablet View: On mobile and tablet views, product cards take center stage, with buttons labeled 'Filter By' and 'Most Popular' positioned above them. Tapping on 'Filter By' reveals filtering options such as type, brand, price, color, and stock status, while 'Most Popular' opens sorting options including popularity and price.

Untitled1

Desktop View: In the desktop view, all filter and sorting options are visible by default on the main page, providing immediate access. The filter and sorting options are shown on the left side, right next to the product cards.

Untitled2

Each product card presents key information about the item, including images, brand, model, price, and availability, with the option to place an order directly ('Order now' button).

Filtering and Sorting Products

Using Filters

Filters help to narrow down the search and quickly find products based on specific criteria.

Available Filters:

  • Type: Choose between 'Mobile phone' or 'Accessories'.
  • Brand: Filter by brands like Samsung, Xiaomi, Apple, OnePlus, and Sony.
  • Price: Select desired budget range, e.g., 0-100 EUR/month, 100-500 EUR/month, and so on.
  • Color: Narrow down products based on color preferences, e.g., Black, Yellow, Blue, and so on.
  • Stock: View products that are 'In stock', 'Low in stock' or 'Out of stock'.

To apply filters:

Mobile and Tablet View: Tap the 'Filter By' button to display all available filtering options. Once the desired filters are selected, tap 'See results' to view products matching the selected criteria.

wiki_mobile_filter_2

If filtering is not needed, tap 'Close' instead to exit the filter menu without applying changes and returning to the main page.

wiki_mobile_filter_3

Desktop View: Select the desired options from one or more filters on the main page. On the desktop, the page updates automatically to display products matching the selected filter criteria. To remove any of previously selected filters, unselect them and page will refresh automatically.

wiki_desktop_filter_selected_2

Sorting Products

To better fit the preferences, products can be not only filtered, but also sorted.

Sorting Options:

  • 'Most popular': Products sorted based on the number of orders placed.
  • 'Price: highest to lowest': Lists the most expensive items first.
  • 'Price: lowest to highest': Displays the most affordable options at the top.

Mobile View: When clicking on the 'Most Popular' button, a grey field appears at the bottom of the screen with all sorting options. Navigate through the sorting options using the up and down arrows, or directly tap the preferred choice. After selecting, press 'Done' to view the sorted products.

wiki_mobile_sort_2

Tablet View: Clicking on the 'Most Popular' button reveals a grey field with all sorting options directly beneath it. On tablets, selecting a sorting option will instantly update the product list.

wiki_tablet_sort_2

Desktop View: Simply click on the desired sorting option, and the products will be rearranged accordingly.

filter_sorting_selected_desktop_2

Product Cards

Each product card offers a snapshot of key information and interactive elements. image

Product Card Elements:

  1. Product Image: Shows the item in its selected color.
  2. Brand Name and Model: The brand and product name are displayed prominently.
  3. Color Selection Dots: These dots represent different colors available for the product. Clicking a color will update the product image and stock information accordingly.
  4. Short Description: A brief overview of the product’s features.
  5. Price: The current price of the item.
  6. Order Now Button: Click to proceed with purchasing the product.
  7. Stock Information: The product card will display one of three stock statuses:
    • 'In stock': The item is available for immediate purchase.
    • 'Low in stock': Limited quantities remain, and the product may sell out soon.
    • 'Out of stock': The product is currently unavailable for purchase.

wiki_main_paig_2

Placing an Order

Lead Form

To purchase a product, click on the 'Order Now' button on the product card. A lead form will appear with mandatory fields that must be filled out before submitting the order.

Required Fields:

  • Name and Surname: Enter full name.
  • Email Address: Provide a valid email address for order confirmation.
  • Phone Number: Input contact number. After filling in all the mandatory fields, click the 'Place Order' button to submit the order.

Order Confirmation

After submitting the order, a confirmation message will be displayed, confirming successful receipt of the order.

A 'Close' button is available to return to the main page or continue browsing.

wiki_order_2

OpenAI ChatGPT-4 was utilized in the creation of this guide