Thread: Javascript Help please?

Greetings All,

I'm looking for a little help with Javascript.

Here's the scenario - I have an external website that is listing products from my store.
The external site has default prices for each product. I'd like to create a piece of javascript that would dynamically replace these prices if they've changed on the store.

The way I see it working is that I use an xmlpackage to create a list of ID's & Prices - then the javascript would look for an element with an appropriate ID & replace the contents based on what's in the javascript.


e.g. - the xmlpackage would produce some javascript that contains something like this :-

C#/VB.NET Code:

variant_123_price:'£5.99';
variant_124_price:'£6.99';
variant_125_price:'£7.99';
variant_126_price:'£8.99'; 


Then - on the external site I'd have something like this :-

C#/VB.NET Code:

<strong>Product 124</strong><br />
<div id="variant_124_price">£9.99</div> 


Then the javascript (that would sit on the store domain but be called by the external site) would replace the £9.99 with £6.99.

I can create the xmlpackage easily enough - but I can't quite get my head around the javascript.

Can anyone help?




TTFN

BFG

Hey BFG,

Reading over what you said personally I would go at it a little differently.

I would first create an .ASPX page that takes a ProductID as the query string and returns a XML page.

e.g.

C#/VB.NET Code:

<variants>
  <variant_123_price>&pound;5.99</variant_123_price>
  <variant_124_price>&pound;6.99</variant_124_price>
  <variant_125_price>&pound;7.99</variant_125_price>
  <variant_126_price>&pound;8.99</variant_126_price>
</variants> 


Then on your external website I would use jQuery on document load to GET the new page you created sending the ProductID over.

From there you would parse the XML and match up the VariantID's with ID's/Classes on your page.

C#/VB.NET Code:

$.ajax({
    type: "GET",
    url: 'http://www.domain.com/test.aspx?ProductID=34',
    success: function(data) {
      xmlDoc = $.parseXML(data),
      $xml = $(xmlDoc),
      $v125 = $xml.find("variant_125_price");
      alert($v125.text());
  }
}); 


That is a static example so you will need to use some fancy REGEX but it can be done.
http://www.switchonthecode.com/tutor...ng-with-jquery

That is just personally how I would go about it.

Thanks Mate,

I've actually done this now - here's the xmlpackage (which I've named x-variant-mini-js.xml.config) :-

HTML Code:

<?xml version="1.0" encoding="utf-8" ?>
<package displayname="AJ Variant Price Update" version="2.1" debug="false" includeentityhelper="false" allowengine="true">
	<query name="Products" rowElementName="Product">
		<sql>
			<![CDATA[
SELECT VariantID, Price, SalePrice, Inventory FROM ProductVariant WHERE VariantID = @VariantID
			]]>
		</sql>
        <queryparam paramname="@VariantID" paramtype="request" requestparamname="VariantID" sqlDataType="int" defvalue="0" validationpattern="^\d{1,10}$" />
	</query>
	<PackageTransform>
		<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:aspdnsf="urn:aspdnsf" exclude-result-prefixes="aspdnsf">
			<xsl:output method="xml" omit-xml-declaration="yes" encoding="utf-8" indent="yes" />


			<xsl:template match="/">
                        <xsl:apply-templates select="/root/Products/Product" />
            </xsl:template>
			
			<xsl:template match="Product">

                <xsl:param name="VariantID" select="VariantID"></xsl:param>
                <xsl:param name="Price" select="Price"></xsl:param>
                <xsl:param name="SalePrice" select="SalePrice"></xsl:param>
                <xsl:param name="inv" select="aspdnsf:GetMLValue(Inventory)"></xsl:param>

				<xsl:param name="prodprice">

                        <xsl:choose>
                            <xsl:when test="number(SalePrice)&gt;0">
                                <xsl:value-of select="format-number((SalePrice * 1.2), '###0.00')" />
                            </xsl:when>
                            <xsl:otherwise>
                                <xsl:value-of select="format-number((Price * 1.2), '###0.00')" />
                            </xsl:otherwise>
                        </xsl:choose>
</xsl:param>
<xsl:param name="availability">
<xsl:choose><xsl:when test="$inv&lt;1">no</xsl:when><xsl:otherwise>yes</xsl:otherwise></xsl:choose>
</xsl:param>

document.getElementById('variant_<xsl:value-of select="VariantID" />_price').innerHTML ='<xsl:value-of select="$prodprice" />';
document.getElementById('variant_<xsl:value-of select="VariantID" />_availability').innerHTML ='<xsl:value-of select="$availability" />';



			</xsl:template>
			
		</xsl:stylesheet>

	</PackageTransform>
</package>

& here's an example of code on the page :-

HTML Code:

<strong>ProductVariant 1267</strong> : &#163;<div style="display:inline" id="variant_1267_price">9.99</div> : Availability : <div style="display:inline" id="variant_1267_availability">Yes</div><br /><br />
<strong>ProductVariant 2529</strong> : &#163;<div style="display:inline" id="variant_2529_price">9.99</div> : Availability : <div style="display:inline" id="variant_2529_availability">Yes</div><br /><br />
<strong>ProductVariant 1485</strong> : &#163;<div style="display:inline" id="variant_1485_price">9.99</div> : Availability : <div style="display:inline" id="variant_1485_availability">Yes</div><br /><br />



<script language="javascript" src="http://www.3mselect.co.uk/x-variant-mini-js.aspx?VariantID=1267"></script>
<script language="javascript" src="http://www.3mselect.co.uk/x-variant-mini-js.aspx?VariantID=2529"></script>
<script language="javascript" src="http://www.3mselect.co.uk/x-variant-mini-js.aspx?VariantID=1485"></script>

If you keep out doing me I will start taking this personally

HTML Code:

<?xml version="1.0" encoding="utf-8" ?>
<package displayname="AJ Variant Price Update" version="2.1" debug="false" includeentityhelper="false" allowengine="true">
	<query name="Products" rowElementName="Product">
		<sql>
			<![CDATA[
SELECT VariantID, Price, SalePrice, Inventory FROM ProductVariant WHERE VariantID = @VariantID
			]]>
		</sql>
        <queryparam paramname="@VariantID" paramtype="request" requestparamname="VariantID" sqlDataType="int" defvalue="0" validationpattern="^\d{1,10}$" />
	</query>
<query name="UKVAT" rowElementName="VAT">
    <sql>
      <![CDATA[
                  SELECT TOP 1 TaxRate FROM CountryTaxRate WHERE CountryID = @CID AND TaxClassID = 1
              ]]>
    </sql>
    <queryparam paramname="@CID" paramtype="appconfig" requestparamname="VAT.CountryID" defvalue="80" sqlDataType="int" validationpattern="" />
  </query>
	<PackageTransform>
		<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:aspdnsf="urn:aspdnsf" exclude-result-prefixes="aspdnsf">
			<xsl:output method="xml" omit-xml-declaration="yes" encoding="utf-8" indent="yes" />
			<xsl:template match="/">
                        <xsl:apply-templates select="/root/Products/Product" />
            </xsl:template>
			<xsl:template match="Product">
                <xsl:param name="VariantID" select="VariantID"></xsl:param>
                <xsl:param name="Price" select="Price"></xsl:param>
                <xsl:param name="SalePrice" select="SalePrice"></xsl:param>
                <xsl:param name="inv" select="aspdnsf:GetMLValue(Inventory)"></xsl:param>
                <xsl:param name="VATRate" select="number(/root/UKVAT/VAT/TaxRate)"></xsl:param>
				<xsl:param name="prodprice">
                        <xsl:choose>
                            <xsl:when test="number(SalePrice)&gt;0">
                                <xsl:value-of select="format-number(SalePrice+(SalePrice*($VATRate div 100)), '###0.00')" />
                            </xsl:when>
                            <xsl:otherwise>
                                <xsl:value-of select="format-number(Price+(Price*($VATRate div 100)), '###0.00')" />
                            </xsl:otherwise>
                        </xsl:choose>
</xsl:param>
<xsl:param name="availability">
<xsl:choose><xsl:when test="$inv&lt;1">no</xsl:when><xsl:otherwise>yes</xsl:otherwise></xsl:choose>
</xsl:param>
document.getElementById('variant_<xsl:value-of select="VariantID" />_price').innerHTML ='<xsl:value-of select="$prodprice" />';
document.getElementById('variant_<xsl:value-of select="VariantID" />_availability').innerHTML ='<xsl:value-of select="$availability" />';
			</xsl:template>
		</xsl:stylesheet>
	</PackageTransform>
</package>

Just set TaxClassID to what ever you use for your VAT. I believe it is normally 5? However we have it as ID 1 for some reason, so just check that first. Then you can have the correct VAT rate no matter what happens!

Originally Posted by DotNetDevelopments

If you keep out doing me I will start taking this personally

We all have to have a hobby...


Thanks for the VAT change though !!



TTFN

BFG