Neue Elemente rein über CSS erstellen in Weblication^®

09. Aug 2018

Mit neuen Techniken in Weblication^® Version 13 erstellen Sie blitzschnell rein über CSS neue Elemente samt HTML-Struktur, Darstellung, Pflegemaske und Mastertemplates.

Beispiel: Aufbau des Produktvergleichs

Am Beispiel eines Produktvergleichs möchten wir das Prinzip erklären. Sie können das Beispiel nachvollziehen, indem Sie das Weblic^® Produktvergleich in einem Mobile First Projekt installieren.

Beispiel für die blitzschnelle Gestaltung von neuen Elementen

Bestandteile des Produktvergleichs

Das Weblic^® Produktvergleich wird als Demoseite /angebotspakete/index.php und als Komponente auf Ebene des Inhaltsbereichs bereitgestellt. Die Elemente der Komponente bestehen aus:

Mehrspaltiger Container
Inhaltsbox in jeder Spalte des Containers
Je Produkt ein Datenfragment Produkt (CSS-Only Variante)
Je Produkt mehrere Datenfragmente Eigenschaft des Produktes (CSS-Only Variante)

Datenfragmente Produkt und Eigenschaft als CSS-Only

Über das Element "Produktvergleich Produkt", für das die beiden Datenfragmente (CSS-Only Darstellungsvarianten) "Produktvergleich Produkt" und "Produktvergleich Eigenschaft" verfügbar sind, lassen sich die Produktdarstellungen aufbauen. Produkte und Produkteigenschaften können Sie auch durch Kopieren von bestehenden Elementen beliebig erweitern und konfigurieren.

Produkt und Eigenschaft sind über CSS-Only Varianten definierte Datenfragmente, über die sowohl die HTML-Ausgabe und CSS-Darstellung in der Website als auch die Pflegemaske und die Definitionen für das Mastertemplate codiert sind. Das Mastertemplate wird automatisch durch eine Funktion (-w-onInterprete-createCopyOfMastertemplateWithLayout) in der CSS-Only Variante angelegt.

Datenfragment: Eingabemaske der CSS-Only Variante "Produktvergleich Produkt"

Datenfragment: Eingabemaske der CSS-Only Variante "Produktvergleich Eigenschaft"

Grundsätzlicher Aufbau des CSS-Codes

Nachfolgend finden Sie den grundsätzlichen Aufbau des CSS-Codes, der vollständig HTML-Struktur, Darstellung, Pflegemaske und Mastertemplate erzeugt.

Codebeispiele für Produkt- und Eigenschaft-Element

Die nachfolgenden Codebeispiele geben die vollständigen Codes für

Produkt
Eigenschaft

Die Codes produzieren vollständig HTML-Struktur, Darstellung, Pflegemaske und Mastertemplate und können als Vorlage für eigene Datenfragment-Elemente verwendet werden.

Hinweis:
Im Original-Weblic^® wurde das Anlegen des Mastertemplates mit der Funktion
-w-onInterprete-createCopyOfMastertemplateWithLayout
auskommentiert, weil das Anzeigen des Elements im Elemente-Editor in diesem speziellen Fall nicht sinnvoll erschien.

CSS-Only Variante für ein Produkt z.B. in einem 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-editmaskExtendedWebtag-price:'active=yes,decorators=default,editor=input,caption="Preis"';      
  -w-editmaskExtendedWebtag-priceDecimals:'active=yes,decorators=default,editor=input,caption="Nachkommastellen des Preises",captionInfo="Falls diese speziell formatiert werden sollen"';      
  -w-editmaskExtendedWebtag-priceAdditional:'active=yes,decorators=default,editor=input,caption="Preisinfo"';      

  -w-displayElements:data-html=yes;
  
  position:relative;
  margin:0 0 1rem 0;
  padding:0.3rem 0;
  
  & + & {
    border-top:solid 1px $borderColorDefault;
    margin-top:-1rem;
  }  
  
  .productTitle {
    font-size:1.7rem;
    line-height:130%;
    
    &.productTitle-offer:after {
      position:absolute;
      top:-0.5rem;
      right:-1rem;      
      content:' Top Angebot';
      font-size:1rem;
      background:#ffffff;
      color:#ff0000;
      padding:0 0.8rem;
      border:solid 2px #ff0000;
      border-radius:3px;
      box-shadow:0 0 6px rgba(0, 0, 0, 0.3); 
      transform:rotate(8deg);
    }
  }      

  .productAditional { 
    font-size:$fontSizeAdditional;    
    color:$fontColorSub;    
  }  
  
  .productPrice {
    
    display:block;
    overflow:hidden;
  
    .productPriceValue {
      display:inline;
      font-size:3rem;
      line-height:4rem;
      
      .productPriceDecimals {
        font-size:1rem;
        padding:0 0 0 0.4rem;
        vertical-align:super;
      }
    }    
    
    @media only screen and (min-width: $viewportMinHeaderFull){  
     .productPriceValue {
        font-size:6rem;
        line-height:8rem;

        .productPriceDecimals {
          font-size:2rem;
        }
      } 
    }
    
    .productPriceAditional { 
      display:inline;
      font-size:$fontSizeAdditional;    
      color:$fontColorSub;    
      .isDarkBackground &, .isLightBackground .isDarkBackground & {
        color:$fontColorInverseSub; 
      }              
    }  
  }  
 
  /*@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>
  */     
}

CSS-Only Variante für ein Eigenschaftselement z.B. in einem Produktvergleich

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

  -w-editmaskExtendedWebtag-included:'active=yes,decorators=default,editor=select,values="yes|no|optional",texts="Ja|Nein|Optional",caption="Enthalten"';    
  -w-editmaskExtendedWebtag-text:'active=yes,decorators=default,editor=input,caption="Text"';      
  -w-editmaskExtendedWebtag-description:'active=yes,decorators=default,editor=input,caption="Beschreibung"';      

  -w-displayElements:data-html=yes;
  
  position:relative;
  margin:0 0 1rem 0;
  padding:0.3rem 0;
  border-top:solid 1px $borderColorDefault;  
  
  & + & {
    margin-top:-1rem;
  }  
  
  .featureText {
    margin-left:30px;
  }  
  
  .featureAditional {
    margin-left:30px;    
    font-size:$fontSizeAdditional;    
    color:$fontColorSub;  
    .isDarkBackground &, .isLightBackground .isDarkBackground & {
      color:$fontColorInverseSub !important; 
    }         
  }  
  
  .included-yes {
    .featureSymbol{
      position:absolute;
      width:24px;
      height:24px;

      &:before {
        content:'';display:block;position:absolute;width:8px;height:2px;margin:12px 0 0 5px;background:#00aa00;transform:rotate(45deg);transform-origin:0 0;
        .isDarkBackground &, .isLightBackground .isDarkBackground & {
          background:$backgroundColorWhite; 
        }            
      }  

      &:after {
        content:'';display:block;position:absolute;width:16px;height:2px;margin:18px 0 0 8px;background:#00aa00;transform:rotate(-50deg);transform-origin:0 0;
        .isDarkBackground &, .isLightBackground .isDarkBackground & {
          background:$backgroundColorWhite; 
        }            
      }
    }
  }  
  
  .included-no {
    
    .featureSymbol {    
      position:absolute;
      width:24px;
      height:24px;

      &:before {
        content:'';display:block;position:absolute;width:16px;height:2px;margin:6px 0 0 7px;background:#c0c0c0;transform:rotate(45deg);transform-origin:0 0;
      }  

      &:after {
        content:'';display:block;position:absolute;width:16px;height:2px;margin:17px 0 0 5px;background:#c0c0c0;transform:rotate(-45deg);transform-origin:0 0;
      }
    }  
    
    .featureText {
      color:$fontColorWeak !important;
    }   
    
    .featureAditional {
      color:$fontColorWeak !important;     
    }        
  }  
  
  .included-optional {
    
    .featureSymbol {
      position:absolute;
      width:24px;
      height:24px;

      &:before {
        content:'';display:block;position:absolute;width:8px;height:2px;margin:12px 0 0 5px;background:#c0c0c0;transform:rotate(45deg);transform-origin:0 0;
      }  

      &:after {
        content:'';display:block;position:absolute;width:16px;height:2px;margin:18px 0 0 8px;background:#c0c0c0;transform:rotate(-50deg);transform-origin:0 0;
      }
    } 
    
    .featureText {
      color:$fontColorWeak !important;
    }   
    
    .featureAditional {
      color:$fontColorWeak !important;           
    }           
  }
 
  /*@wProperty:data-html;
  <div class="included-[!--included--]">
    <div class="featureSymbol"></div>
    <div class="featureText">[!--text--]</div> 
    [!--#if test="description != ''"--]<div class="featureAditional">[!--description--]</div>[!--#endif--]  
  </div>
  */     
}

Weitere Informationen

Dynamische Pflegemasken rein über CSS-Only definieren

Individuelle Elemente ohne eigene Templates nutzenn

Neue Elemente rein über CSS erstellen in Weblication®