Customize Product URLs

The URLs used to reference products are often crucial from a SEO point of view and Frontastic allows you to modify them. Here, we'll show you how to do this and what you need to keep in mind while doing it.

Custom Product Router

A ProductRouter is used to generate URLs for each Product (variant), this will then be used in the frontend and also for identifying Products from the given route. You must include something which uniquely identifies the product in the URL, for example its SKU.

To overwrite the default ProductRouter you can use the default Symfony mechanism in the Dependency Injection Container. To do this, just add the below lines to a service.xml in one of your Project bundles (if there isn't a bundle yet, you can create one using bin/console frontastic:create:bundle MyDecorators, for example):

<service
    id="Frontastic\Catwalk\FrontendBundle\Routing\ObjectRouter\ProductRouter"
    class="Acme\MyDecoratorsBundle\Routing\ProductRouter">
    <argument type="service" id="router" />                             
    <argument type="service" id="frontastic.catwalk.product_api" />     
</service>

In this case, we pass the configured Product API to the service because it comes in handy. The Symfony router is very useful to generate URLs, so we also pass it to our ProductRouter.

The ProductRouter class defines two methods:

  • generateUrlFrom - to generate a URL for a Product
  • identifyFrom - to identify a Product from a URL

Let's look at an example implementation:

<?php

namespace Acme\MyDecoratorsBundle\Routing;

use Frontastic\Catwalk\ApiCoreBundle\Domain\Context;
use Frontastic\Common\ProductApiBundle\Domain\Product;
use Frontastic\Common\ProductApiBundle\Domain\ProductApi;
use Frontastic\Common\ProductApiBundle\Domain\ProductApi\Query\ProductQuery;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Router;

class ProductRouter
{
    private $router;

    private $productApi;

    public function __construct(Router $router, ProductApi $productApi)
    {
        $this->router = $router;
        $this->productApi = $productApi;
    }

    public function generateUrlFor(Product $product)
    {
        return $this->router->generate(
            'Frontastic.Frontend.Master.Product.view',
            [
                'url' => $product->variants[0]->attributes['custom_slug'] ??
                    $product->slug,
                'identifier' => $product->variants[0]->attributes['ean'] ??
                    $product->sku,
                ),
            ]
        );
    }

    public function identifyFrom(Request $request, Context $context): ?string
    {
        $result = $this->productApi->query(new ProductQuery([
            'locale' => $context->locale,
            'filter' => ['variants.attributes.ean: "' . $request->attributes->get('identifier') . '"'],
        ]));

        if ($result->count < 1) {
            return null;
        }

        return $result->items[0]->productId;
    }
}

The two methods should always be mindful of what the other one is doing. In the example above, we optionally read a custom slug from the Product attributes in the generateUrlFor method. This allows the attribute to be defined in the Product Information Management (PIM) System to overwrite a default slug. The slug isn't used to identify the Product and could be anything. It may also contain slashes.

The route Frontastic.Frontend.Master.Product.view is defined as /{url}/p/{identifier} where url (the slug) could be anything. The only requirement here is the /p/ before the identifier – this allows us to find the identifier in the URL. The identifier must not contain any slashes.

The above example is also looking for an optional ean attribute in the first Product variant which would then be used as its identifier. If we change the identifier we must also adapt the identifyFrom method to find Products again by the changed identifier.

The identifyFrom method then uses our Product API to search for Products with EAN which can be found in the identifier attribute in the current $request. This method should return the ID of the Product it found. This Product will then be loaded by Frontastic – this lookup here is cached by Frontastic for performance and because this information rarely changes.


‹ Back to Article List

Next Article ›

Custom Order IDs

Still need help? Contact Us Contact Us