Personalización de productos [PrestaShop]

Cuando personalizamos productos se añaden una o varias áreas para que el cliente introduzca su texto. Son etiquetas
  <textarea > 

Para convertirlas a input solo tenemos que editar el archivo product.tpl, ubicado en themes, localizar el div
<div class="customizableProductsText">
</div>
 
y sustituir:
<textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="1" cols="10">
 {strip}{if isset($textFields.$key)}
 {$textFields.$key|stripslashes}
 {/if}{/strip}
</textarea>
por esto:
<input type="text"
 name="textField{$field.id_customization_field}"
 class="form-control customization_block_input inputCustom"
 id="textField{$customizationField}"
 value="{strip}{if isset($textFields.$key)}
  {$textFields.$key|stripslashes}
 {/if}{/strip}"
 {if $customizationField==0 || $customizationField==1}
  readonly
 {/if}>
El if del <input > hace falta sólo si no queremos que el cliente edite el texto. En este caso necesitaba dos fechas, una de inicio y otra de finalización. El hecho de impedir que se edite el texto, garantiza que la fecha sea correcta. ¿Y como introduce el cliente la fecha? PrestaShop incluye por defecto la librería jQuery, así que podemos usar el datePicker de jQuery. Para ello solo tenemos que añadir en el mismo archivo, después de la etiqueta de cierre del div

<div class="customizableProductsText">
[...]
</div>
<script type="text/javascript">
 $(function() {
  $('#textField1').datepicker();
  $('#textField0').datepicker({
   minDate: "0"
  });
 });
 $(document).ready(function () {
  $('#textField1').prop('disabled', true);
  $('#textField0').change(function () {
   $('#textField1').prop('disabled', false);
   $fecha_inicio=new Date($('#textField0').datepicker('getDate'));
   $fecha_fin=new Date(
    $fecha_inicio.getFullYear(),
    $fecha_inicio.getMonth(),
    $fecha_inicio.getDate()+1
   );
   $('#textField1').datepicker(
    'option', 'minDate', $fecha_fin
   );
  });
 });
</script>

No hay comentarios: