Shopify integration with Jotform

  • juicebureau
    Asked on November 29, 2015 at 9:43 PM

    We're currently using Shopify on our website for the sales end of everything.

     

    When Jotform sends an email about a new order, I'd like it to mention what was purchased. To do this I assume we'll have to integrate with Shopify? Or can this be done through integration with Paypal or in some other way?

     

    Thanks so much in advance!

     

    Brodie

  • Chriistian Jotform Support
    Replied on November 30, 2015 at 7:53 AM

    Hi Brodie,

     

    You can create an order form in JotForm. You can set this up in your form by adding a Paypal field in your form. Here is a guide that might help you on setting this up: Setting Up Your First Order Form.

     

    Do let us know if you need further assistance.
    Regards.

  • juicebureau
    Replied on November 30, 2015 at 11:45 PM
    Hi Chriistian,
    Because we have a range of over 65 products, and because the customer will have already chosen their products by the time they get to the Jotform, it wouldn't make any sense to get them to choose their products again.
    Is there a way to integrate the products that already exist in the Shopify system?
    Brodie Wedding
    Nutritionist
    [http://i304.photobucket.com/albums/nn195/aldershots/JuiceBureau_zpscaehtxql.png]
    m 0430 718 031
    w www.juicebureau.com.au
    f facebook.com/juicebureau
    157 The Parade, Norwood 5067
    ________________________________
    ...
  • juicebureau
    Replied on November 30, 2015 at 11:45 PM
    ?Or is there a way that we can integrate the products from the Paypal transaction? And place them in an email?
    Brodie Wedding
    Nutritionist
    [http://i304.photobucket.com/albums/nn195/aldershots/JuiceBureau_zpscaehtxql.png]
    m 0430 718 031
    w www.juicebureau.com.au
    f facebook.com/juicebureau
    157 The Parade, Norwood 5067
    ________________________________
    ...
  • Chriistian Jotform Support
    Replied on December 1, 2015 at 1:36 AM

    Hi,

     

    Unfortunately, there is no way to integrate existing Shopify products to JotForm. A workaround that I can think of is to add a text box field in your form and prepopulate the field by the product selected by your user so you can have a record of the product selected by your user and you can also add that on your form's notification email. You can check this guide on how to prepopulate your form: Prepopulating fields to your JotForm via URL parameters,

     

    Do let us know if you need further assistance.
    Regards. 

  • juicebureau
    Replied on December 3, 2015 at 6:45 PM
    ?Thanks Chriistian,
    I'm not sure how to automatically prepopulate the form with what they've purchased. I could prepopulate with set text but I'm sure how to go about prepopulating with a variable.
    This is the URL containing both the customer's "cart" and the Jotform that requires the information (all products that were purchased):
    http://www.juicebureau.com.au/cart?
    Let me know what you think and thank you for your help,
    Brodie Wedding
    Nutritionist
    [http://i304.photobucket.com/albums/nn195/aldershots/JuiceBureau_zpscaehtxql.png]
    m 0430 718 031
    w www.juicebureau.com.au
    f facebook.com/juicebureau
    157 The Parade, Norwood 5067
    ________________________________
    ...
  • Chriistian Jotform Support
    Replied on December 3, 2015 at 9:16 PM

    Hi Brodie,

     

    May I know when does the user fills up your JotForm? Can you also provide to us the link or name of the form in question so we can further check? Maybe this thread might help you set up prepopulation of your form with shopify variable: Can I pass variable values to a field in jotform.

     

    Do let us know if you need further assistance.
    Regards.

  • juicebureau
    Replied on December 3, 2015 at 9:45 PM
    The user fills out the form AFTER they have chosen the products they wish to buy.
    There is the form:
    https://form.jotform.com/52067578495974?
    And that thread is what I'm looking for, but I'm not sure how to into the javascript..
    Thank you!
    Brodie Wedding
    Nutritionist
    [http://i304.photobucket.com/albums/nn195/aldershots/JuiceBureau_zpscaehtxql.png]
    m 0430 718 031
    w www.juicebureau.com.au
    f facebook.com/juicebureau
    157 The Parade, Norwood 5067
    ________________________________
    ...
  • Chriistian Jotform Support
    Replied on December 3, 2015 at 11:14 PM

    Hi,

     

    I am not really familiar with shopify but the script mentioned in the thread that I have provided:

    <script type="text/javascript" src="//form.jotform.us/jsform/52067578495974?order={{ order_number }}&yourName={{ customer.name }}&email={{ customer.email }}"></script>


    is the embed code of the form and this part

    order={{ order_number }}&yourName={{ customer.name }}&email={{ customer.email }}

    is the URL parameter that will populate the field in the form and the value is set tot he shopify variable.

     

    May I know how did you embed your form? Or, are you just redirecting the user to the direct link of your form? If you are just redirecting the user to your form, You may try to embed your form in your site using the code above. Add an Order Text box field in your form and see if it will prepopulate the field. 

     

    Do let us know the result of your testing.
    Regards.

  • juicebureau
    Replied on December 6, 2015 at 6:45 PM
    Okay I'm completely lost.
    I don't know where I would input this script "order={{ order_number }}&yourName={{ customer.name }}&email={{ customer.email }}" Would I open a text box and paste it in a condition?
    The Jotform is embedded in the Cart page:
    http://www.juicebureau.com.au/cart?
    But it only appears if you order a One Day Cleanse.
    I can't see Order Text Box as an option. All I can see is Text Box and Text Area.
    Brodie Wedding
    Nutritionist
    [http://i304.photobucket.com/albums/nn195/aldershots/JuiceBureau_zpscaehtxql.png]
    m 0430 718 031
    w www.juicebureau.com.au
    f facebook.com/juicebureau
    157 The Parade, Norwood 5067
    ________________________________
    ...
  • Chriistian Jotform Support
    Replied on December 6, 2015 at 8:59 PM

    Hi,

     

    I checked the site you provided, selected a One day Cleanse product and I was able to see your form. I see that you have embedded your form using the script embed code.

    Shopify integration with Jotform Image 1 Screenshot 20

     

    Please try to replace the script/embed code you use from this:

    <script type="text/javascript" src="//form.jotformpro.com/jsform/52067578495974"></script>

    to this:

    <script type="text/javascript" src="//form.jotformpro.com/jsform/52067578495974?name={{cart.items}}"></script>

    Please note that I have added the cart.items variable in the name field for testing purposes only. If the Name field was prepopulated, please try to add a new Text box field in your form to store the Product selected in the cart.

     

    Do let us know if you need further assistance.
    Regards.

     

  • juicebureau
    Replied on December 8, 2015 at 3:45 AM
    Okay, I've placed {cart.items} in the automatic email but it hasn't come up with item in the cart during a test.
    Should this work or is there something I'm missing??
    Brodie Wedding
    Nutritionist
    [http://i304.photobucket.com/albums/nn195/aldershots/JuiceBureau_zpscaehtxql.png]
    m 0430 718 031
    w www.juicebureau.com.au
    f facebook.com/juicebureau
    157 The Parade, Norwood 5067
    ________________________________
    ...
  • Chriistian Jotform Support
    Replied on December 8, 2015 at 4:01 AM

    I checked your site - http://www.juicebureau.com.au/cart and I noticed that the embed code is still the same. 

    Shopify integration with Jotform Image 1 Screenshot 30

     

    You are still using original script code instead of this

    <script type="text/javascript" src="//form.jotformpro.com/jsform/52067578495974?name={{cart.items}}"></script>

     

    Try to re-embed your form using the new code that I have provided. Here is a simple guide on how to embed your form in Shopify.

    Shopify integration with Jotform Image 2 Screenshot 41

     

  • juicebureau
    Replied on December 9, 2015 at 6:45 PM
    Sorry Christian,
    I've changed the embed code here (attached) but I can't find the other instance of the code...
    Brodie Wedding
    Nutritionist
    [http://i304.photobucket.com/albums/nn195/aldershots/JuiceBureau_zpscaehtxql.png]
    m 0430 718 031
    w www.juicebureau.com.au
    f facebook.com/juicebureau
    157 The Parade, Norwood 5067
    ________________________________
    ...
  • Chriistian Jotform Support
    Replied on December 9, 2015 at 8:22 PM

    Hi Brodie, 

     

    I was not able to see that attached file you mentioned. If it is a screenshot, please attached it directly on this thread. You can open the thread here: https://www.jotform.com/answers/713954. To add a screenshot on this thread, just follow the instructions provided in this article: How to add screenshots images to questions in support forum.

    Please use this code in embedding your form:

    <script type="text/javascript" src="//form.jotformpro.com/jsform/52067578495974?name={{cart.items}}"></script>

     

    We will wait for your reply.
    Regards.

  • juicebureau
    Replied on December 9, 2015 at 8:27 PM

    Sorry, here is the screenshot:Shopify integration with Jotform Image 1 Screenshot 20

  • Chriistian Jotform Support
    Replied on December 9, 2015 at 9:42 PM

    I checked again the page but it seems to be that code was not reflected on the cart page (http://www.juicebureau.com.au/cart) where you have embedded the form.

    Shopify integration with Jotform Image 1 Screenshot 20

     

    Can you try to re-embed your form using this code?

     <script type="text/javascript" src="//form.jotformpro.com/jsform/52067578495974?name=Enter%20Name"></script>

    I have replaced the {{ cart.items }} variable in the code to a static text so we can test if the prepopulation will work properly. Please ensure that you have added the code on the cart page where I am checking. If you have embedded the code on a different page, please provide to us the exact URL so we can check. 

     

     

  • juicebureau
    Replied on December 9, 2015 at 10:45 PM
    I've added the code but I tested the form and it doesn't display the active product
    Brodie Wedding
    Nutritionist
    ?
    ________________________________
    ...
  • Chriistian Jotform Support
    Replied on December 10, 2015 at 12:14 AM

    I was able to check the cart page and see that the prepopulation of static text is working properly on your embedded form. 

    Shopify integration with Jotform Image 1 Screenshot 20

     

    It seems to be that the {{cart.items}} is not the correct variable to pass. As per checking the {{ cart.items }} is the collection/list of the items added to cart. You need to pass a text value variable in the link for it to work i.e {{ customer.name }}.

     <script type="text/javascript" src="//form.jotformpro.com/jsform/52067578495974?name=shopifyvariable"></script>

     

    Since I am not familiar with shopify, I am not really sure what other variables can be use for this. You may want to coordinate with shopify support or programmers that are familiar with it to get the text variable for the products in the cart to be passed on JotForm. 

     

     

  • juicebureau
    Replied on December 10, 2015 at 5:45 PM
    Thanks Christian,
    Is there anyone else that can help?
    ?
    ________________________________
    ...
  • Chriistian Jotform Support
    Replied on December 10, 2015 at 8:16 PM

    Hi,

     

    I tried to further research this issue and as per further checking, it seems that there is no predefined variable that we can use to get the list of the products in cart in a string variable. This will be possible by coding. Can you try the code below in your cart page where you have embedded the form and see if it will work? I have created a simple code in shopify so we can get the cart.items value in a comma delimited list. 

    {% assign my_cart_items = "" %}

    {% if cart.item_count > 0 %}

    {% for item in cart.items %}

    {% if my_cart_items == "" %}

    {% assign my_cart_items = item.title %}

    {% else %}

    {% assign my_cart_items = my_cart_items | append: ', ' | append:item.title %}

    {% endif %}

    {% endfor %}

    {% endif %}

     <script type="text/javascript" src="//form.jotformpro.com/jsform/52067578495974?name={{ my_cart_items }}"></script>

     

    Regards.

  • juicebureau
    Replied on December 13, 2015 at 10:59 PM

    Thank you Chriistian, I appreciate that,

     

    Although the code doesn't seem to work?

     

    Could it be an issue with where I placed it in the cart script? I don't think so but I can't be sure.

    Shopify integration with Jotform Image 1 Screenshot 20

  • Kevin Support Team Lead
    Replied on December 14, 2015 at 9:26 AM

    Hi,

    I found a similar issue in another post, but in the Shopify support page, click here to see the link.

    Seems the issue you are getting is being displayed even if the code is correct and do not have any error.

    As suggested on the link I provided, try adding the code in a different wizard.

    Let us know the result.

    Thanks,.

  • juicebureau
    Replied on December 14, 2015 at 9:45 PM
    ?The thread doesn't seem to point out where to place the code. Do I add it to the cart page? And do I remove any existing code to replace with this?
    Brodie Wedding
    Nutritionist
    [http://i304.photobucket.com/albums/nn195/aldershots/JuiceBureau_zpscaehtxql.png]
    m 0430 718 031
    w www.juicebureau.com.au
    f facebook.com/juicebureau
    157 The Parade, Norwood 5067
    ________________________________
    ...
  • Charlie
    Replied on December 15, 2015 at 1:31 AM

    I'm also not familiar with Shopify, but I'll try to make some test in my end and see if I can check if this is possible or if there's any error somewhere. I'll get back to you as soon as I have my findings.

  • Charlie
    Replied on December 15, 2015 at 1:44 AM

    I'm not sure how your process works in your website and I am also not able to see the form embedded on this page: http://www.juicebureau.com.au/cart.

    When and what part of your process where the JotForm form shows? Is it after after the checkout process? Or before it?

    Currently, I see in this guide that the values in the cart can be fetched using the correct tags: https://docs.shopify.com/themes/liquid-documentation/objects/cart.

    Try using {{ cart.item_count }} to prepopulate the JotForm URL, if that does not work, the problem is not on the fetched values but rather to where and how the data flows in your process. 

    It would be best to contact Shopify experts in their discussion forum to know where to embed scripts with forms where global variable can be used.