Problem:

Nachdem ich die Daten per CSV Import/Export in den neuen Shop eingespielt hatte, sah alles sehr zufriedenstellend aus: die Produkte tauchten auf der Shopseite inkl. Bilder auf. Änderte man allerdings die Kategorie eines dieser Produkte, verschwand die Produktabbildung! Ein kurzer Blick in den Produktkatalog im Backend zeigte: die »Bilder«-Reiter sämtlicher importierten Produkte enthielten keine Daten mehr. Allem Anschein nach wurde beim Kategoriewechsel dann auch noch die letzte Referenz zur ursprünglich zugewiesenen Bilddatei gelöscht.

Lösung:

Sicherheitskopie der Datenbank machen – sicher ist sicher!

Nach einem CSV Produktimport muss folgendes SQL-Skript auf der Magento-Datenbank ausgeführt werden (bspw. per phpMyAdmin):

INSERT INTO catalog_product_entity_media_gallery (attribute_id, entity_id, `value`)
SELECT ga.attribute_id, v.entity_id, v.value
FROM catalog_product_entity_varchar v
INNER JOIN eav_entity_type et ON et.entity_type_code='catalog_product'
INNER JOIN eav_attribute va ON va.entity_type_id=et.entity_type_id AND va.frontend_input='media_image' AND va.attribute_id=v.attribute_id
INNER JOIN eav_attribute ga ON va.entity_type_id=et.entity_type_id AND ga.attribute_code='media_gallery'
LEFT JOIN catalog_product_entity_media_gallery g ON g.entity_id=v.entity_id AND g.value=v.value
WHERE v.value<>'no_selection' AND v.value<>'' AND g.value IS NULL;

Dadurch werden die korrekten Einträge im »Bilder«-Reiter für die betroffenen Produkte wieder hergestellt.

Vielen Dank an Unirgy, der diese Lösung im offiziellen Magento-Wiki bereitgestellt hat.

Absolute Empfehlung für jeden jQuery Ninja: das jQuery Visual Cheat Sheet von Antonio Lupetti.

font-family:Arial,Helvetica,sans-serif;

Selbst auf “großen” Seiten (bspw. Posterous) ist dieser Fehler anzutreffen.

Fehler deshalb, weil auf diese Weise, nur solche Benutzer in den Genuss der viel harmonischeren Helvetica kommen, auf deren System kein Arial installiert ist. In der Praxis wird sich diese Nutzergruppe auf ein absolutes Minimum beschränken, denn sowohl auf Windows, wie auch auf Linux Systemen, ist keine Helvetica vorhanden. Bleiben noch die Mac-User… Nur ist unter MacOS auch die Arial installiert, und “gewinnt” damit bei obiger CSS Deklaration.

Dabei ist die Lösung doch so einfach:

font-family:Helvetica, Arial, sans-serif;

Und schon können zumindest die Mac-User schicke Schweizer Buchstaben bestaunen.

[Bildquelle]

Einen schnellen Überblick über den aktuellen Stand der HTML5 und CSS3 Browserunterstützung bekommt man mit dieser interaktiven Infografik. Schön anzuschauen und nützlich zugleich.

Kleines Osterei: Mal am Scrollrad der Maus drehen…

(via Ajaxian)

Eine der interessantesten Neuerungen, die CSS3 für Webdesigner mit sich bringt, ist die Möglichkeit beliebigen Elementen einen Schlagschatten zu verpassen. Musste man früher mit Grafiken und HTML-Handständen einen hübschen Schatten basteln, so kann man das nun bequem per CSS erledigen:

.shadow {
    -moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/
    -webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
    box-shadow: 0 0 5px #222; /*CSS3 Standard*/
}

Wie man sieht, muss man für die verschiedenen Browser noch spezielle Regeln verwenden (sog. Vendor-Prefixes). Diese werden aber wohl in nicht all zu ferner Zukunft überflüssig werden. Daher macht es Sinn, die Definition ohne Prefix ans Ende zu stellen–somit erhält sie die höchste Priorität.

Der oben stehende Code funktioniert in allen modernen Browsern:

• Safari 3+
• Firefox 3.5+
• Opera 10.5+

Fehlt noch… der Internet Explorer, der selbst in der aktuellen Version 8 gerade mal so CSS2 auf die Reihe bekommt.

Was zuerst nach einem hoffnunglosen Unterfangen aussieht, kann recht praktikabel gelöst werden, durch den Einsatz des Microsoft Shadow Filters:

.shadow {
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=0, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=45, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=90, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=180, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=225, Strength=2)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=260, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=305, Strength=2);
    -moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/
    -webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
    box-shadow: 0 0 5px #222; /*CSS3 Standard*/
}

Nicht sonderlich elegant, aber auf diese Weise kann man die CSS3 box-shadow Eigenschaft annähernd identisch im IE emulieren–ohne überflüssiges Markup und Grafiken. Die zusätzliche Eigenschaft »zoom« ist notwendig, um diversen Darstellungsfehler vorzubeugen.

Und so sieht das dann aus:

CSS3 box-shadow im Firefox 3.6

Box-shadow im Internet Explorer

Onlinedemo im Labor

Erfolgreich getestet habe ich diese Methode im Internet Explorer 6, 7 und 8.

Weiterführende Links zum Thema »CSS3 box-shadow«:

• »box-shadow« Eigenschaft im W3C Spec
• Box-shadow, one of CSS3’s best new features
• Box Shadows – CSS3 Spielwiese/Codegenerator

Foto: http://www.flickr.com/photos/ranopamas/ / CC BY-ND 2.0

Etwas Quellcode:

	if ($("#s")[0]) {
		var query = $("#s");
		if (query.hasClass("empty")) {
			query.focus(function() {
				query.val("");
				query.removeClass("empty");
			});
			query.blur(function() {
				if (query.val().length < 1) {
					query.addClass("empty");
					query.val("Suchen...");
				}
			});
		}
	}