Enhance the User Experience in E-Commerce Checkouts Using the Stepper Control [Webinar Show Notes]

This blog provides show notes for our Jan. 25, 2023, webinar, “Enhance the User Experience in E-Commerce Checkouts Using the Stepper Control.” The webinar was presented and hosted by Meena Alagiah, software engineer at Syncfusion. If you missed the webinar or would like to watch it again, it is posted on our YouTube channel. Or you can watch it below.

Overview

In this webinar, you will learn how to design a progress indicator to showcase the checkout process for an e-commerce website using our Blazor Stepper component. We’ll also cover the new updates to our Blazor and Essential JS 2 components in the Essential Studio 2023 Volume 4 release.

Timestamps

1. [00:00] Introduction
2. [00:42] Building an E-Commerce Checkout App
3. [09:54] What’s New in Blazor
4. [21:12] What’s New in JS 2
5. [26:09] Closing Notes

What’s New in Blazor and JS 2 for 2023 Volume 4

• The Syncfusion Blazor components seamlessly support the .NET 8 framework, providing access to the newest features, such as rendering modes and web app templates.
• New components
  • Dropdown Tree
  • Data Form
  • Stepper
• Dropdown Tree
  • Multiple selection
  • Data binding
  • Checkboxes
  • Filtering
  • Sorting
  • Templates
• Data Form
  • Create form fields based on the data model.
  • Validation messages can be displayed inline, as summaries, and as tooltips.
  • Form grouping.
  • Automatically generates UI components based on form fields.
• Stepper (Blazor and JS 2)
  • Navigate through a series of steps or stages.
  • Step types
    • Indicator and label
    • Only label
    • Only indicator
  • Orientation
    • Horizontal and vertical
  • Linear flow
  • Tooltips
• Charts
  • Synchronize tooltips, zoom and pan, crosshairs, highlighting, and
    selection across numerous charts.
  • Obtain data points in mouse events.
  • Export to Excel in table formats.
• Circular Gauge (Blazor & EJ2)
  • Gauge elements can be animated one by one to create a smooth appearance.
• Diagram
  • Arrange nodes in a radial tree layout.

• Word Processor [Blazor & EJ2]
  • Ruler in horizontal and vertical orientations for formatting.
• Excel Library
  • Excel Library supports grouping date and time fields in pivot tables based on:
    • Date
    • Month
    • Year
    • Quarter
    • Hour
    • Minute
    • Second
  • Excel and PowerPoint Libraries
    • TIFF image preservation in conversion to images and PDF.
    • Fallback fonts in Excel-to-PDF conversion.
  • Gantt Chart and TreeGrid (Blazor & EJ2)
    • Virtual scrolling allows pre-rendering of extra rows before and after the viewport and reduces the frequency of data requests.
  • DataGrid
    • Freeze the columns in place while scrolling horizontally.
    • The context menu, column menu, and column chooser now adjust their layouts based on the screen size of mobile devices (Blazor & EJ2)
    • Row drag and drop with grouping.
    • Export to a file stream, memory stream, or a blob (Blazor & EJ2).
    • Data table binding with support for filters, sorting, paging, grouping, and CRUD operations.
  • Pager (Blazor & EJ2)
    • Support for displaying page size dropdown in adaptive view layout.
  • Image Editor (Blazor & EJ2)
    • Straightening: align the orientation of images.
  • Linear Gauge (Blazor & EJ2)
    • Text pointer support.
    • Gauge elements can be animated to create a smooth appearance.
  • Maps
    • Maps can now read and render shapes from shape files.

• PDF Library
  • Split PDF documents without sacrificing the integrity of accessibility tags.
  • PDF operations have been improved to reduce the file size.
  • Enhanced digital signature validation.
  • HTML-to-PDF error-handling improvements.

• PDF Viewer
  • Keyboard accessibility (Blazor & EJ2)
    • Mobile-friendly annotation toolbar: add, modify, remove, export, import, or comment on annotations.

• Pivot Table
  • Export both the pivot chart and Pivot Table to a single PDF document.
• Range Selector
  • Export Range Selector data to Excel in a table format.
• Word Library
  • Create mathematical equations by specifying a LaTex string.

Summary

During this webinar, we covered how to design a progress indicator to showcase the checkout flow process for an e-commerce website using our Blazor Stepper component. We also covered the new updates to our Blazor and Essential JS 2 components in the Essential Studio 2023 Volume 4 release. Learn more about Syncfusion’s 2023 Volume 4 updates by exploring the What’s New page. Thank you for reading, and keep an eye out for our future webinars.

Recommended resources (related links)

• Syncfusion Essential Studio 2023 Volume 4 Is Here!
• What’s New in Blazor: 2023 Volume 4
• What’s New in Essential JS 2: 2023 Volume 4