Skip to main content

Private Dependencies

There are two private dependencies in Project Zero, which are shop-packages and pz-core packages.

pz-core

In the pz-core package, there are some useful scripts available for developers such as pz-create-app, pz-file-rename, and pz-icon-font, as well as a wrapper for API calls.

pz-create-app

Creates shared Django app layout. It's recommended to install the pz-core package globally in order to use this script. Usage:

pz-create-app

pz-slugify-files

Renames and slugifies all files in given directory path. Example usage:

pz-slugify-files --dir='./assets/svg-icons' --extension='svg'

pz-icon-font

Converts svg files in the given directory to icon font. Example usage:

pz-icon-font --src=./assets/svg-icons --output=./assets/pz-icon-font

API Calls

All API calls are located in the pz-core/src directory as shown below.

All API requests in the package are made via the various service classes, which uses http-client internally. Each service class is essentially a collection of pre-defined requests for specific use cases. Example usage is as follows:

import { UserService } from 'pz-core';

// ...

UserService.login({ email, password });

If there is a functionality you need that is not available inside any of the service classes, you can use their extend function to add your own.

import { UserService } from 'pz-core';

UserService.extend('getAvatar', () => { /* ... */ });

// ...

UserService.getAvatar();

You should use extend methods in a general file which loads early such as layout/index.js. You can then use the method you added in any other file. If you wish, you can also import http-client directly and use it to send requests manually but using services is recommended to keep things organized.

shop-packages

The shop-packages package is mainly used for GTM, Analytics and Redux state management.

GTM

All things related to GTM are in shop-packages/analytics/gtm/index.js. For example, data about the users is created in the identify function and pushed to the data layer.

Redux State Management

Redux is used on two pages in Project Zero. Redux's action, reducer and store configurations used for state management in cart and payment pages are located under the shop-packages/redux directory as shown below. Please check the Redux document for detailed information.