RealTimeDesigner Support Network
Wiki Forums Libraries Docs Support RealTimeDesigner Home
Welcome! Log In Create A New Profile

Advanced

Hot to have distinct "Short Designer Instructions" for each store

Posted by Alex 
Hot to have distinct "Short Designer Instructions" for each store
April 25, 2012 06:52PM
This tutorial is for anyone using multple stores in RTD.

There is a text in SYSTEM OPTIONS => Configure Help Labels that can be shown right into the designer, to provide your users a quick help about how to use the tool.
That text is the Short Designer Instructions one.

The issue we're going to explore: that text is unique, so the very same text will appear in all of your stores. But it may happen you'd like to have different instructions for different stores. How to obtain it?
Short answer: with a javascript tweak!

That text is shown into a DIV with id instructions_container. What we're going to do is to "rewrite" its contents by using stores fields.

Go in SYSTEM OPTIONS => Configure Store layouts and select as Store to be edited the one you want to alter that text for.
We need to be sure our code will be parsed when the instructions_container element is already available, so we will work into the FOOTER CODE FOR DESIGNER area. In there, place something like this:

<div id='my_instructions_replace' style='display:none'>
      this is a replacement text!<br>
      And it accepts <u>HTML TOO!</u>
</div>
<script language='javascript' type='text/javascript'>
document.getElementById('instructions_container').innerHTML=document.getElementById('my_instructions_replace').innerHTML;
</script>

This will simply replace the contents of the instructions_container block with whatever code you'll write into the textarea block. And being placed into the FOOTER CODE FOR DESIGNER area, it can be different for each store.

Easy easy! smiling smiley
Re: Hot to have distinct "Short Designer Instructions" for each store
January 02, 2013 05:51PM
I seem to be having a little trouble with adding this code to the footer section of the designer.

Just to play around a little - I placed the code as written to see if and what would change.

Nada - nothing.

Also - should the code read <div id='my_instructions_replace' style='display:none'>
Does that not hide it?
Re: Hot to have distinct "Short Designer Instructions" for each store
January 02, 2013 07:10PM
Seems ok to me.
I checked your company, and I assume you're talking about your "PrintsonCanvas" store.
Look at the attached image, that's what I see.

#1 is the my_instructions_replace div, because you changed it to be "display: inline".
For that "display: none" is correct, because it's not meant to be seen: it's just meant to be the container of the code you'll copy into the real instructions box.

#2 is the real instructions_container div, which is correctly showing the desired text.
Its positon with the LAYOUT BUILDER, on bottom of the Configure Store layouts page.
Attachments:
open | download - instructions.jpg (130.5 KB)
cos
Re: Hot to have distinct "Short Designer Instructions" for each store
February 06, 2014 07:50AM
Quote
alex
<div id='my_instructions_replace' style='display:none'>

<img src="url.svg" alt="instructions">

</div>
<script language='javascript' type='text/javascript'>
document.getElementById('instructions_container').innerHTML=document.getElementById('my_instructions_replace').innerHTML;
</script>

Replacing the example text with a link to an svg image file, how would one write into this a fallback for browsers that cannot display svg?
Re: Hot to have distinct "Short Designer Instructions" for each store
February 06, 2014 11:36AM
There are some JS techniques, but I would give this a try:
http://www.hongkiat.com/blog/scalable-vector-graphic-browsers/

In the part where he talks about "Using Object Element".
From there:
Quote

<object data='images/apple.svg'>
<img src='images/apple.png'/>
</object>

This way, supported browsers will still be taking the .svg, while the unsupported browsers will carry the Bitmap graphic.
Sorry, only registered users may post in this forum.

Click here to login