Search code examples
opencartopencart2.xopencart-3journal

Custom Input Field on Checkout Page in Opencart:3


I want to have a Custom Input field under Payment Method, to get GST Tax detail before placing Order. And I am Using Journal 3 Theme. which has a One-Page checkout.

So, i have tried this article:- https://forum.opencart.com/viewtopic.php?t=172521

At catalog/view/theme/journal3/template/journal3/checkout/payment_method.twig ---added this line

<input name="get_gst" type="text" placeholder="{{ custom_gst }}" class="form-control">

At catalog/controller/checkout/payment_method.php

$this->session->data['comment'] = strip_tags($this->request->post['comment']);      //Under this line
$this->session->data['your_field'] = strip_tags($this->request->post['get_gst']);   //I added this line

At catalog/controller/checkout/confirm.php

$order_data['comment'] = $this->session->data['comment'];    //Under this line
$order_data['get_gst'] = $this->session->data['get_gst'];    //I added this line

At catalog/model/checkout/order.php

, comment = '" . $this->db->escape($data['comment']) . "'    //after this line
, get_gst = '" . $this->db->escape($data['get_gst']) . "'    //I added this line

And After All getting this errro...

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data OK

I have noticed a difference that this theme is getting other field data(Like: Comment box) by v-model="order_data.comment" as shown below, rather than name attribute like i used.

<textarea class="form-control" v-model="order_data.comment" placeholder="{{ text_comments }}"></textarea>

So, i also tried this v-model="get_gst" in my input, but then i am getting an empty checkout page.

Anyone know where is Getting ERROR? Thank You in Advance.

Checkout js file


Solution

  • The ease solution - you take any field from payment address, which is currently unused (like Address 2), change it's title to "GST Tax detail" in opencart language files catalog/language/en-gb/checkout/checkout.php.

    Address list from Account & Address list under billing details of checkout, Both are taking their data from catalog/controller/accout/address.php in protected function getList(). So, we only need to modify checkout/payment_address.tpl file. Just add

    <?php echo $address['address_2']; ?>
    

    AFTER

    <?php echo $address['address_1']; ?> 
    

    We need to add this because OpenCart only show Address 1 field in Payment method & Billing details section on Checkout page. So, by this we can show Address 2 field on it.