NitroScript Functions Reference Sheet

derek1 · February 5, 2015, 5:40pm

Hi guys,

I am trying to go live with our webstore, but I am in need of some NitroScript functions that are not available in the “Customizing Your Webstore with NitroScript.pdf”. Nor are these functions present in my template’s code…

I am attempting to implement a product image showcase feature on our ‘Product Page’. The design provided to us uses functions like:

{ns:getProductImage} - Returns an <img> tag with ‘align=“left”’ and other attributes/values that are messing up my mojo…
product[‘has_enlarged_images’]
product[‘has_image_views’]
{ifThereAre additionalviews}
{additionalview[‘link’]} - Returns a javascript function to change the image of the current product image slider
{additionalview[‘thumbnail_image’]} - I need the additional view’s ‘default size’ image, not the thumbnail
{additionalview[‘name’]}

What I need is the product image’s url(s) and the additional view’s url(s) as a string. No compiled tags or links. Just urls.

Inevitably, I will need additional functions, but I do not desire to undergo paid training. I am familiar with object-oriented programming. I simply need a reference sheet of some kind that has a complete list of functions that can be used in my webstore.

Does anybody know where little ol’ me can find such a magic sheet of awesomeness? Any help would be greatly appreciated!

Thanks in advance!

So essentially, this is the HTML the design outputs:

<div id="product-image-table">
  <div id="product-image-wrap" class="center-img">
    <a href="/product_images/18/4301/large-antec-vsk3000e-matx-case.jpg" class="popupBoxImages">
      <img class="image" alt="ANTEC VSK3000E MATX CASE" title="ANTEC VSK3000E MATX CASE" src="/product_images/18/4301/antec-vsk3000e-matx-case.jpg" id="productphoto" name="productphoto" align="left" border="0">
      <script> var arrProductImages = []; var originalProductImage = 'antec-vsk3000e-matx-case.jpg';arrProductImages.push({ href: getProductImageSource('large')});arrProductImages.push({ href: getProductImageSource('largedefault2')});arrProductImages.push({ href: getProductImageSource('largedefault3')});arrProductImages.push({ href: getProductImageSource('largedefault4')});originalProductImage = 'antec-vsk3000e-matx-case.jpg';
      </script>
    </a>
  </div>
  <p id="productviews">
    <a href="javascript:changeProductPhotoView('','antec-vsk3000e-matx-case.jpg')">
      <img src="/product_images/18/4301/thumb-antec-vsk3000e-matx-case.jpg" alt="" border="0" align="absmiddle" style="height:70px;">
    </a>
    <a href="javascript:changeProductPhotoView('default2');">
      <img src="/product_images/18/4301/thumbdefault2-antec-vsk3000e-matx-case.jpg" alt="" border="0" align="absmiddle" style="height:70px;">
    </a>
    <a href="javascript:changeProductPhotoView('default3');">
      <img src="/product_images/18/4301/thumbdefault3-antec-vsk3000e-matx-case.jpg" alt="" border="0" align="absmiddle" style="height:70px;"></a>
    <a href="javascript:changeProductPhotoView('default4');">
      <img src="/product_images/18/4301/thumbdefault4-antec-vsk3000e-matx-case.jpg" alt="" border="0" align="absmiddle" style="height:70px;"></a>
  </p>
</div>

But I need the NitroScript to output this:

<div class="display-container">
  <div class="display-wrap">
    <a href="/product_images/18/4301/large-antec-vsk3000e-matx-case.jpg">
      <img src="/product_images/18/4301/antec-vsk3000e-matx-case.jpg"  />
    </a>
  </div>
  <ul class="display-thumbs elastislide-list">
    <li>
      <a href="#">
        <img src="/product_images/18/4301/antec-vsk3000e-matx-case.jpg" data-largeimg="/product_images/18/4301/large-antec-vsk3000e-matx-case.jpg" />
      </a>
    </li>
    <li>
      <a href="#">
        <img src="/product_images/18/4301/default2-antec-vsk3000e-matx-case.jpg" data-largeimg="/product_images/18/4301/largedefault2-antec-vsk3000e-matx-case.jpg" />
      </a>
    </li>
    <li>
      <a href="#">
        <img src="/product_images/18/4301/default3-antec-vsk3000e-matx-case.jpg" data-largeimg="/product_images/18/4301/largedefault3-antec-vsk3000e-matx-case.jpg" />
      </a>
    </li>
    <li>
      <a href="#">
        <img src="/product_images/18/4301/default4-antec-vsk3000e-matx-case.jpg" data-largeimg="/product_images/18/4301/largedefault4-antec-vsk3000e-matx-case.jpg" />
      </a>
    </li>
    <li>
      <a href="#">
        <img src="/product_images/18/4301/antec-vsk3000e-matx-case.jpg" data-largeimg="/product_images/18/4301/large-antec-vsk3000e-matx-case.jpg" />
      </a>
    </li>
    <li>
      <a href="#">
        <img src="/product_images/18/4301/default2-antec-vsk3000e-matx-case.jpg" data-largeimg="/product_images/18/4301/largedefault2-antec-vsk3000e-matx-case.jpg" />
      </a>
    </li>
  </ul>
</div>

derek1 · June 2, 2015, 4:47pm

This is a fantasy yes?

donogh · June 3, 2015, 10:18am

Hi Derek,

Not a fantasy; they’re just not available right now.

@franclin, could you look at getting all the image URLs – and only the URLs, not tags – into the product variable please?

Thanks,
Donogh

ddwiggins · June 4, 2015, 1:45am

Derek (or Donogh!) -

Any chance you could point me to where the “customizing your web store with nitroscript” document lives? I’m hashing through this and haven’t been able to find very good documentation on it. It doesn’t appear to be linked on the manual page in the portal, and the knowledge base does not have a general reference - only 8 articles on specific topics.

Thanks,

David

james_mcging · June 4, 2015, 8:18am

Where to find NitroScipt variables

The most up-to-date version of NitroScript variables can be found as comments at the top of the relevant templates. As it isn’t practical to ask you to revert your templates to see this information I have downloaded my templates using the download templates button in WSM and attached it to this post.

Generic (global) vs template specific variables

Certain NitroScript variables can be used in any template, others only in the template they are associated with. The generic NitroScript variables are those found in the head of the Header template.

Logic commands (if, else, endIf)

The logic operators >, < = etc have been replaced with text so that:

= becomes eq;
!= becomes ne;
becomes gt;
< becomes lt;
= becomes gte;
<= becomes lte;

Example statement:
{if (pageproperty['pageid'] eq 'product')} // stuff here will happen if you are on a product page {endIf}

Loops (forEach, EndForEach).

Where a NitroScript variable represents an array it can generally be looped over like so: {forEach product};

Other things to note

You can’t nest NitroScript variables, the parser gets upset. Generally a bit of creative coding gets round this but if there is something you can’t figure out how to do then ask!

brian_twomey · June 4, 2015, 8:22am

The Customizing your WebStore with NitroScript guide is located at [WEBSTORE_URL]/store/administration/downloads/Customizing%20Your%20WebStore%20with%20NitroScript.pdf

Further Training Material is available in Portal under Resources

andy · June 4, 2015, 11:14am

This seems to be referenced in the document Brian has linked and I recall having used this on my pages previously with it seemingly working.

james_mcging · June 4, 2015, 1:44pm

Andy

Sometimes a fish can’t see the water. You’ve made my day! I’ve being coming up with such contorsions in my templates to get round using elseif!

Regards
James

andy · June 9, 2015, 2:10pm

I’m just wondering if there’s been any update on these new variables as they would be super handy for me right now also. Are you able to update this thread once the new variable names have been created please?

derek1 · June 9, 2015, 8:32pm

I have seen a bunch of variables/functions that are not listed in these headers. I think they just updated the templates with additions… Just guessing. But a formal documentation of all utilities would be so, so nice. Especially since things like the system.js, members.js, checkout.js, etc. functions are not documented in these commented sections.

It would take a little time, but the nicer our sites look, the better NitroSell’s portfolio will be

I am grateful for what I have been shown however, and @donogh has been quite accommodating as of late, and he has given me some pretty useful snippets to do what I needed. I appreciate it!

andy · December 11, 2015, 4:39pm

Just wondering if this was ever completed? I would like to access the raw image code rather than the preset variable on our product listing pages.

Thanks.

derek1 · December 21, 2015, 11:50pm

Hi Brian,

The link to the “Customizing Your WebStore with NitroScript” guide is now broken… Can you post the new location? Maybe this should be hosted on nitrosell.com to avoid this in the future?

franclin_foping · January 13, 2016, 2:56pm

Hi @derek1

Apologies for the delay. We have now added the list of images in a nitroscript variable on product pages.

It’s called imageset and it can be iterated through in this fashion:

{forEach imageset}
Profile: {imageset[‘profile’]}
Image Source: {imageset[‘src’]}
{endForEach}

Hope this helps. Of course, you will have to revert your product page template to the latest one to avail of this feature.
Franclin

donogh · January 13, 2016, 3:11pm

Small addendum to this comment: you should simply be able to re-save your existing template rather than needing to revert it.

derek1 · January 13, 2016, 10:47pm

Right on donogh! Thanks for the heads up. It’d be great if I didn’t have to start over with that bad boy… lol

Topic		Replies	Views
Can we create custom layout? WebStore	3	2728	July 30, 2015
Store Defined-Text Editor WebStore	5	2569	August 24, 2016
Switching to a Grid Layout on the Product Listing Page WebStore	0	1268	November 13, 2014
Math Possible with NitroScript Variables? WebStore	5	2087	January 15, 2019
Request for more custom text fields WebStore	3	1962	August 30, 2016