Claim is a full customizabile product configurator.
Using Claim you can:

• import your images delevoped with graphic software to create your product
• create product made of endless customizable parts
• add more views to show the product
• create full products catalogues
• generate automatic invoices
• customize template
• use your configurator for all device. Claim is full responsive!
• embed your custom configurator in your website

Claim works in layer following the same graphic softwar task, as Photoshop, Illustrator, Indesign, or similar.
You must save overlapping images that make up the product (PNG format with transparency) in img folder, and call back them with link you found in code.
The images overlay will alternate to configure the desired product.
Every image coincide to an product attribute, and can be activate with own attribute button.
A code and a price are associated to every image, and they are useful to generate the automatic summary.
You can create also a product catalog. Every products are connected to each other with tail you found in "catalog" section.
See detailed documentation below.

Claim is a one-page HTML template. Index page reside in the root directory of the template. The page require access to the template's CSS and Javascript files, these files reside within the CSS and JS directories.
Claim is developed using Bootstrap 3.3.7, the most popular HTML, CSS & JS framework, and JQuery javascript library.
Claim folder structure:

• index.html
• css (files: style, custom)
• js (files: navigation, summary, utility)
• img
• icons

Claim is made by "block of code" you can easly edit. Discover below detailed structure.

Claim is based on Bootstrap 3.3.7 and uses the default Bootstrap 12 column grid system for the underlying structure of each section. Each use of the grid should be wrapped in both a container and row element. Below is a Claim structure, a section with two different size columns (2 for tablet and up, 1 for smartphones).

Template grid

            				
<div class="container">
	<div class="row">
		<div class="col-md-8 col-sm-12">...</div>
		<div class="col-md-4 col-sm-12">...</div>
	</div>
</div>
						

In the left column there's product image, in the right column is the slide menu.
For a more detailed explanation of the Bootstrap grid - see the Bootstrap documentation here

Claim installation is simple! You just extract CLAIM - Claim Multi-purpose HTML .zip file and customize one of the demo available inside.
Than you'll need to upload all HTML files along with all directories (css,js,img) in the structure that they appear in your demo package.
Use an FTP client (for example Filezilla) to access your host web server.
Transfer your unzipped files to your server. That's all!

In the left column you can set product. Add a product composed by PNG image subdivise in layer, in img folder and call back these as the exaple below.
Add different ID (in example "shell", "base" and "pillow") for each image row, they are useful to select overlap images(see Attributes and Parts sections)
Left column

            				
<!--left column-->
<div id="desk-sx" class="col-sm-12 col-md-8 tail">
	<img id="shell" src="img/shell-white.png" alt="" class="img-responsive"/>
	<img id="base" src="img/base-golden.png" alt="" class="img-responsive"/>
</div>
						

Slide menu allow you to navigate throw the configurator's sections without lose the product view.
The nav bar is made up of 'row' each function inside the nav bar is useful to open or close sections.
In index.html you can found two functions:

• openNav() - open side menu navigation
• closeNav() - close side menu navigation

These are defined in navigation.js and style.css files.
In the example above you can see the functions apply to menu. OpenNav() go from colors button to colors window and closeNav() come back. Below there's the complete code.

File index.html

            				
<li onclick="openNav()" class="list-group-item col-xs-12">
	<span class="chat-img pull-left">
		<img width="50" class="img-responsive" alt="" src="img/icon-1.svg">
	</span>
	<span>Plastic Shell</span>
	<span class="tab-space"></span><span class="ti-plus"></span>
</li>
							

File navigation.js

            				
function openNav() {
	document.getElementById("mySidenav").style.width = "0%";
	document.getElementById("mySidenav-2").style.width = "100%";
	}
							

File style.css

	
.sidenav {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #5395b1;
	}
.sidenav-2 {
	height: 100%;
	width: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	overflow-x: hidden;
	transition: 0.2s;
	background-color: #5395b1;
	}
						

Set the "block code", as the example above, if you want customize navigation system.

You can set all attributes you want with this "block of code" element.

• First row, first part - there you must link the ID of product part you want switch ,and add the relative image, for example "shell" and "image shell" (see Product section).
• First row, second part - there are three value linked to own function in summary.js file (see also Summary section):
• add ID price, univoque for each attribute
• set data price, is the price of added part
• set data code, is the name show in summary

• Second row - you must assign the image preview of attribute, for example "white"

File index.html

            				
<li onclick="document.getElementById('shell').src='img/shell-white.png'" class="text list-group-item col-xs-12"  id='price1-1' data-price="20.7" data-code="white">
	<span class="chat-img pull-left"><img class="img-circle img-responsive" width="50" alt="" src="img/white.jpg"/></span>
	white<span class="tab-space"><span><span class="ti-plus"></span>
</li>
						

You can change the type of elements, for example the type of chair's legs, if they are wooden or stell legs.
The method is the same for attributes, see the section above.

File index.html

            				
<li onclick="document.getElementById('base').src='img/base-golden.png';" class="text list-group-item col-xs-12" id='price0-1' data-price="50" data-code="wood">
	<span class="chat-img pull-left">
	<img width="50" class="img-responsive" alt="" src="img/icon-10.svg"></span>wood base
	<span class="tab-space"></span>span class="ti-plus"></span>
</li>
						

Thanks to catalog section Claim allow to add infinite product in your template by the product grid.
With this "block of code" you can add a product preview and link it to own product page.

File index.html

	
<div  class="col-xs-6 product-tail frame">
	<img class="image-responsive" alt="" src="img/product-1.jpg"/>
</div>
							

With this "block of code" you can set the price and part number.
The values are taken from attribute and parts rows (see Attributes and Parts section).
The sum is calcutate in summary.js file.

File index.html

            				
<li onclick="closeNav18()" class=" list-group-summary col-xs-8">
	<span class="chat-img pull-left">
		<span class="ti-pencil"></span><span class="tab-space"></span>
	</span>
		Shell:<br>
	<span class="list-group-code" id="code_6"></span>
</li>
<li onclick="closeNav18()" class=" list-group-item col-xs-4">
	<p id='total_5'>0.00 $</p>
</li>
							

You can manage different views. In the below example there are three "block of code", respectively for each views - front, top and back.
You must use the class in each div linked to script in views.js:
.box-view - is the empty box where the other views are shown
.front-view
.top-view
.back-view

File index.html

            				
<!--empty view box--> 
<div class="box-view"></div> 
	<!--front-view--> 
	<div id="desk-sx" class="front-view col-sm-12 col-md-8 tail"> 
	<img src="img/front-image.png" alt="" class="img-responsive"/> 
	<img id="base" src="img/sole-white.png" alt="" class="img-responsive"/> 
	<img id="canvas" src="img/front-canvas-kiwi.png" alt="" class="img-responsive"/> 
	<img id="insert" src="img/insert-red.png" alt="" class="img-responsive"/> 
</div> 
<!--top-view--> 
<div id="desk-sx-side" class="top-view col-sm-12 col-md-8 tail"> 
	<img src="img/top-image.png" alt="" class="img-responsive"/> 
	<img id="base-side" src="img/top-sole-white.png" alt="" class="img-responsive"/> 
	<img id="canvas-side" src="img/top-canvas-kiwi.png" alt="" class="img-responsive"/> 
	<img id="insert-side" src="img/top-insert-red.png" alt="" class="img-responsive"/> 
</div> 
<!--back-view--> 
<div id="desk-sx-back" class="back-view col-sm-12 col-md-8 tail"> 
	<img src="img/back-image.png" alt="" class="img-responsive"/> 
	<img id="base-back" src="img/back-sole-white.png" alt="" class="img-responsive"/> 
	<img id="canvas-back" src="img/back-canvas-kiwi.png" alt="" class="img-responsive"/> 
	<img id="insert-back" src="img/back-insert-red.png" alt="" class="img-responsive"/> 
</div>
							

In the views.js file are called the class above.

File views.js

            				
$(document).ready(function() {    
    $('.animate').bind('click', function() {
         if($(this).hasClass('activetop')) {
         	var $container = $( "div.container" ).replaceWith($top_view);
            $('div.top-view').hide();
            $('div.front-view').hide();
            $('div.back-view').show();
        }
        if($(this).hasClass('activeside')) {
            var $container = $( "div.container" ).replaceWith($top_view);
			$('div.top-view').show();
            $('div.front-view').hide();
            $('div.back-view').hide();
        }
         if($(this).hasClass('activefront')) {
         	var $container = $( "div.container" ).replaceWith($front_view);
            $('div.top-view').hide();
            $('div.front-view').show();
            $('div.back-view').hide();
        }
    });
});
							

Views are changed by utility bar in the left of screen. In the image above the functioning, for detailed code please read utility bar paragraph.

Utility bar, sited in the left on the screen, allow to manage zoom and change views of product.

index.css

            				
<!--utility bar-->
<nav class="navbar navbar-fixed-left navbar-minimal animate">
	<div class="navbar-toggler animate">
		<span class="menu-icon ti-plus"></span>
	</div>
	<ul class="navbar-menu animate">
		<li>
			<a id="zoomIn" class="animate">
				<span class="ti-plus"></span>
			</a>
		</li>
		<li>
			<a id="zoomOut" class="animate">
				<span class="ti-minus"></span> 
			</a>
		</li>
		<li>
			<a data-toggle="tooltip" data-placement="right" title="front view" class="animate activefront">
				<span class="ti-angle-up"></span>
			</a>
		</li>
		<li> <a data-toggle="tooltip" data-placement="right" title="top view" class="animate activetop">
				<span class="ti-angle-right"></span> 
			</a>
		</li>
		<li>
			<a data-toggle="tooltip" data-placement="right" title="back view" class="animate activeback">
				<span class="ti-angle-down"></span>
			</a>
		</li>
	</ul>
</nav>
						

zoom image
For zooming product image you must consider two ID:
- zoomIn
- zoomOut
These are linked to script located in utility.js
utility.js

            				
//zoom image
$(document).ready(function(){
    $("#zoomIn").click(function(){
        var div = $(".tail img");
        startAnimation();
        function startAnimation(){
            div.css({"transform": "scale(1.3)",
					 "-webkit-transform": "scale(1.3)", 
					 "-moz-transform": "scale(1.3)", 
					 "transition": "all 0.3s",
					 "-webkit-transition": "all 0.3s",
					 "-moz-transition": "all 0.3s"});			
        }
    });
});

$(document).ready(function(){
    $("#zoomOut").click(function(){
        var div = $(".tail img");
        startAnimation();
        function startAnimation(){
            div.css({"transform": "scale(1)",
					 "-webkit-transform": "scale(1)", 
					 "-moz-transform": "scale(1)", 
					 "transition": "all 0.3s",
					 "-webkit-transition": "all 0.3s",
					 "-moz-transition": "all 0.3s"});			
        }
    });
});
						

change views
To change views you must link the class, one for each views you need, and linked them to views.js file:
In the exhample below there are three views, with respective class: - activefront
- activetop
- activeback
These are linked to script located in views.js
utility.js

            				
//switch views

$(document).ready(function() {    
    $('.animate').bind('click', function() {
         if($(this).hasClass('activeback')) {
         	var $container = $( "div.container" ).replaceWith($back_view);
            $('div.top-view').hide();
            $('div.front-view').hide();
            $('div.back-view').show();
        }
        if($(this).hasClass('activetop'')) {
            var $container = $( "div.container" ).replaceWith($top_view);
			$('div.top-view').show();
            $('div.front-view').hide();
            $('div.back-view').hide();
        }
         if($(this).hasClass('activefront'')) {
         	var $container = $( "div.container" ).replaceWith($front_view);
            $('div.top-view').hide();
            $('div.front-view').show();
            $('div.back-view').hide();
        }
    });
});
						

Selection function allows to highlight the active tab (ul > li). So it's possibile know the attribute chosed.
Add in the index.html file two class:
.activex - for default selection
.select-1 - for all the others selection. This class must be different for every menu(for example select-1 for menu colors, select-2 for menu size etc..)

File index.html

            				
<ul class="list-group row"> 
	<li onclick="document.getElementById('base').src='img/sole-white.png'" class="text list-group-item col-xs-12 activex select-2" id='price0-1' data-price="20" data-code="basic soles"> 
		<span class="chat-img pull-left"> <img width="50" class="img-responsive img-circle" alt="" src="img/icon-8.jpg"></span>Basic Sole
		<span class="tab-space"></span><span class="ti-plus"></span>
	</li>
	<li onclick="document.getElementById('base').src='img/sole-running-white.png'" class="text list-group-item col-xs-12 select-2" id='price0-2' data-price="60" data-code="racer air sole">
		<span class="chat-img pull-left"> <img width="50" class="img-responsive img-circle" alt="" src="img/icon-9.jpg">
		</span>Racer air Sole <span class="tab-space"></span><span class="ti-plus"></span>
	</li>
</ul>
							

The class above are called in js file, as the example below

File utility.js

            				
//Select Sole
$('li.select-2').click(function(){
    $('li.select-2').removeClass('activex');
    $(this).addClass('activex');
});
							

Claim use custom.css file to customize template.
Ensure that you only make style changes inside custom.css. This will make it much easier to update the template later - you'll only need to preserve your custom.css file.
Go to css/custom.css

You can control the height of the logo using the .top-logo selector in CSS. By default the logo is set to a max-height of 13% of the nav bar. To adjust this add the following code to your custom.css file:

custom.css

            				
.top-logo { height: 13%; }
						

By default, Claim makes use of the Themify icon set (https://themify.me/). Other icons you find into template are custom svg designed. Additionally, you can insert icons from other icon packs.

index.html

            				
<i class="icon ti-twitter"></i>