I hope it’s ok if I post this question here.
I’m trying to update the content for one of the ‘bett’ products using the kirby panel but the update only takes effect when I update the betten.txt file which looks like this:
Title: Betten
----
Accordiontiteleins: Product Information
----
Accordionbeschreibungeins: Quality Wood
----
Accordiontitelzwei: Technical Details
----
Accordionbeschreibungzwei: Measurements are 200x90
----
The disadvantage here is that any update to the betten.txt file will apply to all the other bed products which is not desirable since each bed has a different description i.e. Beschreibung.
Now, each bed has a folder with the name of the bed which contains the image of that particular bed and a bett.txt file.
The bett.txt. file looks like this:
Title: Grün Einzelbett
----
Name: Grün Einzelbett
----
Beschreibung: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
----
Accordiontiteleins: Product Information
----
Accordionbeschreibungeins: Quality Wood
----
Accordiontitelzwei: Technical Details
----
Accordionbeschreibungzwei: Measurements are 200x90
----
Accordiontiteldrei:
----
Accordionbeschreibungdrei:
----
Files:
----
Uuid: KWrJHg70LZC7WDEQ
The folder structure looks like this: content/bett/green_bed
This is the code for the template betten.php
<!-- ======= Products No. 2 ======= -->
<article class="beds">
<?php if ($p = page('bett')) : ?>
<?php foreach ($p->children()->limit(26) as $bett) : ?>
<div class="beds-box">
<!-- Add data attributes to store image, name, and beschreibung -->
<a href="#" class="popup-trigger" data-image="<?= $bett->image()->url() ?>" data-name="<?= $bett->title()->html() ?>" data-beschreibung="<?= $bett->beschreibung()->html() ?>">
<?php if ($image = $bett->image()) : ?>
<img src="<?= $image->url() ?>" class="clickable-image">
<?php endif ?>
</a>
<div class="beds-box-title">
<h3><?= $bett->title()->html() ?></h3>
</div>
</div>
<?php endforeach ?>
<?php endif ?>
</article>
<!-- The modal HTML Structure -->
<div id="myModal" class="popupSlider">
<span class="closeButton" id="closeSlider">×</span>
<div class="slider-Content">
<span class="arrow leftArrow" id="prevSlide">❮</span>
<span class="arrow rightArrow" id="nextSlide">❯</span>
<!-- ======= Single ======= -->
<div class="single-product">
<div class="the-product">
<img id="popup-image" src="" alt="Popup Image" class="slida">
</div>
<div class="product-description">
<ul class="breadcrumb">
<?php foreach ($site->breadcrumb() as $crumb) : ?>
<li<?php e($crumb->isActive(), ' aria-current="location"') ?>><a href="<?= $crumb->url() ?>"><?= $crumb->title()->html() ?></a></li>
<?php endforeach; ?>
</ul>
<h4 id="popup-name"></h4>
<p id="popup-beschreibung"></p>
<!-- ======= Bootstrap Accordion ======= -->
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed bold-accordion-header" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
<?php echo $page->accordiontiteleins(); ?>
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><?php echo $page->accordionbeschreibungeins(); ?></div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed bold-accordion-header" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
<?php echo $page->accordiontitelzwei(); ?>
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body"><?php echo $page->accordionbeschreibungzwei(); ?></div>
</div>
</div>
And this is the jQuery for the slideshow:
// jQuery Popup Slideshow Code for Produkt Übersicht Pages
$(document).ready(function () {
// Initialize variables
var images = $(".clickable-image");
var currentIndex = 0;
// Function to open the modal and display the image, name, and beschreibung
function openModal(index, name, beschreibung) {
if (index >= 0 && index < images.length) {
var imgUrl = $(images[index]).attr("src");
$("#popup-image").attr("src", imgUrl);
$("#popup-name").text(name);
$("#popup-beschreibung").text(beschreibung);
$("#myModal").css("display", "block");
currentIndex = index;
}
}
// Function to navigate to the next item
function nextItem() {
var nextIndex = currentIndex + 1;
var nextTrigger = $(".popup-trigger").eq(nextIndex);
if (nextTrigger.length > 0) {
var name = nextTrigger.attr("data-name");
var beschreibung = nextTrigger.attr("data-beschreibung");
openModal(nextIndex, name, beschreibung);
}
}
// Function to navigate to the previous item
function prevItem() {
var prevIndex = currentIndex - 1;
var prevTrigger = $(".popup-trigger").eq(prevIndex);
if (prevTrigger.length > 0) {
var name = prevTrigger.attr("data-name");
var beschreibung = prevTrigger.attr("data-beschreibung");
openModal(prevIndex, name, beschreibung);
}
}
// Click event handlers to open the modal with name and beschreibung
$(".popup-trigger").click(function (e) {
e.preventDefault();
var index = $(".popup-trigger").index(this);
var name = $(this).attr("data-name");
var beschreibung = $(this).attr("data-beschreibung");
openModal(index, name, beschreibung);
});
// Click event handlers for next and previous buttons
$("#nextSlide").click(nextItem);
$("#prevSlide").click(prevItem);
// Close the modal when the close button is clicked
$(".closeButton").click(function () {
$("#myModal").css("display", "none");
});
// Close the modal when clicking outside the modal content
$(window).click(function (event) {
if (event.target == $("#myModal")[0]) {
$("#myModal").css("display", "none");
}
});
});
I’ve attached a screenshot from the control panel for a particular product. Any change I make here won’t take effect.
