Catalog Form // Custom Template

[mogio]

Hallo,

also ich habe ein sehr sehr customized Form für die Eingabe von Catalog Items zu erstellen.

Ich habe die folgenden 2 Template files gefunden:

- mod_catalogedit.tpl.xhtml
- catalog_edit.tpl.xhtml

Ich habe mir beide Templates und das PHP angeschaut aber das einzige was man anpassen kann ist alles vom <FORM> - tag nach aussen.
Die Field Elemente selbst werden in einem grossen String erzeugt...
Ich muss aber auf diese Felder zu greifen - wo mache ich das?

Innerhalb der Templates müsste ich doch wenigstens irgendwie auf ein Array mit den Values zugreifen können oder?

Bitte um Hilfe
Gruss
mogio

[webster]

Vor dem Problem stand ich auch schon häufiger und hätte da ebenfalls großes Interesse an einer Lösung. Denn so wie es aussieht, wird das HTMK direkt in der Klasse ModuleCatalogEdit erzeugt.

Bisher habe ich mir immer mit ganz dreckigen str_replace / preg_replace Konstrukten geholfen. Aber schön ist das nun wirklich nicht!

[MacKP]

Ja, leider kann man da nicht sooo viel machen. Es gibt ein dev Template, wo man sehen kann, wie man das (wenigstens zum Teil) lösen kann.
Aber auch da: das ganze wird von Contao generiert....

Viele Grüße

[mogio]

verdammt es gibt keine Lösung?

dann muss ich also ein eigenes Form bauen und die Daten selber validieren - krass...

Naja - Gottseidank ist es in diesem Fall ein "just create" Form.
Aber es wird der Tag kommen an dem ich auch eine designte Edit Variante brauche!

Gibt es denn wirklich kein Objekt oder Ähnliches um auf die Daten zuzugreifen? Muss ich die Daten selber aus der Datenbank ziehen?
es muss doch Wege geben an die Felder Daten zu kommen?... Dann könnte man wenigstens Selber validieren.

Wo liegt denn dieses Dev Template?

Echt unverständlich für mich dass noch nie jemand darüber nachgedacht hat Katalog Formulare zu themen.
Diese Lösung ist wirklich sehr unprofessionell. Welches Unternehmen/Kunde soll einem denn solch ein HTML
abnehmen? Ich meine ich muss ein Fomular für eine Versicherung erzeugen welches über mehrere Pages geht.
Ich hatte vor das über jQuery und hidden divs zu lösen.. aber jetzt graut es mir schon davor. Ich dachte immer
die Stärke von Contao wär die Anpassbarkeit und die Trennung von View und Script ... naja Schade!

[MacKP]

ah, sorry. beim Template hab ich mich mit den Filtern verhauen.
Das catalog_edit_tableless.xhtml sollte schon weiter helfen. Bringt aber auch erst mal nur ne allgemeine Vorlage mit.

Ich weiß jetzt auch nicht wie du darauf kommst, das man nu alles selber machen muss. Ich weiß, das viele auch bei der Eingabe sehr komplexe Dinge machen. Lindesbs hat das mal sehr extrem modifiziert (ich meine ich hatte dazu auch mal ein Ticket gemacht mit seinem Code). So oder so ist in der SVN Version mehr möglich als in der ER Version.

Viele Grüße

[mogio]

Hi Mac

Danke für deinen Post.

bezüglich der "catalog_edit_tableless.xhtml"

.. ich weiss nicht wo Du dieses Template findest?
Ich kann über die Layout > Templates > (" Ein neues Template erstellen")
jene Datei nicht im Select finden - also auch kein Template Dafür einrichten.

Im Modul selber finde ich im Templates Folder auch jene Datei nicht.
Wo hast die denn her?

Gruss
mogio

[mogio]

okay...
ich hab mir die Datei jetzt von GoogleCode gezogen und in dem ModTemplate Ordner gelegt.
Allerdings bekommen ich bei der Auswahl des Templates folgende Fehlermeldung:

#0 /Applications/MAMP/htdocs/monoki_member/templates/theme_monoki/catalog_edit_tableless_kunden_pr.xhtml(9): __error(2, 'Invalid argumen...', '/Applications/M...', 9, Array)
#1 /Applications/MAMP/htdocs/monoki_member/system/libraries/Template.php(246): include('/Applications/M...')
#2 /Applications/MAMP/htdocs/monoki_member/system/modules/frontend/FrontendTemplate.php(49): Template->parse()
#3 /Applications/MAMP/htdocs/monoki_member/system/modules/catalog/ModuleCatalogEdit.php(921): FrontendTemplate->parse()
#4 /Applications/MAMP/htdocs/monoki_member/system/modules/frontend/Module.php(140): ModuleCatalogEdit->compile()
#5 /Applications/MAMP/htdocs/monoki_member/system/modules/catalog/ModuleCatalog.php(143): Module->generate()
#6 /Applications/MAMP/htdocs/monoki_member/system/modules/catalog/ModuleCatalogEdit.php(367): ModuleCatalog->generate()
#7 /Applications/MAMP/htdocs/monoki_member/system/modules/frontend/ContentModule.php(72): ModuleCatalogEdit->generate()
#8 /Applications/MAMP/htdocs/monoki_member/system/libraries/Controller.php(489): ContentModule->generate()
#9 /Applications/MAMP/htdocs/monoki_member/system/modules/frontend/ModuleArticle.php(193): Controller->getContentElement('68')
#10 /Applications/MAMP/htdocs/monoki_member/system/modules/frontend/Module.php(140): ModuleArticle->compile()
#11 /Applications/MAMP/htdocs/monoki_member/system/modules/frontend/ModuleArticle.php(71): Module->generate()
#12 /Applications/MAMP/htdocs/monoki_member/system/libraries/Controller.php(421): ModuleArticle->generate(false)
#13 /Applications/MAMP/htdocs/monoki_member/system/libraries/Controller.php(294): Controller->getArticle('20', false, false, 'main')
#14 /Applications/MAMP/htdocs/monoki_member/system/modules/frontend/PageRegular.php(100): Controller->getFrontendModule('0', 'main')
#15 /Applications/MAMP/htdocs/monoki_member/index.php(200): PageRegular->generate(Object(DB_Mysql_Result))
#16 /Applications/MAMP/htdocs/monoki_member/index.php(319): Index->run()
#17 {main} 

Zudem existiert
"$this->arrWidgets"
nicht im Object FrontendTemplate ($this)

Hab sonst noch mal diese Datei gefunden:

http://code.google.com/p/typolight-catalog/source/browse/trunk/src/catalog/ModuleCatalogEdit.php

Soll ich jene nutzen anstelle der Originalen?

Was mach ich denn jetzt... ?

[MacKP]

Ah, dann hast du einfach noch nicht die neuste Vesion vom Catalog ausm SVN. Dann brauchst auch nicht mosern, das es nicht Professionell ist. Das ist immer noch nicht so wie wir uns das wünschen würden (naja, ist eben keine Zeit bzw. kein Geld da im Moment das richtiger zu machen). Aber es ist schon mal besser anpassbar geworden. Also erst mal neue Catalog Version ausm SVN testen bitte.

Viele Grüße

[mogio]

Geht auch anders

... ich hab mir jetzt n Script geschrieben, welches mir dir Daten aus dem Html per DOMDocument() schön nice zuliefert...
auch das Fehlerhandling ist bedacht worden.

Am Schluss enthält das Template also schön sauber 4 Arrays mit Daten bezüglich:

• Label
• Value
• Error (natürlich mit message)
• Hidden Fields

Das ganze sieht dann so aus: siehe Bild


Also kann man sein HTML gestalten wie man möchte. Für meinen Fall "kompliziertes customized Form" - perfekt.

So sieht das HTML / PHP aus (Einsatz):
(ersetzt das jetzige "print($this->field)")

<div id="form_inner">
<?php if(SHOW_ORI_HTML) print($this->field); ?>
        
     
        
        <!--hidden_fields -->
<?php foreach($field_hidden as $hf){print($hf . "\n");};?>
        
        
        <!--section_1 -->
        <div id="section_1">
            
            
            <!--form_item ctrl_name -->
            <div id="field_ctrl_name" class="item <?php print $field_error['ctrl_name'] != NULL ? 'error' : ''; ?>">
                <label for="ctrl_name"><?php print $field_label['ctrl_name'][0]->text ?></label>
                <input type="text" name="name" id="ctrl_name" class="text" value="<?php print $field_value['ctrl_name'][0]->text ?>" class="<?php print ($field_error['ctrl_name'] != NULL) ? 'error' : ''; ?>">
<?php if($field_error['ctrl_name'] != "") :?>
                <div class="my_error_div"><?php print $field_error['ctrl_name']; ?></div>
<?php endif; ?>
            </div>
            
            
        </div>
        
     OUTPUT ANDERE HTML ELEMENTE // TAB NAVIGATION ???
            
            <!--form_item field_ctrl_other -->
            <div id="field_ctrl_other" class="item <?php print ($field_error['field_ctrl_other'] != NULL) ? 'error' : ''; ?>">
                <label for="ctrl_name"><?php print $field_label['field_ctrl_other'][0]->text ?></label>
                <input type="text" name="name" id="ctrl_name" class="text" value="<?php print $field_value['field_ctrl_other'][0]->text ?>" class="<?php print ($field_error['field_ctrl_other'] != NULL) ? 'error' : ''; ?>">
<?php if($field_error['field_ctrl_other'] != "") :?>
                <div class="my_error_div"><?php print $field_error['field_ctrl_other']; ?></div>
<?php endif; ?> 
            </div>
            
            
        </div>
                
    
  
    
    
  
 
        
   
        
    </div>

Das Script im Kopf des Templates:

//CONFIG
const SHOW_ORI_HTML = FALSE;
//

function get_inner_html( $node ) { 
    $innerHTML= ''; 
    $children = $node->childNodes; 
    foreach ($children as $child) { 
        $innerHTML .= $child->ownerDocument->saveXML( $child ); 
    } 

    return $innerHTML; 
}
function get_html( $node ) { 
    return $node->ownerDocument->saveXML( $node ); 
} 


if(!SHOW_ORI_HTML){
    
    $html = new DOMDocument(); 
        
    $html->loadHTML(utf8_decode($this->field));
    
    $field_hidden = array();
    $field_val = array();
    $field_label = array();
    $field_error = array();
    
    $last_field_id = "";
    
    
    foreach($html->getElementsByTagName('*') as $element) {   
        
        //FUNC::trc($element);
        //label
        if($element->tagName == "label" && $element->hasAttribute('for')){
            
            $obj = new stdClass();
            $obj->text         = $element->nodeValue;
            
            //check for error
            if($element->hasAttribute('class')){
                if($element->getAttribute('class') == "error"){
                    $obj->error = true;
                }
            }
            
            //push
            $field_label[$element->getAttribute('for')] = array($obj);
            
            //tell last element_id // so that the error locaton can be set
            $last_field_id = $element->getAttribute('for');
            
        }
        //input
        else if($element->tagName == "input" && $element->hasAttribute('type')){
            //normal text input
            if($element->getAttribute('type') == "text" && $element->hasAttribute('id')){
                
                $obj = new stdClass();
                $obj->text         = $element->getAttribute('value');
                
                //check for error
                if($element->hasAttribute('class')){
                    if($element->getAttribute('class') == "error"){
                        $obj->error = true;
                    }
                }
                
                $field_val[$element->getAttribute('id')] = array($obj);
            }
            //hidden input
            else if($element->getAttribute('type') == "hidden"){
                array_push($field_hidden, get_html($element));
            }
            
            
        }
        //textarea
        else if($element->tagName == "textarea" && $element->hasAttribute('id')){
            
            $obj = new stdClass();
            $obj->text         = $element->nodeValue;
            
            //check for error
            if($element->hasAttribute('class')){
                if($element->getAttribute('class') == "error"){
                    $obj->error = true;
                }
            }
            
            $field_val[$element->getAttribute('id')] = array($obj);
        }
        //select
        else if($element->tagName == "select" && $element->hasAttribute('id')){
            
            $field_val[$element->getAttribute('id')] = array();
            
            foreach($element->getElementsByTagName('option') as $option) { 
                $obj = new stdClass();
                $obj->text         = $option->nodeValue;
                $obj->val          = $option->getAttribute('value');
                //$obj->checked    = ();
                array_push($field_val[$element->getAttribute('id')], $obj);
            }
        }
        //error
        else if($element->tagName == "p" && $element->hasAttribute('class')){
            
            if($element->getAttribute('class') == "error"){
                $field_error[$last_field_id] = $element->nodeValue;        
            }            
        }
        
        
        
    }       
} 

Am einfachsten ist es
- 1) die Konstante "SHOW_ORI_HTML" auf TRUE zu setzen und den Sorce Code für den DIV #form_inner zu ziehen
- 2) Es zu modifizieren wie man Lustig ist.. also sein Custom HTML zu bauen.. um die Elemente herum - Man kann die Tags auch verändern - Hauptsache die ID's und label's bleiben bestehen. Man kann natürlich auch radiobuttons anstelle nehmen. Oder eigene Elemente bauen, objekte disablen. Wie man sein html gestaltet ist einem komplett selbst ueberlassen.
- 3) Konstante wieder auf False zu setzen

Sollte Laufen

Für mich funktioniert das super. Wie es mit anderen Formtypen aussieht werde ich im Laufe des Projektes sehen.. und das Script anpassen. Denke schon uber einen Ajax Request fuer die von Contao produzierten Fehlermeldungen nach.

Cheers
mogio

[MacKP]

Hallo mogio,
danke, das du das mit uns teilst!
Hast du vllt noch lust das ins Wiki zu bringen? Da geht sowas nicht so schnell unter wie hier im Forum... und ergänzen kann man das dann auch wunderbar ;-)

Viele Grüße

[mogio]

Hi Mac,
freut mich wenn ich anderen helfen kann.
Werde ich bei Gelegenheit mal machen. Erstmal muss ich das Projekt jetzt zu Ende bringen. Lieg schon n bisschen hinten.

Gruss
mogio

[jorgos]

Hallo mogio,
ich versuche deine Lösung umzusetzen damit die "checkbox" in einem "checkbox_container" so ( http://jsfiddle.net/zAFND/220/) aussieht.
Das klapt bei mit aber nicht.

Welche Templates benutzt du für deine Lösung.
Bin dankbar für jede Hilfe.