2. Teil des Frontend Workshop 2008 für das 1&1 Website-Management

1. Frontend-Workshop Know-How

16. Praktische Anwendung <pfx:forminput> <pfx:image src=„/telesales/img/content/header.jpg“ /> <div class=„container_box“> <h2 class=„first“>Vermittlerdaten</h2> <shop:errorbox /> <div class=„container_form“> <shop:ingrid prefix=„login“> <row> <left> <label for=„id“ mandatory=„true“ /> </left> <right> <item name=„id“ type=„text“ size=„11“ /> </right> </row> </shop:ingrid> </div> <div class=„submit“> <pfx:xinp alt=„Weiter“ src=„weiter.gif“ type=„image“ /> </div> </div> </pfx:forminput>

17. Praktische Anwendung <row> <left> <label for=„id“ mandatory=„true“ /> </left> <right> <item name=„id“ type=„text“ size=„11“ /> </right> </row> <row> <left> <label for=„action“ /> </left> <right> <item name=„action“ type=„select“> <pfx:option value=„default“> Standard-Angebot </pfx:option> <pfx:option value=„kwk“> KWK-Aktion </pfx:option> </item> </right> </row> <row> <left> <label for=„action“ /> </left> <right> <item name=„action“ type=„freetext“> <ixsl:value-of select=„$action“ /> </item> </right> </row>

18. Praktische Anwendung <row> <left /> <right> <item name=“psfee” type=“check” value=“true” class=“inline nospace” default=“true” /> <label for=“psfee-true” colon=“false” style=“margin-left: 18px;” /> </right> </row> <row> <both> <span class=“inline text” style=“padding-right: 20px; padding-left: 50px;”> Sind Sie bereits Kunde von 1&amp;1? </span> <item class=&quot;inline&quot; type=&quot;radio&quot; value=&quot;false“ name=&quot;isRecurring&quot; default=&quot;true&quot; /> <label class=&quot;inline&quot; for=&quot;isRecurring-false“ style=&quot;padding-right: 25px;&quot; colon=&quot;false“ /> <item class=&quot;inline&quot; type=&quot;radio&quot; value=&quot;true“ name=&quot;isRecurring&quot; /> <label class=&quot;inline&quot; for=&quot;isRecurring-true&quot; colon=&quot;false&quot;/> </both> </row>

19. Praktische Anwendung <row> <left> <label for=“zipCode“ mandatory=“true” /> </left> <right> <item type=“multi”> <ixsl:choose> <ixsl:when test=“/formresult/addresschoice/plzchoice”> <item class=“inline” name=“zipCode” type=“dynamic” path=“/formresult/addresschoice/plzchoice” /> </ixsl:when> <ixsl:otherwise> <item class=“inline” name=“zipCode” size=“5” type=“text” /> </ixsl:otherwise> </ixsl:choose> <label for=“city” class=“inline” mandatory=“true” /> <ixsl:choose> <ixsl:when test=“/formresult/addresschoice/citychoice”> <item name=“city” class=“inline nospace” type=“dynamic” path=“/formresult/addresschoice/citychoice” /> </ixsl:when> <ixsl:otherwise> <item name=“city” class=“inline nospace” size=“33” type=“text” /> </ixsl:otherwise> </ixsl:choose> </item> </right> </row>

20. Praktische Anwendung <pfx:script> function onJSLoad() { var ingrid=“new UNOUNO.ajax.InputGrid(); ingrid.initToggle('newcustomer.mode-private', null, ['toggle.companyHint', 'toggle.companyName'], 'newcustomer.mode-company'); ingrid.initToggle('newcustomer.mode-company', ['toggle.companyHint', 'toggle.companyName'], null, 'newcustomer.mode-private'); ingrid.initAllToggles(); } </pfx:script> [...] <row> <left /> <right> <item class=“inline” type=“radio” value=“private” name=“mode” default=“true” /> <label class=“inline” for=“mode-private” style=“padding-right: 25px;” colon=“false” /> <item class=“inline” type=“radio” value=“company” name=“mode” /> <label class=“inline” for=“mode-company” colon=“false” /> </right> </row> <row id=“toggle.companyHint”> ... </row> <row id=“toggle.companyName”> ... </row>

21. Praktische Anwendung <pfx:script> function onJSLoad() { var infobox = new UNOUNO.ajax.InfoBox(); infobox.initInfoBoxMagic(‘info.vodafonepassport.passportId’, [4, 220, 80, 0, -35]); } </pfx:script> <row> <left> <label for=“passportId“ mandatory=“true” /> </left> <right> <info for=“passportId” class=“big” style=“margin-right: 200px;”> Bei deutschen Ausweisen müssen 10 Stallen eingegeben werden <a href=“mustermann.jpg”>(siehe Beispiel)</a> Bei ausländischen kann alles vorkommen. </info> <item type=“multi”> <item class=“inline” maxlength=“10” name=“passportId” size=“10” type=“text” /> <item class=“inline nospace” type=“freetext” noid=“true”> siehe </item> </item> </right> </row>

28. Cart-Templates Use Case: Article in Cart <cart:article-in-cart article= &quot; nis &quot; > ... </cart:article-in-cart> Check whether an Article (NIS) is in Cart. <cart:article-not-in-cart article=&quot;nav&quot;> ... </cart:article-not-in-cart> Check whether an Article (NAV) is not in Cart. Use Case: Property in Cart <cart:property-in-cart property=&quot;16000&quot;> ... </cart:property-in-cart> Check whether a Property (16000) is in Cart. <cart:property-not-in-cart property=&quot;6000&quot;> ... </cart:property-not-in-cart> Check whether a Property (6000) is not in Cart. Use Case: Article available This template is not available in all shops! <cart:article-available variant=&quot;old&quot; article=&quot;nis&quot;> ... </cart:article-availabel> Check whether an Article (NIS) is available in a variant (old). The variant therefore is optional. <cart:article-not-avaiable article=&quot;nav&quot;> ... </cart:article-not-available> Check whether an Article is not available. Use Case: Attribute in Cart <cart:attribute-in-cart attribute=&quot;attr&quot; value=&quot;val&quot;> ... </cart:attribute-in-cart> Check whether any of the Articles in Cart has an Attribute (attr) with a given value(val).

29. Cart-Templates Use Case: Check Slots <cart:slot-available slot=&quot;tal&quot;>...</...> Check whether a Slot is available. <cart:slot-not-available slot=&quot;tal&quot;>...</...> Check whether a Slot is not available. <cart:slot-complete slot=&quot;tal&quot;>...</...> Check whether a Slot ist complete. <cart:slot-incomplete slot=&quot;tal&quot;>...</...> Check whether a Slot ist incomplete. <cart:slot-empty slot=&quot;tal&quot;>...</...> Check whether a Slot is empty. <cart:slot-not-empty slot=&quot;tal&quot;>...</...> Check whether a Slot is not empty. Use Case: Check Cart Overview <cart:overview-empty /> Check whether Cart Overview is empty. <cart:overview-not-empty /> Check whether Cart Overview is not empty. Use Case: Check Cart <cart:complete /> Check whether Cart Overview is complete. <cart:incomplete /> Check whether Cart Overview is incomplete. Use Case: Check Cart <cart:empty ignore-meta=&quot;true&quot; /> Check whether Cart Overview is empty by ignoring Meta-Articles. <cart:not-empty ignore-meta=&quot;false&quot; /> Check whether Cart Overview is not empty by including Meta-Articles.

30. Cart-Templates Use Case: Price of an Article This template is not available in all shops! <cart:article-costs [article= &quot; ... &quot; | type= &quot; ... &quot; | name= &quot; ... &quot; | formatted= &quot; ... &quot; | image= &quot; ... &quot; ]> ... </cart:article-costs> Fetches a Price of an Article. article – ID of the Artcle. type – Type of the Price. Can be once or monthly . name – Name of the Price. In general it should be set to default . formatted – Format Price. Must be true . image – Display Price as Image. Can be true or src-only . Use Case: Remove Articles from the Cart <cart:remove page=&quot;costs&quot; type=&quot;image&quot;> <cart:article id=&quot;nis&quot; /> <cart:article id=&quot;nav&quot; /> <pfx:image src=&quot;delete.gif&quot; alt=&quot;Löschen&quot; /> </cart:remove> Remove articles from cart. page – Remove article and jump to page (optional). type – Type of Link. Can be text or image . id – ID of the Article. Use Case: Add Articles or Bundles to the Cart <cart:add type= &quot; text &quot; label=&quot;Hier klicken&quot;> <cart:article id=&quot;nis&quot; amount=&quot;1&quot; /> <cart:article id=&quot;nav&quot; amount=&quot;2&quot; /> </cart:add> Add Article(s) to the Cart. type – Type of Link. Can be text , markup or image . label – If type is text there must be a label . id – ID of the Article. amount – Amount of Articles added to Cart. <cart:add [ignoreFlow=&quot;true&quot;|changeFlow=&quot;Order&quot;]> <cart:bundle id=&quot;bundle1&quot; /> </cart:add> Add a Bundle to the Cart. The Attributes ignorFlow and changeFlow can optionally be used to manipulate normal Flow. Use Case: Clear one or more Slots <cart:clear page=&quot;overview&quot; type=&quot;markup&quot;> <cart:slot id=&quot;vod-hardware&quot; /> <cart:slot id=&quot;line&quot; /> <strong>Löschen</strong> </cart:clear> Clear one or more Slots in the Cart (Remove Articles from Slots).

31. Cart-Templates Use Case: Change Workflow <cart:change-flow flow=&quot;Static&quot; /> Change the current Workflow to flow . Use Case: Continue Workflow <cart:continue-flow /> Continue the current Workflow and go one step further. Use Case: Skip Step in Workflow <cart:skip-step /> <cart:skip-step step=&quot;OrderDomain&quot; /> Skip the next Step in Workflow or skip custom step . Use Case: Check current Flowpage <cart:if-current-flowpage> ... </cart:if-current-flowpage> Check whether the current page is the current flow page.

34. Variant-Template Use Case: Selecting current Variant <variant:get-current/> Gets current Variant, e.g. lead:def . <variant:get-current-base/> Gets base of the current Variant, e.g. lead if variant is lead:def . Use Case: Choose a variant <variant:choose> <variant:when alias=&quot;myvariant&quot;> Some foo Text. </variant:when> <variant:otherwise> Otherwise for other Variants. </variant:otherwise> </variant:choose> Works the same as the well known xsl:choose . Attributes used with Variant Templates The following Attributes are possible when working with Variant Templates. variant Matches the exact full Name of the Variant base Matches the Part before first Double Point end Matches the End of a Variant start Matches when Variant starts with this String alias Matches the Alias of a Variant Use Case: Restrict Block to a Variant <variant:restrict-to variant=&quot;lead:def&quot;> Some foo Text. </variant:restrict-to> Text (or other Markup) is only shown if Variant is lead:def . Use Case: Restrict Block to a Variant <variant:except base=&quot;PS&quot;> Some foo Text. <variant:except> Text (or other Markup) is shown in all Variants except Variants with Base PS .

42. Page Configuration Matrix