“Many roads lead to Rome. Which path is the shortest?”
I am currently asking myself this question in order to realize dynamic price lists from a static website in Kirby. The problem here is the different text formatting and font sizes within a cell, different text alignments and merged cells. Is it best to use a structure field, a table, the layout editor?
I would be happy to receive inspiration.
I had created the table with this code from the static website (contains CSS classes from the Bootstrap Framework):
<?php
$preise1_array = [
[
"leistung" => 'Damen – Haarschnitt & Styling',
"beschreibung" => 'Beratung · Verwöhnhaarwäsche · Typgerechter Haarschnitt · Frisurenstyling',
"preis1" => '48',
"preis2" => '60'
],[
"leistung" => 'Damen – Styling',
"beschreibung" => 'Beratung · Verwöhnhaarwäsche · Frisurenstyling',
"preis1" => '23',
"preis2" => '37'
],[
"leistung" => 'Herren – Basic',
"beschreibung" => 'Haarwäsche · Typgerechter Haarschnitt · Finish',
"preis1" => '31',
"preis2" => ''
],[
"leistung" => 'Herren – Relax',
"beschreibung" => 'wie BASIC + vitalisierende Kopfmassage',
"preis1" => '41',
"preis2" => ''
]
];
foreach ($preise1_array as $preise1_item) {
echo '<div class="col-12 text-center text-md-start mb-4 last-paragraph-no-margin">
<div class="row mx-0 border-all border-color-white">
<div class="col-12 p-4 border-bottom border-color-white">
<span class="text-extra-large text-uppercase alt-font d-block">'.$preise1_item['leistung'].'</span>
<p class=" text-large text-extra-light-gray">'.$preise1_item['beschreibung'].'</p>
</div>'.(!empty($preise1_item['preis2']) ? '<div class="col-6 p-4 border-right d-flex align-items-end">
<p class="text-center text-md-end w-100">
<span class=" text-large text-extra-light-gray">normaler Aufwand</span>
<span class="text-extra-large-2 font-weight-600 d-block d-sm-inline-block pt-2 pt-sm-0 ps-0 ps-sm-3">'.$preise1_item['preis1'].' EUR</span>
</p>
</div>
<div class="col-6 p-4 d-flex align-items-end">
<p class="text-center text-md-end w-100">
<span class=" text-large text-extra-light-gray">hoher Aufwand</span>
<span class="text-extra-large-2 font-weight-600 d-block d-sm-inline-block pt-2 pt-sm-0 ps-0 ps-sm-3">'.$preise1_item['preis2'].' EUR</span>
</p>
</div>' : '<div class="col-12 p-4 d-flex align-items-end">
<p class="text-center text-md-end w-100">
<span class="text-extra-large-2 font-weight-600 d-block d-sm-inline-block pt-2 pt-sm-0 ps-0 ps-sm-3">'.$preise1_item['preis1'].' EUR</span>
</p>
</div>' );
echo '</div>
</div>';}
?>
