ASP and AJAX coding on volusion store

by Vikas Bhagwagar on November 26, 2011

To implement interactive stuff through products xml feed on volusion store, one need to enable public XML for All Products.

Go to: Volusion Admin > Inventory > Import/Export > Click Volusion API > 
Enable public XML for All products & Save

Now; To access the xml feed browse

http://www.yourdomain.com/net/webservice.aspx?api_name=generic\all_products

Once you are sure products XML feed is working fine you could start your frontend coding in HTML/JS using on asp page or as a custom widget/element.

To create custom interactive page on volusion create asp file inside your vspfiles folder.

i.e. somefile.asp

Now, to make it as a part of your volusion store pages, make file structure as follow.

<!--#include file="YOUR-TEMPLATE-PATH/header_static.html"-->
<!-- your html code -->
<!--#include file="YOUR-TEMPLATE-PATH/footer_static.html"-->

Let’s create small app that retrieves all details by providing productcode to the input field

<!--#include file="YOUR-TEMPLATE-PATH/header_static.html"-->

<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('#showDetails').click(function() {
$.post("server.asp", $("#testform").serialize(), 
function(data) {$('#product_details').html(data);});});});
// ]]>
</script>

<form id="testform">
<label for="ProductCode">Enter Product Code</label>
<input id="ProductCode" type="text" name="ProductCode" size="10" />
<input id="showDetails" type="button" value="Show Details" />
</form>

<!--#include file="YOUR-TEMPLATE-PATH/footer_static.html"-->

Asp code: server.asp

<%
dim prodCode
prodCode = request("ProductCode")
set oXMLHttp = Server.CreateObject("Msxml2.serverXmlHttp")
oXMLHttp.open "POST", "http://www.yourdomain.com/net/webservice.aspx?api_name=generic\all_products", False
oXMLHttp.setRequestHeader "Content-Type", "text/xml; charset=utf-8"
oXMLHttp.setRequestHeader "Content-Action", "Volusion_API"
oXMLHttp.send
Xml_Returned = oXMLHttp.responseText

dim oHTML
Dim oXML, oNode, sKey, sValue, ProductName, ProductPrice, ProductDescription
Set oXML = Server.CreateObject("MSXML2.DomDocument")
oXML.LoadXML(Xml_Returned)

oHTML = ""
dim xPath
xPath = "/All_Products/Product[ProductCode='" & prodCode &amp; "']"

For Each oNode In oXML.SelectNodes(xPath)
ProductName = oNode.selectSingleNode("ProductName").Text
ProductPrice = oNode.selectSingleNode("ProductPrice").Text
ProductDescription = oNode.selectSingleNode("ProductDescription").Text
oHTML = oHTML & "<h1>" &amp; ProductName & "</h1>"
oHTML = oHTML & "<strong>Price: $" & FormatNumber(ProductPrice) & "</strong>"
oHTML = oHTML & "" & ProductDescription & ""
Next
response.write oHTML
response.End
%>

So user will see asynchronously fetch product data in frontend after pressing “Show Details” button

About

VikasBhagwagar is Web Developer, Frontend Engineer, Interaction Designer, SEO engineer, System Admin, PSD slicer, Database Developer etc etc in-short B.E. Computer Engineer from SVNIT-Surat

Leave a Comment

 

Previous post:

Next post: