Kategorie: aktuelle Projekte

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

Die passenden Rezepte für Ihr OXID-Problem: OXID eShop Kochbuch bald erhältlich

9783955610432Am 28. Juli 2013 ist es soweit: Das OXID eShop Kochbuch wird veröffentlicht. Das Fachbuch bietet praktisches OXID Know-how von A bis Z für Entwickler. Lernen Sie das System näher kennen und erfahren Sie, wie Sie das Bestmögliche aus Ihrem Onlineshop herausholen können.

Als Nachfolger des 2011 erschienenen Anwenderbuchs „Online-Shops mit OXID eShop“, das sich eher der Bedienung und der richtigen Konfiguration widmet, konzentrieren sich die Autoren Roman Zenner und Joscha Krug im OXID-Kochbuch auf technische Details und stellen das System näher vor. Das Handbuch hält geballtes Expertenwissen zu Themen wie Templating, Modulentwicklung oder Anbindungen von externen Systemen bereit – praktische Tipps für interessierte Entwickler. Einzelne Rezepte behandeln dabei jeweils eine konkrete Fragestellung, bieten eine Hilfestellung und eine anschließende Diskussion. Als Grundlage dient die OXID eShop Version 4.7.

In wenigen Tagen ist das OXID eShop Kochbuch im Handel erhältlich. Wer nicht länger warten möchte, kann es auch schon jetzt bei uns im Shop vorbestellen.

share

OXMOD | OXID Modulkatalog geht online – machen Sie mit!

oxmod_module

„Gibt es da denn was?“, „War da nicht…?“, „Hast du mal gehört, ob…?“ – Auf Entwicklertreffen, bei Stammtischen oder im Agenturalltag: Bei Beginn einer Modulentwicklung stellt sich immer wieder die Frage, ob es nicht bereits ein Modul gibt, das die gewünschten Anforderungen erfüllt oder – falls es das nicht tut – eine solide Grundlage für eine Weiterentwicklung darstellt.

Genau diesen Aspekt greift oxmod.org auf. So bietet die Webseite eine einfache Übersicht über bereits existierende OXID-Module. Unnötige Zeit, Kosten und auch Nerven können auf diese Weise erspart bleiben: Müssen Sie für Ihr Vorhaben tatsächlich ein neues Modul schreiben – gibt es dieses unter Umständen bereits? Oder existiert ein Modul, das sich als Grundlage für Ihre Arbeit eignet?

Entwickler, Agenturen und Shopbetreiber können dabei selbst in Aktion treten: Denn der OXMOD | OXID Modulkatalog lebt von Menschen, die den Katalog stetig mit neuen Modulen, egal ob Open Source oder nicht, füllen. OXMOD bietet daher ebenfalls die Möglichkeit, ein eigenes Benutzerkonto zu erstellen, sich und das Unternehmen vorzustellen und die eigenen Module anzubieten. Dabei ist das mittelfristige Ziel, eine möglichst vollständige Sammlung von Modulen zu bieten. Mit dem Austausch als Grundgedanke des Open Source soll so durch den Modulkatalog die Publizierung von freien Modulen gestärkt werden.

Das Team der marmalade GmbH, welches die OXMOD-Seite betreut, freut sich über Feedback und viele interessierte Teilnehmer.

share

oxscript mehrzeilig – JavaScript in OXID lesbarer machen

Wer in OXID schnell mal eine Zeile JavaScript hinzufügen möchte, kann dies einfach mit dem Smarty-Tag oxscript machen.
Beispiel:
[{oxscript add="$(#div).click(function(){alert('jQuery');}"}]

Richtig hübsch ist das nicht. Und bei längeren Funktionen auch nicht mehr wirklich lesbar.
Man kann den gleichen Code jedoch einfach mehrzeilig machen:
[{oxscript add="
$(#div).click(function(){
  alert('jQuery');
}"}]

Schon viel angenehmer. Oder?
Selbstverständlich kann man zum veringern des Datenvolumens nach dem debuggen den Code auch wieder verkürzen.