Hello,
I'm trying to add an image upload box in a product page. I've been following this shopify tutorial:
I've encountered a few issues:
<p class="line-item-property__field"> <label for="custom_photo">Photo (JPG or PNG)</label> <input required id="custom_photo" type="file" name="properties[Photo]"> </p>
So, what am I missing here? I don't have AJAX/drawer cart on and I'm using the narrative theme.
I'd really like to be able to do this without paying extra fees to external apps..
Thanks!
Hi,
They don't tell you the file upload because may be in your product form added attribute "novalidate", so please check and remove this so user can not add product without file upload.
And for image or file upload may be you need to upload image on your external server first before add to cart because shopify can not find path of uploaded image. that's why shopify can not pass uploaded file path in your order.
Hi @Mozay
Yes if you want to show preview on cart page of uploaded image then you have to first upload image on your external server then you can set path of this file to show preview.
Let me know if you need help.
What page would I do that from and how do I link it? Would it have to be on both the product.template.liquid & cart.liquid?
This is on the product-template.1
{% if section.settings.show_quantity_selector %}
<div class="product-form__item product-form__item--quantity">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*" data-quantity-input>
</div>
{% endif %}
<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden" data-error-message-wrapper role="alert">
{% include 'icon-error' %} <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
</div>
<div class="product-form__item product-form__item--Uploaded Image">
<label for="custom_photo">Upload Image</label>
<input required id="custom_photo" type="file" name="properties[Uploaded Image]" class="product-form__input">
</div>
{% if template contains 'custom-1' %}
<p class="line-item-property__field">
<label for="custom_photo">Photo (JPG or PNG)</label>
<input required id="custom_photo" type="file" name="properties[Photo]">
</p>
<p class="line-item-property__field">
<label for="custom-message">Custom message</label>
<textarea required id="custom-message" name="properties[Custom message]"></textarea>
</p>
<style>
.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}
.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
</style>
{% endif %}
On the cart.liquid page under {{ item.product.title }}. I added this code..
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
I have both amazon s3 and dropbox business. if that helps.
Thank you so much!
For that you have to upload image in your external severer using Jquery+ajax and PHP (or any script language), then get back uploaded image path in response and then pass it in line item property (i.e: name="properties[Photo]")
On cart page you have to find line item contain "Photo" then set this path url i image tag to show image preview
Let me know if you need help or want me to do this.
Subject | Author | Posted |
---|---|---|
48 seconds ago | ||
8m ago | ||
12m ago | ||
18m ago | ||
20m ago |