Change where a Page is displayed in the URL - wagtail

Question

I have setup my website whereby the main parental/tree structure is Home > Shop > Category > Product" with > denoting parent of.
This works fine, however when accessing a Product(Page) the url is automatically (and correctly) configured at /shop/test-category/test-product by Wagtail.
I would like to change it so that the product is actually displayed as being at the root level (even though it isn't). So if a user accesses Test Product it would be at /test-product/.
Looking through the docs, the RoutablePageMixin seems like it might do the trick but I have no idea how to go about implementing it. Any ideas?

Answer 1

This solution will make the product available at both URLS:
/shop/test-category/test-product/
/test-product/
Approach:
You are correct that you will need to use RoutablePageMixin, be sure to install it in your installed_apps as per the instructions before importing.
The example below adds RoutablePageMixin to your HomePage, as this is the page that will be located at the root / URL. We do a regex check and match for a single slug before a trailing /.
Then we see if we can find a ProductPage with that slug, and serve (or redirect) to that page. Finally, if there is no match, we call the home_page's serve method with the current request to handle anything else. This may be an incorrect URL or a correct sub-page URL.
Caveats:
If you have a sub-page at the same slug as a product page, the sub-page will never load, there are no smarts in this code to work around that. You could put some logic in the validation of product names and sub-page names if this becomes an issue in the future.
This does not consider SEO issues, search engines will treat these as different pages and hence you may want to think about declaring your canonical URL in your meta tags.
This does not redirect back from /shop/test-category/test-product/ to /test-product/ - that can be done by overriding the serve method on your ProductPage and redirecting to something like home_page.url + '/' + self.slug.
Example Code:
# models.py - assuming all your models are in one file
from django.db import models
from django.shortcuts import redirect # only needed if redirecting
from wagtail.admin.edit_handlers import FieldPanel
from wagtail.contrib.wagtailroutablepage.models import RoutablePageMixin, route
from wagtail.core.models import Page
class ProductPage(Page):
price = models.DecimalField(max_digits=5, decimal_places=2)
content_panels = Page.content_panels + [
FieldPanel('price')
]
class HomePage(RoutablePageMixin, Page):
#route(r'^(?P<product_slug>[\w-]+)/$')
def default_view(self, request, product_slug=None):
"""Route will match any `my-product-slug/` after homepage route."""
product_page = Page.objects.exact_type(ProductPage).filter(slug=product_slug).first()
if product_page:
# option 1 - redirect to the product's normal URL (non-permanent redirect)
# return redirect(product_page.specific.url)
# option 2 - render the product page at this URL (no redirect)
return product_page.specific.serve(request)
else:
# process to normal handling of request so correct sub-pages work
return self.serve(request)