Startseite > Deutsch > Joomla Community Builder Multipage Registration

Joomla Community Builder Multipage Registration

Wie bereits angekündigt möchte ich nun beschreiben wie es möglich ist mit Community Builder eine Registration einzurichten, die sich über mehrere Seiten erstreckt.

Einige Grundlegende Sachen

  1. Gleich zum Anfang eine Warnung: dies ist keine Out-of-the-box Lösung, sondern ein Hack.
  2. Ich versehe alle Änderungen mit Kommentaren um diese wieder zu finden, natürlich können diese enfernt oder weggelassen werden
  3. Ich übernehme natürlich keine Garantie für die Funktion, also erst mal BACKUP machen
  4. die Lösung funktioniert nicht ohne Javascript
  5. bei einer anderen CB Version als 1.2.1 kann alles ganz anders aussehen

Kommen wir nun zum Ablauf

  1. Zunächst installiert man normal die CB Komponente und das CB Login Modul. Ich benutze jeweils die aktuelle Version 1.2.1
  2. im „CB Tab Manager“ werden nun die Tabs angelegt die bei der Registration angezeigt werden sollen.
    • mit „Registration ordering“ die Reihenfolge festlegen
    • „Position“: Main area
    • „Display type“  Tabbed pane
  3. der nächste Schritt ist immer noch nicht ungewöhnlich: im „CB Field Manager“ die gewünschten Felder anlegen
  4. Jetzt gehts los mit hacken in der Datei: components/com_comprofiler/comprofiler.html.php diese Zeile suchen:
    $tabcontent  =    $tabs->getEditTabs( $user, $postvars, $output, 'tabletrs', 'register', false );

    diese Zeile muss ersetzt werden durch:

    //Versuche einer Multipage Registration
    //die Registration als divs anzeigen
    $tabcontent = $tabs->getEditTabs( $user, $postvars, $output, 'divs', 'register', true );
  5. In die Datei: components/com_comprofiler/plugin/templates/default/default.php kommt ab Zeile 222 dieser Code
    <!--
    www.individual-it.net
    22.10.2009
    Versuche einer Multipage Registration
    Javascript zur Ausblendung bzw. Einblendung der aktullen cbtab
    -->
    <script type="text/javascript">
    
    function validate_and_switch_page(thisid,direction)
    {
    var nextid;
    
    for(i = 0; i < CBdivsAry.length; i++)
    {
    
    if (CBdivsAry[i] == thisid && direction=="forward")
    nextid=CBdivsAry[i+1];
    if (CBdivsAry[i] == thisid && direction=="backward")
    nextid=CBdivsAry[i-1];
    
    }
    
    allOK=true;
    var oldclassName;
    $A(document.getElementById("cbcheckedadminForm").elements).each(function(el)
    {
    el = $(el);
    
    if ((el.getTag() == 'input' || el.getTag() == 'select' ) && el.className.match("required") != null)
    {
    
    //validate just this page
    if (el.parentNode.parentNode.parentNode.parentNode.parentNode.id == thisid)
    {
    
    if (el.value.length<=0 || (el.getTag() == 'select' && el.value=='---')   )
    {
    thisOK=false;
    if (el.className.match("invalid") == null)
    el.className = el.className + " invalid";
    }
    else
    {
    thisOK=true;
    oldclassName=el.className;
    el.className = oldclassName.replace(/invalid/g,"");
    }
    
    if (allOK && thisOK)
    allOK=true;
    else
    allOK=false;
    
    }
    
    }
    });
    
    if (allOK)
    //if (true)
    {
    //auf der letzten seite ein "Submit" senden
    if (thisid==CBdivsAry[(CBdivsAry.length-1)] && direction=="forward")
    
    {
    document.getElementById("cbcheckedadminForm").submit();
    }
    else
    {
    document.getElementById(thisid).style.display="none";
    document.getElementById(nextid).style.display="block";
    }
    
    //Back Button nicht auf der ersten Seite anzeigen
    if (nextid==CBdivsAry[0])
    {
    document.getElementById("Back").style.display="none";
    }
    else
    {
    document.getElementById("Back").style.display="block";
    }
    
    }
    
    }
    
    </script>
  6. In der gleichen Datei diese Zeilen suchen:
    // outputs all tabs, including contact tab and Terms & Conditions:
    echo $this->tabcontent;
    
    // outputs conclusion text and different default values:

    diese Zeilen müssen gelöscht und einige Zeilen höher wieder eingefügt werden.
    und zwar oberhalb von:

    ?>
    <table id="registrationTable">
    

    der ganze Abschnitt muss danach so aussehen:

    <?php
     if ( $this->topIcons ) {
     echo '<div id="cbIconsTop">';
     echo $this->topIcons;
     echo '</div>';
     }
     echo $this->regFormTag;        // '<form...>'
    
     // outputs all tabs, including contact tab and Terms & Conditions:
     echo $this->tabcontent;
    
     // outputs conclusion text and different default values:
    ?>
    <table id="registrationTable">
    <?php
     if ( $this->introMessage && ( ! $this->moduleContent ) ) {
    ?>
     <tr>
     <td colspan="2"><?php echo $this->introMessage; ?></td>
     </tr>
    <?php
     }
    
    ?>
     <tr>
  7. Jetzt noch ein wenig CSS. In die Datei: components/com_comprofiler/plugin/templates/default/template.css dieses am Ende einfügen:
    /*Artur Neumann
    www.individual-it.net
    23.10.2010
    der Versuch einer Multipage Registration
    registration table nicht anzeigen
    */
    table#registrationTable    {    display:none; width:98%;    border-width: 0px;    border-collapse: collapse;    margin: 0px;    padding: 0px;    }
  8. Jetz muss noch die CB Klasse angepasst werden. In der Datei administrator/components/com_comprofiler/comprofiler.class.php diese Zeile suchen:
    function endPane( ) {

    in diese Funktion, also zwischen { und } kommt ein wenig Javascript:

    //Artur Neumann
    //info@individual-it.net
    //22.10.2009
    //Versuche einer Multipage Registration
    //alle Tabs, bis auf das erste auf display:none setzen
    
    return '
    <script type="text/javascript">
    
    var liste = document.getElementById("CB");
    var first=0;
    var CBdivsAry;
    listElements = liste.getElementsByTagName("div");
    
    CBdivsAry = new Array();
    for(var i = 0; i < listElements.length; i++)
    {
    if (listElements[i].id.search (/^cbtab\d+/)!=-1)
    {
    CBdivsAry.push( listElements[i].id );
    if (first == 0)
    first=1;
    else
    document.getElementById(listElements[i].id).style.display="none";
    }
    }
    
    //auf der ersten Seite kein Back Button anzeigen
    document.getElementById("Back").style.display="none";
    
    </script>
    </div>';
  9. Und noch ein mal die gleiche Datei (administrator/components/com_comprofiler/comprofiler.class.php)
    Suche die Zeile:

    function endTab( ) {

    und füge hier wieder zwischen { und } diesen Code:

    //Artur Neumann
    //info@individual-it.net
    //22.10.2009
    //Versuche einer Multipage Registration
    //Vor und zurück Buttons anzeigen (nur beim registrieren)
    if ($_GET['task']=='registers')
    {
    return '
    <input type="button" id="Back" value="Back to previous Step" onclick="validate_and_switch_page(this.parentNode.id,\'backward\');">
    <input type="button" id="Proceed" value="Proceed" onclick="validate_and_switch_page(this.parentNode.id,\'forward\');">
    
    </div>';
    }
    else
    return '</div>';
    

Wenn man sich jetzt über das CB Login Modul registriert müsste ein mehrseitiges Formular erscheinen. Würde mich über Feedback freuen.

Kategorien:Deutsch Schlagwörter: , , ,
  1. Phil
    Januar 21, 2010 um 15:49

    Hallo,

    habe versucht das ganze so einzurichten! Habe aber nun in der Registrierung keinerlei Felder angezeigt!

    Vllt liegt das an meinen Einstellungen im Cb Tab Manager! Verstehe nicht woher der Tab Manager weiß, welche daten er dort ablichten soll! Wüsste sonst nicht wodran das liegt!

    Würde mich sehr über Hilfe freuen

    Phil

  2. Februar 16, 2010 um 07:29

    er müsst die Fields anzeigen, die in den jeweiligen Tabs sind und bei
    Registration auf Yes gesetzt wurden.

  3. Januar 18, 2013 um 03:37

    Hi would you mind stating which blog platform you’re working with? I’m planning to start my own blog in
    the near future but I’m having a hard time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something completely unique.
    P.S Sorry for being off-topic but I had to ask!

  1. No trackbacks yet.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: