Integrations, woocommerce instructions

## First steps

### Woocommerce instructions

Complete integration instructions with your woocommerce store
 

https://platform.cpbapp.com/route/integration-guide?platform=woocommerce

### Standalone site instructions

Complete integration instructions with your standalone site 

https://platform.cpbapp.com/route/integration-guide

## After installation info 

### Additional integration info of woocommerce plugin:

Plugin settings:

Go to plugins -> Settings. Or go to Settings -> CPB Settings.
 

Use default initializer (optional) -  When enabled, the CPB initializer script will be automatically loaded on product pages. Disable this if you want to use a custom implementation. (checked by default). 
If you disable it, you can integrate where you want: 

<div> <!-- Any container element -->

      <script src="https://app.thecustomproductbuilder.com/cpb/storefront/initializer.js?platform=woocommerce"></script>

</div>

Initializer URL  (optional) -  Custom initializer script URL. Leave empty to use default: https://app.thecustomproductbuilder.com/cpb/storefront/initializer.js?platform=woocommerce

Plugin product settings:

Edit product you want to link with CPB, or linked with CPB -> Enable CPB -> Go to CPB admin

Enable CPB (required) - Enable CPB on this product. Linked CPB product will be open on Woocommerce product page if you linked Woocommerce product with CPB product (instructions: https://platform.cpbapp.com/route/integration-guide?platform=woocommerce)

Go to CPB admin - you can open this product in CPB admin if you linked this product with CPB (instructions: https://platform.cpbapp.com/route/integration-guide?platform=woocommerce), or Creating a new CPB product to link with Woocommerce product will open in CPB admin panel.

Integration script:

You can add the CPB script manually, it.'s neccessary if you start the CPB on standalone site, not on platforms.

```html

<div> <!-- Any container element -->

      <script src="https://app.thecustomproductbuilder.com/cpb/storefront/initializer.js"></script>

</div>

<!-- query params:

        cpb_server - server url, for developers (default: app.thecustomproductbuilder.com)

        cpb_version - version of the cpb, , you can use specific version, for example 4.20.0, for developers (default: latest)

platform - integration platform, default: standalone

        example: <script src="https://app.thecustomproductbuilder.com/cpb/storefront/initializer.js?cpb_server=app.thecustomproductbuilder.com&cpb_version=latest&plarform=woocommerce"></script>

    -->

```

### Admin tools:

Go to Admin Tools by clicking on the left sidebar: 

Store access - stores list, you can swith between your Admin and partner stores.

Shop information - shop info, you can change and add Shop Domain (woocommerce, standalone) you integrated, to this account.

Partner management - add, edit, delete partners by email.

Change checkout method: Default is platform default method, API is your own checkout method with you server.

 

### Product integration settings:

Go to Product in CPB Admin -> Settings -> Integration

You can change the product integration platform and Physical product URL 
Physical product URL - is a main param, it links the CPB product with your site or platform product. On your site product page with Physical product URL, CPB customized product will be open instead of a site product.

### Front API:

You can use Front API to get more control of CPB components:

```javascript

const api = await window.CPB.createFrontApi();

 // Get all CPB redux state (Global Setttings, Product settings, Product custom options etc.)

const state = api.State; // immutable state 

console.log('State:', state);

```

*Examples*

```javascript

const api = await window.CPB.createFrontApi();

const state = api.State;

console.log('State:', state);

// Get base product price

const productPrice = state.Product.base.price;

```

*Actions*

```javascript

const api = await window.CPB.createFrontApi();

// Change product view by view

api.changeViewByName('back');

// Change product view by index

api.changeViewByIndex(1);

// Views navigation 

api.nextView();

api.prevView();

// Change language on product storefront page 

changeLanguage('en') // 'en' -  language ISO code

```

Front API complete guide

### Checkout methods:

API:

You need to add your server url to process orders (API URL field), redirect url after the finishing the order (optional Redirect Url field) and (optional) delay in ms before redirecting to the redirect url (optional Delay field).

Go to Admin Tools on the sidebar => Checkout methods => fill the fields:

API URL, Redirect URL, Delay.

API URL - is required to process orders, cart info with customized product data and images will be sent to your server url

Redirect URL - url to redirec after checkout

Delay - delay between checkout and redirect (ms)

Default:

Is default platform checkout, ex: woocommerce checkout https://platform.cpbapp.com/route/integration-guide?platform=woocommerce