Qpilot-delivery-date NPM

qpilot-delivery-date Component

The qpilot-delivery-date component is a custom web component built using the Lit framework. It is designed to provide a seamless way to display delivery dates for orders on your website. This document guides you through the setup and usage of the qpilot-delivery-date component in your projects.

Getting Started (vanilla javascript project)

Before you can use the qpilot-delivery-date component, you need to ensure that your project environment is set up correctly. This involves installing necessary dependencies and importing the component into your project.

Demo

Vanilla JavaScript project

Prerequisites

Ensure you have a basic web project setup with HTML and JavaScript. The qpilot-delivery-date component requires the Lit framework and material icons for icons display.

Installation

Install Dependencies: You need to install two packages, material-symbols for icons and qpilot-delivery-date for the delivery date component itself. Run the following command in your project directory:
```
npm install material-symbols@^0.14.6 qpilot-delivery-date
```
Import Icons: Add the material icons stylesheet link to the <head> section of your HTML file.
```
<link rel="stylesheet" href="./node_modules/material-symbols/index.css" />
```
Import qpilot-delivery-date Module: Import the qpilot-delivery-date module in your JavaScript file or directly in your HTML file inside a <script type="module"> tag.
```
<script type="module">
  import "qpilot-delivery-date";
</script>
```

Usage

After setting up the component, you can use the qpilot-delivery-date component in your HTML files. Here is an example of how to use it:

<qpilot-delivery-date
    deliveryDate="2024-2-10"
    siteId="8"
    shippingDetails='{
        "OrderId": 11493,
        "shippingAddress": {
            "street": "100 Congress Avenue",
            "city": "Austin",
            "state": "TX",
            "country": "US",
            "postalCode": "78767"
        },
        "items": [
            {
                "id": 41597,
                "productId": "11033",
                "qty": 1,
                "regularPrice": 38.00,
                "salePrice": 36.10
            }
        ]
    }'
></qpilot-delivery-date>

Attributes

deliveryDate: The expected delivery date for the order. Format should be YYYY-MM-DD.
siteId: Your qpilot site identifier.
shippingDetails: A JSON string containing details about the order, shipping address, and items.
Note: Ensure the shippingDetails JSON string is properly formatted and escaped where necessary.

ShippingDetails Format

The shippingDetails attribute should be a JSON string with the following structure:

OrderId: Unique order identifier.
shippingAddress: Object containing shipping address information.
- street: Street address.
- city: City name.
- state: State or region.
- country: Country code (ISO 3166-1 alpha-2).
- postalCode: Postal or ZIP code.
items: Array of items in the order.
- Each item includes id, productId, qty (quantity), regularPrice, and salePrice.

Theming

You can customize the widget using the following css variables:

--theme-primary
--font-primary
--text-primary
--calendar-header-icon-bg
--calendar-header-bg
--calendar-next-day-color
--calendar-prev-day-color
--calendar-next-days-bg
--calendar-prev-next-days-bg
--calendar-main-header-color
--calendar-labels-color
--calendar-curr-days-color
--calendar-labels
--calendar-day
--modal-bg-color

In your css file, provide your custom values:

:host {
    --theme-primary: #df5860;
  }

Using qpilot-delivery-date in Angular Projects

Getting Started

To use the qpilot-delivery-date component in your Angular project, you'll need to install the necessary packages, import the required modules and styles, and then you can easily incorporate the component into your Angular application.

Demo

Angular project

Prerequisites

Before integrating the qpilot-delivery-date component, ensure your Angular project is set up. This guide assumes you have an existing Angular application created and configured.

Installation

Install Dependencies: First, install the material-symbols and qpilot-delivery-date packages using npm. Run the following command in your project root:
```
npm install material-symbols@^0.14.6 qpilot-delivery-date
```
Import Material Icons Style: To use the icons, include the material-symbols stylesheet in your Angular project. Add the path to the stylesheet in the styles array of your angular.json file:
```
"styles": [
    ...
    "./node_modules/material-symbols/index.css"
],
```

Integration

After installing the necessary packages, you can integrate the qpilot-delivery-date component into your Angular application.

Import the Component in app.module.ts: Import the qpilot-delivery-date component in your app.module.ts to ensure Angular recognizes the custom element:

import 'qpilot-delivery-date';

Also, add CUSTOM_ELEMENTS_SCHEMA to the @NgModule decorator to avoid Angular template errors:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  ...
})
export class AppModule { }

Using qpilot-delivery-date Component

With the setup complete, you can now use the qpilot-delivery-date component within your Angular templates. Here's an example of how to use it:

<qpilot-delivery-date
    *ngIf="siteId"
    deliveryDate="2024-2-10"
    siteId="{{ siteId }}"
    shippingDetails='{
        "OrderId": 11493,
        "shippingAddress": {
            "street": "100 Congress Avenue",
            "city": "Austin",
            "state": "TX",
            "country": "US",
            "postalCode": "78767"
        },
        "items": [
            {
                "id": 41597,
                "productId": "11033",
                "qty": 1,
                "regularPrice": 38.00,
                "salePrice": 36.10
            }
        ]
    }'
></qpilot-delivery-date>

delivery-date

@material/button @material/card @material/dialog @material/mwc-circular-progress @material/mwc-linear-progress @material/progress-indicator @material/radio @material/ripple axios lit moment mp-calendar-2 webfontloader

10 days ago

2 months ago

2 months ago

2 months ago

2 months ago