fff-cart

cart

cart is the application that supports shopping cart include calculating remove/add items, total, shipping fee and etc from your cart, customize and shop. The front end is built in react supported by webpack and backend is supported with ace api built injava.

Example Usage

import GlobalCart from 'fff-cart' 
  
<GlobalCart
  cartData={cartData}
  receiveUpdateCart={receiveUpdateCart}
  env="dev"
/>

Props

This is the list of props you can pass to the cart.

receiveUpdateCart

function(variantId: number, cartDetails: object) | optional

Called when the cart is successfully updated. It should accept the variantId that was updated, as well as the updated cartDetails as parameters. This function is intended to be used in Pandora, so that the sale page containing the cart will reflect the changes made to the cart.

cartData

{ cartVariants: array, cartDetails: object, initialCredits: object, itemsCount: number } | optional

Passed to the cart if available. Otherwise, the cart will make a request to ace-api to get cart data.

• cartVariants must be flattened and formatted correctly using the utility functions exported from the cart, using flattenProducts and getCartVariants
• initialCredits and cartDetails must match the API response to fetch the cart from ace-api (1/carts/campaigns?type=SHOP)
• itemsCount is the total number of items in the cart

env

string | required

options: ["dev", "load", "load01", "qa", "staging", "prod"]

Must be passed to the cart so the cart knows which env it is running in. It is up to you to determine which env your application is running in and pass appropriately. If no env prop is passed, cart will throw and console.log an error.

Exports

flattenProducts

function(products: object)

Accepts an object with product IDs as keys. Returns products, an array of products, and variants, an array of variants. This is used to format the response from ace-api to get the cart.

getCartVariants

function(cartDetails: object, variants: array, products: array)

Maps through list of variants from flattenProducts and adds applicable fields to variants from products and cartDetails. Returns cartVariants.

getCount

function(cartVariants: object)

Accepts list of cart variants and returns count, the total number of items in the cart.

getCartSubtotal

function(cartVariants: array)

Accepts array of cart variants and returns cart subtotal (does not include shipping and tax).

getAllCreditValues

function(subtotal: number, initialCredits: object)

Accepts calculated subtotal from getCartSubtotal and intialCredits from API response. Returns:

• hasInitialPurchaseCredit: boolean: indicates whether or not the user had an intial purchase credit
• remainingCredit: string: amount of purchase credit user has remaining
• initialPurchaseCredit: string amount of purchase credit user had to begin with
• appliedPurchaseCredit: string: amount of purchase credit user has applied to their cart

getShippingAndTax

function(cartVariants: array, cartDetails: object, subtotal: number, initialCredits: object)

Returns:

• hasFreeShipping: boolean indicates whether or not the user has free shipping
• shippingAmount: string shipping amount the user owes
• hasAdditionalShipping: boolean indicates whether or not the user has an additional shipping fee
• remainingSpendToFreeShipping: string amount user has to add to cart to get free shipping
• showShipping: boolean indicates whether or not shipping should be displayed in cart (false if all items in the cart are shipping exempt)
• hasTax: boolean indicates whether or not tax should be display in cart, only true for UK users
• taxLabel: string label to display tax
• taxAmount: string amount of tax the user owes
• total: string total amount the user owes

formatCurrency

function(cents: number)

Formats a number in cents to a string with two decimal points.

develop / getting started

npm dependencies must be installed with the installation script. node and npm can be installed with a command line tool such as homebrew or can be downloaded directly. For the installation script to run successfully you need access to bitsrc.

$ npm install

Run the start script to serve the application in the browser at local.fff-dev.com:80. The port is configurable via webpack if needed.

$ sudo npm start

In your browser, you can now access cart by pointing towards local.fff-dev.com:80

To point the cart to your local ace-api, in src/index.js change

if (process.env.APP_ENV === 'local') {
  ReactDOM.render(<CartContainer env="dev" />, document.getElementById('root'));
}

to

if (process.env.APP_ENV === 'local') {
  ReactDOM.render(<CartContainer env="local" />, document.getElementById('root'));
}

In src/services/apis/request.js, add an authorization header to the request headers: Authorization: 'Bearer [jwtToken]' and comment out the linecredentials: include`

publishing

Run the build script to generate the bundle

$ npm run build

To test package locally, run npm link. Then, in the root directory of the application you would like to import the cart into, run npm link fff-cart You may need to run the following commands (with the correct path) to link the cart to the instances of react and react-dom in the application you are importing the cart into. This is to avoid having duplicate versions of React in the same application.

$ npm link /Users/${username}/code/pandora/node_modules/react
$ npm link /Users/${username}/code/pandora/node_modules/react-dom

To test publishing the package and importing it locally:

//in cart
$ npm pack
$ cp fff-cart-<version>.tgz ~
//in application you are importing cart into
$ npm install ~/fff-cart-<version>.tgz

ES6+

If an ES6+ feature breaks compilation, then that particular feature may need an additional babel dependency requiring both installation and webpack configuration.

Webpack

Webpack configuration can become quite advanced and the best resource will be to refer directly to the webpack configuration documentation.

Integration with FFF Apps

The cart can integarted with the Shop, Customize and Pandora applications.

npm install --save fff-cart

importing into legacy WP Shop

Generate the bundle for the shop by running npm run build:shop. You will have to copy and paste the generated bundle in dist/bundle.js into the wp-content/react/global-cart-webpack-bundle/dist/bundle.js file in the shop repo: https://github.com/fabfitfun/shop-fabfitfun. This needs to be done every time the cart is republished.