Product customization (texte + image upload) : can't retrieve the data entered by customer

Highlighted
New Member
24 0 0

Hello, 

 

I'm trying to insert product customization field on a new template so that customer can customize their item (by entering a text or sending an image).

But I'm quite struggling and would appreciate any help.

 

Here is a detail if what I did, if someone could help me that would be great cause I have the feeling there's not too much missing ! 

For information, I'm using the theme "Wokiee" (which appears to be a sectionned theme).

 

So I've followed the Shopify tutorial "Get customization information for products" here : https://help.shopify.com/en/themes/customization/products/features/get-customization-information-for...

 

Everything is OK until I arrived to the part where I should locate "type="submit" in the product-customizable-template.liquid

I can't find this, it's not existing in this file.

 

Then I ran into this other tutorial : https://www.envision.io/blogs/ecommerce-pulse/95036801-how-to-create-customizable-products-in-shopif...

 

So I've tried to combined both tutorial and here's what I've done : 

  • I've created a new template named "product.customizable.liquid" (and didn't change anything in it compared to the original template "product.liquid")
  • Then I went into the Snippets section and edit this file "product_page_1_description.liquid", which is the one I edit usually to make change to the product page template. I've added this piece of code : 

 

{% if template contains 'product.customizable' %}

<p class="line-item-property__field">
  <label for="personnalisation">PERSONNALISATION</label>
  <input id="personnalisation" type="text" name="properties[PERSONNALISATION]">
  </br>
  <label for="image">IMAGE</label>
  <input id="image" type="file" enctype="multipart/form-data" name="properties[IMAGE]">
</p>

{% endif %}

As you can see it doesn't look so bad as I can see the 2 fields I want : a text field and an image upload button.

 

You can see the result on this product page : https://gourde-morning.com/products/bouteille-rose-noir

Or on this image : 

Capture d’écran 2019-10-14 à 08.21.52.png

 

I was pretty happy but here is the trick : I can't retrieve the information entered in the text field and the image uploaded.

 

I've edited the email template that I receive for each order by replacing this

{{ line.title }}

by

{{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}

I also edited the one the customer receives and I made 4 or 5 test orders (with the bogus gateway) but I've never seen the information entered during the order appeared :

Capture d’écran 2019-10-14 à 08.26.18.png

 

I couldn't neither see this information in the order admin panel of Shopify (which should be doable from what I've read)

Capture d’écran 2019-10-14 à 08.28.45.png

 

If anyone could help me to retrieve this information, that would be great ! 

0 Likes
Shopify Partner
84 15 19

Hello @GourdeMorning 

 

I can help you please contact me 


Best Regards
Parth Bhut

............................................................................................................................

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: parth.bhut143@outlook.com [This is my PAYPAL too:) ]
Skype: parthbhut7

0 Likes
Shopify Partner
15 2 2

Hi @GourdeMorning 

 

Already checked your product page I see here is Double Product from which is a need to the move underneath product variants and remove duplicated form tag then it will be working.

 

Thank you

KoderWeb
Want to modify or custom changes on store hire us.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

Email: mdraselhossain69@gmail.com
Shopify Expert | Shopify Designer | Shopify Developer
0 Likes

Hi @GourdeMorning,

 

Is this something you would like to achieve? Please confirm. 

Please reach out for further discussion.

 

https://perennialsolution.myshopify.com/products/personalized-product

Thanks & Regards
Perennial Solution

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
New Member
24 0 0

@KoderWeb I was making some tests with a third party app, that's why you saw a double form I guess :)

I've removed the app and by changing the place of the code (putting it on the form section), I've managed to receive the customized text input by the customer :) So that's a great 1st step !

 

Now, I can't figure out how to receive an image also.

 

Here is the piece of code I've inserted : 

<p class="line-item-property__field">
  <label for="personnalisation">PERSONNALISATION</label>
  <input id="personnalisation" type="text" name="properties[PERSONNALISATION]">
  </br>
  <label for="image">IMAGE</label>
  <input id="image" type="file" accept=".jpg,.png,.jpeg,.psd,.ai,.eps,.pdf,.svg" name="properties[IMAGE]">
</p>

But this is not working, I'm not retrieving any picture on the backoffice.

Any idea of what am I missing ?

 

@Perennial , yes this is exactly what I wanted and it's working now :) But now I'm missing the upload file part to work OK

0 Likes
Shopify Partner
15 2 2

Hi @GourdeMorning,

You can just use this code no need to accept attribute 

<input id="image" type="file"  name="properties[IMAGE]">

Solve your image issue and after solve accept the solution.

Thank you

KoderWeb
Want to modify or custom changes on store hire us.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

Email: mdraselhossain69@gmail.com
Shopify Expert | Shopify Designer | Shopify Developer
0 Likes
New Member
24 0 0

Hello @KoderWeb , I've added the accept attribute afterwhile just to make sure they can upload only picture.

But it was already not working before :/ 

 

I'm wondering if it's not linked to my cart style ?

When you click "add to cart" it opens a pop up.

 

Isn't it uncompatible with the uplaod file functionnality ?

0 Likes
Shopify Partner
15 2 2

Hi @GourdeMorning ,

Few unclear your question but Few complicated functions you can't do yourself because you don't have enough experience in Shopify code. So if you would like to add popup you need to hire someone.

Thank you

KoderWeb
Want to modify or custom changes on store hire us.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!

Email: mdraselhossain69@gmail.com
Shopify Expert | Shopify Designer | Shopify Developer
0 Likes