HTML-Struktur, Darstellung, Pflegemaske und Mastertemplate über CSS-Only definieren

Navigation

02. Aug 2018

Durch die neueste Erweiterung zum dynamischen Erstellen von Mastertemplates über CSS-Only bekommen Sie mit Weblication 13 ein Werkzeug in die Hand, mit dem Sie komplette Elemente samt Pflegemasken rein über CSS-Only erstellen.

Vollständig umgesetzt sind die Möglichkeiten in den CSS-Only-Varianten 540 und 541 des Datenfragmentes. Statt nur die Ausgabe zu formatieren gehen diese Varianten mit folgenden Funktionen deutlich weiter:

Definition der Darstellung über SASS/CSS
Definition der Pflegemaske über -w-editmaskTitle und -w-editmaskExtended*
Erstellen des Mastertemplates über -w-onInterprete-createCopyOfMastertemplateWithLayout
Definition der Templates zur HTML-Ausgabe über @wProperty:data-html

Umsetzung aller Funktionen im Datenfragment Produktvergleich

/*@wCssFragment{class:elementDataFragment;variant:540;caption:Produktvergleich Produkt;caption-en:Product comparisation;minSystemMajorRelease:13;livepreview:yes}*/
.elementDataFragment_var540 {
  
  @extend .elementContent !optional;  
  
  -w-onInterprete-createCopyOfMastertemplateWithLayout:'nameSource=dataFragment.template,nameDest=dataFragment.540,layout=540,title="Produktvergleich Produkt"';  
   
  -w-editmaskTitle:'Produkt';
  
  -w-editmaskExtended-layout:no;  
  -w-editmaskExtended-html:no;

  -w-editmaskExtendedWebtag-type:'active=yes,decorators=default,editor=select,values="|offer",texts="Standard|Angebot",caption="Angebotstyp"';      
  -w-editmaskExtendedWebtag-title:'active=yes,decorators=default,editor=input,caption="Titel"';        
  -w-editmaskExtendedWebtag-additional:'active=yes,decorators=default,editor=input,caption="Zusatzinfo"';        
  ...

  -w-displayElements:data-html=yes;
  
  position:relative;
  margin:0 0 1rem 0;
  padding:0.3rem 0;
  ...
 
  /*@wProperty:data-html;
  [!--#if test="additional != ''"--]<div class="productAditional">[!--additional--]</div>[!--#endif--]    
  <div class="productTitle productTitle-[!--type--]">[!--title--]</div>
  <div class="productPrice productPrice-[!--type--]">
    <div class="productPriceValue">[!--price--][!--#if test="priceDecimals != ''"--]<sup class="productPriceDecimals">[!--priceDecimals--]</sup>[!--#endif--]</div> 
    [!--#if test="priceAdditional != ''"--]<div class="productPriceAditional">[!--priceAdditional--]</div>[!--#endif--]  
  </div>
  */     
}