Page tree
Skip to end of metadata
Go to start of metadata


Anwendungsbeispiel CSS:

Je nachdem welches Theme Sie verwenden, kann der Code stark abweichen, auch sollte berücksichtigt werden, dass eventuell die responsiv Elemente andere sind. Über Ihren Browser können Sie mittels rechter Maustaste "Element Untersuchen" ganz einfach herausfinden, welche Gliederung das Element hat, welches Sie ändern möchten.

Sie können z.B. die Hintergrundfarbe des Headers verändern.

Wenn wir mal bei dem Beispiel vom Shop Header bleiben, dann können wir leicht die Gliederung erkennen. Der CSS Code lautet also:

CSS
body.is--ctl-index header.header-main div.header--navigation {
 background: #dc8989;
}

Beachten Sie bitte die CSS Regeln der Vererbung. Je genauer und tiefer Sie eine Gliederung angeben, desto eher können Sie diese überschreiben (stark abhängig von bereits gesetzten CSS Regeln)!

Allgemeines Anwendungsbeispiel zu JavaScript:

Sie können in den Eingabefeldern "JavaScript", JavaScript Code verwenden. Sofern Sie jedoch JQuery Code verwenden möchten, benötigen Sie eine Funktion, welche überprüft ob der JQuery Grundcode bereits geladen und bereit ist. Dies können wir mit einer kleinen Abfrage bewerkstelligen, welche wie folgt, aussieht:

JavaScript
function uv_execute_jquery() {
 if (typeof(jQuery) !== 'undefined') {
  (function($) {
   $(function() {

    alert('Mein JQuery Code...');

   });
  })(jQuery);
 } else {
  setTimeout(uv_execute_jquery, 200);
 }
}
uv_execute_jquery();


In dem Sie das " alert('Mein JQuery Code...'); " mit Ihrem eigenen Code ersetzen, können Sie beliebige JQuery Funktionen ausführen.

Schneeflockenbeispiel mit JQuery:

Damit Sie es Beispielsweise in Ihrem Shop schneien lassen können. Bedienen wir uns einem kleinen JQuery "Plugin":
http://workshop.rs/2012/01/jquery-snow-falling-plugin/
Dies ist eine kleine JQuery Funktion, welche Ressourcen schonend arbeitet. Die Funktion kann aber auch mit einem Umbau andere Symbole über Ihren Shop rieseln lassen.

Der Code ist so schlank, dass er keine separate externe Datei zum Einbinden benötigt. Im komprimierten Zustand macht der gesamte Code gerade mal ein paar Zeilen aus:

JQuery
function uv_execute_jquery() {
 if (typeof(jQuery) !== 'undefined') {

  (function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('?'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);
  $(document).ready( function(){
   $.fn.snow();
  });

 } else {
  setTimeout(uv_execute_jquery, 200);
 }
}
uv_execute_jquery();

Logo mit JQuery ändern:

Sie können mit folgendem JQuery Code recht leicht auf das Shoplogo zugreifen und es ändern, ohne Anpassungen am Theme machen zu müssen.

Beachten Sie jedoch das mehrere Grafiken in unterschiedlichen Formaten nötig sind, um alle responsiv Ansichten sauber darzustellen.

JQuery
function uv_execute_jquery() {
 if (typeof(jQuery) !== 'undefined') {
  (function($) {
   $(function() {

    $("a.logo--link picture source").eq(0).attr('srcset', 'media/image/2b/af/a7/christmas.png');
    $("a.logo--link picture source").eq(1).attr('srcset', 'media/image/2b/af/a7/christmas.png');
    $("a.logo--link picture source").eq(2).attr('srcset', 'media/image/2b/af/a7/christmas.png');
    $("a.logo--link picture img").attr('srcset', 'media/image/2b/af/a7/christmas.png');

   });
  })(jQuery);
 } else {
  setTimeout(uv_execute_jquery, 200);
 }


So sieht dann das Ergebnis nach der Änderung aus.

Jede Grafik, welche Sie verwenden möchten, sollten Sie nur über die Medienverwaltung im Administrationsbereich hochladen und einpflegen. Die Medienverwaltung finden Sie unter "Inhalte" -> "Medienverwaltung", hier können Sie einen beliebigen Ordner auswählen um Ihre Grafik hochzuladen. Mit klick auf "Link zum Medium", öffnet sich ein neues Fenster zur Grafik, hieraus können Sie den genauen Pfad zur Grafik in Ihrem Shop entnehmen.

  • No labels