Private Dependencies

In Project Zero's development environment, there are two private dependencies: shop-packages and pz-core packages. These private dependencies contain important elements that help developers create efficient applications. In this guide, we'll explore pz-core, which includes scripts and APIs for extending functionality. We'll also look into shop-packages, which handles Google Tag Manager, Analytics, and Redux state management, all essential for Project Zero.

pz-core​

Stands as a repository of essential scripts, designed to simplify and optimize the development process. Among its offerings are scripts like pz-create-app, pz-slugify-files, and pz-icon-font, alongside wrapper for API calls.

pz-create-app​

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

Usage:

pz-create-app

pz-slugify-files​

When the need arises to rename and slugify filenames within a specified directory, pz-slugify-files can be used.

Example usage:

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

pz-icon-font​

Converts SVG files from a designated directory into an icon font.

Example usage:

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

API Calls​

All API-related activities are located within the pz-core/src directory as given below.

These API requests are orchestrated via various service classes, which, in turn, use the internal http-client. Each service class functions as a repository of predefined requests, each tailored to specific use cases. The following code snippet exemplifies their usage:

import { UserService } from 'pz-core';

// ...

UserService.login({ email, password });

When a need arises for functionality that is not available within the existing service classes, the option exists to extend these services by the addition of custom methods. This can be achieved through the usage of the extend function.

import { UserService } from 'pz-core';

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

// ...

UserService.getAvatar();

It is recommended to use extend methods within a general file, such as layout/index.js, which loads early in the application. Once added, the custom method becomes accessible for use across other files. Alternatively, you have the option to directly import http-client for manual request handling. However, using services is the recommended approach for maintaining orderliness.

shop-packages​

The shop-packages package primarily serving functions related to Google Tag Manager (GTM), Analytics, and Redux state management.

GTM​

For all GTM-related tasks, refer to the file shop-packages/analytics/gtm/index.js. This file includes functions such as the creation of user data within the identify function, which pushes this data to the data layer.

Redux State Management​

Redux is applied to two specific pages within Project Zero: the cart and payment pages. The configuration for Redux, including actions, reducers, and store configurations, is located within the shop-packages/redux directory, as depicted in the directory structure below. For comprehensive details, please check the Redux documentation.