Warum ist der Warenkorb-Counter in Flow kein Badge?

snorri · December 1, 2018, 12:14pm

Moin!

in Flow 3 steht der Zähler für die Artikel im Warenkorb etwas verloren neben dem Warenkorb-Icon. Merklisten- und Wunschlisten-Artikel erzeugen dagegen ein rund gestytles <span class="badge>" am Servicemenu-Button.

Gibt’s dafür einen bestimmten Grund, der mir gerade entgeht?

github.com

OXID-eSales/flow_theme/blob/master/tpl/widget/header/minibasket.tpl

<div class="btn-group minibasket-menu">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" data-href="[{oxgetseourl ident=$oViewConf->getSelfLink()|cat:"cl=basket"}]">
        [{block name="dd_layout_page_header_icon_menu_minibasket_button"}]
            <i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
            [{if $oxcmp_basket->getItemsCount() > 0}][{ $oxcmp_basket->getItemsCount() }][{/if}]
        [{/block}]
    </button>
    <ul class="dropdown-menu dropdown-menu-right pull-right" role="menu">
        [{block name="dd_layout_page_header_icon_menu_minibasket_list"}]
            <li>
                <div class="row">
                    <div class="col-xs-12 pull-right">
                        <div class="minibasket-menu-box">
                            [{oxid_include_dynamic file="widget/minibasket/minibasket.tpl"}]
                        </div>
                    </div>
                </div>
            </li>
        [{/block}]
    </ul>

This file has been truncated. show original

vanilla_thunder · December 1, 2018, 12:30pm

guck doch mal, wie hässlich es als Badge aussehen würde

snorri · December 1, 2018, 12:35pm

Für sowas gibt’s doch CSS?

vanilla_thunder · December 1, 2018, 12:48pm

schmeißt Du zufällig zuhause Reis auf den Teppich, nur um ihn staubsaugen zu können?

snorri · December 1, 2018, 1:32pm

Worauf ich rauswill: Der Zähler steht ohne umgebendes HTML-Element im Code. Er ist damit weitgehend “unstylbar”, er wird immer als blanke Zahl neben dem Icon stehen. Wäre er ein Badge, könnte man ihn stylen. Der Servicemenu-Button hat so einen Badge.

Konkretes Beispiel.

Momentan sieht es so aus wie oben im Bild.
Ich kann den Warenkorb-Button stylen, dann habe ich z.B. die mittlere Zeile. Aber ohne HTML-Element für den Zähler komme ich an den mit CSS nicht ran.
Wäre der Zähler ein Badge, könnte ich problemlos das bauen, was die Kunden erwarten, nämlich die untere Zeile.

marco.steinhaeuser · December 1, 2018, 10:53pm

Hallo Martin,

ich glaube, ich sehe Deinen Schmerz ^^
Du musst das wahrscheinlich eh für Deinen Kunden umsetzen, oder? Siehst Du eine Möglichkeit, die von Dir im Projekt gemachten Änderungen in einen Pull Request ufern zu lassen und hier zu committen?

Möglicherweise kann das gleich als Anregung für das neue Wave-Theme verwendet werden

snorri · December 1, 2018, 11:02pm

Hi Marco,

kann ich gerne machen - wollte nur erst klären, ob das Absicht war

marco.steinhaeuser · December 1, 2018, 11:07pm

Ganz gewiss nicht ^^

LastSamuraj · May 13, 2019, 9:53pm

Hallo Leute, genau das gleiche hätte ich in unserem Shop auch. Eine Zahl neben dem Warenkorb Icon, welche die Anzahl der Produkte im Warenkorb darstellt.

Könnte mir jemand mit dem Code dazu weiter helfen oder gab es evtl. schon eine Lösung die hier im Forum zu dem Thema durchgekaut wurde?

Vielen Dank im Voraus

rubbercut · May 14, 2019, 7:44am

Eigentlich muss man doch nur im minibasket etwas wie folgt hinzufügen: Unterhalb von:
<div class="btn-group minibasket-menu">

[{if $oxcmp_basket->getItemsCount()}]<span class="badge" style="position: absolute; z-index:1; left:20px;">[{$oxcmp_basket->getItemsCount()}]</span>[{/if}]

snorri · May 14, 2019, 11:57am

Meines Wissens sollte das in der neuesten Version von Flow behoben sein.

rubbercut · May 14, 2019, 12:08pm

Dann weißt Du mehr als ich. Wo gibt’s die denn?

snorri · May 14, 2019, 12:23pm

Hm, mein Pull Request dazu ist wohl noch nicht durch …

rubbercut · May 14, 2019, 12:51pm

Ja, das sieht doch ähnlich aus. Mir war es nicht bekannt, sonst hätte ich das schon in den Flow-Fix übernommen.

marco.steinhaeuser · May 14, 2019, 6:05pm

Doch Stefan, ist vor zwei Monaten durch und im Master

LastSamuraj · May 15, 2019, 9:43pm

Hallo rubbercut, das war sowas von out of the box was du mir geschickt hast. VIELEN DANK!!!

Habe es in unserem Template in die minibasket.tpl unter widget/header gleich hinter

<i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>

eingesetzt.`

rubbercut · May 15, 2019, 10:47pm

Gerne. Jetzt weiß ich auch wieder, warum ich von 4.10.x ausgegangen bin. Da fehlt das nämlich.