In this example we will implement tracking for a 360 viewer with multiple variations.
Here is a working example of a detailed add to cart. You can see the html and the code by clicking on the tabs
1. Implementing the viewer.min.js and viewer.css
The first step is to add the viewer.min.js and the viewer.css in your html. It is important that you import the 360 HD Viewer files AFTER your own stylesheets and js files. We recommend you import the stylesheet just before the </head> tag and the viewer.min.js just before the </body> tag, like this:
<!doctype html>
<html lang="en">
<head>
...
<!-- insert viewer.css as the last stylesheet -->
<link rel="stylesheet" href="https://viewer.cylindo.com/3.x/v3.2/viewer.css">
</head>
<body>
...
<!-- insert viewer.min.js -->
<script src="https://viewer.cylindo.com/3.x/v3.2/viewer.min.js"></script>
</body>
</html>2. Specifying HTML elements
The next step to implementing the 360 HD Viewer is to specify where it should be. This is done by specifying an empty html element on your webpage. In this example we will insert a div element with the id: #put-viewer-here. We will also create a div element for the shopping cart with id #my-cart, input element for choosing quantity #product-quantity, div element with class .features which contains the variations of the product, and a Add to Cart button with #add-to-cart id.
The final HTML will look like this:
<!-- Viewer Container -->
<div class="column">
<div id="put-viewer-here"></div>
</div>
<!-- Variation Selector -->
<div class="column small">
<div id="my-cart"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span><span id="item-count">0</span></div>
<div id="product-name">Armchair</div>
<div id="product-price">299.00</div>
<div class="features">
<p class="list-label">Leather</p>
<!-- the data-feature-type attribute is being used when changing features -->
<ul data-feature-type="Fabric Material" class="variation-selector leather">
<!-- the data-feature-value attribute is being used when changing features -->
<li data-feature-value="Cow Hide Black/White" class="variation selected" style="background: url(https://clients.cylindo.com/viewer/latest/documentation/assets/cow-material.jpg)"></li>
<li data-feature-value="Leather Black" class="variation " style="background: #3a3a3a"></li>
<li data-feature-value="Leather White" class="variation" style="background: #f4f4f4"></li>
</ul>
<p class="list-label">Wood</p>
<ul data-feature-type="Wood Material" class="variation-selector wood">
<li data-feature-value="Beechwood 2" class="variation selected" style="background: #5f3b2f"></li>
<li data-feature-value="Beechwood 1" class="variation" style="background: #ab7d5b "></li>
<li data-feature-value="Imubia Wood Glossy" class="variation " style="background: #77422d"></li>
</ul>
</div>
<br>
<span class="list-label">Qty</span>
<div>
<input type="text" id="product-quantity" value="1">
<button id="add-to-cart" type="submit" value="Add to Cart">Add to Cart</button>
</div>
</div> 3. Creating the javascript code
First we need to construct a 360 HD Viewer.
// declare the variable that will hold the 360 HD Viewer instance
var viewerInstance = null;
// the opts object should hold the start properties of the 360 HD Viewer
var opts = {
'accountID': 4404,
'SKU': 'ARMCHAIR',
'features': ["Fabric Material", "Cow Hide Black/White", "Wood Material", "Beechwood 2"],
'country': 'us',
'containerID': '#put-viewer-here',
'thumbs' : false,
}
// make sure the cylindo framework has been "installed"
if (cylindo) {
// do not instantiate the viewer until the framework reports ready.
cylindo.on('ready', function () {
// create the instance
viewerInstance = cylindo.viewer.create(opts);
});
}Next we add events when clicked on the #my-cart and #add-to-cart elements
$('#add-to-cart').click(function(){
var currentFrame = viewerInstance.getCurrentFrameIndex();
viewerInstance.getFrameUrl(currentFrame,128,urlCallback);
});The #add-to-cart click event uses the getCurrentFrameIndex function to retrieve the index of the current frame and then it uses getFrameUrl function to retrieve the current frame URL, so it can be used later in the checkout page.
The getFrameUrl function takes three arguments, first the frame number, the size of the image and a callbackfunction.
The callback function has two arguments url of the image and errorMsg.
function urlCallback(url,errorMsg){
//increment the variable that shows how many items are in cart
itemsInCartCount++;
//get the selected product variations
var leather = $(".leather .selected").attr("data-feature-value");
var wood = $(".wood .selected").attr("data-feature-value");
var feature = leather + "_" + wood;
//get the quantity of the selected variation
var quantity = parseInt($("#product-quantity").val());
//get the current quantity of the items in the cart
var currItems = parseInt($('#item-count').text());
//update the number of cart items
$('#item-count').empty().text( currItems + 1);
//shortens the image url for optimization purpose
var linkSplit = url.split("?");
var link = linkSplit[0].substring(34, linkSplit[0].length);
//set the delimiter variable which is used in the cart page URL
var delimiter = "&f"+itemsInCartCount+"=";
//concatenate the items in cart to a string, so they can be sent in the URL
itemsInCart += delimiter+feature+","+quantity+","+opts.accountID+","+link ;
//set variables for the addToCart function
var currency = 'USD';
var price = 2950;
//You can create a callback function to handle the addToCart
var callback = function (result) {
//The callback will recive a boolean value as a result parameter
//If you receive a true value it means the request was completed successfuly.
alert('Add to cart function result: ' + result);
}
//The current selected variation has been added to the cart with the given price, currency and quantity.
viewerInstance.addToCart(price, currency, quantity, callback);
}On the #my-cart click event it opens up a cart page that shows up items that are added to the cart. In this example this is achieved with the code bellow.
$('#my-cart').click(function(){
window.open('https://viewer.cylindo.com/3.x/latest/documentation/cart.html?name=Armchair'+itemsInCart); });The following code changes the 360 viewer when clicking the leather or wood variations.
//Variation selection handler
$(".variation").click( function() {
$(this).parent().find("li").removeClass("selected");
$(this).addClass("selected");
changeVariation();
});
//Variation Change Handler
function changeVariation() {
var leather = $(".leather .selected").attr("data-feature-value");
var wood = $(".wood .selected").attr("data-feature-value");
var fArray = ["Fabric Material", leather, "Wood Material", wood];
//change the product features
viewerInstance.setFeatures(fArray);
}
Comments
0 comments
Please sign in to leave a comment.