@banoulka/ux-cart v1.0.1
ux-cart
UX-Cart is a cart tracking application that is for a research project answering the question:
\
Contents
Installation
Using npm:
$ npm install @banoulka/ux-cartOnce package is installed a link should be placed in the <head>tag of the html page. Copy and paste the link below:
<script src="<SOURCE>" defer />Bootstrap is optional but increases styles and viewing across all pages, follow bootstrap for their setup.
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>Requirements
To use this product cart application tracker, you need to have a full cart system to provide with. Provide your own buttons out of a possibility of 3.
- Paypal checkout
- Apple pay checkout
- Credit / Debit card system
To set, see options.
Usage
To use the application it should be initialized by the following code.
In javascript a new object can be created and initialised with
const ux = UX.init();Options
Options can be added by passing an object with the different keys setup. A list of options can be seen below.
Options with * can be optional.
To see storageType modes, check modes.
UX.init({
total, // The total amount for the cart
cart, // The list of products as an array
parentId: '', // The page container to render different pages
storageType, // * The storage type for the results.
// Required if using 'api'
endpoint, // * The endpoint for the 'api' storage option.
payCardId: '', // * The paypal button id to use
payAppleId: '', // * The apple pay button id to find
payPaypalId: '', // * The paypal button id to find
});Modes
UX Cart comes with a couple of different options for storage results. See endpoint for what data is sent.
API:
storageType: UX.storeOptions.api
Your own endpoint can be provided that will handle and store the results.
Your api must be able to recieve requests and store them
Local Storage:
storageType: UX.storeOptions.local
The ux cart application can store the results as a json
results object in local storage.
File Download:
The results can be downloaded as a text file
storageType: UX.storeOptions.textFile
or an Excel spreadsheet
storageType: UX.storeOptions.excelFile
Console Log:
The results can be logged to the console for future use
storageType: UX.storeOptions.console
No option:
No option can be selected or the option can be optional
storageType: UX.storeOptions.none
Other:
If you want any other results a function can be called to collect the data as object
const results = UX.collect();
// Collecting the different types of results, JS Destruct
const { error, timeSeconds, modeSelected } = results;Endpoint:
The UX Cart application can process the results in different modes, for each of those a list of what data is sent to the endpoint, localstorage, and as a txt / excel file.
timeSeconds- The amount of time the process tookmodeSelected- The selected payment modeerrors- The amount of times the user went back
Examples
A couple of different example options for the config setup can be seen below.
The first is using the paypal and credit buttons with an api endpoint
UX.init({
total, // The total amount for the cart
cart, // The list of products as an array
storageType: UX.storeOptions.api,
parentId: 'page-container',
payCardId: 'card-btn',
payPaypalId: 'paypal-btn',
});The second is using text download and all 3 buttons
UX.init({
total, // The total amount for the cart
cart, // The list of products as an array
storageType: UX.storeOptions.textFile,
parentId: 'checkout-page',
payCardId: 'buy-debit',
payPaypalId: 'buy-paypal',
payAppleId: 'buy-apple',
});Demo
This cart comes with a demo php server to test the functionality. To start the website navigate to the downloaded folder and run
$ npm run demoto start the webserver and navigate to
localhost:8000/demoTo edit the demo configuration navigate to the demo/checkout.js and edit the UX configuration on line 33
// Initialize the UX class
UX.init({
cart,
total,
storageType: UX.options.console,
endpoint: '/storeResult.php',
payCardId: 'pay-card',
payAppleId: 'pay-apple',
payPaypalId: 'pay-paypal',
parentId: 'page-container'
});