tutorial Creating an ajax contact form on the product page

NemoPS · November 1, 2016

Hey everyone! I thought this would have been a nice tip for people wanting to use an ajax contact form, instead of a separate page

http://nemops.com/prestashop-ajax-contact-form/#.WBhwB_nx6Uk

Fabio

Abdillokra · September 1, 2017

Great tutorial, many thanks Nemo!!!!

http://nemops.com/prestashop-ajax-contact-form/#.WBhwB_nx6Uk

Here's the referenced piece of code :

<a href="{$link->getPageLink('contact')}?content_only=1" id="contact-us-popup">Contact Us</a>

{literal}

$(document).ready(function() {

$('#contact-us-popup').fancybox({

type: 'ajax',

autoDimensions: false,

autoSize: false,

width: 600,

height: 'auto',

afterShow: function() {

$('.contact-form-box').submit(function(e) {

e.preventDefault();

var formdata = new FormData($(this)[0]);

formdata.append('submitMessage', 1);

var that = $(this);

$.ajax({

type: 'POST',

data: formdata,

url: $(this).attr('action'),

contentType: false,

processData: false,

success: function(data){

var error = $($.parseHTML(data)).filter('.alert.alert-danger');

if(error.length > 0)

that.prepend(error)

else {

// succes!

var success = $($.parseHTML(data)).filter('.alert.alert-success');

that.fadeOut('fast', function(){

$(this).after(success)

});

}

})

});

}

});

{/literal}

</script>

Edited September 1, 2017 by Abdillokra (see edit history)

Abdillokra · September 1, 2017

Hi Nemo,

I'm new to Prestashop and editing-programming, please excuse the approximative wording/references.

I have a question about the text customization of the "contact us" on the product page.

I added the Contact Us form link in the More Info Tabs block section (instead of below the Out of Stock section) in the product.tpl file.

Through inspecting it with Chrome, I found that the "Contact Us" text is ruled by the global.css, by defaut with following parameters:

a {
 

color: #777;
text-decoration: none;
 

}

The More Info tabs block section has the following css parameters (from the product.css file):

position: relative;

line-height: 25px;

display: block;

padding: 0 0 20px 0;

text-transform: uppercase;

color: #bebebe;

font-size: 14px;

font-weight: 700;

font-family: Poppins;

-webkit-transition: all 300ms ease-in;

-moz-transition: all 300ms ease-in;

-ms-transition: all 300ms ease-in;

-o-transition: all 300ms ease-in;

transition: all 300ms ease-in;

Since the "a" parameter in global.css (a {

 
color: #777;
text-decoration: none;

})

applies to other elements (like the Titles etc.), we can't edit it by simply adding the product.css parameters (

position: relative;

line-height: 25px;

display: block;

padding: 0 0 20px 0;

text-transform: uppercase;

color: #bebebe;

font-size: 14px;

font-weight: 700;

font-family: Poppins;

-webkit-transition: all 300ms ease-in;

-moz-transition: all 300ms ease-in;

-ms-transition: all 300ms ease-in;

-o-transition: all 300ms ease-in;

transition: all 300ms ease-in )

to it without applying the modification to those other elements as well, as I found out.

To solve this, following another tutorial (

), 5th min,

I figured that we need to edit the HTML upper level in the hierarchy of global.css (instead of the <a href="http://127.0.0.1/<your theme folder>/fr/contact-us?content_only=1" id="contact-us-popup">Contact</a> product.css css parameters)

- in order to specify the css customization only to the More Info Tabs (no more to other elements like the Titles etc.).

The HTML upper level (<ul id="more_info_tabs" class="idTabs idTabsShort clearfix") displayed the following css on Chrome styles :

ol,

ul {

list-style: none;

}

So I did edit the global.css

ol,

ul {

list-style: none;

}

parameters

with the contact Us product.css parameters, as follows:

ol,

ul {

list-style: none;

position: relative;

line-height: 25px;

display: block;

padding: 0 0 20px 0;

text-transform: uppercase;

color: #bebebe;

font-size: 14px;

font-weight: 700;

font-family: Poppins;

-webkit-transition: all 300ms ease-in;

-moz-transition: all 300ms ease-in;

-ms-transition: all 300ms ease-in;

-o-transition: all 300ms ease-in;

transition: all 300ms ease-in

}

The results is ok (as shown in the below picture),

but for some reason the CONTACT tab is still displaying

the #777 color of the original css

({

 
color: #777;
text-decoration: none;

})

I want to ask you how can we change the #777 color to #bebebe (without editing the #777 of

({

 
color: #777;
text-decoration: none;

})

parameter) ?

many thanks for your advice and great tutorials!

Edited September 1, 2017 by Abdillokra (see edit history)

Abdillokra · September 2, 2017

Hi again,

I found that the last method still customizes css elements like the currencies , languages and CMS links in the footer (My account, Information etc.), as same as the More Info tabs customisation.

Following the same thinking as the firebug tuto one, I just WENT BACK to the very first HTML next up hierarchy level .... which is a <li>....</li> (before the <ul id="more_info_tabs" class="idTabs idTabsShort clearfix")

In my case the <li>...</li> in red below:

<div id="oosHook"{if $product->quantity > 0} style="display: none;"{/if}>

{$HOOK_PRODUCT_OOS}

</div>

{capture name='DisplaySocialSharing'}{hook h='DisplaySocialSharing'}{/capture}

{if $smarty.capture.DisplaySocialSharing}

{$smarty.capture.DisplaySocialSharing}

{/if}

</div>

{if !$content_only}

{if $product->description}<li class="first"><a id="more_info_tab_more_info" href="#idTab1"><span>{l s='More info'}</a></span></li>{/if}

{if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}

{if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}

{if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}

<a href="{$link->getPageLink('contact')}?content_only=1" id="contact-us-popup">Contact</a>

{literal}

$(document).ready(function() {

$('#contact-us-popup').fancybox({

type: 'ajax',

autoDimensions: false,

autoSize: false,

width: 600,

height: 'auto',

afterShow: function() {

$('.contact-form-box').submit(function(e) {

e.preventDefault();

var formdata = new FormData($(this)[0]);

formdata.append('submitMessage', 1);

var that = $(this);

$.ajax({

type: 'POST',

data: formdata,

url: $(this).attr('action'),

contentType: false,

processData: false,

success: function(data){

var error = $($.parseHTML(data)).filter('.alert.alert-danger');

if(error.length > 0)

that.prepend(error)

else {

// succes!

var success = $($.parseHTML(data)).filter('.alert.alert-success');

that.fadeOut('fast', function(){

$(this).after(success)

});

}

})

});

}

});

{/literal}

</script>

{$HOOK_PRODUCT_TAB}

</ul>

So I first removed the

position: relative;

line-height: 25px;

display: block;

padding: 0 0 20px 0;

text-transform: uppercase;

color: #bebebe;

font-size: 14px;

font-weight: 700;

font-family: Poppins;

-webkit-transition: all 300ms ease-in;

-moz-transition: all 300ms ease-in;

-ms-transition: all 300ms ease-in;

-o-transition: all 300ms ease-in;

transition: all 300ms ease-in

parameters I added before in global.css :

ol,

ul {

list-style: none;

position: relative;

line-height: 25px;

display: block;

padding: 0 0 20px 0;

text-transform: uppercase;

color: #bebebe;

font-size: 14px;

font-weight: 700;

font-family: Poppins;

-webkit-transition: all 300ms ease-in;

-moz-transition: all 300ms ease-in;

-ms-transition: all 300ms ease-in;

-o-transition: all 300ms ease-in;

transition: all 300ms ease-in

}

Back into :

ol,

ul {

list-style: none;

}

In order to get back the Footer CMS and currencies and languages not customized as previous.

Then, since the HTML upper Hierarchical level must be independent from other elements (CMS footer, Currencies and languages, titles etc.),

and more importantly also because it governs the other tabs (The More Info Tabs (More Info, Data Sheet, Review) are all enclosed by this HTML UPPER LEVEL)

I JUST ADDED THIS <li> ... </li> HTML UPPER LEVEL to enclose the Contact us <a ...> </a> line :

<div id="oosHook"{if $product->quantity > 0} style="display: none;"{/if}>

{$HOOK_PRODUCT_OOS}

</div>

{capture name='DisplaySocialSharing'}{hook h='DisplaySocialSharing'}{/capture}

{if $smarty.capture.DisplaySocialSharing}

{$smarty.capture.DisplaySocialSharing}

{/if}

</div>

{if !$content_only}

{if $product->description}<li class="first"><a id="more_info_tab_more_info" href="#idTab1"><span>{l s='More info'}</a></span></li>{/if}

{if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}

{if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}

{if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}

<li><a href="{$link->getPageLink('contact')}?content_only=1" id="contact-us-popup">Contact</a></li>

{literal}

$(document).ready(function() {

$('#contact-us-popup').fancybox({

type: 'ajax',

autoDimensions: false,

autoSize: false,

width: 600,

height: 'auto',

afterShow: function() {

$('.contact-form-box').submit(function(e) {

e.preventDefault();

var formdata = new FormData($(this)[0]);

formdata.append('submitMessage', 1);

var that = $(this);

$.ajax({

type: 'POST',

data: formdata,

url: $(this).attr('action'),

contentType: false,

processData: false,

success: function(data){

var error = $($.parseHTML(data)).filter('.alert.alert-danger');

if(error.length > 0)

that.prepend(error)

else {

// succes!

var success = $($.parseHTML(data)).filter('.alert.alert-success');

that.fadeOut('fast', function(){

$(this).after(success)

});

}

})

});

}

});

{/literal}

</script>

{$HOOK_PRODUCT_TAB}

</ul>

Then thinking that the hierarchy applies to the to the other <li>...</li>

{if $product->description}<li class="first"><a id="more_info_tab_more_info" href="#idTab1"><span>{l s='More info'}</a></span></li>{/if}

{if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}

{if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}

{if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}

<li><a href="{$link->getPageLink('contact')}?content_only=1" id="contact-us-popup">Contact</a></li>

(I figured) It must apply to the new item of the <li> ... </li>s as well !!!!

So, I WENT BACK again to the product.css file and edited the corresponding to the HTML upper level <ul id="more_info_tabs" class="idTabs idTabsShort clearfix" :

.more-info>ul {

float: left;

min-width: 145px;

}

(instead of the css higher one :

.more-info {

display: inline-block;

margin-bottom: 30px;

margin-top: 50px

}) corresponding to the HTML <div class="more-info col-xs-12">

into this :

.more-info>ul {

float: left;

min-width: 145px;

position: relative;

line-height: 25px;

display: block;

padding: 0 0 20px 0;

text-transform: uppercase;

color: #bebebe;

font-size: 14px;

font-weight: 700;

font-family: Poppins;

-webkit-transition: all 300ms ease-in;

-moz-transition: all 300ms ease-in;

-ms-transition: all 300ms ease-in;

-o-transition: all 300ms ease-in;

transition: all 300ms ease-in

}

The result is as I wanted

:

Sometimes you definitely must go two or three steps back in order to reach the bottom line

I will also look at A2 Hosting plans for when I launch (hopefully by next week) : www.a2hosting.com

Looks great!

All the best!

Edited September 2, 2017 by Abdillokra (see edit history)

berkay.kpdg · December 20, 2018

Hi, I try that codes but I have problem.

after wrote this code I try on localhost "contact-us" but just loading after that I get error ;"The requested content cannot be loaded.
Please try again later. " anyone knows why it is not work well. How have you done?

<a href="{$link->getPageLink('contact')}?content_only=1" id="contact-us-popup">Contact Us</a>

<script>
   {literal}
   $(document).ready(function() {
      $('#contact-us-popup').fancybox({
         type: 'ajax',
         autoDimensions: false,
         autoSize: false,
         width: 600,
         height: 'auto'
      });

   });
   {/literal}
</script>

NemoPS · January 3, 2019

Are you sure emails are being sent on localhost? Try from the back office first, chances are your local server is not configured for that.

ggkikas · April 30, 2020

On 9/1/2017 at 9:25 PM, Abdillokra said:

Great tutorial, many thanks Nemo!!!!

http://nemops.com/prestashop-ajax-contact-form/#.WBhwB_nx6Uk

Here's the referenced piece of code :

<a href="{$link->getPageLink('contact')}?content_only=1" id="contact-us-popup">Contact Us</a>



<script>

{literal}

$(document).ready(function() {

$('#contact-us-popup').fancybox({

type: 'ajax',

autoDimensions: false,

autoSize: false,

width: 600,

height: 'auto',

afterShow: function() {

$('.contact-form-box').submit(function(e) {

e.preventDefault();

var formdata = new FormData($(this)[0]);

formdata.append('submitMessage', 1);

var that = $(this);

$.ajax({

type: 'POST',

data: formdata,

url: $(this).attr('action'),

contentType: false,

processData: false,

success: function(data){

var error = $($.parseHTML(data)).filter('.alert.alert-danger');

if(error.length > 0)

that.prepend(error)

else {

// succes!

var success = $($.parseHTML(data)).filter('.alert.alert-success');

that.fadeOut('fast', function(){

$(this).after(success)

});

}

}

})



});

}

});

});

{/literal}

</script>

in which page i have to add this code ? im trying to edit /themes/at_movic/templates/product.tpl but seems like nothing change

Sign In

tutorial Creating an ajax contact form on the product page

Recommended Posts

NemoPS

Link to comment

Share on other sites

Abdillokra

Link to comment

Share on other sites

Abdillokra

Link to comment

Share on other sites

Abdillokra

Link to comment

Share on other sites

berkay.kpdg

Link to comment

Share on other sites

NemoPS

Link to comment

Share on other sites

ggkikas

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com