widget.js

Widget αυτόματης συμπλήρωσης εταιρείας

Ενσωματώσιμο πεδίο για φόρμες: αναζητήστε με ονομασία ή CUI, επιλέξτε εταιρεία και συμπληρώστε τα πεδία του πελάτη.

https://demoanaf.ro/widget.js

Vanilla JS, Shadow DOM, χωρίς React

Ανακάλυψη

Αναζητά εταιρείες με βάση ονομασία μέσω του ευρετηρίου ONRC και δέχεται αριθμητικό CUI απευθείας.

Αυτόματη συμπλήρωση

Συμπληρώνει συνήθη πεδία με βάση τα χαρακτηριστικά `name`, `id` ή `data-demoanaf-target`.

Αντιστοίχιση

Επιτρέπει ρητή αντιστοίχιση χρησιμοποιώντας τους selectors του ιστότοπου που ενσωματώνει το widget.

Ζωντανό demo

Το παρακάτω widget συμπληρώνει τη φόρμα δοκιμής αφού επιλεγεί εταιρεία.

actual widget.js

Φόρτωση widget…

Αυτόματη ενσωμάτωση

Συνήθη πεδία όπως `company_name`, `cui`, `company_address`, `locality`, `county` ανιχνεύονται αυτόματα εντός της ίδιας φόρμας.

JavaScript

<form>
  <div data-demoanaf-cui></div>

  <input name="company_name" />
  <input name="cui" />
  <input name="registration_number" />
  <input name="company_address" />
  <input name="locality" />
  <input name="county" />
</form>
<script src="https://demoanaf.ro/widget.js" async></script>

Ρητή αντιστοίχιση

Για checkouts και CRM με προσαρμοσμένα ονόματα πεδίων, περάστε τους selectors στο `fields`.

JavaScript

<div id="demoanaf-company"></div>

<input id="billing-company" />
<input id="billing-cui" />
<input id="billing-address" />

<script src="https://demoanaf.ro/widget.js"></script>
<script>
  DemoANAF.init('#demoanaf-company', {
    fields: {
      name: '#billing-company',
      cui: '#billing-cui',
      address: '#billing-address'
    }
  });
</script>

Ρύθμιση εμφάνισης και λεπτομερειών

Από προεπιλογή το widget εμφανίζει την κάρτα εταιρείας μετά την επιλογή. Για συμπαγή checkouts, το `showDetails: false` αφήνει μόνο αυτόματη ολοκλήρωση + αυτόματη συμπλήρωση. Το `compact` και το `badge` είναι opt-in.

JavaScript

DemoANAF.init('#demoanaf-company', {
  showDetails: false,
  compact: true,
  placeholder: 'Caută firma pentru facturare...',
  badge: {
    enabled: true,
    text: 'Firmă verificată'
  },
  styles: {
    primary: '#003B73',
    primarySoft: '#E6EEF5',
    background: '#ffffff',
    text: '#111827',
    border: '#d1d5db',
    focusBorder: '#003B73',
    radius: '8px'
  }
});

Κανονικοποιημένο payload

Η κανονικοποίηση είναι απενεργοποιημένη από προεπιλογή. Όταν ενεργοποιηθεί, το widget γράφει κανονικό JSON σε ένα υπάρχον ή νεοδημιουργηθέν κρυφό πεδίο στη φόρμα.

JavaScript

DemoANAF.init('#demoanaf-company', {
  normalize: {
    enabled: true,
    name: 'demoanaf_company_json'
  }
});

// Creează sau completează:
// <input type="hidden" name="demoanaf_company_json">

Συμβάν client

Μετά τη συμπλήρωση, το widget εκπέμπει `demoanaf:prefill` με την κανονικοποιημένη εταιρεία και τη λίστα των συμπληρωμένων πεδίων.

JavaScript

document
  .querySelector('#demoanaf-company')
  .addEventListener('demoanaf:prefill', (event) => {
    console.log(event.detail.company);
  });