Add Image Upload to Disputes

Neto now supports an image upload feature for order disputes raised through the webstore My Account section. This allows your customers to upload images when creating a new dispute and when adding a comment to an existing dispute.

If your theme does not have this feature you can tweak your templates using the following guide.

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

Read through the Getting Started Guide to get a better sense of how the control panel, Database and Front End store interact.
Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
The code snippet in this tweak doc uses Bootstrap 4, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Coding Instructions

Step 1: Locate your themes dispute templates

In your control panel, navigate to Settings & Tools > All Settings & Tools > Webstore Templates and locate the theme folder where you wish to add the dispute image upload feature. This could be your current active theme, or any other theme you have installed. Within your theme folder, navigate to: templates > customer > warranty.

You can also make these changes via SFTP if you have access. Don't have SFTP access, read this first.

Step 2: Update templates for new disputes

Make the following changes to your existing templates

Open Dispute

/httpdocs/assets/themes/[THEME-NAME]/templates/customer/warranty/open_dispute.template.html

Locate the <form> element and add enctype="multipart/form-data" to the form attributes. Your <form> element should now start with (Skeletal Theme reference):

<form name="disputeForm" action="[%URL page:'account' type:'warranty' fn:'create' %][%/ URL%]" method="post" enctype="multipart/form-data">

Locate the <textarea> element and add the following code underneath (Skeletal Theme reference):

<br/>
<label><b>Upload Image</b></label>
<p>Choose file to select and upload.</p>
<input type="file" name="disputeImage" accept="image/png, image/jpeg, image/gif">

An upload image field will now be available when creating a dispute.

Dispute Sent

/httpdocs/assets/themes/[THEME-NAME]/templates/customer/warranty/dispute_sent.template.html

Locate the existing [%DATA%] function and add the following code underneath (Skeletal Theme reference):

[%DATA id:'warning' if:'ne' value:''%]<div class="alert alert-warning"><a class="close" data-dismiss="alert">×</a>[@warning@]</div>[%/ DATA%]

If there is an error with the image upload, it will now be reflected when submitting the dispute.

Step 3: Update templates for existing disputes

View Dispute

/httpdocs/assets/themes/[THEME-NAME]/templates/customer/warranty/view_dispute.template.html

Locate the existing [%if [@error@]%] function and add the following code underneath (Skeletal Theme reference):

[%if [@warning@]%]<div class="alert alert-warning" role="alert"><a class="close" data-dismiss="alert">×</a>[@warning@]</div>[%/if%]

If there is an error with the image, it will now be reflected when viewing the dispute.

Locate the <form> element and add enctype="multipart/form-data" to the form attributes. Your <form> element should now start with (Skeletal Theme reference):

<form name="disputeForm" action="[%URL page:'account' type:'warranty' fn:'create' %][%/ URL%]" method="post" enctype="multipart/form-data">

Locate the following code:

<span class="badge badge-info">[%format type:"date" format:'DATETIME'%][@date_sent@][%/format%]</span>
<p class="small">[%format type:'text' case:'title'%][@from_name@][%/format%]</p>
<p class="list-group-item-text">[@message@]</p>

and replace it with the following (Skeletal Theme reference):

<div class="row">
    <div class="col-md-6">
        <span class="badge badge-info">[%format type:"date" format:'DATETIME'%][@date_sent@][%/format%]</span>
        <p class="small">[%format type:'text' case:'title'%][@from_name@][%/format%]</p>
        <p class="list-group-item-text">[@message@]</p>
    </div>
    <div class="col-md-6">
        <a href="[%asset_url type:'disputes' id:'[@msg_id@]' thumb:'full' default:'[@config:ASSETS_URL@]/pixel.gif'%][%/asset_url%]" target="_blank">
            <img width="50" height="50" src="[%asset_url type:'disputes' id:'[@msg_id@]' thumb:'thumb' default:'[@config:ASSETS_URL@]/pixel.gif'%][%/asset_url%]">
        </a>
    </div>
</div>

If an image is available for a dispute message, it will now be displayed along side the message contents.

Locate the <textarea> element and add the following code underneath (Skeletal Theme reference):

<br/>
<label><b>Upload Image</b></label>
<p>Choose file to select and upload.</p>
<input type="file" name="disputeImage" accept="image/png, image/jpeg, image/gif">

An upload image field will now be available when adding a new dispute message.

Dispute Updated

/httpdocs/assets/themes/[THEME-NAME]/templates/customer/warranty/dispute_updated.template.html

Locate the existing <h1> element and add the following code underneath (Skeletal Theme reference):

[%if [@warning@]%]<div class="alert alert-warning" role="alert"><a class="close" data-dismiss="alert">×</a>[@warning@]</div>[%/if%]

If there is an error with an image, it will now be reflected when updating the dispute.

Your theme now supports the image upload feature for disputes.

Request a quote