OpenCart Community

Posted: **Thu Jun 21, 2012 2:04 am**

Hi everyone,

This is how I added a " Ask a Question " tab to the product page. It uses jquery validation and ajax submission/response. Very easy to implement. The form will email you the question along with the product code so you know what they are asking a question about.

Demo here: http://labeldomain.com/50-LDTR-2313
P.S. THE DEMO IS LIVE ! PLEASE DO NOT EXCESSIVELY TEST THE FORM AS I WILL GET ALL EMAILS

Original Files here: http://www.tutwow.com/htmlcss/create-a- ... y-and-php/

Repackaged/Modified for Opencart here: http://labeldomain.com/contact_form.zip
I modified the CSS by removing some styles that conflicted with OC.
I added hidden product id field so we know what they are asking a question about
I removed table styling and formatted like default template.

There are some paid versions that do this, but with a few minutes of your time you can have your own and customize to your needs.

Download Repackaged/Modified contact_form.zip and extract

Upload folder contact_form to ........... Yoursite.com/contact_form

Add contents of add_to_header.txt to catalog/view/theme/yourtheme/template/common/header.tpl

Code: Select all

<script type="text/javascript" src="contact_form/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="contact_form/js/jquery.form.js"></script>
<script type="text/javascript" src="contact_form/js/contact.js"></script>
 <link rel="stylesheet" href="contact_form/style.css" type="text/css" />

Navigate to: catalog/view/theme/yourtheme/template/product/product.tpl
Find:

Code: Select all

<a href="#tab-related"><?php echo $tab_related; ?> (<?php echo count($products); ?>)</a> 
    <?php } ?>

Add contents of add_to_product-tpl.txt immediately after like so:

Code: Select all

  <a href="#tab-related"><?php echo $tab_related; ?> (<?php echo count($products); ?>)</a>
    

    <?php } ?>
<?php // Product Question tab code starts here ?>
    <a href="#tab-contact">Ask a Question</a>
  </div>
<div id="tab-contact" class="tab-content">
   
   <div id="response">   
<div id="wrap">
      <h3>Ask a question about:  <?php echo $model; ?></h3>
      <form id="contactform" action="contact_form/processForm.php" method="post">
           
          
           <input type="hidden" id="product" name="product" value="<?php echo $model; ?>" /></br></br>
          
           <b><label for="name">Name:</label></b></br>
           <input type="text" id="name" name="name" /></br></br>
        
         
           <b><label for="email">Email:</label></b></br>
           <input type="text" id="email" name="email" /></br></br>
         
           <b><label for="message">Message:</label></b></br>
            <textarea id="message" name="message" rows="5" cols="40" ></textarea></br></br>       

           <input type="submit" value="Submit" id="send" class="button"/>        
      </form>
     
    </div>
       </div>

Lastly edit processForm.php around line 50 and add your email

Code: Select all

// Send the email
$to = "YOUR-EMAIL@YOUR-DOMAIN.COM"; // Your email goes here.... example:  admin@yourdomain.com
$subject = "Question about: $product";
$message = "$message";
$headers = "From: $email";

That should do it. Lets review.
1. download contact_form.zip and extract
2. Upload contact_form folder to root of your site Ex: Yoursite.com/contact_form
3. Add contents of add_to_header.txt to header.tpl file
4. Add contents of add_to_product-tpl.txt to product.tpl
5. Edit processForm.php and add your email address around line 50

I have only tested this with the default theme and have no idea how it works with ANY other theme so please dont ask, you will need to test this on your own. I tested on my localhost test site before going live, I suggest you do too.

P.S. THE DEMO IS LIVE ! PLEASE DO NOT EXCESSIVELY TEST THE FORM AS I WILL GET ALL EMAILS

Posted: **Thu Jun 21, 2012 2:10 am**

FYI, the css file only contains a few lines of code. I eliminated the stylesheet call from the header.tpl file and just added the css to my template stylesheet.

Posted: **Sun Jun 24, 2012 1:18 pm**

Your code works great, but I just have a small issue with regard to the "Thank you Page". I would like to be redirect to the original page instead of staying there after saying thank you. Please help with this.

Thanks in Advance.

Posted: **Mon Jun 25, 2012 10:57 pm**

Not sure what you mean. The thank you response is in the tab it self which is on the original page(product page). If you want to redirect to another page after submit then you will need to change the jquery response to redirect instead of display success message..

Check this out, this will help

http://stackoverflow.com/questions/5030 ... javascript

Posted: **Sat Jul 07, 2012 6:17 am**

I can't keep up with scrolling down, have no time to even type anything into the fields, the form just keeps telling me ... please .... do this do that, missing ... bla bla, at the end of 30 seconds I had already one and the same error repeated a several dozen times !

Posted: **Wed Jul 18, 2012 1:32 am**

I had a problem with Cyrillic, it is like #$%#$^$%@#$%@#$, can you help me! Second I put a script, correctly step by step with manual, but it is not work like in a DEMO. When is done and push SEND application jump in a new page, why??? Am I do something wrong?

Please help me!

My site is: click here

Posted: **Tue Aug 14, 2012 1:39 pm**

Works a treat.... 1.5.3.1 with custom theme.

Thanks very much.

Posted: **Thu Sep 13, 2012 9:20 pm**

needed a bit of customization, but working!

thank you for sharing it.

Posted: **Mon Oct 15, 2012 3:42 am**

Does it work in version 1.5.4 ?

Thank you

Posted: **Thu Oct 03, 2013 4:56 am**

Hi,

I try to use this extension but I'm getting error.

This code blogs don't send information processForm.php. i'm waitting your helps or advice.
thanks

Code: Select all

// Use Ajax to send everything to processForm.php
  	submitHandler: function(form) {
  		$("#send").attr("value", "Sending...");

		//it is getting here but below code doesn't work. 

  		$('#contactform').ajaxSubmit({
  			success: function(responseText, statusText, xhr, $form) {
  				$('#contactform').slideUp("fast");
				$("#send").attr("value", "Gonderildi...");
  				$("#response").html(responseText).hide().slideDown("fast");
  			}
  		});
  		return false;
  	}

Posted: **Mon Oct 14, 2013 4:15 pm**

there's something wrong with it,can you help me,please!

OpenCart Community

Add Product Question Tab

Add Product Question Tab

Re: Add Product Question Tab

Re: Add Product Question Tab

Re: Add Product Question Tab

Re: Add Product Question Tab

Re: Add Product Question Tab

Re: Add Product Question Tab

Re: Add Product Question Tab

Re: Add Product Question Tab

Re: Add Product Question Tab

Re: Add Product Question Tab