Documentație pentru dezvoltatori

Tot ce ai nevoie pentru a integra configuratorul nostru 3D

Ghid de pornire rapidă

1. Includeți scriptul

Adăugați scriptul componentei web în HTML-ul dvs.:

<!-- Add to your HTML <head> -->
<link rel="modulepreload" crossorigin="anonymous" 
      href="https://configuratorwebcomponent.netlify.app/assets/preload-helper.D3MTsGSl.js">
<script type="module" crossorigin="anonymous" 
        src="https://configuratorwebcomponent.netlify.app/assets/main.js"></script>

2. Adăugați componenta

Plasați componenta configuratorului unde doriți să apară:

<product-configurator 
  data-layout="classic"
  data-mobile-layout="mobile-bottom-nav"
  data-theme="light"
  data-tenant-secret="your-tenant-secret"
></product-configurator>

3. Configurați opțiunile

Personalizați configuratorul pentru a se potrivi nevoilor dvs. folosind atribute de date.

Atribute componentă

data-layout

Controlează aspectul general al configuratorului

Type: string

Options: "classic", "modern", "minimal"

Default: "classic"

data-mobile-layout

Aspect pentru dispozitive mobile

Type: string

Options: "mobile-bottom-nav", "mobile-side-nav", "mobile-overlay"

Default: "mobile-bottom-nav"

data-theme

Tema de culoare a configuratorului

Type: string

Options: "light", "dark", "ocean", "sunset", "forest", "royal", "red"

Default: "light"

data-tenant-secret

Cheia API unică (obligatorie)

Type: string (UUID)

Required: Yes

data-product-id

Produs specific de afișat (opțional)

Type: string

API JavaScript

Accesarea configuratorului

Obțineți o referință la elementul configuratorului:

const configurator = document.querySelector('product-configurator');

Schimbarea temei programatic

// Change theme
configurator.setAttribute('data-theme', 'dark');

// Or use the method (if available)
configurator.setTheme('ocean');

Ascultarea evenimentelor

// Listen for configuration changes
configurator.addEventListener('configuration-changed', (event) => {
  console.log('New configuration:', event.detail);
});

// Listen for add to cart
configurator.addEventListener('add-to-cart', (event) => {
  console.log('Added to cart:', event.detail);
  // Integrate with your e-commerce system
});

Obținerea configurației curente

// Get current product configuration
const config = configurator.getConfiguration();
console.log(config);

// Returns:
// {
//   productId: "abc123",
//   selectedOptions: {
//     color: "red",
//     size: "large",
//     material: "wood"
//   },
//   price: 299.99
// }

Integrare framework

React / Next.js

import { useEffect, useRef } from 'react';

function ProductPage() {
  const configuratorRef = useRef(null);

  useEffect(() => {
    const configurator = configuratorRef.current;
    
    const handleAddToCart = (event) => {
      console.log('Add to cart:', event.detail);
      // Your cart logic here
    };
    
    configurator?.addEventListener('add-to-cart', handleAddToCart);
    
    return () => {
      configurator?.removeEventListener('add-to-cart', handleAddToCart);
    };
  }, []);

  return (
    <product-configurator
      ref={configuratorRef}
      data-layout="classic"
      data-theme="light"
      data-tenant-secret="your-secret"
    />
  );
}

Vue.js / Nuxt

<template>
  <product-configurator
    ref="configurator"
    data-layout="classic"
    data-theme="light"
    data-tenant-secret="your-secret"
    @add-to-cart="handleAddToCart"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const configurator = ref(null);

const handleAddToCart = (event) => {
  console.log('Add to cart:', event.detail);
};

onMounted(() => {
  // Additional setup if needed
});
</script>

JavaScript Vanilla

<product-configurator
  id="myConfigurator"
  data-layout="classic"
  data-theme="light"
  data-tenant-secret="your-secret"
></product-configurator>

<script>
  const configurator = document.getElementById('myConfigurator');
  
  configurator.addEventListener('add-to-cart', (event) => {
    console.log('Add to cart:', event.detail);
    // Add to your shopping cart
  });
</script>

Ai nevoie de ajutor?

Echipa noastră tehnică este aici pentru a ajuta cu integrarea și personalizarea.

Contactează suportul