JS Libraries tab

JS Libraries are used to add custom JavaScript files to a template, allowing you to run business logic and control the functionality of the customizer beyond its standard capabilities. This is where all the actual code to render and control the customizer is stored

Essentially, if you need the customizer to perform specific actions like hiding an option when another is selected, setting default values, or creating custom "Add to Cart" functionality - you would use a JS Library.

Key functions of JS Libraries:

• Implementing Business Logic: This is the primary purpose. It includes creating rules and dependencies between elements, such as hiding certain options based on a user's selection.

• Setting Default States: You can use JS to set default values and visibilities for elements when the customizer first loads, ensuring the user starts with a logical set of options.

• Controlling Customizer Functionality: You can write functions to manage actions within the customizer, such as creating a custom "Add to Cart" function.

• Interacting with 3D Model Meshes: You can write JavaScript to directly interact with different parts of a 3D model (called meshes).

For example, you can use .hide() and .show() methods on meshes to make parts of a model appear or disappear, like adding or removing the cage from a helmet based on a user's selection.

Configure a JS Library for a New Template

Here is a step-by-step guide to adding and configuring a JS Library for your template.

1

Create Your JavaScript File

First, you need to write your custom code in a .js file.

1. Write Your Functions: Create the JavaScript functions that will perform your desired business logic. A common approach is to define functions for setting default values and visibilities, and then add event listeners that trigger actions when elements change.

2. Encapsulate and Expose the Function: The entire JavaScript file should be encapsulated within a function. This function is then assigned to the customizer object to make it publicly accessible. This allows the function to be called from anywhere once the customizer has loaded.

3. This makes the setRules function available on the customizer object.

2

Upload the JS File to the JS Library

Once your .js file is ready, you need to upload it to the VU Admin platform.

1. From the Dashboard, navigate to the Customizer > JS Libraries section.

2. Add a new JS library and upload your prepared .js file. This makes the script available to be used in any template.

3

Link the Library to Your Template

Now, you need to connect your uploaded script to the specific template you are building.

1. Navigate to Customizer > Templates and click Edit on the template you wish to configure.

2. Inside the detailed template editor, locate the JS Libraries section.

3. Click to add a new library to the template.

4. From the dropdown or selection menu, choose the JS file you uploaded in Step 2.

4

Define the Run Type

When you add the library to your template, you must specify when the script should execute.

1. Select a Run Type for the library:

   • Run on init: The script will execute when the customizer is first initializing.

   • Run on customizer load: The script will execute after the customizer has fully loaded all its components.

2. This distinction is important because business logic often needs to run after all elements are loaded to avoid errors where a script tries to act on an element that doesn't exist yet.

5

Save and Version

After linking the library and setting its run type, save your changes to the template.

1. Click Save in the template editor.

2. Navigate to the Versioning tab and create a new version to publish your changes and make them live.

By following these steps, you can successfully implement custom code to add advanced functionality and business logic to your customizer templates.