Jump to content

Custom order form with color picker buit in for PrestaShop 1.4.9

boy2litle

By boy2litle
in Core developers

 Share

Recommended Posts

boy2litle Newbie

boy2litle

Posted
Posted (edited)

Hello,

 

I need a custom order form for my site. It should look like this one from the attachment, and be available, after you click the button "Customized Order". This button will be instead of "send to a friend" button. It will function similar with the send to a friend, but, it will load this custom form order, and it will send it (all information gathered from the user) to the adminstrator of the site. The color picked by user, should be received by admin like code (ex: #ffffff).

 

This form order should be available just for registred user, like the "product comments" module.

 

I'm not a programmer, I'm just a graphic designer and my skills with php are not so good, so I realy need your help.

 

I tried to combine some php codes from the send to a friend module, "product comments", and the php from a php form generated with http://www.phpform.o...ilder/index.php , but was'n't a succes. Also nobody integrated a color picker in a order form, before, so I'm a dead end.

 

Attached image you can also find it here: http://s9.postimage..../form_order.jpg

 

I have untill now next files:http://dfiles.eu/files/jrgrtd3hu also they can be found also here: costomeorder module.

At this stage I can't insert the HTML code, from "form.html" to "customizeorder.php".

 

Also i have to insert 2 color picker, one in the right of "My own color" field, and another in the right of "Paint all product in this color" field.

 

Another thing to do is that, when is clicked "Default dimensions" radio button, it will be have to deactivate the other option "Custom Dimension" with the 3 fields "Height", "Width", "Lenght". At this stage, this isn't done yet.

 

"Autocomplete ID Product" field should be replaced with the product name and picture of the product for which you wish to customize (see the printscreen) http://s9.postimage..../form_order.jpg.

Edited by boy2litle (see edit history)
  • Like 1
Link to comment
Share on other sites
boy2litle Newbie

boy2litle

Posted
  • Author
Posted (edited)

Hello,

 

I need a custom order form for my site. It should look like this one from the attachment, and be available, after you click the button "Customized Order". This button will be instead of "send to a friend" button. It will function similar with the send to a friend, but, it will load this custom form order, and it will send it (all information gathered from the user) to the adminstrator of the site. The color picked by user, should be received by admin like code (ex: #ffffff).

 

This form order should be available just for registred user, like the "product comments" module.

 

I'm not a programmer, I'm just a graphic designer and my skills with php are not so good, so I realy need your help.

 

I tried to combine some php codes from the send to a friend module, "product comments", and the php from a php form generated with http://www.phpform.o...ilder/index.php , but was'n't a succes. Also nobody integrated a color picker in a order form, before, so I'm a dead end.

 

Attached image you can also find it here: http://s9.postimage..../form_order.jpg

 

I have untill now next files:http://dfiles.eu/files/jrgrtd3hu also they can be found also here: costomeorder module.

At this stage I can't insert the HTML code, from "form.html" to "customizeorder.php".

 

Also i have to insert 2 color picker, one in the right of "My own color" field, and another in the right of "Paint all product in this color" field.

 

Another thing to do is that, when is clicked "Default dimensions" radio button, it will be have to deactivate the other option "Custom Dimension" with the 3 fields "Height", "Width", "Lenght". At this stage, this isn't done yet.

 

"Autocomplete ID Product" field should be replaced with the product name and picture of the product for which you wish to customize (see the printscreen) http://s9.postimage..../form_order.jpg.

 

Update: Now my order form make the site to look like this: http://s13.postimage...or_position.png

 

form_error_position.png

 

I've putted a new line ok code in customzeorder-form.php:

 

 

include(dirname(__FILE__).'/form.php');

 

 

, and now it look like this:

 

<?php

include(dirname(__FILE__).'/../../config/config.inc.php');
require_once(dirname(__FILE__).'/customizeorder.php');
include(dirname(__FILE__).'/form.php');

$customizeorder = new customizeorder($dontTranslate = true);
echo $customizeorder->displayPageForm();

.

 

* Note:

When I change "

include

", from "

[color=#000000][size=2]include[/size][/color][color=#666600][size=2]([/size][/color][color=#000000][size=2]dirname[/size][/color][color=#666600][size=2]([/size][/color][color=#000000][size=2]__FILE__[/size][/color][color=#666600][size=2]).[/size][/color][color=#008800][size=2]'/form.php'[/size][/color][color=#666600][size=2])[/size][/color]

" with "

require_once

", I shaw that nothing change.

 

 

File form.html transformed in form.php after I added, in the html code,

 

<?php
?>

 

 

 

at beginning and at the end.

 

Now it look like this:

<?php
?>
<html>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>

<body id="main_body" >
<div id="form_container">

  <form id="form_560473" class="appnitro"  method="post" action="">
 <div class="form_description">
  <h2>Form Order</h2>
  <p>Here you can cutomize you order.</p>
 </div>	
  <ul >

 <li id="li_1" >
 <label class="description" for="element_1">Autocomplete ID Product </label>
 <div>
  <input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/>
 </div><p class="guidelines" id="guide_1"><small>Customizable product name that you choose.</small></p>
 </li>  <li id="li_9" name="li_9" >
 <label class="description" for="element_9">Choose Color </label>
 <span>
  <input id="element_9_1" name="element_9" class="element radio" type="radio" value="1" />
<label class="choice" for="element_9_1">Default color</label>
<input id="element_9_2" name="element_9" class="element radio" type="radio" value="2" />
<label class="choice" for="element_9_2">My own color</label>
<input id="element_9_3" name="element_9" class="element radio" type="radio" value="3" />
<label class="choice" for="element_9_3">Paint all product in this color</label>
 </span>
 </li>  <li id="li_8" >
 <label class="description" for="element_8">Choose Dimensions </label>
 <span>
  <input id="element_8_1" name="element_8" class="element radio" type="radio" value="1" />
<label class="choice" for="element_8_1">Default dimensions</label>
<input id="element_8_2" name="element_8" class="element radio" type="radio" value="2" />
<label class="choice" for="element_8_2">Custom Dimension</label>
 </span>
 </li>  <li id="li_5" >
 <label class="description" for="element_5">Hight (in mm) </label>
 <div>
  <input id="element_5" name="element_5" class="element text small" type="text" maxlength="255" value=""/>
 </div>
 </li>  <li id="li_7" name="li_7" >
 <label class="description" for="element_7">Width (in mm) </label>
 <div>
  <input id="element_7" name="element_7" class="element text small" type="text" maxlength="255" value=""/>
 </div>
 </li>  <li id="li_6" >
 <label class="description" for="element_6">Lenght (in mm) </label>
 <div>
  <input id="element_6" name="element_6" class="element text small" type="text" maxlength="255" value=""/>
 </div>
 </li>  <li id="li_2" >
 <label class="description" for="element_2">Additional specifications </label>
 <div>
  <textarea id="element_2" name="element_2" class="element textarea medium"></textarea>
 </div><p class="guidelines" id="guide_2"><small>additional specifications for your order.</small></p>
 </li>  <li id="li_3" >
 <label class="description" for="element_3">Phone number for confirmation </label>
 <div>
  <input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/>
 </div><p class="guidelines" id="guide_3"><small>The phone number where we can contact you for confirmation.</small></p>
 </li>

 <li class="buttons">
   <input type="hidden" name="form_id" value="560473" />

<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
 </li>
  </ul>
 </form>
</div>

</body>
</html>
<?php
?>

 

Now as you shaw, my form is up, and the entire site down, and I don't understand why.I've tried to make some changes to view.css file (to change the width of the form to 400px, like now) nothing change, it's still up.

 

Any ideas?

Edited by boy2litle (see edit history)
Link to comment
Share on other sites
boy2litle Newbie

boy2litle

Posted
  • Author
Posted

My css file, "view.css" file look like this:

 

#body
{
background:#fffff;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:small;
margin:8px 0 16px;
text-align:center;
}
#form_container
{
background: #fff;
border: 1px solid #ccc;
text-align: left;
width: 400px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#top
{
display:block;
height:10px;
margin:10px auto 0;
width:650px;
}
#footer
{
width:640px;
clear:both;
color:#999999;
text-align:center;
width:640px;
padding-bottom: 15px;
font-size: 85%;
}
#footer a{
color:#999999;
text-decoration: none;
border-bottom: 1px dotted #999999;
}
#bottom
{
display:block;
height:10px;
margin:0 auto;
width:650px;
}
form.appnitro
{
margin:20px 20px 0;
padding:0 0 20px;
}
/**** Logo Section  *****/
h1
{
background-color:#dedede;
margin:0;
min-height:0;
padding:0;
text-decoration:none;
text-indent:-8000px;

}
h1 a
{

display:block;
height:100%;
min-height:40px;
overflow:hidden;
}

img
{
behavior:url(css/iepngfix.htc);
border:none;
}

/**** Form Section ****/
.appnitro
{
font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
font-size:small;
}
.appnitro li
{
width: 100%;
}
form ul
{
font-size:100%;
list-style-type:none;
margin:0;
padding:0;
width:100%;
}
form li
{
display:block;
margin:0;
padding:4px 5px 2px 9px;
position:relative;
}
form li:after
{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.buttons:after
{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.buttons
{
clear:both;
display:block;
margin-top:10px;
}
* html form li
{
height:1%;
}
* html .buttons
{
height:1%;
}
* html form li div
{
display:inline-block;
}
form li div
{
color:#444;
margin:0 4px 0 0;
padding:0 0 8px;
}
form li span
{
color:#444;
float:left;
margin:0 4px 0 0;
padding:0 0 8px;
}
form li div.left
{
display:inline;
float:left;
width:48%;
}
form li div.right
{
display:inline;
float:right;
width:48%;
}
form li div.left .medium
{
width:100%;
}
form li div.right .medium
{
width:100%;
}
.clear
{
clear:both;
}
form li div label
{
clear:both;
color:#444;
display:block;
font-size:9px;
line-height:9px;
margin:0;
padding-top:3px;
}
form li span label
{
clear:both;
color:#444;
display:block;
font-size:9px;
line-height:9px;
margin:0;
padding-top:3px;
}
form li .datepicker
{
cursor:pointer !important;
float:left;
height:16px;
margin:.1em 5px 0 0;
padding:0;
width:16px;
}
.form_description
{
border-bottom:1px dotted #ccc;
clear:both;
display:inline-block;
margin:0 0 1em;
}
.form_description[class]
{
display:block;
}
.form_description h2
{
clear:left;
font-size:160%;
font-weight:400;
margin:0 0 3px;
}
.form_description p
{
font-size:95%;
line-height:130%;
margin:0 0 12px;
}
form hr
{
display:none;
}
form li.section_break
{
border-top:1px dotted #ccc;
margin-top:9px;
padding-bottom:0;
padding-left:9px;
padding-top:13px;
width:97% !important;
}
form ul li.first
{
border-top:none !important;
margin-top:0 !important;
padding-top:0 !important;
}
form .section_break h3
{
font-size:110%;
font-weight:400;
line-height:130%;
margin:0 0 2px;
}
form .section_break p
{
font-size:85%;
margin:0 0 10px;
}
/**** Buttons ****/
input.button_text
{
overflow:visible;
padding:0 7px;
width:auto;
}
.buttons input
{
font-size:120%;
margin-right:5px;
}
/**** Inputs and Labels ****/
label.description
{
border:none;
color:#222;
display:block;
font-size:95%;
font-weight:700;
line-height:150%;
padding:0 0 1px;
}
span.symbol
{
font-size:115%;
line-height:130%;
}
input.text
{
background:#fff url(../../../images/shadow.gif) repeat-x top;
border-bottom:1px solid #ddd;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-top:1px solid #7c7c7c;
color:#333;
font-size:100%;
margin:0;
padding:2px 0;
}
input.file
{
color:#333;
font-size:100%;
margin:0;
padding:2px 0;
}
textarea.textarea
{
background:#fff url(../../../images/shadow.gif) repeat-x top;
border-bottom:1px solid #ddd;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-top:1px solid #7c7c7c;
color:#333;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
margin:0;
width:99%;
}
select.select
{
color:#333;
font-size:100%;
margin:1px 0;
padding:1px 0 0;
background:#fff url(../../../images/shadow.gif) repeat-x top;
border-bottom:1px solid #ddd;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-top:1px solid #7c7c7c;
}

input.currency
{
text-align:right;
}
input.checkbox
{
display:block;
height:13px;
line-height:1.4em;
margin:6px 0 0 3px;
width:13px;
}
input.radio
{
display:block;
height:13px;
line-height:1.4em;
margin:6px 0 0 3px;
width:13px;
}
label.choice
{
color:#444;
display:block;
font-size:100%;
line-height:1.4em;
margin:-1.55em 0 0 25px;
padding:4px 0 5px;
width:90%;
}
select.select[class]
{
margin:0;
padding:1px 0;
}
*:first-child+html select.select[class]
{
margin:1px 0;
}
.safari select.select
{
font-size:120% !important;
margin-bottom:1px;
}
input.small
{
width:25%;
}
select.small
{
width:25%;
}
input.medium
{
width:50%;
}
select.medium
{
width:50%;
}
input.large
{
width:99%;
}
select.large
{
width:100%;
}
textarea.small
{
height:5.5em;
}
textarea.medium
{
height:10em;
}
textarea.large
{
height:20em;
}
/**** Errors ****/
#error_message
{
background:#fff;
border:1px dotted red;
margin-bottom:1em;
padding-left:0;
padding-right:0;
padding-top:4px;
text-align:center;
width:99%;
}
#error_message_title
{
color:#DF0000;
font-size:125%;
margin:7px 0 5px;
padding:0;
}
#error_message_desc
{
color:#000;
font-size:100%;
margin:0 0 .8em;
}
#error_message_desc strong
{
background-color:#FFDFDF;
color:red;
padding:2px 3px;
}
form li.error
{
background-color:#FFDFDF !important;
border-bottom:1px solid #EACBCC;
border-right:1px solid #EACBCC;
margin:3px 0;
}
form li.error label
{
color:#DF0000 !important;
}
form p.error
{
clear:both;
color:red;
font-size:10px;
font-weight:700;
margin:0 0 5px;
}
form .required
{
color:red;
float:none;
font-weight:700;
}
/**** Guidelines and Error Highlight ****/
form li.highlighted
{
background-color:#fff7c0;
}
form .guidelines
{
background:#f5f5f5;
border:1px solid #e6e6e6;
color:#444;
font-size:80%;
left:100%;
line-height:130%;
margin:0 0 0 8px;
padding:8px 10px 9px;
position:absolute;
top:0;
visibility:hidden;
width:42%;
z-index:1000;
}
form .guidelines small
{
font-size:105%;
}
form li.highlighted .guidelines
{
visibility:visible;
}
form li:hover .guidelines
{
visibility:visible;
}
.no_guidelines .guidelines
{
display:none !important;
}
.no_guidelines form li
{
width:97%;
}
.no_guidelines li.section
{
padding-left:9px;
}
/*** Success Message ****/
.form_success
{
clear: both;
margin: 0;
padding: 90px 0pt 100px;
text-align: center
}
.form_success h2 {
   clear:left;
   font-size:160%;
   font-weight:normal;
   margin:0pt 0pt 3px;
}
/*** Password ****/
ul.password{
   margin-top:60px;
   margin-bottom: 60px;
   text-align: center;
}
.password h2{
   color:#DF0000;
   font-weight:bold;
   margin:0pt auto 10px;
}
.password input.text {
  font-size:170% !important;
  width:380px;
  text-align: center;
}
.password label{
  display:block;
  font-size:120% !important;
  padding-top:10px;
  font-weight:bold;
}
#li_captcha{
  padding-left: 5px;
}

#li_captcha span{
float:none;
}
/** Embedded Form **/
.embed #form_container{
border: none;
}
.embed #top, .embed #bottom, .embed h1{
display: none;
}
.embed #form_container{
width: 100%;
}
.embed #footer{
text-align: left;
padding-left: 10px;
width: 99%;
}
.embed #footer.success{
text-align: center;
}
.embed form.appnitro
{
margin:0px 0px 0;

}

/*** Calendar **********************/
div.calendar { position: relative; }
.calendar table {
cursor:pointer;
border:1px solid #ccc;
font-size: 11px;
color: #000;
background: #fff;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}
.calendar .button {
text-align: center;   
padding: 2px;		 
}
.calendar .nav {
background:#f5f5f5;
}
.calendar thead .title {
font-weight: bold;	 
text-align: center;
background: #dedede;
color: #000;
padding: 2px 0 3px 0;
}
.calendar thead .headrow {
background: #f5f5f5;
color: #444;
font-weight:bold;
}
.calendar thead .daynames {
background: #fff;
color:#333;
font-weight:bold;
}
.calendar thead .name {
border-bottom: 1px dotted #ccc;
padding: 2px;
text-align: center;
color: #000;
}
.calendar thead .weekend {
color: #666;
}
.calendar thead .hilite {
background-color: #444;
color: #fff;
padding: 1px;
}
.calendar thead .active {
background-color: #d12f19;
color:#fff;
padding: 2px 0px 0px 2px;
}

.calendar tbody .day {
width:1.8em;
color: #222;
text-align: right;
padding: 2px 2px 2px 2px;
}
.calendar tbody .day.othermonth {
font-size: 80%;
color: #bbb;
}
.calendar tbody .day.othermonth.oweekend {
color: #fbb;
}
.calendar table .wn {
padding: 2px 2px 2px 2px;
border-right: 1px solid #000;
background: #666;
}
.calendar tbody .rowhilite td {
background: #FFF1AF;
}
.calendar tbody .rowhilite td.wn {
background: #FFF1AF;
}
.calendar tbody td.hilite {
padding: 1px 1px 1px 1px;
background:#444 !important;
color:#fff !important;
}
.calendar tbody td.active {
color:#fff;
background: #529214 !important;
padding: 2px 2px 0px 2px;
}
.calendar tbody td.selected {
font-weight: bold;
border: 1px solid #888;
padding: 1px 1px 1px 1px;
background: #f5f5f5 !important;
color: #222 !important;
}
.calendar tbody td.weekend {
color: #666;
}
.calendar tbody td.today {
font-weight: bold;
color: #529214;
background:#D9EFC2;
}
.calendar tbody .disabled { color: #999; }
.calendar tbody .emptycell {
visibility: hidden;
}
.calendar tbody .emptyrow {
display: none;
}
.calendar tfoot .footrow {
text-align: center;
background: #556;
color: #fff;
}
.calendar tfoot .ttip {
background: #222;
color: #fff;
font-size:10px;
border-top: 1px solid #dedede;
padding: 3px;
}
.calendar tfoot .hilite {
background: #aaf;
border: 1px solid #04f;
color: #000;
padding: 1px;
}
.calendar tfoot .active {
background: #77c;
padding: 2px 0px 0px 2px;
}
.calendar .combo {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
border: 1px solid #ccc;
background: #f5f5f5;
color: #222;
font-size: 90%;
z-index: 100;
}
.calendar .combo .label,
.calendar .combo .label-IEfix {
text-align: center;
padding: 1px;
}
.calendar .combo .label-IEfix {
width: 4em;
}
.calendar .combo .hilite {
background: #444;
color:#fff;
}
.calendar .combo .active {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
background: #dedede;
font-weight: bold;
}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...