Use the CMS to set the category banner

[dijkr]

The CMS should be used to set the banner of the productcategory. The challange is that every page is parsed dynamically. There aren't static pages for every category.

This line of code is used to load the banner in the productenview: <img src="/images/banners/{{ categoryData.banner }}">

{{ categoryData.banner }}is 1) a wildcard and 2) data from the database --> Controller: $categoryData = $product->Category;

[dijkr]

Antlers + DB-data:

<div class="productbanner">
        <div class="productbanner-item">
            <img src="/images/banners/{{ category.banner }}">
            <div class="productbanner-text">
                <h1> {{ category.name }} </h1>
            </div>
        </div>
    </div>

Antlers + CMS:

<div class="productbanner">
        <div class="productbanner-item">
            <img src="/images/banners/{{ banner }}">
            <div class="productbanner-text">
                <h1> {{ name }} </h1>
            </div>
        </div>
    </div>

The link with the CMS isn't there yet. Its configured within the CMS already, but might need more config to make it work within the view.

[dijkr]

This will load the entries, but all of the entries, not just for the specific category:

{{ collection:promotions }}
        <div class="productbanner">
            <div class="productbanner-item">
                <img src="{{ banner }}">
                <div class="productbanner-text">
                    <h1> {{ title }} </h1>
                </div>
            </div>
        </div>
{{ /collection:promotions }}

[dijkr]

Every page has its own slug set at the page. Also every actual URL is created by using a slug. /categorie/{category:slug} ('/product/{product:slug} So basically, it would be great if the CMS-slug could match the URL.

[dijkr]

segment_2 means, it checks the second part of the URL, and if that matches the page slug, it will return its values. {{ collection:promotions :slug:is="segment_2" }}

Documentation about this: https://statamic.dev/variables/segment_x

Solution:

{{ collection:promotions :slug:is="segment_2" }}
        <div class="productbanner">
            <div class="productbanner-item">
                <img src="{{ banner }}">
                <div class="productbanner-text">
                    <h1> {{ category.name }} </h1>
                </div>
            </div>
        </div>
{{ /collection:promotions :slug:is="segment_2"  }}

[dijkr]

Actually this partly solves the problem. It solves the problem for the route /categorie/{category:slug} It doesn't work for /product/{product:slug} yet, since there it not any page with a slug that matches the product.

[dijkr]

Since its now known how to set the banner with the CMS, this issue can be closed. I'll open a new issue to handle {{ partial:banner_cat }} for different URLs. https://github.com/dijkr/Copia/issues/23