Kategorie: Module

share

bequemes Module entfernen für OXID eShop – ocb_cleartmp erweitert

ocb_cleartmp erweitert
Wir haben soeben das Modul aus dem OXID Kochbuch um eine weitere, etwas versteckte Option ergänzt.
Beim Entwickeln ist es immer wieder notwendig, alle Moduleinträge zu löschen. Unter anderem deswegen, weil OXID, sofern es bereits Blöcke für ein Modul kennt, keine weiteren hinzu nimmt, wenn diese über die metadata.php ergänzt werden.

Um es dieses manuelle Löschen zu beschleunigen und da das ocb_cleartmp-Modul auf jeder unserer Entwicklungsshops zum Pflichtumfang gehört, haben wir das Modul um diese Option ergänzt. Sobald man den Entwicklermodus aktiviert, erscheit die zusätzliche Auswahl im Dropdown (siehe Bild).

Edit:
Das Modul steht kostenfrei auf GitHub zur Verfügung unter https://github.com/OXIDCookbook/ocb_cleartmp

share

OXID Modulentwicklung – Hidden Feature: Reihenfolge der Block-Erweiterungen festlegen

Wenn in einem OXID-Shop mehrere Module aktiv sind, ist es gut möglich, dass zwei oder mehr Module den gleichen Template-Block überschreiben. Dabei kann es zu ungewollten Verschiebungen in der Reihenfolge der darzustellenden Elemente kommen. Praktischerweise wird in der Datenbanktabelle „oxtplblocks“ als „oxpos“ bereits eine Priorität für die Reihenfolge mitgespeichert. Diese ist jedoch für jeden Block standardmäßig auf „1“ gesetzt. Leider bietet das OXIDwiki derzeit keine Hinweise darauf, wie dieser Wert korrekt festzulegen ist.

Natürlich ließe sich der Wert direkt in der Datenbank anpassen. Eine viel angenehmere Möglichkeit bietet OXID jedoch, indem in der „metadata.php“ des jeweiligen Moduls einfach beim Block eine „position“ mit angegeben wird. Hier ein einfaches Beispiel:

In der Metadata von Modul 1:


'blocks' => array(
    array(
        'template' => 'page/checkout/basket.tpl',
        'block'    => 'basket_btn_next_bottom',
        'file'     => '/views/blocks/MODUEL_EINS_basket_next.tpl',
        'position' => '2'
    ),
),

In der Metadata von Modul 2:


'blocks' => array(
    array(
        'template' => 'page/checkout/basket.tpl',
        'block'    => 'basket_btn_next_bottom',
        'file'     => '/views/blocks/MODUL_ZWEI_basket_next.tpl',
        'position' => '3'
    ),
),

Nun wird auch definitiv erst der Block von Modul 1 und anschließend der Block von Modul 2 eingebunden.

share

OXID Modul „Categoryorder“: Artikel einfach und schnell sortieren per Drag & Drop

Kennen Sie das? Sie haben in Ihrem Shop-Backend in mühevoller Kleinarbeit bestimmte Artikel einer Kategorie zugeordnet und in die richtige Reihenfolge gebracht. Nach einiger Zeit kommt ein neuer Artikel hinzu, der nun an Position XY rücken soll. Bis zuletzt hieß es dann: Alle Artikel wieder löschen, Reihenfolge neu festlegen. Das neue OXID Modul „Categoryorder“ löst nun genau dieses Problem.

Mit diesem Modul können Sie problemlos und schnell die neue Artikelreihenfolge einer Kategorie festlegen. Nach der Installation des Moduls in Ihrem OXID eShop, finden Sie im Backend unter Artikel verwalten > Kategorien > Sortierung einen neuen Button „Drag&Drop Artikelsortierung“. Hier öffnet sich ein Popup-Fenster mit einer Liste aller Artikel, die dieser Kategorie zugeordnet sind. Nun kann man die Artikel ganz einfach mit Drag&Drop neu sortieren. Das Sortieren wurde mit den Funktionen „sortable“ und „sortstop“ von jQuery UI realisiert.

 

Category_order

Nachdem Sie einen Artikel neu positioniert haben, ruft die Funktion „sortstop“ ein AJAX request auf, der die neue Sortierung in der Datenbank speichert. Das heißt, das Speichern der neuen Reihenfolge erfolgt automatisch im Hintergrund, sodass der Benutzer davon nichts mitbekommt. Nach dem Sortieren kann man das Popup-Fenster einfach schließen und das Ergebnis im Frontend des Shops begutachten.

Das Modul steht bei GitHub kostenfrei zur Verfügung – auch auf oxmod.org haben wir es in den OXID Modulkatalog aufgenommen.

share

TYPO3: Fluid und Grid Elements gemeinsam verwenden

Wie man Partials und ViewHelper für Gridelements nutzen kann: Alternativ zur normalen TypoScript-Konfiguration ist es möglich, die Darstellung eines Grid-Elements in einem einfachen HTML-Template zu definieren und dabei auf die Fähigkeiten von Fluid zurückzugreifen.

Die folgende Anleitung beschreibt die Verwendung von Fluid für die Frontendausgabe von Raster-Elementen. Sie wurde mit gridelements 2.0.2 unter TYPO3 6.1 getestet. Es wird vorausgesetzt, dass die gridelements-Extension bereits installiert ist und das statische TypoScript der Extension im Template eingebunden wurde.

Als Beispiel legen wir ein neues Gridelement (CE Backend Layout) mit zwei Zeilen und drei Spalten an, hierbei werden die beiden linken Elemente zu einer Sidebar und die beiden rechten oberen Spalten zu einer Spalte zusammengefasst. Dies kann entweder über die Raster-Konfiguration oder den Assistenten erfolgen.

Folgende Raster-Konfiguration liefert das gewünschte Ergebnis:

backend_layout {
    colCount = 3
    rowCount = 2
    rows {
        1 {
            columns {
                1 {
                    name = Left
                    rowspan = 2
                    colPos = 11
                }
                2 {
                    name = Top
                    colspan = 2
                    colPos = 12
                }
            }
        }
        2 {
            columns {
                1 {
                    name = BottomLeft
                    colPos = 22
                }
                2 {
                    name = BottomRight
                    colPos = 23
                }
            }
        }
    }
}

Anschließend geht es an die TypoScript-Konfiguration für das Gridelement im Template-Setup.

tt_content.gridelements_pi1.20.10.setup {
    # ID des Gridelements
    1 < lib.gridelements.defaultGridSetup
    1 {
        # FLUIDTEMPLATE konfigurieren
        cObject = FLUIDTEMPLATE
        cObject {
            file = fileadmin/template/gridelements/layout.html
        }
    }
}

Zum Schluss noch das Fluid-Template. Zum Einbinden des Spalteninhalts des Raster-Elements wird auf die entsprechende Spalte im data-Objeḱt zugegriffen.

<div class="row">
    <div class="column small-4">
        <f:format.raw>
            {data.tx_gridelements_view_column_11}
        </f:format.raw>
    </div>
    <div class="column small-8">
        <div class="row">
            <div class="column small-12">
                <f:format.raw>
                    {data.tx_gridelements_view_column_12}
                </f:format.raw>
            </div>
        </div>
        <div class="row">
            <div class="column small-6">
                <f:format.raw>
                    {data.tx_gridelements_view_column_22}
                </f:format.raw>
            </div>
            <div class="column small-6">
                <f:format.raw>
                    {data.tx_gridelements_view_column_23}
                </f:format.raw>
            </div>
        </div>
    </div>
</div>

Wenn das Gridelement auf einer Seite hinzugefügt und mit Inhalt gefüllt wurde, sollte man im Frontend folgendes Ergebnis erhalten:

layout
share

Weiterbildungen für Wissbegierige: Schulungen für TOXID und mobile Development

Aktuelles Know-how dank Weiterbildungen: In verschiedenen Bereichen bietet die marmalade GmbH ab sofort Schulungen an – individuell an die Wünsche angepasst, gern auch beim Kunden vor Ort. Wir starten mit TOXID und mobile Development, das Repertoire soll zukünftig ausgebaut werden. Für diejenigen, die das Angebot noch nicht im Shop entdeckt haben, gibt es hier eine kurze Einführung:

Lernen mit TOXID zu punkten! Diese technische Schnittstelle zwischen einem OXID eShop und CMS hat sich schnell zu einem der begehrtesten Module in der Welt der Entwickler gemausert. Sie wollen TOXID in Ihrem Unternehmen nutzen, Ihnen fehlt jedoch das nötige Wissen? Bei uns erhalten Sie eine kompakte Einführung in die technische Implementierung sowie praktische Tipps für den Umgang mit diesem Modul. Hier erfahren Sie, was Sie bei dieser Schulung erwartet und welche Voraussetzungen Sie erfüllen sollten.

Wer mit der Zeit geht, setzt auf mobile Development! Sie wollen Ihrer Internetpräsenz den letzten Feinschliff geben und mit responsive Webdesign durchstarten? Dann ist die mobile Development-Schulung genau das Richtige für Sie. Bei dieser Schulung erhalten Entwickler eine technische Einführung in mobile HTML5, CSS3 und Performance für den passenden Webauftritt. Interesse? Dann schauen Sie auf der marmalade-Webseite vorbei, hier erhalten Sie alle weiteren Informationen.