Dynamically populate product id in JavaScript (in template.ascx header)...

03-22-2012, 06:29 AM

I have the Zoomify HTML5 working, which is awesome by the way. Works GREAT in iOS and Android. However, I need to dynamically pass the product id to the folder name paramater in the Zoomify code in the header of template.ascx.

Here is the code... I need to dynamically populate the product id where 986 is:

Code:

    <script type="text/javascript" src="../../jscripts/ZoomifyImageViewer.js"></script>

    <style type="text/css"> #ZoomImage { width: 578px; height: 585px } </style>

<script type="text/javascript"> Z.showImage("ZoomImage", "986", "zMinZoom=0&zMaxZoom=250&zNavigatorVisible=1&zNavigatorWidth=100&zNavigatorHeight=80&zNavigatorLeft=10&zNavigatorTop=10&zNavigatorFit=1&zToolbarVisible=1&zToolbarPosition=1&zLogoVisible=0&zFullPageVisible=1&zProgressVisible=1&zTooltipsVisible=1&zSliderVisible=1&zZoomSpeed=5&zPanSpeed=5&zFadeInSpeed=5&zConstrainPan=1&zClickZoom=1&zClickPan=1&zMousePan=1 &zKeys=1&zCanvas=1&zDebug=0&zSkinPath=Assets/Skins/Default", "zSkinPath=Assets/Skins/Light"); </script>

Any thoughts on how I could do this please? I thought maybe from the URL, after "p-", but I am not sure if that will work. Thoughts?

03-22-2012, 11:00 AM

You're going to need to break this out into an xmlpackage.
Bear in mind that the same template.ascx file is used for every page (normally), category, topic, checkout etc.

TTFN

BFG

03-22-2012, 06:16 PM

Originally Posted by BFG 9000

You're going to need to break this out into an xmlpackage.
Bear in mind that the same template.ascx file is used for every page (normally), category, topic, checkout etc.

TTFN

BFG

That's fine... It doesn't appear to affect the other pages. It seems to only "take effect" when you're on a product page. How would I go about doing this with an xmlpackage? Again... I am pretty new to this. I GREATLY appreciate all your help though. And that jump menu works like a champ now. Thank you!

Strange you have been ill in bed. So have I...

I hope you feel better.

Cheers.

03-23-2012, 10:21 AM

Mate - you're not that new - you've been a member since 2009...

I'm not going to write it for you - you really should learn this - it's very easy if you put in a little effort.

Make a start - use product.SimpleProduct.xml.config as a start point (as you know that uses the product id) - get as close as you can to what you want by stripping out stuff you don't need & I'll finish it / tidy it up for you.

You're going to be calling this new xmlpackage in your template instead of the javascript you currently have in there like this :-

C#/VB.NET Code:


(!XmlPackage Name="newxmlpackagenamehere"!)

TTFN

BFG

03-23-2012, 10:44 AM

Originally Posted by BFG 9000

Mate - you're not that new - you've been a member since 2009...

I'm not going to write it for you - you really should learn this - it's very easy if you put in a little effort.

Make a start - use product.SimpleProduct.xml.config as a start point (as you know that uses the product id) - get as close as you can to what you want by stripping out stuff you don't need & I'll finish it / tidy it up for you.

You're going to be calling this new xmlpackage in your template instead of the javascript you currently have in there like this :-

C#/VB.NET Code:


(!XmlPackage Name="newxmlpackagenamehere"!)

TTFN

BFG

I am new to XML. I may have been a "member" since then, but I am a C# developer and graphic designer. I have not done much with XML at all...

And I am not sure how on EARTH that will work without the JavaScript. Zoomify states that you need to have those lines of code in the <HEAD>of your page.

I have barely written any XML, and even if I have, I still don't quite understand it fully, and I have never heard of having JavaScript inside XML.

I'll give it a shot and I hope you're feeling better... I really DO want to understand this side of it more.

03-23-2012, 11:03 AM

Ok.. If all I need is the ProductID, then can I delete the rest of the stuff between the parenthesis?

Code:

<xsl:value-of select="aspdnsf:LookupProductImage(ProductID, ImageFilenameOverride, SKU, 'medium', 1, $AltText)" disable-output-escaping="yes"/>

I have my JavaScript inside the XML (with fingers crossed) and I was getting an error saying it could parse and was having a problem with EntityID.

I thought maybe I could try something like this for now... (don't make fun of me)

Code:

				<script type="text/javascript" src="../../jscripts/ZoomifyImageViewer.js"></script>

				<style type="text/css"> #ZoomImage { width: 578px; height: 585px } </style>

				<script type="text/javascript">
					Z.showImage("ZoomImage", "<xsl:value-of select="aspdnsf:LookupProductImage(ProductID)" disable-output-escaping="yes" />", "zMinZoom=0&zMaxZoom=250&zNavigatorVisible=1&zNavigatorWidth=100&zNavigatorHeight=80&zNavigatorLeft=10&zNavigatorTop=10&zNavigatorFit=1&zToolbarVisible=1&zToolbarPosition=1&zLogoVisible=0&zFullPageVisible=1&zProgressVisible=1&zTooltipsVisible=1&zSliderVisible=1&zZoomSpeed=5&zPanSpeed=5&zFadeInSpeed=5&zConstrainPan=1&zClickZoom=1&zClickPan=1&zMousePan=1 &zKeys=1&zCanvas=1&zDebug=0&zSkinPath=Assets/Skins/Default", "zSkinPath=Assets/Skins/Light");
				</script>

Doesn't work though...

03-23-2012, 11:14 AM

I am getting this error when I load the page:

Exception=Error in XmlPackage(.Load), Package=[product.Zoom.xml.config], Msg=[Exception=An error occurred while parsing EntityName. Line 55, position 139.

The thing is, I do not have EntityName in line 55....

03-23-2012, 11:23 AM

This is what I have as a package now... and it keeps throwing an error for EntityName:

Code:

<?xml version="1.0" standalone="yes" ?>
<package version="2.1" displayname="Simple Product" debug="false" includeentityhelper="true">

	<!-- ###################################################################################################### -->
	<!-- Copyright AspDotNetStorefront.com, 1995-2009.  All Rights Reserved.					                -->
	<!-- http://www.aspdotnetstorefront.com														                -->
	<!-- For details on this license please visit  the product homepage at the URL above.		                -->
	<!-- THE ABOVE NOTICE MUST REMAIN INTACT.                                                                   -->
	<!--                                                                                                        -->
	<!-- ###################################################################################################### -->

	<query name="Products" rowElementName="Product" runif="showproduct">
		<sql>
			<![CDATA[
                exec dbo.aspdnsf_ProductInfo @ProductID, @CustomerLevelID, 1, 0, @affiliateID
            ]]>
		</sql>
		<queryparam paramname="@ProductID"       paramtype="request" requestparamname="ProductID"       sqlDataType="int" defvalue="0"  validationpattern="^\d{1,10}$" />
		<queryparam paramname="@CustomerLevelID" paramtype="runtime" requestparamname="CustomerLevelID" sqlDataType="int" defvalue="0"  validationpattern="" />
		<queryparam paramname="@affiliateID"     paramtype="system"  requestparamname="AffiliateID"     sqlDataType="int" defvalue="0"  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="html" omit-xml-declaration="yes" />

			<xsl:param name="LocaleSetting" select="/root/Runtime/LocaleSetting" />
			<xsl:param name="WebConfigLocaleSetting" select="/root/Runtime/WebConfigLocaleSetting" />
			<xsl:param name="XmlPackageName" select="/root/System/XmlPackageName" />
			<xsl:param name="SecID">
				<xsl:choose>
					<xsl:when test="count(/root/QueryString/sectionid) &gt; 0">
						<xsl:value-of select="/root/QueryString/sectionid" />
					</xsl:when>
					<xsl:otherwise>0</xsl:otherwise>
				</xsl:choose>
			</xsl:param>

			<script type="text/javascript" src="../../jscripts/ZoomifyImageViewer.js"></script>

			<style type="text/css"> #ZoomImage { width: 578px; height: 585px } </style>

			<script type="text/javascript">
				Z.showImage("ZoomImage", "<xsl:value-of select="ProductID" />", "zMinZoom=0&zMaxZoom=250&zNavigatorVisible=1&zNavigatorWidth=100&zNavigatorHeight=80&zNavigatorLeft=10&zNavigatorTop=10&zNavigatorFit=1&zToolbarVisible=1&zToolbarPosition=1&zLogoVisible=0&zFullPageVisible=1&zProgressVisible=1&zTooltipsVisible=1&zSliderVisible=1&zZoomSpeed=5&zPanSpeed=5&zFadeInSpeed=5&zConstrainPan=1&zClickZoom=1&zClickPan=1&zMousePan=1 &zKeys=1&zCanvas=1&zDebug=0&zSkinPath=Assets/Skins/Default", "zSkinPath=Assets/Skins/Light");
			</script>

		</xsl:stylesheet>
	</PackageTransform>
</package>

03-23-2012, 11:38 AM

Create a new xmlpackage called zoomify.header.javascript.xml.config which contains the following :-

HTML Code:

<?xml version="1.0" standalone="yes" ?>
<package version="2.1" displayname="Simple Product" debug="false" includeentityhelper="false" allowengine="true">
<HTTPHeaders> 
        <HTTPHeader headername="Content-Type" headervalue="text/javascript" /> 
</HTTPHeaders> 
    <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="html" />

            <xsl:template match="/">
                <xsl:choose>
                    <xsl:when test="/root/QueryString/productid">
Z.showImage('ZoomImage', '<xsl:value-of select="/root/QueryString/productid" />', 'zMinZoom=0&amp;zMaxZoom=250&amp;zNavigatorVisible=1&amp;zNavigatorWidth=100&amp;zNavigatorHeight=80&amp;zNavigatorLeft=10&amp;zNavigatorTop=10&amp;zNavigatorFit=1&amp;zToolbarVisible=1&amp;zToolbarPosition=1&amp;zLogoVisible=0&amp;zFullPageVisible=1&amp;zProgressVisible=1&amp;zTooltipsVisible=1&amp;zSliderVisible=1&amp;zZoomSpeed=5&amp;zPanSpeed=5&amp;zFadeInSpeed=5&amp;zConstrainPan=1&amp;zClickZoom=1&amp;zClickPan=1&amp;zMousePan=1&amp;zKeys=1&amp;zCanvas=1&amp;zDebug=0&amp;zSkinPath=Assets/Skins/Default', 'zSkinPath=Assets/Skins/Light');
					</xsl:when>
                    <xsl:otherwise></xsl:otherwise>
                </xsl:choose>
            </xsl:template>

        </xsl:stylesheet>
    </PackageTransform>
</package>

Then edit your template file - where you currently have this :-

HTML Code:

    <script type="text/javascript" src="../../jscripts/ZoomifyImageViewer.js"></script>

    <style type="text/css"> #ZoomImage { width: 578px; height: 585px } </style>

<script type="text/javascript"> Z.showImage("ZoomImage", "986", "zMinZoom=0&zMaxZoom=250&zNavigatorVisible=1&zNavigatorWidth=100&zNavigatorHeight=80&zNavigatorLeft=10&zNavigatorTop=10&zNavigatorFit=1&zToolbarVisible=1&zToolbarPosition=1&zLogoVisible=0&zFullPageVisible=1&zProgressVisible=1&zTooltipsVisible=1&zSliderVisible=1&zZoomSpeed=5&zPanSpeed=5&zFadeInSpeed=5&zConstrainPan=1&zClickZoom=1&zClickPan=1&zMousePan=1 &zKeys=1&zCanvas=1&zDebug=0&zSkinPath=Assets/Skins/Default", "zSkinPath=Assets/Skins/Light"); </script>

Replace it with this ;-

HTML Code:

<script type="text/javascript" src="../../jscripts/ZoomifyImageViewer.js"></script>
<style type="text/css"> #ZoomImage { width: 578px; height: 585px } </style>
<script type="text/javascript">
(!XmlPackage Name="zoomify.header.javascript"!)
</script>

TTFN

BFG

03-23-2012, 11:43 AM

Well done though - you got really close !!!

The thing with the entity name is that xml doesn't like the & symbol They're not really valid anywhere & should normally be changed to & - there were a lot of them in the javascript.

TTFN

BFG

03-23-2012, 01:20 PM

Originally Posted by BFG 9000

Well done though - you got really close !!!

The thing with the entity name is that xml doesn't like the & symbol They're not really valid anywhere & should normally be changed to & - there were a lot of them in the javascript.

TTFN

BFG

Awesome! Thank you! It works GREAT!

I don't understand something though... how does this work? I do not see a query at all for the Product in any way in the new XMLPackage.

In the other packages, there are queries, and in particular, one for Product. Such as:

Code:

<query name="Products" rowElementName="Product" runif="showproduct">
        <sql>
            <![CDATA[
                exec dbo.aspdnsf_ProductInfo @ProductID, @CustomerLevelID, 1, 0, @affiliateID
            ]]>
        </sql>
        <queryparam paramname="@ProductID"       paramtype="request" requestparamname="ProductID"       sqlDataType="int" defvalue="0"  validationpattern="^\d{1,10}$" />
        <queryparam paramname="@CustomerLevelID" paramtype="runtime" requestparamname="CustomerLevelID" sqlDataType="int" defvalue="0"  validationpattern="" />
        <queryparam paramname="@affiliateID"     paramtype="system"  requestparamname="AffiliateID"     sqlDataType="int" defvalue="0"  validationpattern="" />
    </query>

I thought you had to query the information first, before you could use it... No?

Thanks again SO MUCH for your help!

Thread: Dynamically populate product id in JavaScript (in template.ascx header)...

Dynamically populate product id in JavaScript (in template.ascx header)...