Introduction

Here you'll find all the documentation for creating a custom theme for the Zakeke 3D Configurator tool.

How to start

Before starting developing your custom theme, you need to install the library and get parameters from one of the products on which you'll base this theme, in detail:

• install our library (you can find it here) and start your project (in it there is an example if needed);

• Once the localhost page will be open, you need to get parameters to add in the url, the easiest way to retrieve these is to:

  • go to the 3D Configurator backoffice;

  • choose among your products the one you want to use for testing, then go to its Shopping Preview;

  • Inspect the page, find the Zakeke iframe and copy, from its src attribute, the query string parameters, then paste these after the http://localhost:3000/ url;

  • If you'll clone and start the example in the library link above, with the link just built you'll see a basic UI interface, otherwise you'll need to start from stratch build your UI interface;

Elements from the library

The library expose 4 principal elements:

• ZakekeProvider : react component that should wrap your application;
• ZakekeViewer : the react component that'll render your 3D viewer;
• useZakeke : hook from which you'll get the methods and the properties useful for building the theme;

A basic theme in which you'll see only the 3D model would be like this:

<ZakekeProvider environment={zakekeEnvironment}>
	<div>
		<ZakekeViewer />
	</div>
</ZakekeProvider>

Important

In the configurator references of this guide it'll be referred as "composition" the set of all the options chosen among the available ones that will constitute the actual configuration.