Get product page URL to pass through to a form

joeone
Tourist
7 0 4

Hi,

I have a link added to each product page to 'Contact for more information' which opens a form page for the user to ask about the product.

What I want is for the form to know the URL and name of the product page it was linked from, so these sections are pre-filled in the form.

This means the user can submit their question about the product and i can more easily locate and answer questions about the product when I receive the email from them.

Any idea how I can get this info or if it is even possible to execute in this way using liquid or Java?

Thanks!

 

 

0 Likes

You could pass a query parameter in the URL of the form page with the product name, and use JS to get it from the URL in the form page and pre fill it into the form.

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
joeone
Tourist
7 0 4

Sounds like a solid suggestion.

I have a kind fo work around at the moment that uses java to get the document.referrer data from the previously browsed page. Because the user always has to navigate to the contact form from the product page this method kind of works but is a bit buggy and doesn't work in all browsers for some reason. So I was hoping for something more robust.

Would it be possible to do something like you are suggesting with the product URL too?

Maybe you have a code snippet or something that can outline the method you are thinking of?

Thanks in advance.

 

 

0 Likes

you can possibly have the link like the following in your product-template.liquid

<a href="http://yourstore.myshopify.com/pages/contact-form?product_id={{ product.id }}>contact us</a>

 then in your page.contact.liquid, put a hidden form field and add the following JS to theme.js

<input type="hidden" name="product_id"/>
$(document).ready(function(){
var urlParams = new URLSearchParams(window.location.search);
$('[name=product_id]').val(urlParams.get('product_id'));
})

 

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes
joeone
Tourist
7 0 4

Thanks for this excellent suggestion! 

Actually I got the functionality I was looking for with a combination of your suggestion and other techniques.

I used the URL parameter that you suggested to pass the product.handle (URL) and product.title to the form page, via the link on the product page:

<a target="_top" href="https://mystore.myshopify.com/pages/product-contact?id={{ product.handle }}&title={{ product.title }}">I want to know more about this item</a>

 

Then I managed to get some code in Liquid to essentially do the same you were suggesting in Java, on the form page:

{% assign pageurl = content_for_header| split:'"pageurl":"' | last | split:'\u0026' | first %}
{% assign product_url = pageurl | split:'?id=' | last %}

content_for_header contains the page URL including other information, so I used split to extract it from the string. In the case above, for the URL of the referring product page. Which I can then append with the general directory to give the URL of the page:

<input type="hidden" id="product_url" class="input-full" name="contact[product_url]" value="https://mystore.com/products/{{ product_url }}" readonly >

 

Then a similar process for the title (to give the user some easier to understand context on the form page):

 {% assign pagetitle = content_for_header| split:'title=' | last | split:'"' | first %}
      {% assign product_title = pagetitle | replace: "%20", " "%}

<p><b>I WANT TO KNOW MORE ABOUT: {{ product_title }} </b></p>

Here I use split to extract the title from the URL, which is pulled from content_for_header, same as before. Then just some replace to change %20 URL space markers into blank spaces for easier reading.

 

 

Thanks for the pointer and getting me in the right direction for a solution! Hope it's useful to someone else wanting the same result without Java.