Calculate valid sku, amount, price and detail status of each spec according to selected specs. A front-end JS algorithm for E-commerce product websites.
A demo is worth a thousand words. sku calculator demo, iPhone specs as example
$ npm install @leeboyin/sku-calculator
Define specs that make stock keeping units, such as color, capacity of mobile phone, or departure and arrival stations of train tickets.
- type: Object
- set spec names as object keys
- set spec options in arrays as object values
Stock keeping units, an array of selling units of your products. SKUs are made with combinations of each spec, amount and corresponding price.
- type: Array of sku Objects
Define which spec option(s) are regarded as primary, those SKUs with primary specs are seens as primary SKUs. For example, adult is usually a primary spec if there are several types of ticket for different ages. There are statistics and status for primary SKUs in the calculation result, which exclude non-primary SKUs in the equations.
- type: Object
Define if amount is set in skus. If amount is set, insufficient SKUs are filtered from the equation when the amount in selectionArray is larger than the amounts of skus.
- type: Boolean
- default: false
Define which spec(s) can be selected with multiple values, useful when your users need to order several SKUs at one time. For example, buy two phones of same model in different colors in one order. The statistics and status in the calculation result is the intersection of all selections in selectionArray.
- type: Array
Set selection(s) to the skuCalculator instance, then the output data specStatus, statistics and selectionSpecStatus will be updated. Set spec options and amount selected by your customers in each selection object. Spec options can be partial or complete. Set null to unselected specs. Amount is required if hasAmount is true.
Status of each spec option, changes according to selectionArray dynamically. Status includes:
Statistics contains calculation result of all specs, changes according to selectionArray dynamically. Statistics includes:
specStatus of each selection in selectionArray. You can get status of specs of each selection, result without intersection.
// load SkuCalculator into project;// specsconst specs =depart:'Taipei''Kaohsiung'arrive:'Taipei''Kaohsiung'age:'adult''child';// sku objects made with spec combination, amount and priceconst skus =spec:age: 'adult'depart: 'Taipei'arrive: 'Kaohsiung'amount: 5price: 1000spec:age: 'child'depart: 'Taipei'arrive: 'Kaohsiung'amount: 3price: 500spec:age: 'adult'depart: 'Kaohsiung'arrive: 'Taipei'amount: 4price: 800spec:age: 'child'depart: 'Kaohsiung'arrive: 'Taipei'amount: 2price: 400;// define which spec(s) make sku(s) primaryconst primarySpecs =age: 'adult';// skus data contain amount or notconst hasAmount = true;// define which spec(s) can be selected with multiple valuesconst multiSpecs = 'age';// create SkuCalculator instanceconst skuCalculator =specsskusprimarySpecshasAmountmultiSpecs;// set selected specs and amount (selected by your customers)const selectionArray =amount: 2spec:age: 'adult'depart: 'Taipei'arrive: 'Kaohsiung'amount: 3spec:age: 'child'depart: 'Taipei'arrive: 'Kaohsiung';skuCalculator;// print calculation resultconsole;console;console;