Mobile Theme - Produkte in Kategorie zweispaltig

#1

Hallo,

Ich habe mal eine Frage zum Mobile Theme. Ich würde hier gerne die Produktliste zweispaltig in den Kategorien anzeigen. Also immer zwei Produkte nebeneinander in der Kategorieansicht. Im Moment wird immer nur ein Artikel pro Zeile angezeigt. So sieht das bei uns im Moment aus: http://goo.gl/T5AFao

Im normalen Desktop Theme kann man das ja über size="" steuern.

Hat jemand eine Idee wie man das auch im mobile Theme anpassen kann?

0 Likes

#2

Du müsstest das Template anpassen und ein Zwei-Spalten-Grid in die Kategorienansicht einbauen.
Mobile Theme basiert auf Bootstrap, hier findest du alles, was Bootstrap kann: http://getbootstrap.com/css/

Aber bedenke, dass das mobile theme für smartphones ist und du die Ansicht auf einem 5 Zoll Bildschirm und nicht auf einem 27 Zoll Desktop testen musst.

0 Likes

#3

Danke für den Tipp. Ich schau mir das bootstrap mal an.

0 Likes

#4

Hallo vanilla_thunder,

ich muss gestehen, dass ich absoluter Newbie bin und nur rudimentäre Kenntnisse bezüglich css, php, etc. habe.

Ich würde gerne zwei Produkte pro Zeile, d.h. zweispaltig, in den Kategorien darstellen. Könntest du deine Antwort daher etwas genauer ausführen? Wäre super! :blush:

Danke und liebe Grüße!

0 Likes

#5

genaue Antworten auf ungenaue Fragen sind bisschen schwer.
In dem aktuellen Theme Flow werden Produkte in den Kategorien bereits zweispaltig dargestellt.
Also hast du entweder nicht das aktuelle Theme oder ein Custom Theme von einem Drittanbieter.

Wenn das Theme ebenfalls Bootstrap Framework verwendet, dann ist die Bootstrap Doku hier zu finden: https://getbootstrap.com/docs/3.4/css/#grid bzw http://holdirbootstrap.de/css/#grid (auf Deutsch)
Ansosnten gibts im Internet etwa eine Milliarde Tutorials und online Kurse zu Bootstrap 3.

Ggf. gitbs in dem Theme aber auch eine Einstellung für die Darstellung der Produkte in der Kategorieansicht. Hinweise dazu könnte es in der Doku des Themes oder beim Anbieter des Themes geben.

Wenn du noch das ganz alte Azure Theme hast, dann fällt mir spontan nichts ein. Man müsste wohl irgendein fertiges/erprobtes CSS Grid System ins CSS aufnehmen und den HTML Code in Templates dahingehend anpassen.

0 Likes

#6

Hi, danke für die schnelle Antwort.

Erstmal hier unser Shop: https://decorami.de

Unser Shop hat ein Custom Theme, welches jedoch das Flow Theme als Eltern Theme hat. Einstellungsmöglichkeiten gibt es dazu im Backend keine. Helfen diese Informationen weiter? :slight_smile:

0 Likes

#7

wenn es ähnlich wie in Flow ist, dann muss es in der Datei tpl/widget/product/list.tpl irgendwo weiter unten so eine ähnliche Zeile geben:


Dort steht dann sowas wie class="productData col-xs-12 col-sm-6 productBox" und da musst du col-md-3 entfernen

0 Likes

#8

In der Tat steht die Zeile exakt so im Code

`<div class="productData col-xs-12[{if $type != 'line'}] col-sm-6 col-md-[{$iColIdent}][{/if}] productBox">`

Ich vermute mit col-md-3 meinst du col-md-[{$iColIdent}, richtig? - diesen Teil habe ich entfernt, habe die Datei gespeichert, auf dem Server überschrieben, Cache gelöscht & Views aktualisiert.
Leider konnte ich damit keine Wirkung erzielen. Es wird immer noch nur ein Produkt angezeigt.

0 Likes

#9

Ah okay, doch es gab eine Veränderung. Jedoch nur in der Desktopansicht und nicht in der mobilen Version.

Am Desktop werden jetzt nur 2 Spalten angezeigt - dies sollte eigentlich nicht geändert werden.
Mobile wird weiterhin 1 Produkt pro Zeile angezeigt, d.h. einspaltig - dies sollte ja geändert werden.

Hoffe du / ihr habt noch den entscheidenden Hinweis für mich! :sweat_smile:

0 Likes

#10

Hier der gesamte Inhalt der list.tpl

[{if !$type}]
    [{assign var="type" value="infogrid"}]
[{/if}]

[{if !$iProductsPerLine}]
    [{assign var="iProductsPerLine" value=4}]
[{/if}]

[{if $type == 'infogrid'}]
    [{assign var="iProductsPerLine" value=2}]
[{elseif $type == 'grid'}]
    [{assign var="iProductsPerLine" value=4}]
[{elseif $type == 'line'}]
    [{assign var="iProductsPerLine" value=1}]
[{/if}]

<div class="boxwrapper" id="boxwrapper_[{$listId}]">
    [{if $head}]
        [{if $header == "light"}]
            <div class="page-header">
                <span class="h3">[{$subhead}]</span>


            </div>
        [{else}]
            <div class="page-header">
                <h2>
                    [{$head}]
                    [{if $rsslink}]
                        <a class="rss" id="[{$rssId}]" href="[{$rsslink.link}]" target="_blank">
                            <i class="fa fa-rss"></i>
                        </a>
                    [{/if}]
                </h2>


            </div>
        [{/if}]
    [{/if}]

    [{assign var="productsCount" value=$products|@count}]
    [{if $productsCount gt 0}]
        [{math equation="x / y" x=12 y=$iProductsPerLine assign="iColIdent"}]

        <div class="list-container" id="[{$listId}]">
            [{foreach from=$products item="_product" name="productlist"}]
                [{counter print=false assign="productlistCounter"}]
                [{assign var="testid" value=$listId|cat:"_"|cat:$smarty.foreach.productlist.iteration}]

                [{if $productlistCounter == 1}]
                    <div class="row [{$type}]View newItems">
                [{/if}]

                <div class="productData col-xs-12[{if $type != 'line'}] col-sm-6 col-md-[{$iColIdent}][{/if}] productBox">
                    [{oxid_include_widget cl="oxwArticleBox" _parent=$oView->getClassName() nocookie=1 _navurlparams=$oViewConf->getNavUrlParams() iLinkType=$_product->getLinkType() _object=$_product anid=$_product->getId() sWidgetType=product sListType=listitem_$type iIndex=$testid blDisableToCart=$blDisableToCart isVatIncluded=$oView->isVatIncluded() showMainLink=$showMainLink recommid=$recommid owishid=$owishid toBasketFunction=$toBasketFunction removeFunction=$removeFunction altproduct=$altproduct inlist=$_product->isInList() skipESIforUser=1 testid=$testid}]
                </div>

                [{if $productlistCounter%$iProductsPerLine == 0 || $productsCount == $productlistCounter}]
                    </div>
                [{/if}]

                [{if $productlistCounter%$iProductsPerLine == 0 && $productsCount > $productlistCounter}]
                    <div class="row [{$type}]View newItems">
                [{/if}]
            [{/foreach}]

            [{* Counter resetten *}]
            [{counter print=false assign="productlistCounter" start=0}]
        </div>
    [{/if}]
</div>
0 Likes

#11

genau das war ja auch gewünscht:

Lies mal die Erklärung zu dem Raster-Layout, dann erklärt sich alles wie von selbst und du kannst es so kombinieren, wie du es möchtest:
http://holdirbootstrap.de/css/#grid

1 Like

#12

Hab es hinbekommen! Vielen vielen lieben Dank!!

0 Likes