Instantly share code, notes, and snippets.

Embed
What would you like to do?
Salesforce VisualForce page for Self Service Returns
<apex:page controller="ShopifyReturnController" showHeader="false" cache="false" standardStylesheets="false" docType="html-5.0">
<apex:stylesheet value="{!URLFOR($Resource.ShopifyStyle)}"/>
<apex:includeScript value="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmwIWOi6N0KxJEojRIQRSmgYuMg2MY--Q&libraries=places"/>
<apex:form id="allForm">
<script>
var map;
function showMap(address) {
var geocoder = new google.maps.Geocoder();
console.log('geocode address', address);
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
console.log('geocode', results[0].geometry);
map = new google.maps.Map(document.getElementById('mapId'), {
center: results[0].geometry.location,
zoom: 13
});
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: results[0].geometry.location,
radius: 1500,
type: ['store']
}, callback);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
var mapEl = document.getElementById('mapId');
mapEl.style.display = 'block';
}
function callback(results, status) {
console.log('callback', results)
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
icon: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
position: place.geometry.location
});
}
</script>
<apex:outputPanel layout="block" rendered="{!stepNumber == 1}">
<div class="rte">
<div style="margin-left: 300px;">
Complete the form below to return your item:<br/><br/>
<apex:outputPanel layout="block" style="color: red;" rendered="{!isError}">
{!errorMessage}
<br/><br/>
</apex:outputPanel>
Order ID: <br/>
<apex:inputText value="{!orderNumber}"> </apex:inputText>
<br/>Email: <br/><apex:inputText value="{!email}"></apex:inputText><br/> <br/>
<apex:commandButton value="Return Order" action="{!findOrders}"></apex:commandButton>
</div>
</div>
</apex:outputPanel>
<apex:outputPanel layout="block" rendered="{!stepNumber == 2}">
<div class="rte">
<div style="text-align: center;">
Why are you returning?<br/><br/>
</div>
<apex:dataTable value="{!worderItems}" var="orderItem">
<apex:column style="text-align: center; width: 60px; height:40px;" >
<apex:inputCheckbox value="{!orderItem.isSelected}">
<apex:actionSupport event="onchange" action="{!doForRerender}" />
</apex:inputCheckbox>
</apex:column>
<apex:column style="text-align: center;">
<apex:image width="200px" height="200px" value="/servlet/servlet.FileDownload?file={!orderItem.imageId}"/>
</apex:column>
<apex:column style="text-align: center; width: 100px;">
<apex:outputText value="{!orderItem.selectedQantity}" rendered="{!NOT(orderItem.isSelected)}"></apex:outputText>
<apex:selectList rendered="{!orderItem.isSelected}" size="1" value="{!orderItem.selectedQantity}">
<apex:selectOptions value="{!orderItem.quantityOptions}"/>
</apex:selectList>
</apex:column>
<apex:column style="text-align: center;">
<apex:selectList rendered="{!orderItem.isSelected}" size="1" value="{!orderItem.selectedType}">
<apex:selectOptions value="{!selectTypeOptions}"/>
<apex:actionSupport event="onchange" action="{!doForRerender}" />
</apex:selectList>
<apex:selectList style="margin-top: 20px;" size="1" rendered="{!AND(orderItem.selectType2Options.size > 0, orderItem.isSelected)}" value="{!orderItem.selectedType2}">
<apex:selectOptions value="{!orderItem.selectType2Options}"/>
</apex:selectList>
</apex:column>
</apex:dataTable>
<apex:commandButton value="Return Items" style="float: right; margin-right: 3px;" action="{!doNextSelectOrder}"></apex:commandButton>
</div>
</apex:outputPanel>
<apex:outputPanel layout="block" rendered="{!stepNumber == 3}">
<div class="rte">
<div style="text-align: center;">
Return Options<br/><br/>
</div>
<table style="border: none;">
<tbody>
<tr>
<td style="width: 100px;">
<img src="https://api.zenkraft.com/images/carriers/small/fedex.png" width="70px" />
</td>
<td style="width: 600px;">
<h4>FedEx DropOff - Free</h4>
<a href="#" onclick="showMap('{!fromAddress}');">Locations Near Me</a><br /><br />
<div id="mapId" style="height: 300px;width: 550px;display: none;" ></div>
</td>
<td>
<apex:commandButton value="Get Shipping Label"
style="float: right;"
action="{!doGetShippingLabel}">
</apex:commandButton>
</td>
</tr>
<tr>
<td style="width: 100px;">
<img src="https://api.zenkraft.com/images/carriers/small/fedex.png" width="70px" />
</td>
<td>
<h4>FedEx Pickup - $4.99 Charge</h4>
</td>
<td>
<input type="button" value="Get Shipping Label" style="float: right;" />
</td>
</tr>
</tbody>
</table>
</div>
</apex:outputPanel>
<apex:outputPanel layout="block" rendered="{!OR(stepNumber == 4, stepNumber == 5) }">
<apex:actionFunction name="continueCreateLables" action="{!continueCreateLables}" rerender="allForm"/>
<script>
Sfdc.onReady(function() {
continueCreateLables();
});
</script>
<div class="rte">
<div style="text-align: center;">
<apex:outputLabel value="Please wait, we are generating your shipping label."/>
<img src="/img/loading32.gif" width="30" height="30" style="margin-top: 25px;" />
</div>
<apex:outputPanel style="color: red;" layout="block" rendered="{!isError}">
{!errorMessage}
</apex:outputPanel>
</div>
</apex:outputPanel>
<apex:outputPanel layout="block" rendered="{!stepNumber == 6}">
<div class="rte">
<div style="text-align: center;">
Please pack the item and attach the shipping label below. Then you can drop off the package at your local FedEx Office!<br/><br/>
</div>
<input style="float: right;margin-right: 3px;margin-bottom: 5px;" type="button" value="Print this page" onClick="window.print()"/>
<apex:dataTable value="{!labels}" var="label">
<apex:column style="text-align: center;">
<apex:image value="/servlet/servlet.FileDownload?file={!label}"/>
</apex:column>
</apex:dataTable>
</div>
</apex:outputPanel>
</apex:form>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment