@prestashopcorp/billing-plans NPM

About The Project

PrestaShop Billing Plans is a web component library that aims to provide a set of reusable components to use to display your plans in your module.

Using the Web Components

Prerequisites

A package manager like NPM, yarn or pnpm

Installation

For the moment this package is private
To install it you must configure a .npmrc file in your project

//registry.npmjs.org/:_authToken=YOUR_NPM_RO_SQUAD_TOKEN
@prestashopcorp:registry=https://registry.npmjs.org/

You can ask the IT for a NPM read only token for your squad if you don't have a NPM Token

# chose your favorite package manager
# NPM
$ npm install @prestashopcorp/billing-plans --save
# Yarn
$ yarn add @prestashopcorp/billing-plans
# pnpm
$ pnpm install @prestashopcorp/billing-plans

Usage

On demand import (recommended)

Import the Web component in the JS file your are using for your module and define a new customElement

import { BillingPlan } from '@prestashopcorp/billing-plans'

customElements.define("billing-plan", window.billingPlans.BillingPlan);
customElements.define("billing-plan-feature", window.billingPlans.BillingPlanFeature);

Then add the web component to your template

<billing-plan plan-id="builtforps-advanced" name="Plan Advanced" price="1000">
  <div slot="features">
    <billing-plan-feature>Feature 1</billing-plan-feature>
    <billing-plan-feature>Feature 2</billing-plan-feature>
    <billing-plan-feature>Feature 3</billing-plan-feature>
  </div>
</billing-plan>
<billing-plan plan-id="builtforps-ultimate" name="Plan Ultimate" price="3000">
  <div slot="features">
    <billing-plan-feature>Feature 1</billing-plan-feature>
    <billing-plan-feature>Feature 2</billing-plan-feature>
    <billing-plan-feature>Feature 3</billing-plan-feature>
    <billing-plan-feature>Feature 4</billing-plan-feature>
  </div>
</billing-plan>

ℹ️ Web components can use the same props as Vue components

ℹ️ You must handle the translation of feature and plan name by yourself

Usage without bundler

Copy paste the following code snippet in your html file

<head>
  <!-- Import component library -->
  <script src="//unpkg.com/@prestashopcorp/billing-plans"></script>
</head>

You can access to all of the components by using the billingPlans global object

vue

@everything-registry/sub-chunk-736

0.0.2

11 months ago

0.0.1-test

1 year ago

0.0.1

1 year ago