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

**donato** · 03-22-2012

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?

**BFG 9000** · 03-22-2012

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

**donato** · 03-22-2012

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.

**BFG 9000** · 03-23-2012

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

**donato** · 03-23-2012

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.

**donato** · 03-23-2012

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...

**BFG 9000** · 03-23-2012

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

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

Thread Tools

Display

Hybrid View

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

Posting Permissions