Here is the blueprint for an overview/ category page e.g. for clothes:
title: kleidung
type: pages
files: false
sections:
pages:
label: Seiten
status: all
layout: cards
create: kleidung-page
info: "{{ page.productDescription }} | € {{ page.productPrice }} "
# image:
# ratio: 1/1
# cover: true
Here is the blueprint for product page e.g. for clothes.
title: Vorlage für Kleidung
type: pages
# num: zero
#template: kleidung-page
status:
draft: true
listed: true
sections:
productdata:
type: fields
fields:
# productTotal:
# label: Summe der Produkte
# type: text
productName:
label: Name
type: text
required: true
productID:
label: Product ID
type: text
required: true
productPrice:
label: Preis
type: number
min: 0
step: 0.01
after: €
required: true
productDescription:
label: Beschreibung
type: text
required: true
productImage:
label: Image
type: files
max: 1
required: true
customOptions:
label: Die Optionen
type: checkboxes
options:
- S
- M
- L
- XL
- XXL
praise:
label: Praises
type: structure
fields:
icon:
label: Image
type: files
max: 1
praisetext:
label: text
type: text
Out commented “num: zero” is because I forgot what it does. Have to look it up. Out commented “template: kleidung-page” doesn’t do anything, but I am not so sure, cause its late;) Out commented “productTotal” don’t know what its use would be.
This is the template for a product e.g. clothes (“kleidung”):
<!-- Dies ist das Template "kleidung-page" -->
<?php snippet('header') ?>
<main>
<h2><?= $page->productName() ?></h2>
<div class="single-product-wrapper">
<figure class="single-product-figure">
<?= $page->ProductImage()->toFile()?>
<div class="single-product-data product-id-box">
<dt class="product-id-label"><?= $page->blueprint()->field('productID')['label'] ?>: </dt>
<dd class="product-id"><?= $page->ProductID()?></dd>
</div>
</figure>
<article class="product-details-container">
<dl class="single-product-data-list">
<div class="poduct-description single-product-data">
<dd class="poduct-description-heading"><?= $page->ProductDescription()?></dd>
</div>
<div class="single-product-data">
<!-- <dt class="label-product-price"><?= $page->blueprint()->field('productPrice')['label'] ?>: </dt> -->
<dd class="product-price">€ <?= number_format ( $page->ProductPrice()->toFloat(), 2 , null, ',' ) ?></dd>
</div>
<div class="single-product-data">
<dt class="label-product-sizes"><?= $page->customLabel() ?> </dt>
</div>
<?php if ($page->customOptions()->isNotEmpty()):?>
<label for="sizes">Größe</label>
<div>
<select name="sizes" id="sizes" class="size-picker">
<?php foreach ($page->customOptions()->split() as $size): ?>
<option><?= $size ?></option>
<?php endforeach ?>
</select>
</div>
<?php endif ?>
<?= snippet('products/kleidung-add-to-cart', ['class' => 'add-to-cart-btn']) ?>
</dl>
<?= snippet('cart/checkout-summary') ?>
</article>
</div>
<section class="product-praise-section">
<?php foreach ($page->praise()->toStructure() as $praises): ?>
<dl class="praisebox">
<dt><?= $praises->icon()->toFile()?></dt>
<dd> <?= $praises->praisetext() ?></dd>
</dl>
<?php endforeach ?>
</section>
</main>
<?php snippet('footer') ?>
See the snippet there? This brings in a Snipcart buy button.
Here is the snippet with the snipcart buy button with those custom options fields:
<button class="snipcart-add-item <?= $class ?>"
data-item-id="<?= $page->ProductID() ?>"
data-item-price="<?= $page->ProductPrice() ?>"
data-item-url="<?= Url::path($page->url(), true, false); ?>"
data-item-description="<?= $page->ProductDescription() ?>"
data-item-image="<?= Url::path($page->ProductImage()->toFile()->url(), true, false); ?>"
data-item-name="<?= $page->ProductName() ?>"
data-item-custom1-name="Gewählte Größe:"
data-item-custom1-options="<?= implode(' | ', $page->customOptions()->split(',')) ?>"
>
In den Warenkorb
</button>
This is the template for an overview/ category page e.g. “kleidung.php”:
<?php snippet('header') ?>
<main>
<section class="shop-product-grid">
<?php foreach ($page->children()->listed() as $product): ?>
<div class="product-box shop-product-box">
<h2 class="product-title shop-product-title"><?= $product->title() ?></h2>
<a class="product-link" href="<?= $product->url() ?>">
<figure class="product-figure shop-product-figure">
<?= $product->image() ?>
</figure>
</a>
<figcaption class="product-details shop-product-details">
<p class="product-description"><?= $product->productDescription() ?></p>
<p class="product-description product-price"> € <?= number_format ($product->productPrice()->toFloat(), 2 , null, ',' ) ?></p>
</figcaption>
</div>
<?php endforeach ?>
</section>
</main>
<?php snippet('footer') ?>
Oh, and this would be the home.php. The part that comes in from home.yml is not finished yet, I maybe will go for blocks and other stuff. I probably could work with a snippet here, but I don’t see the benefit for this use case, because I would only use that stuff that 1 time.
I put those comments into the html to reduce confusion when I stare at my code.
<!-- Dies ist das Template für Homepage-->
<?php snippet('header') ?>
<main>
<section>
<div>
<?=$page->homeText()->kt()?>
</div>
</section>
<section class="shop-product-grid">
<?php foreach ($site->find('kleidung', 'brillen', 'kram') as $subpage): ?>
<div class="product-box shop-product-box">
<a class="product-link" href="<?= $subpage->url() ?>">
<h2 class="product-title shop-product-title"><?= $subpage->title() ?></h2>
</a>
<figure class="single-product-figuree">
<?= $subpage->image()?>
</figure>
<a class="product-link" href="<?= $subpage->url() ?>">Zur Abteilung»</a>
</div>
<?php endforeach ?>
</section>
</main>
<?php snippet('footer') ?>
O course I use the shop sample in the docs for most of it, trying not to screw it up too bad. Also there is an awesome shop demo at Try | Kirby CMS which is for download on GitHub. That thing is brillant and very beautiful designed but was too advanced for me, so I could just silently admire it. 
