How do I convert a listings page into a landing page?

Update AppServiceProvider

Add the following namespaces:

use Aero\Catalog\Models\Category;
use Aero\Responses\ResponseBuilder;
use Aero\Store\Http\Responses\ListingsPage;
use Illuminate\Support\ServiceProvider;
use Closure;

Extend the listings page:

class AppServiceProvider extends ServiceProvider
{
   public function boot()
   {
     ListingsPage::extend(function (ResponseBuilder $builder, Closure $next){
        //Get the first slug which is a category
        $category = $builder->slugs->models()->whereInstanceOf(Category::class)->last();

        if ($category) {
            if (($landingPage = $category->additional('landing_page'))
                && ($builder->request->has('categories') || $category->additional('always_landing_page'))) {
                $builder->setView( $landingPage);
                $builder->setData('block_group', $category->additional('block_group'));
            }
        }

        return $next($builder);
    });
   }
}

 

Create your landing page

Create your landing page twig file for example:

your_theme_name>resources>views>example.twig

 

Add your additional attributes in the admin

  1. Log in to the admin and navigate to /admin/catalog/categories
  2. Select the category you wish to convert to a landing page
  3. Set your additional attributes against the category:
Name Value
landing_page example
always_landing_page true
block_group example
  1. Save

 

Edit your page

Update your example.twig file, you are now able to reference block_group to create custom blocks:

In this simple example, we load the listing page with a loop of blocks set by our block_group example.promos, followed by a loop of our listing-cards.

{% layout "main" %}

{% set variables = {
    categories: categories,
    filters: filters,
    listings: listings,
    search_term: search_term,
    sort_by_options: sort_by_options,
    summary: summary | default(null),
    summary_length: summary | striptags | length,
    summary_all: false,
    description: description,
    heading: heading,
    filters_open: false,
    similar_products: similar_products,
    sortBy: false,
} %}

{% component "listings" with variables %}
    <div data-listings-scroll="">
        {% if block_exists(block_group ~ '.promos') %}
            {% set promos = block_items(block_group ~ '.promos', null, {
                sizes: {
                    small: {
                        width: 168,
                        height: 160,
                    },
                    medium: {
                        width: 227,
                        height: 208,
                    },
                    large: {
                        width: 236,
                        height: 216,
                    },
                },
            }) %}
        {% endif %}
        <div class="aero-promos">
            {% for promo in promos %}
                <div class="aero-promo">
                    {% if block_exists(block_group ~ '.promos') %}
                        <div class="aero-promo__image">
                            {{ promo | raw }}
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        <template v-if="listings.data.length">
            <template v-for="listing in listings.data">
                {% snippet "listing-card" %}
            </template>
        </template>
    </div>
{% endcomponent %}

Articles in this section

Was this article helpful?
0 out of 0 found this helpful