Fabric Library¶
Overview¶
This documentation outlines the steps to create and manage a fabric library using a 360 Display.
The process involves preparing data for the 360 Display, launching the 360 Display, and disabling the 360 Display when necessary.
The implementation utilizes the 360 Display module for a seamless and interactive fabric exploration experience.
1. Preparing Data for Launching the 360 Display¶
JS and CSS imports¶
Add CSS and JS references to your website
<script src="https://libs.intiaro.com/360/configurator/2.5/js/360.min.js" type="text/javascript" charset="UTF-8"></script>
<link href="https://libs.intiaro.com/360/configurator/2.5/css/intiaro360configurator.css" rel="stylesheet"/>
DOM Placeholder¶
Create a placeholder in the DOM with the necessary attributes:
<div id="intiaroFabricLibrary" data-customer-id="IntiaroWLShowcase"></div>
data-customer-id: data-attribute is specific for each integration. Please contact us to get your own customer-id
The 360 Display will be created inside this placeholder element. The viewer will take all available space so make sure to set this element’s position and size exactly where you want it to.
Ensure that the placeholder includes the data-customer-id attribute in addition to the dynamic attributes, such as data-params and data-product-id.
Dynamic data Attributes¶
To enable the launch of the 360 Display with the desired fabric and product, data must be properly prepared and passed to the 360 Display. Two key data attributes are used for this purpose:
data-params: Used for passing product options. In the case of the fabric library, it will be used to pass the fabric identifier
data-product-id: Used for passing the product identifier (or SKU) to display the chosen fabric
JavaScript Implementation¶
The following JavaScript code demonstrates how to set these data attributes dynamically
var fabricLibraryElement = document.getElementById("intiaroFabricLibrary");
fabricLibraryElement.setAttribute("data-params", `demo_fabric:${fabric}`);
fabricLibraryElement.setAttribute("data-product-id", productId);
fabricLibraryElement: Represents the DOM element placeholder for the 360 view.
demo_fabric: Value “demo_fabric” varies and may or may not change depending on a product. Please contact us to get a more specific explanation for your integration
fabric: Represents the chosen fabric ID.
productId: Represents the ID or SKU of the product to be displayed.
2. Launching the 360 Display¶
To initiate the 360 Display, use the IntiaroPlayer.create() method. Pass the ID of the placeholder DOM element as an argument:
await IntiaroPlayer.create("intiaroFabricLibrary");
3. Launching the 360 Display¶
To halt the 360 Display, invoke the global method clearIntiaroInstances(). This method will remove all Intiaro components from the website
4. Switching Fabrics¶
To implement the ability to switch between fabrics, follow these steps:
Disable the current 360 Display.
Prepare the data for the new fabric and product chosen by the user.
Start the 360 display again with the updated data.
Example Implementation¶
For a practical example of the fabric library implementation, refer to the attached code snippet.
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fabric Library</title>
<script src="https://libs.intiaro.com/360/configurator/2.5/js/360.min.js" type="text/javascript" charset="UTF-8"></script>
<link href="https://libs.intiaro.com/360/configurator/2.5/css/intiaro360configurator.css" rel="stylesheet"/>
</head>
<style>
#IntiaroFabricLibrary .silo-shoot-widget {
display: none;
}
.menu{
padding: 0 15px;
}
.menu-title{
font-size: 20px;
font-weight: bold;
margin-top: 25px;
}
ul{
display: flex;
list-style-type: none;
padding: 0;
margin-bottom: 15px;
}
.li-choice{
padding-top: 10px;
padding-right: 10px;
text-decoration: none;
border-radius: 10px;
cursor: pointer;
}
li img{
border-radius: 10px;
margin-bottom: 5px;
height: 100px;
width: 100px;
}
#main{
margin-top: 10px;
width: 1000px;
height: 600px;
}
.main-details{
font-size: 20px;
font-weight: bold;
display: block;
padding: 0 15px;
margin-top: 35px;
}
.nav{
flex-direction: column;
display: flex;
width: 128px;
padding: 0 15px;
}
.nav button{
background: 0;
cursor: pointer;
display: block;
margin-bottom: 15px;
}
#nav-choice-preview{
display: inline-block;
border-radius: 5px;
width: 100%;
height: 100%;
}
.fl-preview{
box-sizing: border-box;
height: 500px;
width: 500px;
}
#fl-img-preview{
height: 500px;
width: 500px;
border-radius:10px;
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 2px 4px -1px rgba(0,0,0,.06), 0 4px 6px -1px rgba(0,0,0,.1);
}
.main-img-preview{
border: none;
}
.img-choice{
border-radius: 10px;
display: flex;
}
.main-img-preview:hover{
transform: scale(1.1);
transition: transform 0.1s ease;
}
.hide{
display: none;
}
</style>
<body>
<div class="menu">
<div class="menu-title">Fabrics gallery</div>
<ul id="menu-embed-fabrics"></ul>
</div>
<div class="main-details">Fabric details page</div>
<main id="main">
<div class="nav">
<button type="button" class="main-img-preview" onclick="showImgPreview()">
<img class="img-choice" id="nav-choice-preview">
</button>
<button type="button" class="img-choice" onclick="showFabric('13934')">
PREVIEW ON SOFA
</button>
</div>
<div class="fl-preview">
<img id="fl-img-preview">
<div id="fl-360-preview">
<div id="intiaroFabricLibrary" data-customer-id="IntiaroWLShowcase" data-product-id="13934"></div>
</div>
</div>
</main>
</body>
<script>
choicesData = [
{
"slug": "demo_1225_91_fabric",
"img": "https://cdn.intiaro.com/media/gen/RAW/t/k/8/s7fmxoyhs_s8rarfhvw.png",
"name": "1225-91"
},
{
"slug": "demo_1302_92_fabric",
"img": "https://cdn.intiaro.com/media/gen/RAW/k/0/8/sxrnuqe-ti1dopafdkq.png",
"name": "1302-92"
},
]
var fabric = ""
choicesData.forEach(item => {
document.getElementById("menu-embed-fabrics").innerHTML += `<li class="li-choice" onclick="showPreview('${item.img}', '${item.slug}')">
<img class="img-choice" src="${item.img}">
${item.name}
</li>`;
});
showPreview(choicesData[0].img, choicesData[0].slug)
var fabricLibraryElement = document.getElementById("intiaroFabricLibrary");
async function showFabric(productId){
document.getElementById("fl-360-preview").classList.remove("hide");
document.getElementById("fl-img-preview").classList.add("hide");
clearIntiaroInstances();
fabricLibraryElement.setAttribute("data-params", `demo_fabric:${fabric}`)
fabricLibraryElement.setAttribute("data-product-id", productId)
await IntiaroPlayer.create("intiaroFabricLibrary");
}
async function showPreview(itemImgUrl, itemSlug){
clearIntiaroInstances();
document.getElementById("fl-360-preview").classList.add("hide");
document.getElementById("fl-img-preview").classList.remove("hide");
fabric = itemSlug
document.getElementById("main").style.display = 'flex';
embedImg("fl-img-preview", itemImgUrl)
embedImg("nav-choice-preview", itemImgUrl)
}
function embedImg(id, img){
document.getElementById(id).src = img;
}
function hideFabric(){
clearIntiaroInstances();
document.getElementById("fl-360-preview").classList.add("hide");
currentFabric = null;
}
async function showImgPreview(){
hideFabric();
document.getElementById("fl-img-preview").classList.remove("hide");
}
</script>