Öffnungszeiten über Zusatzfelder abbilden

Hallo zusammen,

ich möchte bei den Kunden Öffnungszeiten hinterlegen. Dies würde ich gerne über die Zusatzfelder machen. Klar, könnte ich dort einfach ein Textfeld erstellen wo man einen Text wie z.B. „Montag - Freitag: 8:00 - 16:00 Uhr“ oder ähnliches einträgt.

Meine Idee ist aber ein Zusatzfeld gleich einem Repeater zu erstellen. Dieser darf maximal sieben Zeilen mit Feldern zu jedem Wochentag zur Verfügung stellen. Über diese Felder sollen die Uhrzeiten mittels eines Dropdowns auswählbar sein.

Im Prinzip gibt es die Felder (bis auf den Repeater) welche ich dafür benötige ja bereits in SW6, nur aus diesen Feldern möchte ich ein eigenes Konstrukt erstellen.

Ich hoffe, es ist soweit verständlich was ich vorhabe. Wie kann ich das realisieren? Falls jemand einen anderen Vorschlag hat, wie ich dies umsetzten kann, nur zu, ich bin für jede andere Idee offen.

Hallo, in meinem Foundation Plugin habe ich eine vue.js Komponente „moorl-opening-hours“ CustomFields kann kann mit so einer Komponente bestücken… Habs selbst noch nicht mit den CustomFields ausprobiert, kannst es aber gerne mal testen:

Sieht so aus:

Twig Template für die Ausgabe im Storefront:

<div class="moorl-opening-hours">
    {% for dayItem in openingHours %}
        <div class="form-row">
            <div class="col-12 col-md-5">
                <div>{{ "moorl-foundation.days.#{dayItem.day}"|trans }}:</div>
            </div>
            <div class="col-12 col-md-7">
                {% if not dayItem.times %}
                    <span class="moorl-opening-hours-range closed">
                            {{ dayItem.info ? dayItem.info|trans : "moorl-foundation.days.closed"|trans }}
                        </span>
                {% else %}
                    {% for time in dayItem.times %}
                        {% if time.from %}
                            <span class="moorl-opening-hours-range">
                                    {{ time.from|slice(0, 5) }}-{{ time.until|slice(0, 5) }}
                                </span>
                        {% endif %}
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    {% endfor %}
</div>
1 Like