WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 02.12.2017 18:17:52

bodo
Mitglied

Bakery Responsive

Hallo liebe Freunde von WBCE und WB. Ich habe ein Problem bei Bakery mit der mobilen Ansicht. Hat jemand schon sein Bakery auf responsive umgestellt? Ich habe alles Mögliche schon probiert. Bekomme auch die Produkte in der mobilen Ansicht untereinander, aber dann reisst es mir den Warenkorb auseinander. Bin eher Nutzer und damit auch etwas überfordert. Ich bin über jede Anregung dankbar. Muss aber schon etwas fertiges sein. Das was ich im Forum und Netz gefunden habe, habe ich schon getestet. Irgendwann wird es dann zu kompliziert, oder funktioniert nut zeilweise.

Vielen Dank vorab.
Allen einen gesegneten 1.Advent
Mit besten Grüßen
Bodo

Beitrag geändert von bodo (05.12.2017 08:51:38)

Offline

#2 03.12.2017 08:24:52

florian
Administrator

Re: Bakery Responsive

Grundsätzlich machbar ist so etwas, aber nicht ganz unaufwändig.*
Etwas generisches Fertiges bereitszustellen ist aber schwierig, weil das schon auf das verwendete Template abgestimmt sein sollte.
Was genau meinst Du mit "es reisst den Warenkorb auseinander"?
* Ein Beispiel dafür ist holzart-leipzig.de (produktive Seite, d.h. wenn Du dort etwas bestellst, musst Du es auch kaufen/bezahlen!). Der Warenkorb sieht auf kleinen smartphonesdisplays im Hochformat normal aus, ragt allerdings über den sichtbaren Bereich herüber, hier müssten die Benutzer also so klug sein, ihr Telefon zu drehen.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 03.12.2017 11:09:06

bodo
Mitglied

Re: Bakery Responsive

Hallo Florian, danke für die schnelle Antwort. Das Beispiel finde ich sehr gut gelungen. Das würde mir schon reichen. Mit dem Warenkorb auseinanderreissen meine ich, dass wenn ich de Produkte untereinander habe, der Warenkorb sich auch untereinander aufbauen will und dabei werden sie Tabellenspalten zwar aufgebaut, aber die Kopfzeile bleibt logischer Weise auch als eine Zelle stehen und es besteht zu den einzelnen Positionen im Warenkorb kein Bezug mehr. Deshalb ist die Variante vom Beispiel für mich sehr interessant. Gibt es da ein Template oder muss das speziell angepasst werden?

LG
Bodo

Offline

#4 04.12.2017 20:45:36

florian
Administrator

Re: Bakery Responsive

Kannst Du mal einen Screenshot mit den Darstellungsproblemen oder einen Link posten?
Ich kann nicht versprechen, mich darum kurzfristig zu kümmern (Grund siehe Signatur), aber sobald ich's einrichten kann würde ich mal draufschauen.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#5 05.12.2017 08:54:25

bodo
Mitglied

Re: Bakery Responsive

Hallo Florian, vielen Dank für Deine Hilfe vorab. Habe nun alles wieder in den Ursprung zurück gebracht. Muss es dann nochmal in diesen Modus bringen. Dauert auch etwas, so dass Du Dein anderes Projekt  wink erstmal in Ruhe zu Ende bringen kannst.

LG
Bodo

Offline

#6 06.12.2017 20:02:17

dedra
Mitglied

Re: Bakery Responsive

Vermutlich ist das größte Problem bei Bakery das alles über Tabellen formatiert wird (so sehe ich das) das lässt sich mit responsive nicht so einfach vereinbaren.
Dieses "Problem" aufzulösen dürfte ein größeres Projekt sein - ein separates "shop-template" hatte ich mir mal überlegt um den Schwierigkeiten mit den unterschiedlichen Templates aus dem Weg zu gehen - bin aber da auch nicht wirlich weiter gekommen als die "Denkphase"... roll
An und für sich kann man mit Bakery schon vieles abdecken - eine Profilösung sieht halt anders aus, muss aber nicht unbedingt sein.

SG dedra

Offline

#7 06.12.2017 20:21:17

bernd
Developer

Re: Bakery Responsive

Ich habe neulich Bakery für einen Kunden angepaßt, denke das mit dem "responsive" ganz gut hin bekommen zu haben. Wie dedra schon schrieb, man muß sich von der Tabellen-basierten Formatierung lösen, dann geht schon einiges.
Dummerweise habe ich aber alle sonstigen Sonderwünsche das Kunden (die Bakery so nicht hergab) auch gleich mit in den verschiedensten Dateien festverdrahtet. So kann ich das nicht wirklich weitergeben.
Mal sehen ob ich zwischen den Feiertagen evtl. die Zeit finde nur die Formatierungen auf eine jungfräuliche Bakery-Installation quasi zurück zu portieren.


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

Liked by:

thanks, florian

#8 10.04.2019 15:42:40

ice
Mitglied

Re: Bakery Responsive

bernd schrieb:

Mal sehen ob ich zwischen den Feiertagen evtl. die Zeit finde nur die Formatierungen auf eine jungfräuliche Bakery-Installation quasi zurück zu portieren.

Hast Du da schon was gemacht? (Lieb guck  wink )

Offline

#9 10.04.2019 15:47:14

bernd
Developer

Re: Bakery Responsive

(Ganz zerknirscht zurückguck). Ne leider nicht, mich haben da paar Dinge quasi "rechts überholt" die ich die letzten Monate erstmal mühsam auseinander sortieren musste ...


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Offline

Liked by:

ice

#10 10.04.2019 15:53:17

florian
Administrator

Re: Bakery Responsive

*umdieeckeschiel*
@ice: worauf kommt es Dir da im einzelnen an? Produktübersichts- und -detailseiten und/oder Warenkorb und Checkout?

Zumindest erstere responsiv hinzubekommen, ist gar nicht so schwer - allerdings richtet sich der Aufwand stark nach dem Template. Wenn selbiges auf einem CSS-Grid basiert, kannst Du dessen Raster nämlich auch für die Produktdarstellung nutzen.
Das hier basiert auf Fitrgrid, zusätzlich kommt noch ein equalheight-Javascript-Schnipsel zum Einsatz, um die Höhe der Kästen anzugleichen.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#11 10.04.2019 16:04:26

ice
Mitglied

Re: Bakery Responsive

florian schrieb:

zusätzlich kommt noch ein equalheight-Javascript-Schnipsel zum Einsatz, um die Höhe der Kästen anzugleichen.

Eigentlich ist es genau das, manche Artikel hängen auf unterschiedlichen Höhen, was unschön aussieht, wenn man 3 Artikel nebeneinander anzeigen lässt.

Das Responsive Problem habe ich bei einigen Artikelseiten so gelöst, dass einfach nur 1 Artikel pro Zeile angezeigt wird, das löst auch das gleiche höhe Problem ... Ist aber jetzt nicht soooo schön.

Ich habe aber auch Artikelseiten, wo ich gleichförmige Teile haben, also Zeitschriften, da sehen auch 3 Artikel nebeneinander gut aus. Beim zusammenstauchen der Seite bzw. mobil, hängt die Tabelle aber dann aus dem layout heraus und die Artikel werden nicht untereinander angezeigt.

Mein Template benutzt schon selbst ein Grid...

Also, der Warenkorb und Checkout usw. hängt beim zusammenstauchen auch aus dem template heraus ...

Offline

#12 10.04.2019 16:30:33

ice
Mitglied

Re: Bakery Responsive

Offtopic: Aber Interessant, dass das "weiterlesen" bei euch in topics leider auch nicht in einer Flucht mit dem Bild und dem restlichen Text ist:
https://www.bogensport-loercher.de/pages/aktuelles.php

Beitrag geändert von ice (10.04.2019 16:31:01)

Offline

#13 10.04.2019 16:39:50

florian
Administrator

Re: Bakery Responsive

Offtopic: Aber Interessant, dass das weiterlesen bei euch in topics leider auch nicht in einer Flucht mit dem Bild und dem restlichen Text ist:

gefixt

Zu Bakery:
Für die Produktrasterdarstellung sind Tabellen nicht mehr zeitgemäß und eben auch nicht responsiv, da musst Du stattdessen divs verwenden und diese je nach verfügbarer Breite dann neben- oder untereinander anordnen. Je nach Grid kann man da sogar recht feingranuliert sagen, bei welcher Auflösung wie viele Elemente nebeneinander stehen sollen.
Bei den anderen Tabellen muss man sich die Mühe machen, die HTML-Templates in modules/bakery/templates zu bearbeiten und eventuell Spalten zusammenfassen o.ä. Aber da ist es dann schon schwierig, das so hinzubekommen, dass es auch noch auf Hochkant-smartphone-Displays ansehnlich ist.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

ice

#14 30.04.2020 15:13:38

her-ha
Mitglied

Re: Bakery Responsive

Hallo,
als Template verwende ich "fragstan" bin soweit damit sehr zufrieden. Jeodch habe ich ähnliche Probleme beim Mobiltelefon.

(1) Wenn ich das Handy bei der Darstellung der Artikel hochkant halte, werden die Produkte schön untereinander dargestellt. Dies ist schon einmal gut. Aber wenn ich das Mobiltelfon quer halte sehen mehrere Produkte auf einer Seite sehr unschön aus. Unterschiedliche Höhen (Siehe Bild 1)

(2) Bei Zahlungsarten habe ich dann folgendes Problem:
    Bei der Haltung des Mobiltelefon hochkant, komme ich bis an die erste Zeile der Zahlungsarten und nicht weiter, der Kunde kann dann keinen Bestellvorgang weiter machen.
Erst wenn ich dann das Telefon quer halte, bekomme ich die Auswahl aller Zahllungsarten und kann die Bestellung dann fortsetzen und beenden.     (Siehe Bild 2)

Wie kann man diese beiden Darstellungsfehler beheben?
Ich weiss zwar nicht ob mein Template auf einem CSS-Grid basiert und wie man dessen Raster auch für die Produktdarstellung nutzen kann, da ich kein Programmierer bin.
Oder ob man das erwähnte "fitgrd" von github nutzen kann und wenn JA, WIE?

Viele Grüße
Herbert (her-ha)

Beitrag geändert von her-ha (30.04.2020 15:15:26)

Offline

#15 30.04.2020 15:14:08

her-ha
Mitglied

Re: Bakery Responsive

Bild 2

Offline

#16 30.04.2020 15:49:51

florian
Administrator

Re: Bakery Responsive

Zu 1)
Abstand: Ergänze in der bakery/frontend.css

@media screen and (max-width:568px) {
.mod_bakery_main_thumb_f {
 margin-top:30px !important;
 }
}

Gleiche Höhe: Ist prinzipiell auch machbar. Du musst bei den Seiteneinstellungen bei Übersicht (Artikel-Schleife) um alle Elemente, die die gleiche Höhe haben sollen, einen div legen, z.B. so:

<div class="unit half mod_bakery_main_td_f">
<div class="product_overview_thumbnail">
[THUMB]
</div>
<div class="procuct_overview_details">
<a href="[LINK]"><span class="mod_bakery_main_title_f">[TITLE]</span></a>
<br />
[DESCRIPTION]
<br />
[TXT_PRICE]: [CURRENCY] [PRICE]
<br />
[TXT_STOCK]: [STOCK]
<br />
<form action="[SHOP_URL]" method="post">
[OPTION]
</div>
<input type="text" name="item[ITEM_ID]" class="mod_bakery_main_input_f" value="1" size="2" />
<input type="submit" name="add_to_cart" class="mod_bakery_bt_add_f" value="[ADD_TO_CART]" />
</form>
</div>

In der bakery/frontend.js fügst Du dann am Ende für die ergänzten Divs equalheight-Aufrufe ein, d.h. Du änderst die Zeilen

$(window).load(function() {
  equalheight('.mod_bakery_main_td_f');
});

$(window).resize(function(){
  equalheight('.mod_bakery_main_td_f');
});

zu

$(window).load(function() {
  equalheight('.procuct_overview_details');
  equalheight('.product_overview_thumbnail');
  equalheight('.mod_bakery_main_td_f');
});

$(window).resize(function(){
  equalheight('.procuct_overview_details');
  equalheight('.product_overview_thumbnail');
  equalheight('.mod_bakery_main_td_f');
});

Das kann allerdings zu etwas merkwürdigen Ergebnissen führen, wenn es sehr große Größenunterschiede (z.B. durch mal sehr kurze, mal sehr lange Überschriften o.ä.) zwischen den angeglichenen Elementen gibt.

Zu 2) My Mistake. Da fehlt in der
modules/bakery/payment_methods/advance/gateway.php ein </div> nach Zeile 52, d.h. da muss zweimal </div> nacheinander stehen - so:

<div class="grid">
   <div class="unit whole">
      <h3 class="mod_bakery_pay_h_f"><?php echo $MOD_BAKERY[$payment_method]['TXT_TITLE']; ?></h3>
   </div>
</div>
<div class="grid hide-on-mobiles">
<div class="unit whole">
   <ol>
      <li><?php echo $MOD_BAKERY[$payment_method]['TXT_SUCCESS']; ?></li>
      <li><?php echo $MOD_BAKERY[$payment_method]['TXT_ACCOUNT']; ?></li>
      <li><?php echo $MOD_BAKERY[$payment_method]['TXT_SHIPMENT']; ?></li>
   </ol>
</div>
</div>
<div class="grid">
   <div class="unit whole">
      <input type="submit" name="payment_method[<?php echo $payment_method ?>]" class="mod_bakery_bt_pay_<?php echo $payment_method ?>_f" value="<?php echo $MOD_BAKERY[$payment_method]['TXT_PAY']; ?>" onclick="javascript: return checkTaC()" />
   </div>
</div>
<div class="grid">
   <div class="unit whole">
      <hr class="mod_bakery_hr_f" />
   </div>
</div>

Code allein macht nicht glücklich. Jetzt spenden!

Offline

#17 30.04.2020 20:21:50

her-ha
Mitglied

Re: Bakery Responsive

Vielen Dank hat geklappt!

Offline

Fußzeile des Forums

up