nextime-delivery-date

v1.0.51

Published

6 months ago

For more details regarding Nextime.ai checkout our Site and API docs:

Downloads

0High
0Medium
0Low

mabidoli

vzanza

delivery-date

Nextime API documentation

For more details regarding Nextime.ai checkout our Site and API docs:

nextime-delivery-date Component

The nextime-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 nextime-delivery-date component in your projects.

Quick reference

Using nextime-delivery-date in Vanilla Javascript projects

Before you can use the nextime-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(Under Construction)

Prerequisites

Ensure you have a basic web project setup with HTML and JavaScript. The nextime-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 nextime-delivery-date for the delivery date component itself. Run the following command in your project directory:
```
npm install material-symbols@^0.14.6 nextime-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 nextime-delivery-date Module: Import the nextime-delivery-date module in your JavaScript file or directly in your HTML file inside a <script type="module"> tag.
```
<script type="module">
  import "nextime-delivery-date";
</script>
```

Usage

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

<nextime-delivery-date
    siteId='8',
    apiReadonlyToken='1q2w3e4r5t6y'
    orderDate='2024-05-08T00:00:00+00:00'
    shippingAddress='{
        "street": "2108 S Lamar Blvd",
        "city": "Austin",
        "state": "TX",
        "country": "US",
        "postalCode": "78704"
      }'
    order='{
        "orderId": "2002",
        "items": [
          {
            "id": 773779,
            "productId": "11042",
            "qty": 1,
            "regularPrice": 81.0,
            "salePrice": 76.95
          },
          {
            "id": 946054,
            "productId": "11015",
            "qty": 1,
            "regularPrice": 27.55,
            "salePrice": 27.55
          },
        ],
      }'
></nextime-delivery-date>

<script>
    document.querySelectorAll('.nextime-widget').forEach((widget) => {
        widget.addEventListener('onDateUpdate', function(event) {
            console.log(event.detail);
        });
    })
</script>

Using nextime-delivery-date in Angular Projects

Getting Started

To use the nextime-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 nextime-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 nextime-delivery-date packages using npm. Run the following command in your project root:
```
npm install material-symbols@^0.14.6 nextime-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 nextime-delivery-date component into your Angular application.

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

import 'nextime-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 nextime-delivery-date Component

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


```html
<nextime-delivery-date
    [siteId]='8',
    [apiReadonlyToken]='1q2w3e4r5t6y'
    [orderDate]='2024-05-08T00:00:00+00:00'
    [shippingAddress]='{
        "street": "2108 S Lamar Blvd",
        "city": "Austin",
        "state": "TX",
        "country": "US",
        "postalCode": "78704"
      }'
    [order]='{
        "orderId": "2002",
        "items": [
          {
            "id": 773779,
            "productId": "11042",
            "qty": 1,
            "regularPrice": 81.0,
            "salePrice": 76.95
          },
          {
            "id": 946054,
            "productId": "11015",
            "qty": 1,
            "regularPrice": 27.55,
            "salePrice": 27.55
          },
        ],
      }'
    (onDateUpdate)="handleDateUpdate($event)"
></nextime-delivery-date>

Using nextime-delivery-date in React Projects

Getting Started

Demo

React project (Under Construction)

Prerequisites

Before integrating the nextime-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 nextime-delivery-date packages using npm. Run the following command in your project root:
```
npm install material-symbols@^0.14.6 nextime-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 nextime-delivery-date component into your Angular application.

<nextime-delivery-date
    siteId='8',
    apiReadonlyToken='1q2w3e4r5t6y'
    orderDate='2024-05-08T00:00:00+00:00'
    shippingAddress='{
        "street": "2108 S Lamar Blvd",
        "city": "Austin",
        "state": "TX",
        "country": "US",
        "postalCode": "78704"
      }'
    order='{
        "orderId": "2002",
        "items": [
          {
            "id": 773779,
            "productId": "11042",
            "qty": 1,
            "regularPrice": 81.0,
            "salePrice": 76.95
          },
          {
            "id": 946054,
            "productId": "11015",
            "qty": 1,
            "regularPrice": 27.55,
            "salePrice": 27.55
          },
        ],
      }'
></nextime-delivery-date>

Attributes

siteId: Your Nextime site identifier.
apiReadonlyToken: Your Nextime readonly API token.
orderDate: The order date. Format should be YYYY-MM-DDThh:mm:ss+00:00. Must include the Timezone.
deliveryDate: The delivery date. Format should be YYYY-MM-DDThh:mm:ss+00:00. Must include the Timezone. If this is passed, the component won't do the initial load, as the Delivery Date already exists.
shippingAddress: A JSON containing the destination address, where the order is getting shipped to.
order: A JSON containing details about the order, including the products, quantity, etc.
Note: Ensure the shippingAddress and order JSON string is properly formatted and escaped where necessary.

Order Format

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

OrderId: Unique order identifier.
items: Array of items in the order.
- Each item includes id, productId, qty (quantity), regularPrice, and salePrice.

Shipping Address Format

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.

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;
  }

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Nextime API documentation

nextime-delivery-date Component

Quick reference

Using nextime-delivery-date in Vanilla Javascript projects

Demo

Prerequisites

Installation

Usage

Using nextime-delivery-date in Angular Projects

Getting Started

Demo

Prerequisites

Installation

Integration

Using nextime-delivery-date Component

Using nextime-delivery-date in React Projects

Getting Started

Demo

Prerequisites

Installation

Integration

Attributes

Order Format

Shipping Address Format

Theming