Como funciona

Cadastro e Acesso

Menu principal do painel administrador

Configuração de Loja

Configurações disponíveis:
- Logo
- Loading GIF (imagem de carregamento)
- Currencies (Moedas) - impacta nas configurações de "Preço" (Princing)
- Default Currency (Moeda padrão)
- Languages (Idiomas) - impacta nas configurações de "Tradução" (Translations)
- Default Language (Idioma padrão)

---

Configuração de Produto

Listando os produtos configurados para a loja:


Customizando um novo produto: (botão: "New product")
Para personalizar um produto, a loja precisa selecionar um produto pré-configurado.
O sistema possuí alguns produtos genéricos disponibilizados para todas as lojas.
Caso o usuário não encontre o produto desejado, ele pode solicitar um orçamento para o cadastro.
Após selecionar um produto, o usuário deve:
- Definir um nome
- SKU / código de produto - opcional
- quantidades
- status

Depois é preciso configurar cada parte personalizada do produto:
- Nome da parte
- Quantidade Min/Máx (Não utilizado)
- Opções de personalização (Botão "Add")

Observação:
- Parte sem "opção" (serão ignoradas, não aparecerá como um passo no player)
- Parte com apenas 1 "opção" (será definida como "padrão", não aparecerá como um passo no player)
- Mais de 1 "opção", o usuário terá opção de escolher

Para cada "Opção" de personalização, é preciso configurar:
- Tipo
- Nome (Nome da cor ou textura, ex. Azul, Vermelho, Dourado, Onçinha)
- SKU (necessário se a opção tiver um preço adicional)
- Effects (efeitos: transparencia, brilho, metal, repetição da textura, rotação da textura)



Observação:

Temos 2 forma de definir preços, exemplo:
1- Xícara (sku: "", preço: "")
    - Cor:Branca (sku: "branco" preço: 30)       
    - Cor:Azul (sku: "azul" preço: 32)       
    - Cor:Dourada (sku: "dourado" preço: 45)

2- Xícara (sku: "cod_xicara", preço: 30)
    - Cor:Branca (sku: "branco" preço: -1)       
    - Cor:Azul (sku: "azul" preço: 2)       
    - Cor:Dourada (sku: "dourado" preço: 15)

Configuração de Preços

Tela para definir preços, nela temos:
- SKU (código do produto)
- Informações de onde é encontrado o SKU: Produto (parte:opção)
- Colunas para cada moeda definida pela loja (ver configuração de loja)

Tradução

Tela para definir traduções:

Projetos

Tela para visulizar o projetos finalizados:

Configuração de Player

Após personalizar um produto, o usuário pode gerar o código para incluir no seu site (botão "code" na listagem de produtos).

O código gerado:

                    
<div id="player3d" style="width: 100%; height: 100%;"> </div>
<script type="text/javascript" src="/assets/player/x9player.js"></script>
<script type="module">
    var x9player = X9Player("#player3d", {
        /* obrigatórios */
        token:"XXXXXXXXX",  //token do seller
        product:10,         //id do produto
        
        /* opcionais */
        //project:26,           //utilizado para Visualização/Edição de projeto existente
        //code:"my-id-123",     //campo para a loja identificar o projeto (edita se existir)
        //email:"my-mail@site.com",  //campo para a loja identificar o cliente
        
        //preview:true,         //Abre o player no mode visualização
        //language: "en",
        //currency: "USD",  //define a moeda padrão
        //style:"dark",     //define o estilo do player
        //layout:"default", //caso o cliente tenha um layout diferente
        //fullscreenOnStart: true,
        //backgroundColor: "#000000",   //default: transparent
        //background: "https://image",  //default: transparent
        //ft:50, //frames (taxa de atualização)

        onFinish: function(data) {
            $("#result").html(JSON.stringify(data, null, 3));
        }
    });
</script>
                                        

Ao finalizar um projeto, a função onFinish, retorna:

{
    "project": {
        "id": 1234,
        "code": "6503a4c1b0757",
        "email": "my-mail@site.com",
        "thumb": "https://x9-player.s3.us-east-2.amazonaws.com/project/1/2023/09/15/10_42.png",
        "product_id": 10
    },
    "currency": {
        "symbol": "$",
        "code": "USD",
        "name": "US Dollar",
        "decimals": 2,
        "separator": ".",
        "thousand_sep": ","
    },
    "items": [
        {
            "SKU": "xxxxx",
            "name": "Product",
            "price": 49
        },
        {
            "SKU": "zzzzz",
            "name": "Blue",
            "price": 2
        }, 
        ...
    ]
}