How To Build A Product Configurator

How to build a production configurator

Sirv tin help yous build a product customization tool, assuasive your customers to configure a production earlier they identify an order.

Users volition instantly encounter what the product looks like when they change the options.

Demo

Stone Oval Round Stone size 1ct 2ct Setting Setting color Band Ring color

Decide which images you need

If your production has just a few possible combinations, it's usually easiest to create one paradigm for each combination. If your production has hundreds of possible combinations, you'll need a faster and more flexible solution.

This article describes how to use transparent PNGs, to modify merely the part of the paradigm which changes. By layering images upon each other, the configurator can create any possible combination.

The demo above contains 6 configurable options, with a total 144 possible combinations. Each combination is shown from three different angles, and then 432 unique images would be needed, versus only 42 images using the transparent PNG technique.

Create your PNG images

Use a photo editing or 3D modelling program to export all the parts of your product which tin change. Each image should have a transparent groundwork and should contain only that particular part of the image. You'll need i of every possible variable.

7 of the 42 demo images are shown below:

Each of your images should be named in a predictable way, so that your script can request the correct image.

Create your image gallery

Create an instance of Sirv Media Viewer containing your images. This example has 3 images:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script> <div class="Sirv" id="smv"> <div data-src="https://demo.sirv.com/demo/sirv-media-viewer/schubach/images/Shank_1_White_View_1.png?watermark=/demo/sirv-media-viewer/schubach/images/Clear_Oval_1ct_Head1_White_View1.png"></div> <div data-src="https://demo.sirv.com/demo/sirv-media-viewer/schubach/images/Shank_1_White_View_2.png?watermark=/demo/sirv-media-viewer/schubach/images/Clear_Oval_1ct_Head1_White_View1.png"></div> <div data-src="https://demo.sirv.com/demo/sirv-media-viewer/schubach/images/Shank_1_White_View_3.png?watermark=/demo/sirv-media-viewer/schubach/images/Clear_Oval_1ct_Head1_White_View1.png"></div> </div>

Create a form with options

Design your user interface however you'd like it to expect. You might provide thumbnail images for the user to click or you might provide form elements such as radio buttons or a dropdown menu.

Here is a radio button from the demo above:

<div class="color-selector text"> <b>Stone</b><br> <characterization class="checked"><input checked name="stone_shape" blazon="radio" value="Oval"> Oval</label> <label><input name="stone_shape" type="radio" value="Round"> Round</label> </div>

Apply watermarks to the paradigm URLs

When your user changes an pick in the grade on your page, you should use JavaScript to change the paradigm URL. It's piece of cake to do this with the Sirv Media Viewer API.

Depending on the complication of your configurator and the experience of your web developer, you might also like to utilise a framework such as jQuery to speed up evolution. The example below uses jQuery:

<script src="https://lawmaking.jquery.com/jquery-2.2.iv.min.js"></script>  <script> var $maxIndex = 0;  function updateItems() {     const $viewer = Sirv.getInstance('#smv');     var $base_images = [],         $watermarks = [],         $images = [];     var $index = $('.smv-item.smv-agile').index();      $viewer.removeAllItems()      for (var $i = 0; $i < three; $i++) {         $watermarks[$i] = '/demo/sirv-media-viewer/schubach/images/Clear_' + $('[proper noun="stone_shape"]:checked').val() + '_' + $('[name="stone_size"]:checked').val() + '_' + $('[proper name="setting"]:checked').val() + '_' + $('[proper name="setting_color"]:checked').val() + '_View' + ($i + one) + '.png';         $base_images[$i] = 'https://demo.sirv.com/demo/sirv-media-viewer/schubach/images/' + $('[name="band"]:checked').val() + '_' + $('[name="band_color"]:checked').val() + '_View_' + ($i + 1) + '.png';         $images[$i] = 'https://demo.sirv.com/demo/sirv-media-viewer/schubach/images/' + $('[name="band"]:checked').val() + '_' + $('[name="band_color"]:checked').val() + '_View_' + ($i + 1) + '.png?watermark=' + $watermarks[$i] + '&watermark.scale.width=100%';     }     for (var $i in $images) {         $viewer.insertItem(             $('<div information-result="zoom" data-src="' + $images[$i] + '"></div>').get(0)         );     }     $viewer.jump($alphabetize) }  $(document).ready(function() {     $('.color-selector input').on('click', function() {         updateItems();         $(this).closest('.color-selector').observe('label').removeClass('checked')         $(this).closest('label').addClass('checked')     }) }) </script>

View the fully-functional standalone demo:

https://demo.sirv.com/demo/sirv-media-viewer/schubach/schubach_7.html

Source: https://sirv.com/help/articles/build-product-configurator/

Share this post