Difference: VarADDTOZONE (1 vs. 3)

ADDTOZONE

%ADDTOZONE{
  "zone"
  ...
}%

• Create a sidebar zone to add widgets,
• Create a toolbar zone to add buttons icons

• "zone" optional, comma-separated list of the names of zones that the content should be added to. Defaults to head.
• id optional, identifier for the text being added with the ADDTOZONE call, to be used in the requires parameter of other ADDTOZONE calls.
  • Multiple ADDTOZONE calls with the same id parameter will simply overwrite the earlier ADDTOZONE call.
• requires="..." optional, comma separated string of ids of text within this zone that this content should follow when the zone is rendered.
• text="..." optional, text to be added to the named zone, mutually exclusive with topic.
• topic="..." optional, full qualified web.topic name that contains the text to be added, mutually exclusive with text.
• section="..." optional, section of the topic to be added, defaults to the default section between STARTINCLUDE and STOPINCLUDE.
  
  • Using topic and section is actually a short form of

    %ADDTOZONE{
       "myzone"
       text="$percentINCLUDE{\"topic\" section=\"section\" warn=\"off\"}$percent"
    }%

How to use the head and script zones

Rendering the script zone at the end of the HTML body requires skin template customisation with %RENDERZONE{"script"}%

{MergeHeadAndScriptZones} is provided to maintain compatibility with legacy extensions that use ADDTOHEAD to add <script> markup and require content that is now in the script zone. {MergeHeadAndScriptZones} will be removed from a future version of Foswiki.

Workign with {MergeHeadAndScriptZones} disabled (default)

Working with {MergeHeadAndScriptZones} enabled

Example: Adding to a zone with missing dependencies

%ADDTOZONE{
  "head"
  text="
  <script type='text/javascript'>
    alert('test');
  </script>"
  requires="some-id-that-exists-in-script"
  id="MY::TEST"
}%

<script type='text/javascript'>
  alert('test');
</script>
<!-- MY::TEST: requires= missing ids: some-id-that-exists-in-script -->

Example: Adding Javascript to a page

• Make sure that all inline Javascript code in the topic (if it is allowed) is added to the page using %ADDTOZONE{"script"...requires="library-id"}% with the appropriate library-id to guarantee a correct load order. For example, jQuery code should be added as follows:

  %JQREQUIRE{"shake"}%%ADDTOZONE{
     "script"
     id="MyApp::ShakePart"
     text="
     <script type='text/javascript'>
        jQuery('#something').shake(3, 10, 180);
     </script>"
     requires="JQUERYPLUGIN::SHAKE"
  }%

  where "MyApp::ShakePart" is a unique id to identify the text added to script; and JQUERYPLUGIN::SHAKE signifies that the content added with that identifier should appear beforehand.

Example: Adding CSS to a page

%ADDTOZONE{"head"
   id="MyCSS"
   text="
      <style type='text/css' media='all'>
         @import url('%PUBURLPATH%/%SYSTEMWEB%/MyCSS/foo.css');
      </style>"
}%

<-- 
Error: no such plugin chili
 -->

ADDTOZONE

%ADDTOZONE{
  "zone"
  ...
}%

• id optional, identifier for the text being added with the ADDTOZONE call, to be used in the requires parameter of other ADDTOZONE calls.
  • Multiple ADDTOZONE calls with the same id parameter will simply overwrite the earlier ADDTOZONE call.

• text="..." optional, text to be added to the named zone, mutually exclusive with topic.

• section="..." optional, section of the topic to be added,

Example: Adding to a zone with missing dependencies

Example: Adding CSS to a page

%ADDTOZONE{"head"
   id="MyCSS"
   text="
      <style type='text/css' media='all'>
         @import url('%PUBURLPATH%/%SYSTEMWEB%/MyCSS/foo.css');
      </style>"
}%

<-- 
Error: no such plugin chili
 -->