Přizpůsobení komponenty flbProfile

extraDiv

Komponenta flbProfile může být použita s parametrem extraDiv nastavený na all. Při použití hodnoty "all" se nezobrazuje přihlašovací formulář, ale pouze tlačítko pro přihlášení a veškerý rendering se provádí do separátního DIVu. Pro nalogovaného uživatele se zobrazuje pouze jeho Jméno, Příjmení a E-mail. Až po kliknutí na uživatele se zobrazí extra DIV. Nehcete-li zobrazovat E-mail uživatele a nechat zobrazovat jen Jméno a Příjmení, tak je možné použít nasledující CSS styl

div.flb_profile_fullname span.email { display: none; }

Počítání, zobrazování a validace počtu znaků v uživatelském atributu

Flexbookový uživatelský profil umožňuje mít poskytovatelem definované specifické atributy. V případě, že je potřeba mít v uživatelském atributu text o nějaké minimální nebo maximální délce, tak se může hodit následující validační metoda.

Návod na validaci uživatelského atributu před uložením profilu:

• CSS styl se musí dělat pro každý takový atribut zvlášť, protože id elementu je unikatní

• nahraďte <id_atributu> id-čkem, které má textarea uživatelského atributu

• nahraďte <tvuj_placeholder_kam_se_vklada_guiProfile> id-čkem divu v HTML, kam se vkladá profil

<style>
span#<tvuj_placeholder_kam_se_vklada_guiProfile>_attr_<id_atributu>_span { display: block; float: left; margin-left: 3px; }
</style>

• v JavaScriptu je potřeba udělat stejné náhrady jako v CSS stylech

<script type="text/javascript">
  function countChar(textarea) {
    var len = textarea.value.length;
    $('#<tvuj_placeholder_kam_se_vklada_guiProfile>_attr_<id_atributu>_span').html(len);
  };

  $(document).ready(function() { 
    $('<tvuj_placeholder_kam_se_vklada_guiProfile>').on('focus', '#<tvuj_placeholder_kam_se_vklada_guiProfile>_attr_<id_atributu>', function(event) {
      countChar(this);
    });
    $('#<tvuj_placeholder_kam_se_vklada_guiProfile>').on('keyup', '#<tvuj_placeholder_kam_se_vklada_guiProfile>_attr_<id_atributu>', function(event) {
      countChar(this);
    });

    $('#<tvuj_placeholder_kam_se_vklada_guiProfile>').on('click', '#<tvuj_placeholder_kam_se_vklada_guiProfile>_flb_registration_finish', function(event) {
      var len = $('#<tvuj_placeholder_kam_se_vklada_guiProfile>_attr_<id_atributu>').val().length;
      if ((len<10)||(len>50)) {
        alert(\'Spatna textarea!\');
        event.stopImmediatePropagation();
      }
    });
  });
</script>

Změna defaultních nastavení hodnot při registraci uživatelského profilu

Flexbookový uživatelský profil ohsahuje standardní a poskytovatelem definované atributy. Profil se vytváří během registrace uživatele. Příklad registrace profilu je na obrázku níže. Standardní atributy jsou například "Email", "Křestní jméno", "PSČ", "Chci dostávat obchodní informace", apod. Poskytovatelem definovaný atribut je na níže uvedeném screenshotu atribut "GDPR souhlas".

Defaultní nastavení atributu "Chci dostávat obchodní informace" je zaškrtlý. _Pozn.: V boudoucnu se defaultní hodnota tohoto konkrétního atributu může změnit. _V případě, že je požadováno defaultní hodnotu změnit, tak je možné použít níže uvedenou metodu.

$(document).ready(function() {
  (function ($) {
    $.each(['show', 'hide'], function (i, ev) {
      var el = $.fn[ev];
      $.fn[ev] = function () {
        this.trigger(ev);
        return el.apply(this, arguments);
      };
    });
  })(jQuery);

  $('#profile').on('show', '#profile_flb_profile', function() { 
    console.log('Showing registration DIV....');

    $('#profile_flb_registration_advertising').attr('checked', true); 
  });
});

První funkce (function ($)) je potřeba, aby bylo možné zaregistrovat jinou funkci na "show" udalost. Druhá fukce už registruje konkrétní akci na událost, když se objeví flbProfile. Víše uvedený příklad počítá s DIVem, použitým pro flbProfile, který má ID "profile". Viz. kód níže.

<script>
flbInit('https://www.flexbook.cz/ajax.php', @@PROVIDER_ID(), [
{ type: 'flbProfile', placeHolder: 'profile', params: { language: 'cz', buttons: ['login','sendPassword','logout','profile','password','reservation','registration','credit'], format: { datetime: 'd.m. H:i', time: 'H:i' }, checkAttributeMandatory: 1, extraDiv: 'all', externalAccount: 1, disablePast: 1, hideAdvertising: 0, } }
]);
</script>

...

<div id="profile"></div>

...

V případě jiného IDčka DIVu, nahraďte "profile" i v listener funkci. V případě, že je DIV pro profil pojmenován jako "PRF" ...

  <div id="PRF"></div>

pak JavaScript listener funkce bude vypadat následovně ...

$(document).ready(function() {
  (function ($) {
    $.each(['show', 'hide'], function (i, ev) {
      var el = $.fn[ev];
      $.fn[ev] = function () {
        this.trigger(ev);
        return el.apply(this, arguments);
      };
    });
  })(jQuery);

  $('#PRF').on('show', '#PRF_flb_profile', function() { 
    console.log('Showing registration DIV....');

    $('#PRF_flb_registration_advertising').attr('checked', true); 
  });
});