Color-selector - color picker PHP/CSS/jquery for webshop system
Budget: €250 – €750 EUR
Design a color picker as shown on
https://www.garnmanufaktur.com/mydesign/lola/mylola-farbwechsel-handgemacht-fuer-sie/a-3960
for a webshop system (individual programmed PHP)
Variables are predefined in a central config-file as arrays and should be adjustable:
$wicklung_arr=array('Normaler Verlauf','Tuchwicklung','Einfarbig');
$variant_arr=array(
'3 fd. - 750m'=>1.5,
'3 fd. - 1000m'=>2,
'3 fd. - 1250m'=>3,
'3 fd. - 1500m'=>4,
'3 fd. - 1750m'=>5.3,
'3 fd. - 2000m'=>6,
'3 fd. - 2500m'=>7,
'3 fd. - 3000m'=>8,
'4 fd. - 750m'=>9,
'4 fd. - 1000m'=>10,
'4 fd. - 1250m'=>11,
'4 fd. - 1500m'=>12.8,
'4 fd. - 1750m'=>13,
'4 fd. - 2000m'=>14,
'4 fd. - 2500m'=>15,
'4 fd. - 3000m'=>16.2,
'5 fd. - 750m'=>17,
'5 fd. - 1000m'=>18,
'5 fd. - 1250m'=>19,
'5 fd. - 1500m'=>20,
'5 fd. - 1750m'=>21.9,
'5 fd. - 2000m'=>22,
'5 fd. - 2500m'=>23,
'5 fd. - 3000m'=>24,
'6 fd. - 750m'=>25,
'6 fd. - 1000m'=>26,
'6 fd. - 1250m'=>27,
'6 fd. - 1500m'=>28,
'6 fd. - 1750m'=>29,
'6 fd. - 2000m'=>30,
'6 fd. - 2500m'=>31,
'6 fd. - 3000m'=>32,
'7 fd. - 750m'=>33,
'7 fd. - 1000m'=>34.3,
'7 fd. - 1250m'=>35,
'7 fd. - 1500m'=>36,
'7 fd. - 1750m'=>37,
'7 fd. - 2000m'=>38,
'7 fd. - 2500m'=>39,
'7 fd. - 3000m'=>40,
'8 fd. - 750m'=>41,
'8 fd. - 1000m'=>42,
'8 fd. - 1250m'=>43,
'8 fd. - 1500m'=>44,
'8 fd. - 1750m'=>45,
'8 fd. - 2000m'=>46,
'8 fd. - 2500m'=>47,
'8 fd. - 3000m'=>48);
array index ... variant name (string)
array value = price (decimal)
Images for the color picker should reside in an image directory e.g. colorpicker/images, thumbnails in directory colorpicker/thumbnails.
Image names should be printed below the thumbs (the image name is representing the color name).
Enlarge function to zoom in.
Maximum colors to define: 6
This value should be adjustable in the central config file (e.g. reduce to 5)
The color picker should be responsive -
CSS3 Media Queries (no Bootstrap or similar CSS-Frameworks) - keep all simple and light-weight.
Please try to put everything in a (frame) layer with 800px width (color images can be organised in only 4 cols)
Alle form values (wicklung, variant, price, quantity, color1, color2, color3, ...) should be stored in a session (array) variable:
$colorpicker_arr=array('wicklung'=>'Tuchwicklung','variant'=>'7 fd. - 1000m','price'=>34.3,'c1'=>'absinth','c2'=>'beige','c3'=>'curry',...
and printed on the second page.
You should implement the function to go back and change values (e.g. color picker on index.php - submit -> results.php with back button/link to index.php)
PHP version 7.4.3+
jquery
UTF8
Deliver all in a zip file
Code should be commented (english or german)
Time frame: 3 weeks
Follow-up jobs likely if everything is working out well.
!!!!!
Please look up image color-picker.png in the attached zip file - the highlited elements are the only ones that we need !!!!!
https://www.garnmanufaktur.com/mydesign/lola/mylola-farbwechsel-handgemacht-fuer-sie/a-3960
for a webshop system (individual programmed PHP)
Variables are predefined in a central config-file as arrays and should be adjustable:
$wicklung_arr=array('Normaler Verlauf','Tuchwicklung','Einfarbig');
$variant_arr=array(
'3 fd. - 750m'=>1.5,
'3 fd. - 1000m'=>2,
'3 fd. - 1250m'=>3,
'3 fd. - 1500m'=>4,
'3 fd. - 1750m'=>5.3,
'3 fd. - 2000m'=>6,
'3 fd. - 2500m'=>7,
'3 fd. - 3000m'=>8,
'4 fd. - 750m'=>9,
'4 fd. - 1000m'=>10,
'4 fd. - 1250m'=>11,
'4 fd. - 1500m'=>12.8,
'4 fd. - 1750m'=>13,
'4 fd. - 2000m'=>14,
'4 fd. - 2500m'=>15,
'4 fd. - 3000m'=>16.2,
'5 fd. - 750m'=>17,
'5 fd. - 1000m'=>18,
'5 fd. - 1250m'=>19,
'5 fd. - 1500m'=>20,
'5 fd. - 1750m'=>21.9,
'5 fd. - 2000m'=>22,
'5 fd. - 2500m'=>23,
'5 fd. - 3000m'=>24,
'6 fd. - 750m'=>25,
'6 fd. - 1000m'=>26,
'6 fd. - 1250m'=>27,
'6 fd. - 1500m'=>28,
'6 fd. - 1750m'=>29,
'6 fd. - 2000m'=>30,
'6 fd. - 2500m'=>31,
'6 fd. - 3000m'=>32,
'7 fd. - 750m'=>33,
'7 fd. - 1000m'=>34.3,
'7 fd. - 1250m'=>35,
'7 fd. - 1500m'=>36,
'7 fd. - 1750m'=>37,
'7 fd. - 2000m'=>38,
'7 fd. - 2500m'=>39,
'7 fd. - 3000m'=>40,
'8 fd. - 750m'=>41,
'8 fd. - 1000m'=>42,
'8 fd. - 1250m'=>43,
'8 fd. - 1500m'=>44,
'8 fd. - 1750m'=>45,
'8 fd. - 2000m'=>46,
'8 fd. - 2500m'=>47,
'8 fd. - 3000m'=>48);
array index ... variant name (string)
array value = price (decimal)
Images for the color picker should reside in an image directory e.g. colorpicker/images, thumbnails in directory colorpicker/thumbnails.
Image names should be printed below the thumbs (the image name is representing the color name).
Enlarge function to zoom in.
Maximum colors to define: 6
This value should be adjustable in the central config file (e.g. reduce to 5)
The color picker should be responsive -
CSS3 Media Queries (no Bootstrap or similar CSS-Frameworks) - keep all simple and light-weight.
Please try to put everything in a (frame) layer with 800px width (color images can be organised in only 4 cols)
Alle form values (wicklung, variant, price, quantity, color1, color2, color3, ...) should be stored in a session (array) variable:
$colorpicker_arr=array('wicklung'=>'Tuchwicklung','variant'=>'7 fd. - 1000m','price'=>34.3,'c1'=>'absinth','c2'=>'beige','c3'=>'curry',...
and printed on the second page.
You should implement the function to go back and change values (e.g. color picker on index.php - submit -> results.php with back button/link to index.php)
PHP version 7.4.3+
jquery
UTF8
Deliver all in a zip file
Code should be commented (english or german)
Time frame: 3 weeks
Follow-up jobs likely if everything is working out well.
!!!!!
Please look up image color-picker.png in the attached zip file - the highlited elements are the only ones that we need !!!!!