xactsize-webcomponents

xactsize-webcomponent

A lightweight Web Component for precise body measurements and size recommendations in web applications, built with Lit.

Installation

With NPM

npm install xactsize-webcomponent

<body-measurer
        culture="pt-BR"
        product-name="Shirt"
        skus='[{"dimensions":{"Size":"M"},"measures":{"height":50,"length":70,"width":40}}]'
></body-measurer>
<script>
    import { BodyMeasurer } from 'xactsize-webcomponent';

    // Select the body-measurer element
    const bodyMeasurer = document.querySelector('body-measurer');

    // Check if the element exists
    if (bodyMeasurer) {
        // Add event listener for measurementAccepted
        bodyMeasurer.addEventListener('measurementAccepted', (e) => {
            const size = e.detail.size;
            alert(`Size selected: ${size}`);
            console.log('Measurement accepted:', e.detail);
        });

        // Add event listener for measurementCanceled
        bodyMeasurer.addEventListener('measurementCanceled', (e) => {
            alert('Measurement canceled');
            console.log('Measurement canceled');
        });
    } else {
        console.error('body-measurer element not found');
    }
</script>

With CDN

<body-measurer culture="pt-BR" product-name="Calça Legging" skus='[{"dimensions":{"Size":"S"},"measures":{"height":39,"length":78,"width":78}},{"dimensions":{"Size":"M"},"measures":{"height":40,"length":82,"width":82}}]'></body-measurer>
<script type="module" src="https://cdn.jsdelivr.net/npm/xactsize-webcomponents@1.0.6/dist/body-measurer.es.js"></script>

<script>
    // Select the body-measurer element
    const bodyMeasurer = document.querySelector('body-measurer');

    // Check if the element exists
    if (bodyMeasurer) {
        // Add event listener for measurementAccepted
        bodyMeasurer.addEventListener('measurementAccepted', (e) => {
            const size = e.detail.size;
            alert(`Size selected: ${size}`);
            console.log('Measurement accepted:', e.detail);
        });

        // Add event listener for measurementCanceled
        bodyMeasurer.addEventListener('measurementCanceled', (e) => {
            alert('Measurement canceled');
            console.log('Measurement canceled');
        });
    } else {
        console.error('body-measurer element not found');
    }
</script>