Jump to content

Creating an ajax contact form on the product page


Recommended Posts

  • 10 months later...

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>
Edited by Abdillokra (see edit history)
Link to comment
Share on other sites

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-decorationnone;

 

}

 

 

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

 

positionrelative;

line-height25px;

displayblock;

padding0 0 20px 0;

text-transformuppercase;

color#bebebe;

font-size14px;

font-weight700;

font-familyPoppins;

-webkit-transitionall 300ms ease-in;

-moz-transitionall 300ms ease-in;

-ms-transitionall 300ms ease-in;

-o-transitionall 300ms ease-in;

  1. transitionall 300ms ease-in;

 

 

 

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

 

color#777;

text-decorationnone;

 

})

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

 

positionrelative;

line-height25px;

displayblock;

padding0 0 20px 0;

text-transformuppercase;

color#bebebe;

font-size14px;

font-weight700;

font-familyPoppins;

-webkit-transitionall 300ms ease-in;

-moz-transitionall 300ms ease-in;

-ms-transitionall 300ms ease-in;

-o-transitionall 300ms ease-in;

transitionall 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)

 

post-1423285-0-89786900-1504309861_thumb.png

 
 

- 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), 

 

post-1423285-0-68073100-1504309886_thumb.png

 

but for some reason the CONTACT tab is still displaying

the #777 color of the original css

({

 

color#777;

text-decorationnone;

 

})

 

 

 

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

 

 ({

 

color#777;

text-decorationnone;

 

})

 
parameter) ?
 
 

 

many thanks for your advice and great tutorials!

Edited by Abdillokra (see edit history)
Link to comment
Share on other sites

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:

 

<!-- Out of stock hook -->
<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>
<!-- end center infos-->
{if !$content_only}
<div class="more-info col-xs-12">
<ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
{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>
                <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>
            {$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 :

 

<!-- Out of stock hook -->
<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>
<!-- end center infos-->
{if !$content_only}
<div class="more-info col-xs-12">
<ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
{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>
                <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>
            {$HOOK_PRODUCT_TAB}
</ul>
 
 
Then thinking that the hierarchy applies to the to the other <li>...</li>
 
 
<ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
{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 :) :
 
post-1423285-0-34393800-1504317227_thumb.png
 
post-1423285-0-29934300-1504317256_thumb.png
 
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 by Abdillokra (see edit history)
Link to comment
Share on other sites

  • 1 year later...

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>
 
Link to comment
Share on other sites

  • 2 weeks later...
  • 1 year later...
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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...