Combine "order" and "save customization" - simple guide?

[veganline]

 

 

 

Update - april 2020

There is now a guide to changing 4 files to make a one click solution, compatible with the ajax cart
 

-------------------------------------------------------------
This is a previous method that cached badly on cloudflare and tended to sell each customer the previous customers' order
-------------------------------------------------------------

Maybe "simple" isn't possible but I got this far...
For a customization that can use a select menu - maybe an attribute without stock control if other attributes have it turned-on. I discovered a simple method but it is broken by caching and cloudflares's rocket loader, so customers buy some previous customers' selection instead of their own.

In case anyone reads this for ideas, I got a good 2-button system working and have added it below this failed one button system.
 

• back > catalog > products > product > customization > textfield
  to set-up a customization form
   
• cloudflare > speed > optimization > rocket loader > off
  ...if you plan to use inline javascript. if you look at the customer's view of the product and press control+U you will be able to see if your script has been changed. My script was broken by caching anyway.
   
• Find <textarea></textarea> buried near the end of the product.tpl template in your theme - something like Niara theme's latest product.tpl 
   
• on product.tpl or an over-ride (because the file is updated often), change
  <TEXTAREA.....></TEXTAREA> to
  <SELECT onselect="javascript:this.form.submit();" ...>
  <OPTION>choose</OPTION>
  <OPTION>small</OPTION>
  <OPTION>medium</OPTION>
  <OPTION>large</OPTION>/SELECT>
  
  Underlining is just because of a link on this page, not for the code. 
  The javascript is new to me. It should do what it says apparently.
  It's possible to keep <TEXTAREA .... </TEXTAREA> according to a kakkupaperi post on prestashop forums about a site with file uploads for customization.
  
  This fails because caching breaks the effect of the inline javascript;  customers can buy the selection of the previous customer or the one before, but quite likely not their own.

-------------------------------------------------------------
working solution with two buttons and no javascript
-------------------------------------------------------------
 

• Requiring selection : customization form
  
  change <textarea>...</textrarea> to 
  
  <select required.... class="...
  <option value="" disabled selected>choose</option>
  <option>small</option>
  <option>medium</option>
  <option>large</option></select>
  
  required is new to me; it prevents HTML5 browsers from saving a blank. They pop-up a message instead. Any blank top line like <option></option> would have the same effect. 
  disabled and value="" are both ways of making this work like a blank line, and "selected" makes sure it's the default option. I expect you knew that, and also know how the theme's built-in error message for required forms works, which I haven't got the hang of yet.
   
• Moving the form
  
  When the form saves, it reloads the page from the top. That's a reason to move the form near the top and to {*comment-out*} anything-else not needed on the product template, like headings and quantity select. I discovered that code editors are good at spotting the beginnings and ends of loops of code - editors like notepad++ or the one built into server control panels.
   
• Styling
  
  "textfield0" required an extra tag  to say something like textfield0{width:auto;}
  back>preferences>custom code>add extra css one place to put it.
  I made another change to the <select... tag, changing class="something" to the class used on attributes, which in my theme is "form-control attribute_select".
   
• Requiring selection : add to cart form
  
  The "required" tick box in the back office enables an error message on your theme's errors.tpl file for any customer who tries to order without selecting a customization. It can be translated to any message you want on
  back>localization>translations>error message translations and >theme name.
  "error message translations" is easy to miss under "front office translations", and it's easy to pick the wrong theme, but one way or another the message can be edited.
   
• That's it!

--------solution above added 24/11/2019 18.40-----------------------
i spent a week trying to combine "order" and "save customization" buttons but can't find a simple guide. .... [detail deleted as the picture says it all]

 

Edited April 2, 2020 by veganline
https://forum.thirtybees.com/topic/3997-customization-with-one-button-remove-save-button-from-customization/?tab=comments#comment-34248