Uso

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apirocket@_VERSION_/dist/ecommerce.css">
<script src="https://cdn.jsdelivr.net/npm/apirocket@_VERSION/dist/ecommerce.js" defer></script>

Inicializar el ecommerce

    document.addEventListener('apirocket.ecommerce.ready', (event: EcommerceReadyEvent) => {

        event.ecommerce.config (EcommerceConfig)
    });

Actions

• cart-add-item
• cart-open
• customer-account
• checkout-open
• sales-account

EcommerceReadyEvent

interface EcommerceReadyEvent extends Event {
    ecommerce: PublicEcommerceService
}

PublicEcommerceService

type PublicEcommerceService = {
    customer: CustomerService,
    cart: CartService,
    config: (value: EcommerceConfig) => void
}

EcommerceConfig

type EcommerceConfig = {
    countryIso?: string;
    debug?: DebugType | Array <DebugType> = '';
    defaultPriceListId?: number;
    customerFilterType: '' | 'B2B' | 'B2C' = '';
    ecommerceId: string;
    locale?: string: 'es' | 'en' | 'de' | 'fr';
    logo?: string;
    legalLinks?: LegalLinks;
    pricesTaxIncluded?: boolean = true;
    stage?: Stage = 'production';
}

Eventos

• apirocket.ecommerce.updateEvents
• apirocket.cartitem-loaded

CartItemLoadedEvent

Se lanza por cada ítem del carrito cuando su componente está disponible en el DOM. El target del evento es el contenedor disponible para customizar

interface CartItemLoadedEvent extends CustomEvent {
    detail: CartItem;
}

document.addEventListener('apirocket.cartitem-loaded', (event: CartItemLoadedEvent) => {
    const item = event.detail;

    // ...
});

DebugType

type DebugType = 'all' | 'analytics'

LegalLinks

type LegalLinks = {
    refundPolicy?:  LegalLink,
    privacyPolicy?: LegalLink,
    termsAndConditions?: LegalLink
}

type LegalLink = {
    label?: string;
    link?: string;
}

CustomerService

interface ReadOnly <CustomerService> {
    acceptEmailMarketing: boolean;
    email: string;
    firstName: string;
    id: number;
    lastName: string;
    phone: string;
    type: 'B2B' | 'B2C';
    isLogged: boolean;

    countries: () => Promise <Array <Countries>>;
    createBillingAddress: (input: Omit <BillingAddress, 'id'>) => Promise <BillingAddress>;
    createShippingAddress: (input: Omit <ShippingAddress, 'id'>) => Promise <ShippingAddress>;
    deleteShippingAddress: (id: number) => Promise <boolean>;
    login: (email: string, password: string) => customer.login (email, password): { status: number, token?: string, customer?: CustomerData };
    logout: () => customer.logout ();
    myAccount: () => Promise <CustomerAccount>;
    price: (productId: number) => Promise <ProductPrice>;
    orders: (filter: OrdersFilter = {}) => Promise <Array <Order>>;
    order: (id: number) => Promise <Order>;
    states: (countryId: number) => Promise <Array <State>>;
    subscribe: (cb: (customer: CustomerService) => void);
    updateMyAccount: (input: InputUpdateAccount) => Promise <boolean>;
    updatePassword: (oldPassword: string, newPassword: string) => Promise <boolean>;
    updateBillingAddress: (input: BillingAddress) => Promise <BillingAddress>;
    updateShippingAddress: (input: ShippingAddress) => Promise <ShippingAddress>;
}

CustomerData

type CustomerData = {
    acceptEmailMarketing: boolean,
    email: string,
    firstName: string,
    id: number,
    lastName: string,
    phone: string,
    type: CustomerType
};

CartService

interface ReadOnly <CartService> {
    count: number;
    country: Country;
    numItems: number;
    taxAmount: number;
    taxBase: number;
    total: number;
    units: number;

    add: (data: CartAddItem) => void;
    clear: () => void;
    close: () => void;
    items: () => Array <CartItem>;
    open: (fullScreen: boolean) => void;
    removeItem: (item: any) => void;
    setCountryIso: (iso: string) => void,
    subscribe: (cb: (cart: CartService) => void);
    updateItem: (item: any, quantity: number) => void;
}

Tipos

type CartAddItem = {
    cartFullScreen?: boolean;
    customPayload?: any;
    id: number;
    description?: string;
    groupProduct?: boolean;
    image?: string;
    name?: string;
    url?: string;
    quantity: number;
}

type CartItem = {
    id: number;
    product: {
        barcode: string;
        category: {
            id: number,
            name: string
        },
        description: string;
        id: number;
        image: string;
        name: string;
        noShippingCost: boolean,
        sku: string,
        stockManagement: boolean,
        url: string;
        weight: number;
    },
    itemPrice: {
        comparePrice: number;
        comparePriceTaxAmount: number;
        comparePriceTaxBase: number;
        taxAmount: number;
        taxBase: number;
        // taxes
    }
    priceTaxBase: number;
    priceTaxAmount: number;
    quantity: number;
    uuid: string;
}

type ShippingAddress {
    address: string;
    address2?: string;
    city: string;
    country: { id: number; name?: string; iso?: string };
    description: string;
    firstName: string;
    id: number;
    lastName: string;
    phone: string;
    postalCode?: string;
    state: State
}

type State = {
    name?: string;
    id: number;
}

type InputUpdateAccount = {
    acceptEmailMarketing: boolean;
    firstName: string;
    lastName: string;
    phone: string;
}

interface CustomerAccount {
    acceptEmailMarketing?: boolean;
    billingAddress?: BillingAddress;
    custom?: any;
    email?: string
    firstName?: string;
    lastName?: string;
    phone?: string;
    shippingAddress?: Array <AccountShippingAddress>;
}

interface BillingAddress {
    address: string;
    address2: string;
    city: string;
    country: Country
    default: boolean;
    description: string;
    id: number;
    name: string;
    phone: string;
    postalCode: string;
    state: State;
    taxCode: string;
}

interface AccountShippingAddress {
    address: string;
    address2: string;
    city: string;
    country: Country;
    default: boolean;
    description: string;
    firstName: string;
    id: number;
    lastName: string;
    name: string;
    phone: string;
    postalCode: string;
    state: {
        name: string;
        id: number;
    }
}

interface ProductPrice {
    comparePrice: number;
    comparePriceTaxBase: number;
    comparePriceTaxAmmount: number;
    taxAmount: number;
    taxBase: number;
    taxes: Array <any>;
}

interface Order extends CustomerOrder {
    billingAddres; OrderBillingAddress;
    cartTaxAmount: number;
    cartTaxBase: number;
    customer: OrderCustomer;
    customerOrder: string;
    date: string;
    discount: Array <OrderDiscount>;
    geolocation: OrderGeolocation;
    id: number;
    items: Array <OrderItem>;
    notes: string;
    number: string;
    payment: OrderPayment;
    pricesTaxIncluded: boolean;
    shippingAddress: OrderShippingAddress;
    shippingMethod: OrderShippingMethod;
    status: OrderStatus;
    totalTaxAmount: number;
    totalTaxBase: number;
    total: number;
}

interface OrderBillindAddress {
    address?: string;
    address2?: string;
    city?: string;
    country?: Country;
    description?: string;
    id?: number;
    name?: string;
    phone?: string;
    postalCode?: string;
    state?: { id: number; name: string };
    taxCode?: string
}

interface  OrderCustomer {
    code: string;
    email: string;
    id: number;
    isLogged: boolean;
    name: string;
    phone: string;
    priceList: { id: number; name: string }
    type: 'B2B' | 'B2C';
}

interface OrderDiscount {
    codes: Array <any>;
    taxAmount: number;
    taxBase: number;
    total: number;
}

interface OrderGeolocation {
    browser: { name: string, version: string };
    city: string;
    continent: string;
    country: string;
    device: { type: string; model: string; vendor: string };
    ip: string;
    lat: number;
    lon: number;
    os: { name: string; version: string };
    postalCode: string;
    region: string;
    remoteAddress: string;
    timeZone: string;
    userAgent: string;
    userIsp: string;
}

interface OrderItem {
    id: number;
    price: number;
    priceTaxAmount: number;
    priceTaxBase: number;
    product: OrderProduct;
    quantity: number;
    taxes: any;
}

type OrderPayment = {
    authorization: string;
    method: {
        id: number;
        name: string;
        type: PaymentType;
        notes: string;
        description: string;
    }
    total: number;
}

interface OrderProduct {
    barcode: string;
    category: {
        id: number,
        name: string
    },
    description: string;
    id: number;
    image: string;
    name: string;
    noShippingCost: boolean,
    sku: string,
    stockManagement: boolean,
    url?: string;
    weight: number;
}

type OrdersFilter = {
    page?: number;
    perPage?: number;
}

interface OrderShippingAddress {
    address?: string;
    address2?: string;
    city?: string;
    country?: Country;
    description?: string;
    email?: string;
    firstName?: string;
    id?: number;
    lastName?: string;
    phone?: string;
    postalCode?: string;
    state?: { id: number; name: string };
}

interface OrderShippingMethod {
    description: string;
    id: number;
    name: string;
    taxAmount: number;
    taxBase: number;
    taxes: Array <any>;
    total: number;
}

type OrderStatus = {
    id: number;
    name: string;
    color: string;
}

Ejemplo

document.addEventListener('apirocket.ecommerce.ready', (event: EcommerceReadyEvent) => {

    event.ecommerce.config ({
        ecommerceId: 'ECOMMERCE_ID',
        debug: 'all',
    })
});