Hallo,
für das Bestellformular soll das vorherige Design in Typo3 übernommen werden.
Dort wurden die Checkoxen über js. und einem .png angepaßt.
Den js. Code und das .html habe ich identisch übernommen. Die js Befehl wird nicht ausgeführt.
Ich vermute mal, dass innerhalb des Formmailers das .js nicht greift?
Vielleicht hat schon jemand so eine Anpassung durchgeführt und kann mir ein paar Tipps geben?
Danke für Tipps oder evtl. Feeback
Birgit
--------------------------------------
Hier sind ist meine Umsetzung
TYPO3 4.5.2
Formmailer 0.9.12
plugin.Tx_Formhandler.settings.predef.singlestep_example {
# Common configuration
name = order
debug = 0
addErrorAnchors = 1
templateFile = fileadmin/templates/ext/formmailer/template_order.html
langFile.1 = fileadmin/templates/ext/formmailer/lang.xml
cssFile.1 = fileadmin/templates/css/main.css
jsFile.1 = fileadmin/templates/ext/formmailer/orderform.js
jsFile.2 = fileadmin/templates/ext/formmailer/jquery-1.3.2.min.js
formValuesPrefix = formhandler
# HTML wrapping by validation error
singleErrorTemplate {
singleWrap = <span class="error">|</span><br />
}
# Validators configuration
validators {
1 {
class = Tx_Formhandler_Validator_Default
config {
fieldConf {
company {
errorCheck.1 = required
}
name {
errorCheck.1 = required
}
function {
errorCheck.1 = required
}
street {
errorCheck.1 = required
}
country {
errorCheck.1 = required
}
zip {
errorCheck.1 = required
}
city {
errorCheck.1 = required
}
email {
# errorCheck.1 = required
# errorCheck.2 = email
}
}
}
}
}
# Interceptors configuration
initInterceptors {
1 {
class = Tx_Formhandler_Interceptor_Filtreatment
}
}
# Loggers configuration
loggers {
1 {
class = Tx_Formhandler_Logger_DB
}
}
# Finishers configuration
finishers {
1.class = Tx_Formhandler_Finisher_Redirect
1.config.redirectPage = 107
2.class = Tx_Formhandler_Finisher_Mail
2.config {
limitMailsToUser = 5
admin {
to_email = bkern01@web.de
to_name = Haeberle Service
subject = Mail HAEBERLE Bestellung
sender_email = email
sender_name = lastname
}
}
3.class = Tx_Formhandler_Finisher_SubmittedOK
3.config {
returns = 0
}
}
}
plugin.Tx_Formhandler.settings.predef.singlestep_example {
# Common configuration
name = order
debug = 0
addErrorAnchors = 1
templateFile = fileadmin/templates/ext/formmailer/template_order.html
langFile.1 = fileadmin/templates/ext/formmailer/lang.xml
cssFile.1 = fileadmin/templates/css/main.css
jsFile.1 = fileadmin/templates/ext/formmailer/orderform.js
jsFile.2 = fileadmin/templates/ext/formmailer/jquery-1.3.2.min.js
formValuesPrefix = formhandler
# HTML wrapping by validation error
singleErrorTemplate {
singleWrap = <span class="error">|</span><br />
}
# Validators configuration
validators {
1 {
class = Tx_Formhandler_Validator_Default
config {
fieldConf {
company {
errorCheck.1 = required
}
name {
errorCheck.1 = required
}
function {
errorCheck.1 = required
}
street {
errorCheck.1 = required
}
country {
errorCheck.1 = required
}
zip {
errorCheck.1 = required
}
city {
errorCheck.1 = required
}
email {
# errorCheck.1 = required
# errorCheck.2 = email
}
}
}
}
}
# Interceptors configuration
initInterceptors {
1 {
class = Tx_Formhandler_Interceptor_Filtreatment
}
}
# Loggers configuration
loggers {
1 {
class = Tx_Formhandler_Logger_DB
}
}
# Finishers configuration
finishers {
1.class = Tx_Formhandler_Finisher_Redirect
1.config.redirectPage = 107
2.class = Tx_Formhandler_Finisher_Mail
2.config {
limitMailsToUser = 5
admin {
to_email = xx@wxx.de
to_name = name
subject = Mail NAME Bestellung
sender_email = email
sender_name = lastname
}
}
3.class = Tx_Formhandler_Finisher_SubmittedOK
3.config {
returns = 0
}
}
}
(function($){
$(document).ready(function(){
$("form.contentForm #leftcol input").hide();
$(".fakecheck").css({'display' : 'inline-block'});
$("input:checkbox").each(
function(){
(this.checked) ? $("#fake"+this.id).addClass('fakechecked') : $("#fake"+this.id).removeClass('fakechecked');
}
);
$(".fakecheck").click(
function(){
($(this).hasClass('fakechecked')) ? $(this).removeClass('fakechecked') : $(this).addClass('fakechecked');
$("#"+this.id.substr(4)).trigger("click");
});
$("form.contentForm #leftcol input").change(
function (){
(this.checked) ? $("#fake"+this.id).addClass('fakechecked') : $("#fake"+this.id).removeClass('fakechecked');
}
);
});
});
[code language=CSS]/*ORDER FORM
------------------------------------------*/
form.contentForm {
margin-top:16px;
}
form.contentForm .sendButton {
width:94px;
height:32px;
background-image:url(../img/sendbutton.png);
border:none;
color:white;
cursor:pointer;
}
form.contentForm fieldset {
border: none;
margin:0px 0px 20px 0px;
padding:0px 0px 0px 0px;
}
form.contentForm label{
width:403px;
display:inline-block;
font-size:11px;
}
/* form.contentForm .rightcol label {
font-size:11px;
}
*/
form.contentForm input,
form.contentForm textarea{
width:396px;
padding:6px 0px 4px 5px;
margin:0px 0px 3px 0px;
border:1px solid #464646;
}
form.contentForm label#contactFormCountryLabel,
form.contentForm label#contactFormZipLabel,
form.contentForm label#contactFormCityLabel{
width:134px;
}
form.contentForm input#contactFormCountryInput,
form.contentForm input#contactFormZipInput,
form.contentForm input#contactFormCityInput{
width:122px;
margin-right:5px;
}
form.contentForm input#contactFormCityInput{
margin-right:0px;
}
form.contentForm input#contactFormCountryInput{
width:122px;
}
form.contentForm label#contactFormPhoneLabel,
form.contentForm label#contactFormFaxLabel{
width:202px;
}
form.contentForm input#contactFormPhoneInput{
width:190px;
margin-right:5px;
}
form.contentForm input#contactFormFaxInput{
width:191px;
margin-right:0px;
}
form.contentForm input.invalid{
border:1px solid red;
}
form.contentForm label#orderFormCountryLabel,
form.contentForm label#orderFormZipLabel,
form.contentForm label#orderFormCityLabel{
width:134px;
}
form.contentForm input#orderFormCountryInput,
form.contentForm input#orderFormZipInput,
form.contentForm input#orderFormCityInput{
width:122px;
margin-right:5px;
}
form.contentForm input#orderFormCityInput{
margin-right:0px;
}
form.contentForm input#orderFormCountryInput{
width:122px;
}
form.contentForm label#orderFormPhoneLabel,
form.contentForm label#orderFormFaxLabel{
width:202px;
}
form.contentForm input#orderFormPhoneInput{
width:190px;
margin-right:5px;
}
form.contentForm input#orderFormFaxInput{
width:191px;
margin-right:0px;
}
form.contentForm textarea {
height:100px;
}
form.contentForm #leftcol fieldset {
line-height:2.2;
}
form.contentForm #leftcol input {
width:30px;
border:none;
position:absolute;
margin-top:5px;
}
form.contentForm #leftcol label{
position:absolute;
left:70px;
}
form.contentForm #leftcol label.headerBrochure {
position:absolute;
left:32px;
width:403px;
font-size:12px;
margin:16px 0px 8px;
}
.fakecheck {
background: url(../img/checkbox.png) no-repeat;
height: 22px;
width: 22px;
display: none;
cursor:pointer;
position:absolute;
}
.fakechecked {
background-position: 0px -22px;
}
.productBold {
font-weight:bold;}
form.contentForm input:focus
form.contentForm textarea:focus {
border:1px solid #1FA22E;
}
[/code]