Hiding Unwanted Send Order Form Input Fields for BlogrCart Butik Template

Update 26 July 2016 - BlogrCart BUTIK Blogger theme/template with shopping cart & Paypal checkout is now in version 2.0, more powerful, new responsive framework & less setups to quickly build your online store without any CODE EDITS. View the new Blogger theme/template collection with shopping cart here http://blog.irsah.com/gallery.

Original Article published 1 September 2014
The send order form included for BlogrCart Butik blogger e-commerce featured pre-made template has the minimal input fields required for blogger store owners to receive orders from their Blogger store.

Using the pre-installed shopping cart plug-in for BlogrCart Butik blogspot e-commerce template, important input fields is also required in order for the send order page to work properly with the shopping cart plug-in.

You can remove/hide the input (or inputs) to display at the send order form page by " hiding it " using some simple CSS codes. Below is an example code for the input field for Last Name: -

<div>
  <label for="lastname">Last Name</label>
  <input id="last_name" name="last_name" placeholder="Required" type="name" />
</div>

So in order to " hide " the input fields from displaying at your send order page, add these styles below to hide the fields:-

<div style="position:absolute;left:-9999px;top:-9999px;">
  <label for="lastname">Last Name</label>
  <input id="last_name" name="last_name" placeholder="Required" type="name" value="-"/>
</div>

What the addition styles do is position the Last Name input field away from the page display hence hiding it from users. Using a " display:none; " could not be done as it will trigger error with the shopping cart plug-in.

A value="-" is required as the shopping cart plug-in requires a filled input before processing the send order form/fields sent. So, by adding a " - ", this value will be sent to the email script to process hence prevents errors thrown by the shopping cart plug-in.

Only the below input fields tags can not be removed/hide at the send order form:-

• First Name - input id tagged " first_name "
• Email - input id tagged " email "

BlogrCart Butik PRO Users - Form Validation Plug-in

For BlogrCart Butik PRO template owners/users, additional codes have to be commented out as the send order form also comes with a pre-installed customized form validation plug-in which one can edit the error text display.

Taking the same example input field to hide from the send order page as above, go to Blogger dashboard, head over to your Template Editor > Edit HTML > find HTML99 widget.

Expand <b:includable id='cart-email-settings'> and find codes below:-

<script>

... codes ...

$("#contact").validate({
  rules: { 
    first_name: "required", 
    //last_name: "required", // COMMENT OUT THIS LINE
    email: { 
      required: true,
      email: true
    },

.. more codes ...

</script>

Use the input tags as reference with the input fields " id " tags used in the send order form. For example above, the " last_name " tag id is referenced to the " Last Name " input field tags.

We also featured this tutorial at BlogrCart Butik demo page here at https://blogrcart-butik.blogspot.com/2014/08/how-to-remove-unwanted-send-order-form.html . You can also have a glimpse how the pre-installed form validation plug-in included at the template demo send order page by clicking the Send Order button without filling any fields.

Hope it helps.