[Workshop] Template Erstellung

MyOOS hat einen Fehler, oder tut nicht das, was Ihr erwartet? Derartige "Unanehmlichkeiten" bitte hier.
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Hallo,

in diesem Workshop möchte ich zeigen, wie man mit wenig Aufwand fertige Templates
in sein MyOOS [Shopsystem] einbauen kann.

Auf Templates Seiten findet man in der Regel sehr ansprechende Lösungen:
http://www.smashingmagazine.com/2009/01 ... templates/


Ich habe mich für dieses Template entschieden

Bild

Download
http://darylwtlau.googlepages.com/footwear_green.zip

Homepage
http://how2make.blogspot.com/2007/04/fr ... twear.html


In der Regel erhält man bei dem Download folgenden Hinweis
The bandwidth or page view limit for this site has been exceeded and the page
cannot be viewed at this time. Once the site is below the limit, it will once again
begin serving as normal.
Hier muss man halt ein paar Stunden später den Download noch einmal versuchen.

Wenn man glück hat, findet man auch jemanden, der eine Kopie zur Verfügung
stellt.
http://foren.myoos.de/files/footwear_green.zip

Nach dem Download entpacken wir das Zip - Archive und sehen uns den Inhalt an.
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

In dem Archive finden wir folgenden Baum

~/9823

<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1-->Verzeichnis von D:\9823

27.01.2009 14:00 <DIR> .
27.01.2009 14:00 <DIR> ..
27.01.2009 10:35 <DIR> screenshots
27.01.2009 10:35 <DIR> site
27.01.2009 10:35 <DIR> site_flash
27.01.2009 10:34 <DIR> sources<!--c2-->[/align]<!--ec2-->

Es sind keine Informationen über die Lizenzen vorhanden!
Für die Fotos fehlen auch die notwenigen Model-Release-Verträge
Einen Autor oder Anprechpartner fehlt auch.

Informationen wer was erlaubt fehlt auch auf der Seite auch.
http://how2make.blogspot.com/2007/04/fr ... twear.html
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Bild

1. (gelb)

Hier werden die Blocks (Seitenleisten-Plugins) angezeigt
http://www.oos-shop.de/doc/myoosdoc/htm ... block.html

2 (rot)

dies ist der eigentlich Shop Inhalt (Content)

3 (blau)

ein Modul (hier Hersteller)


4 (grün)

einfache Navigation (Links zu Informationen)

5 (schwarz)

Bilder die wir nicht verwenden sondern durch eigene ersetzen müssen/sollten.
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Wir verwenden als Basis für unseren Template Erweiterung das Skin : oos


Dafür kopieren wir alle Dateien unter

~/oos_temp/shop/templates/oos/*.*
nach
~/oos_temp/shop/templates/footwear_green

und
~/shop/themes/oos/*.*
nach
~/shop/themes/footwear_green
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Wir speichern nun die Datei

~/9823/sites/index.html

als theme.html in das Verzeichnis

~/oos_temp/shop/templates/footware_green/theme.html

ab. (überschreiben die vorhenden Datei)


Wir öffnen diese Datei mit unserem bevorzugten Editor (zb. textpad http://www.textpad.com/
und markieren uns in dem HTML Gerüst die bereits gezeigten farblichen Flächen mit
Kommentartags.

Da wir ein Template erstellen verwenden wir hier die Kommentar Syntax von Smarty
http://www.smarty.net/manual/de/languag ... x.comments

<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1-->{* das ist ein Kommentar *}<!--c2-->[/align]<!--ec2-->

Bild


Für Punkt 1 (gelb)
<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1-->{* start block *}
und
{* stop block *}<!--c2-->[/align]<!--ec2-->

Für Punkt 2 (rot)
<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1-->{* start content *}
und
{* stop content *}<!--c2-->[/align]<!--ec2-->


Für Punkt 3 (blau)
<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1-->{* start modules *}
und
{* stop modules *}<!--c2-->[/align]<!--ec2-->



Für Punkt 4 (grün)
<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1-->{* start customernavi *}
und
{* stop customernavi *}<!--c2-->[/align]<!--ec2-->

Für Punkt 5 (schwarz)
<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1-->{* start ci images *}
und
{* stop ci images *}<!--c2-->[/align]<!--ec2-->


Wenn man prolbme mit der markierung hat, kann sich für das Finden von "Anfangspunkten"
auch die Farben eintragen. (gelb, rot, grün, blau, schwarz)
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

In diesem Beispiel habe ich einmal die Punkte von den Blöcken markiert

http://foren.myoos.de/files/kommentar.txt
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Ich hoffe, ich habe alle Bereiche im Template richtig markiert.



http://foren.myoos.de/files/theme_kommentar.txt
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Jetzt tauschen wir in unserem Template den Datei Kopf aus

<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<LINK HREF="style.css" TYPE="text/css" REL="stylesheet">
<title>Home</title>
</head>
<body><!--c2-->[/align]<!--ec2-->

von <!DOCTYPE bis <body> übernehmen wir aus unserem Template
~/oos_temp/shop/templates/oos/theme.html

<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html {$smarty.const.HTML_PARAMS}>
<head>
<meta http-equiv="content-type" content="text/html; charset={$smarty.const.CHARSET}">
<title>{$pagetitle}</title>
<meta name="description" content="{$meta_description}">
<meta name="keywords" content="{$meta_keywords}">

<meta name="page-topic" content="{$smarty.const.OOS_META_PAGE_TOPIC}">
<meta name="audience" content="{$smarty.const.OOS_META_AUDIENCE}">
<meta name="author" content="{$smarty.const.OOS_META_AUTHOR}">
<meta name="copyright" content="Copyright (c) {$smarty.now|date_format:"%Y"} by {$smarty.const.OOS_META_COPYRIGHT}">
<meta name="page-type" content="{$smarty.const.OOS_META_PAGE_TYPE}">

<meta name="publisher" content="{$smarty.const.OOS_META_PUBLISHER}">
<meta name="robots" content="{$smarty.const.OOS_META_ROBOTS}">
<meta http-equiv="expires" content="{$smarty.const.OOS_META_EXPIRES}">
<meta http-equiv="pragma" content="{$smarty.const.OOS_META_PAGE_PRAGMA}">

<meta name="Language" content="{$smarty.session.languages_name}">
<meta name="revisit-after" content="{$smarty.const.OOS_META_REVISIT_AFTER}">
<meta name="Content-Language" content="{$smarty.session.iso_639_1}">

<meta name="resource-type" content="document">
<meta name="creation" content="{$smarty.now|date_format:"%a,%d %b %Y"}">
<meta name="revision" content="{$oos_revision_date}">
<meta name="distribution" content="Global">

<!--
* DO NOT REMOVE THE FOLLOWING - FAILURE TO COMPLY IS A DIRECT VIOLATION
* OF THE GNU GENERAL PUBLIC LICENSE - http://www.gnu.org/copyleft/gpl.html
-->
<meta name="Generator" content="{$smarty.const.OOS_FULL_NAME} - {$smarty.const.OOS_HOME} All rights reserved.">
<!--
* END OF COPYRIGHT
-->
<meta name="rating" content="General">
<base href="{$oos_base}">

<link rel="shortcut icon" href="{$oos_base}favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="{$theme_css}/style.css">
<link rel="stylesheet" type="text/css" href="{$theme_css}/stylesheet.css">

<link rel="top" type="text/html" href="{$oos_base}">
<link rel="author" href="mailto:{$smarty.const.STORE_OWNER_EMAIL_ADDRESS}">
<link rel="contents" type="text/html" href="{html_href_link modul=$modules.info file=$filename.info_sitemap}">
<link rel="search" type="text/html" href="{html_href_link modul=$modules.search file=$filename.advanced_search}">
<link rel="bookmark" type="text/html" href="{html_href_link modul=$main_page file=$page_file oos_get=$get_params connection='NONSSL' add_session_id='false' search_engine_safe='false'}">


{if $popup_window}
{formtool_init src=js/$popup_window}
{/if}

{literal}
<script type="text/javascript" language="JavaScript">
<!--
function couponpopupWindow(url) {
window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,re
sizable=yes,copyhistory=no,width=450,height=280,screenX=150,screenY=150,top=150,
l
eft=150')
}

function popupZoom(url) {
var width = 900;
var height = 636;
var y = (screen.availHeight - height) /2;
var x = (screen.availWidth - width) /2;
var micro = window.open(url,'micro','resizable=0,scrollbars=0,status=0,location=0,width='+width+',height='+height+', top='+y+',left='+x);
micro.focus();
}
//-->
</script>
{/literal}

{$oos_js}

</head>
<body><!--c2-->[/align]<!--ec2-->

Selbstverständlich ist dieser Header nur ein Vorschlag und kann an eigene Wünsche angepasst werden.
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Damit die Bilder von unserem Template angezeigt werden können, kopieren wir
die Grafiken aus

~/9823/site/images/*.*
nach
~/shop/themes/footwear_green/images/*.*

Selberständlich verzichten wir hier auf Urheberrechtlich geschützte Fotos.

Mit suchen / ersetzen tauschen wir images durch {$theme_image} in unserem Template aus.



Die Grafik
~/9823/screeshot/9823-h.jpg

speichern wir im Format 139 Pixel x 98 Pixel als template_thumbnail.gif
nach
~/shop/themes/footwear_green/images/
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Erfassen wir nun die Kategorien über den Shop-Admin (Backend)

Admin => Katalog => Kategorien / Artikel => hier Neue Kategorie
anlegen.

Bild

Bitte beachte, dass du dies in die richtige Reinhefolge bringst

Bei Schuhen sind dies

Damen
Herren
Kinder
Sport
Assessoires

Für die Hauptkategorien benötigst du bei dem Template keine Bilder und auch keine Kategorie Beschreibung
(kann bei der Erfassung leer bleiben)

Bei der Erfassung solltest du allerdings
- Kategorie Beschreibung für Description Tag (max. 250 Zeichen)
und
- Kategorie Suchworte für Keyword Tag (Stichworte durch Komma getrennt - max. 250 Zeichen)
nach Möglichkeit hinterlegen.

Die Sortierreihenfolge sollte wirklich nach 'Knigge' http://www.knigge.de/ erfolgen,
Damen, Herren, Kinder, Sport, Assessoires
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Wir deaktivieren über den Content Manger a l l e Blocks (Seitenleiten Plugins)) im Shop

Die Module werden über den Admin des Shops deaktiviert unter:
Conent Mangaer -> Block Manager -> Klick auf grüne Punkte


Blocks (Seitenleiten Plugins) beschreiben wir im MyOOS Handbuch hier
http://www.oos-shop.de/doc/myoosdoc/htm ... block.html


Wenn alle Blocks deaktiviert sind aktivieren wir
Kategorien

Column ist left

und wird auf allen Seiten angezeigt auch Kundenkonto

die Reihenfolge ist 1
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Sehen wir uns nun noch einmal die Template - Vorlage an.

Bild

Es fällt z.B. auf, das die "Breadcrumb" Navigation fehlt. Also Die Navigation über die
Linkleiste: Sie sind hier: Startseite » Kategorie » Produkt

Im Template steht uns diese Leiste unter

<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1-->{$oos_breadcrumb}<!--c2-->[/align]<!--ec2-->

immer zur Verfügung.


Da wir hier einen kleinen Online Shop haben, verzichten wir aber auf die Links.

Allerdings verwenden die wichtigen Teile für den Seitentitel.

Der Seitentitel ist normalerweise so aufgebaut:
Shopname - Produktname


Grundlagen: Ein guter Seitentitel ist sehr wichtig. Ich rede hierbei von dem Titel welcher sich oben in der
Browserleiste befindet und durch das title-Element ausgezeichnet wird.

Ein Aussagekräftiger Titel ist wichtig für den Besucher und zwar in zweierlei Hinsicht. Zum einen als
Orientierung innerhalb der Website und zum anderen wird der Seitentitel bei den diversen
Lesezeichen-Verwaltungen auch als Lesezeichen-Titel übernommen. Auch in Bezug auf die
Optimierung einer Website für die Suchmaschinen ist der Seitentitel extrem wichtig. Da die
Suchmaschinen den Seitentitel stark bewerten und weil bei der Auflistung des Suchergebnisse
der Seitentitel benutzt wird.

Hier ein Beispiel aus unserem Demo Shop:
osis online shop - Rabatt auf Optionen

An sich gesehen ist das logisch aufgebaut … in der Theorie. In der Praxis gibt es aber Probleme
und hier kommen wir wieder zu der Lesezeichenverwaltung. Nehmen wir mal an ich hätte in
diesem WebShop ist die Titel-Struktur nach der oberen Logik aufgebaut und jemand würde
diesen WebShop so interessant finden das er gleich drei Dutzend Produkte in seine
Lesezeichen-Sammlung ablegt. Wenn er Pech hat hat er eine Sammlung die evtl. so ausschaut:


osis online shop » Webwork und Internet » Rab
osis online shop » Webwork und Internet » Opt
osis online shop » Webwork und Internet » Tat
osis online shop » Webwork und Internet » Arb
osis online shop » Webwork und Internet » Bat


Das ist nicht sonderlich hilfreich. Ein anderes Argument gegen eine solche Titel-Struktur
bringt die Suchmaschinen-Optimierung. Wenn Unterseiten, vor allem am Anfang, einen
zu ähnlichen Seitentitel haben, so werden diese im Index der Suchmaschinen nicht
berücksichtigt werden dann auch nach und nach aus diesem verschwinden.


Ergo passen wir uns den MyOOS eben an:

Wir löschen in dem Plugin
~/shop/inlcudes/plugins/oos_event_breadcrumb/oos_event_breadcrumb.php

die Zeile 66
<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1--> $oBreadcrumb->add($aLang['header_title_top], oos_href_link($aModules['main], $aFilename['main]));<!--c2-->[/align]<!--ec2-->

und Zeile 93

<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1--> $oBreadcrumb->add($aLang['header_title_catalog], oos_href_link($aModules['main], $aFilename['shop]));<!--c2-->[/align]<!--ec2-->


oder kommentieren aus
<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1--> // $oBreadcrumb->add($aLang['header_title_top], oos_href_link($aModules['main], $aFilename['main]));<!--c2-->[/align]<!--ec2-->


<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1--> // $oBreadcrumb->add($aLang['header_title_catalog], oos_href_link($aModules['main], $aFilename['shop]));<!--c2-->[/align]<!--ec2-->


Jetzt ändern wir nur noch für das System für alle Seiten den Seitentitel

~/shop/includes/oos_system.php

aus
<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1--> if (empty($oos_pagetitle)) $oos_pagetitle = OOS_META_TITLE;<!--c2-->[/align]<!--ec2-->

wird

<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1--> // Meta-Tags
// if (empty($oos_pagetitle)) $oos_pagetitle = OOS_META_TITLE;
$oos_pagetitle = $oBreadcrumb->trail_title();<!--c2-->[/align]<!--ec2-->
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Urheber-Kennzeichnung

Das MyOOS Projekt beansprucht nach dem Urheberrecht http://de.wikipedia.org/wiki/Urheberrecht
eine Urheber-Kennzeichnung. Informationen über diese
Kennzeichnung haben wir hier http://foren.myoos.de/index.php?showtopic=82 veröffentlicht.

Fügen wir diese Kennzeichnung nun ein in

~/oos_temp/shop/templates/footwear_green/theme.html

aus ca. Zeile 508
<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1--><div style="padding-right:27px; padding-top:7px"><span class="style4">Copyright © <a href="index.html" class="style3">Companyname</a>, 2005.
All Rights Reserved</span>[/align]{* stop customernavi *}</td><!--c2-->[/align]<!--ec2-->

wird

<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1--><div style="padding-right:27px; padding-top:7px"><span class="style4">Copyright © {$smarty.now|date_format:"%Y"} <a href="{html_href_link modul=$modules.main file=$filename.main}" class="style3">{$smarty.const.STORE_NAME}</a> Powered by <a href="{$smarty.const.OOS_HOME}" target="_blank" class="style4">OOS [OSIS Online Shop]</a></span>[/align]{* stop customernavi *}</td><!--c2-->[/align]<!--ec2-->
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Für den ersten Aufruf des Templates ändern wir in der Shopkonfiguration das Standard-Tempalte

Admin => Konfiguration => Shop Layout => Layout Vorlage hier tragen wir unser neues Skin ein 'footwear_green'

Da unser Template keine Kategorien-Auswahlliste verwendet - deaktivieren wir in diesem Menue Kategorien-Auswahlliste mit 'false'

Da wir Templates an Shopbetreiber geben, kann es sinnvoll sein, dass man unnötige Informationen im Admin löscht.

Ich erledige dies mit einem einem kleinen Skript.

Dieses löscht auch 'Artikelanzahl hinter den Kategorienamen'
http://foren.myoos.de/files/template_install.txt

Hiermit könnte man Blocks (Seitenleisten Plugins) deaktiveren oder ein Setup erstellen.

Download über den Link http://foren.myoos.de/files/template_install.txt
in das Shop-Verzeichnis als PHP Skript speichern und aufrufen.

Danach sollte
Admin => Konfiguration => Shop Layout => Layout Vorlage

übersichtlicher sein und unter Layout Vorlage => 'footwear_green' stehen.
r23
Beiträge: 2696
Registriert: 18.09.2008, 05:56
Wohnort: Hagen
Kontaktdaten:

Beitrag von r23 »

Katregorie- Block (Seitenleisten-Plugin)

Vor der Einbindung der Kategorie prüfen wir, ob wir an der
'richtigen' Stelle unsere Änderungen durchführen möchte.

Zeile 93 in ~/oos_temp/shop/templates/theme.html
<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1-->{* start block *}
<table width="170" border="0" cellspacing="0" cellpadding="0">
<tr><!--c2-->[/align]<!--ec2-->

border=1 für die Anzeige.

Und den Shop im Broweser aufrufen.

Bild


Die Tabellenzeilen: Men, Women, Child, Accessories, Specials löschen wir.
Die Tabellenzeile: Product Guide, Free Gifts lassen wir für mögliche Projekt Erweiterungen im Template.

Für die Tabellen-Zellen Men, Women, Child, Accessories, Specials
Tragen wir in das Template ein

<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1-->{foreach item=block from=$oos_blockleft}
{if $block.content}{$block.content}{/if}
{/foreach}<!--c2-->[/align]<!--ec2-->

Die Kategorien werden mit dem Tempalte
~/oos_temp/shop/templates/footwear_green/blocks/categories.html
erstellt.

Aus der Tabellenzeile 'Product Guide'

<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1--> <tr>
<td height="27" align="left" valign="middle" style="background-position:bottom; background-repeat:repeat-x "><div style="padding-left:1px; padding-top:0px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="middle">
<td width="15"><img alt="" src="{$theme_image}/point_1.jpg" width="6" height="6"></td>
<td><a href="#" class="style1">Free Gifts</a></td>
</tr>
</table>
[/align]</td>
</tr><!--c2-->[/align]<!--ec2-->

erstellen wir unser Template für die Kategorien.

<!--c1--><div class='codetop'>QUELLTEXT[/align]<div class='codemain'><!--ec1-->{foreach item=category from=$categories_contents}
<tr>
<td height="27" align="left" valign="middle" style="background-image:url({$theme_image}/rep_1.jpg); background-position:bottom; background-repeat:repeat-x "><div style="padding-left:1px; padding-top:0px">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="middle">
<td width="15"><img alt="" src="{$theme_image}/point_1.jpg" width="6" height="6"></td>
<td><a href="{if $category.parent == 0}{html_href_link modul=$modules.main file=$filename.shop cPath=$category.counter}{else}{html_href_link modul=$modules.main file=$filename.shop cPath=$category.path}{/if}" class="style1">{if $category.isSelected}{/if}{$category.name}{if $category.isSelected}{/if}</td>
</tr>
</table>
[/align]</td>
</tr>
{/foreach}<!--c2-->[/align]<!--ec2-->


Die Templates
theme.html
http://foren.myoos.de/files/blockleft_theme.txt

block/categorie.html
http://foren.myoos.de/files/categories.txt
Antworten