Introduction
This guide will help you embed configurator for Simple VOX collection on Your website.
To see how it works visit the demo
Necessary steps to start embedding configurator
To run configurator on Your website You need to contact our sales manager and give the address of website on which You want to embed configurator.
Then we will send you a spreadsheet (Excel format) with a request to complete the prices that are to be displayed in the configurator on Your website.
Embedding configurator on Your website
Implementation of the product list page
First of all, you need to implement a subpage, which will display a list of products available for configuration in our configurator.
Downloading the list of products from the Simple VOX collection available for configuration is done by calling the address:
https://configurator-simple.vox.pl/list
In response is returned a list of products in json format, containing basic data such as: product_id, name, type, category, main image url, arrangement image url.
You can implement getting the product list on both the frontend and the backend of your site.
Example of downloading a list of products from a PHP backend:
<?php
function simpleVoxConfiguratorGetProducts()
{
$simple_vox_configurator_url = 'https://configurator-simple.vox.pl/list';
$simple_vox_configurator_client_url = 'https://meble.vox.pl' //CHANGE TO YOUR SITE URL;
$ch = curl_init($simple_vox_configurator_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Origin: ' . $simple_vox_configurator_client_url,
));
if (curl_exec($ch) === false) {
$simple_products = false;
} else {
$simple_products = json_decode(curl_exec($ch), true);
}
return $simple_products;
}
$simple_products = simpleVoxConfiguratorGetProducts();
?>
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Product List Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.product {
border: 1px solid #CCC;
margin: 10px 0px 10px 0px;
}
h4.name {
height: 50px;
}
div.img {
height: 260px;
padding: 10px;
}
div.img img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="content">
<div class="container">
<div class="row"><?php
foreach($simple_products as $product) {
$xhtml = '<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 product">';
$xhtml .= '<div class="img"><img src="'.$product['image_main'].'"/></div>';
$xhtml .= '<h4 class="name">'.$product['name'].'</h4>';
$xhtml .= '<p><a href="/simple-product?id='.$product['product_id'].'" class="btn btn-info">Configure</a></p>';
$xhtml .= '</div>';
echo $xhtml;
}
?></div>
</div>
</div>
</body>
</html>
Example of downloading a product list from the frontend in JavaScript::
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Product List Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.product {
border: 1px solid #CCC;
margin: 10px 0px 10px 0px;
}
h4.name {
height: 50px;
}
div.img {
height: 260px;
padding: 10px;
}
div.img img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="content">
<div class="container">
<div class="row" id="simple_vox_configurator_products">
</div>
<script>
$.get( "https://configurator-simple.vox.pl/list", function( products ) {
$(products).each(function( index ) {
var _products_wrraper = $('#simple_vox_configurator_products');
xhtml = '<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 product">';
xhtml = xhtml + '<div class="img"><img src="' + $(this).attr('image_main') + '"/></div>';
xhtml = xhtml + '<h4 class="name">' + $(this).attr('name') + '</h4>';
xhtml = xhtml + '<p><a href="/simple-product?id=' + $(this).attr('product_id') + '" class="btn btn-info">Configure</a></p>';
xhtml = xhtml + '</div>';
_products_wrraper.append(xhtml);
});
});
</script>
</div>
</div>
</body>
</html>
Implementation of the product configurator page
First You will need to include following third-party free libraries:
- Bootstrap ver. 4.3.1 (https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css, https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.js)
- Fontawesome ver. 5.8.2 (https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css)
- JQuery ver. 3.4.1 (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js)
- JQuery Unveil ver 1.3.0 (https://cdnjs.cloudflare.com/ajax/libs/unveil/1.3.0/jquery.unveil.min.js)
Second You will need to include configurator libraries:
- VOXSimpleWidget.css - https://configurator-simple.vox.pl/css/VOXSimpleWidget.css
- VOXSimpleWidget.css - https://configurator-simple.vox.pl/js/VOXSimpleWidget.min.js
After that, just copy and paste the code below to run the configurator on your page.
<script>
function SaveFurniture(value) {
console.log(value);
}
var simpleConfig = {
productId:18851,
apiConfigurationUrl : 'https://configurator-simple.vox.pl/config',
callbackSaveFurniture:SaveFurniture,
}
var simpleWidget = $("#simple-widget").simpleWidget(simpleConfig);
</script>
Please note that the `productId` parameter should contain the product id for which the configurator is to be loaded (the `productId` is one of the attributes provided in the data returned when downloading the product list).
In the `callbackSaveFurniture` parameter you can implement the action which will be performed when user click the `add to cart` button - input parameter of this function is Json object with full current configuration of the product.
Below is a complete example of embedding the configurator.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple VOX Configurator Product</title>
<!-- THIRD PARTY LIBRARY -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unveil/1.3.0/jquery.unveil.min.js"></script>
<!-- CONFIGURATOR SIMPLE VOX LIBRARY -->
<link href="https://configurator-simple.vox.pl/css/VOXSimpleWidget.css" rel="stylesheet" >
<script src="https://configurator-simple.vox.pl/js/VOXSimpleWidget.min.js"></script>
</head>
<body>
<div class="content">
<div id="simple-widget"></div>
</div>
<script>
function SaveFurniture(value) {
console.log(value);
}
var simpleConfig = {
productId:18851,
apiConfigurationUrl : 'https://configurator-simple.vox.pl/config',
callbackSaveFurniture:SaveFurniture,
}
var simpleWidget = $("#simple-widget").simpleWidget(simpleConfig);
</script>
</body>
</html>