Integration of JavaScript

Highlighted
Tourist
13 0 0

Hey guys,

I am hard at work integrating a small JavaScript application into my product page. The application itself works just perfect, but I am not happy with the placement of the form for the data input. Readout of this data only works when the form is at the very bottom of the product page just above the product recommendations. I have a feeling that I haven't fully understood the logic behind all these liquid files.

My current solution looks like this:

- my product.liquid file contains the input form. The code for it is placed between the sections product-template and recommendations, hence it makes sense that the form appears just above the recommendations.

- the product-template.liquid file contains the JavaScript code, which then reads out data from the input form. Works just fine.

However, if I now place the input form above the code for the add to cart button in the product-template file, the JavaScript all of a sudden stops working. What am I missing?

Any hint towards the solution would be greatly appreciated.

 

Cheers

 

 

0 Likes
Highlighted
Excursionist
13 1 0

There shouldn't be any problem by adding the form "somewhere". 

Did you create a new div-container somewhere in between?

0 Likes
Highlighted
Tourist
13 0 0

Thank you for your quick answer!

I've tried playing around with the product-template file now and removed some of the div containers. Unfortunately it still doesn't work when the form is place as intended.

It looked something like this and was placed just below the %endif% containing certain div tags (such as quantity selector etc.):

<form action="#" method="get" target="_blank" name="FORM">
      
  
        <input type="text" placeholder="Vorname" id="Vorname" name="Vorname">
        <br>
          <br>
        <input type="text" placeholder="Nachname" id="Nachname" name="Nachname">
        <br>
          <br>
        <input type="text" placeholder="E-Mail" id="EMail" name="EMail">
        <br>
          <br>
        <input type="text" placeholder="Telefonnummer" id="Telefonnummer" name="Telefonnummer">
        <br>
</form>
 
<script type="text/javascript">
        function openURL(){
            var Vorname = document.FORM.Vorname.value;
            var Nachname = document.FORM.Nachname.value;
            var EMail = document.FORM.EMail.value;
            var Telefonnummer = document.FORM.Telefonnummer.value;
            var url = "https://...:";
            var Endteil = "%0AEND:VCARD%0A/&size=1000x1000";
            var VorNach = "%20";
            var NachNach = "%0AN:";
            var Strichpunkt = ";";
            var VorTel = "%0ATEL;CELL:";
            var VorMail = "%0AEMAIL;HOME;INTERNET:";
          
 
          url += Vorname += VorNach+= Nachname += NachNach += Nachname += Strichpunkt += Vorname += VorTel += Telefonnummer 
            += VorMail += EMail += Endteil;
 
            window.location = url;
        }
        </script>
0 Likes
Highlighted
Tourist
13 0 0

Thank you for your quick answer!

I have played around with the product-template file a bit, however, removing some div containers hasn't led me to a solution yet.

Regarding the code, this is what it looked like when I was done playing around (placed just below the %endif% that contains e.g. the add to cart button):

<form action="#" method="get" target="_blank" name="FORM">
       <input type="text" placeholder="Vorname" id="Vorname" name="Vorname">
        <br>
        <br>
        <input type="text" placeholder="Nachname" id="Nachname" name="Nachname">
        <br>
          <br>
        <input type="text" placeholder="E-Mail" id="EMail" name="EMail">
        <br>
          <br>
        <input type="text" placeholder="Telefonnummer" id="Telefonnummer" name="Telefonnummer">
        <br>       
 </form>
 <script type="text/javascript">
        function openURL(){
            var Vorname = document.FORM.Vorname.value;
            var Nachname = document.FORM.Nachname.value;
            var EMail = document.FORM.EMail.value;
            var Telefonnummer = document.FORM.Telefonnummer.value;
            var url = "https://...:";
            var Endteil = "%0A...";
            var VorNach = "%20";
            var NachNach = "%0AN:";
            var Strichpunkt = ";";
            var VorTel = "%0ATEL;CELL:";
            var VorMail = "%...:";
          
          url += Vorname += VorNach+= Nachname += NachNach += Nachname += Strichpunkt += Vorname += VorTel += Telefonnummer 
            += VorMail += EMail += Endteil;
            window.location = url;
        }
        </script>
0 Likes
Highlighted
Excursionist
13 1 0

Could you try to add the script to the head of your theme file and just add the form to the product page? Will it then work?

0 Likes
Highlighted
Tourist
13 0 0

When I do that the script all of a sudden stops working.

I think the button that triggers the script also has something to do with it:

     <div class="product-form__item"> 
        <p><input class="btn product-form__cart-submit" type="button" name=".." value="..." onclick="openURL()"></p>
    </div>
0 Likes