We launch a simple blog on Wagtail CMS (Django) - part 3, final

The third part about Wagtail CMS, I decided to highlight those moments that helped me again to love Django. Thanks to the large community that develops this CMS, anyone will find in it something for themselves.

In the final part the following points will be covered:

• Streamfield
• API + React
• Development for e-commerce

')
Part 1
Part 2

In February 2017, version 1.9.0 was released, in which a lot of new things appeared, and the long-awaited support of the Many-to-Many model.

When I first met, I really liked the page editing interface; many things were thought out in it. But when it took to get something more than the standard Hallo.js plug-in text editor can do, traditional bicycle construction began.
What could be the needs, you ask?

For example, add a table, add another style to the line, insert an html tag, insert a picture with style parameters, insert a quote, code, and more. All this with the standard Hallo.JS plugin cannot be done at all.

Streamfield

To solve issues with editing pages, it is better to use the StreamField model built into WagtailCMS.

StreamField provides free addition of various elements for a page that does not have a fixed structure — for example, blog pages or news pages — where text can be mixed with subtitles, images, quotes, video insertion, and more. It is also suitable for more specialized types of content, such as maps and charts (or, insert HTML on the page). In this model, different types of content are presented as a sequence of “blocks” that can be repeated and arranged in any order.

Now let's see how it looks in code:

from django.db import models from wagtail.wagtailcore.models import Page from wagtail.wagtailcore.fields import StreamField from wagtail.wagtailcore import blocks from wagtail.wagtailadmin.edit_handlers import FieldPanel, StreamFieldPanel # StreamFieldPanel from wagtail.wagtailimages.blocks import ImageChooserBlock #  StreamField   class BlogPage(Page): author = models.CharField(max_length=255) date = models.DateField("Post date") body = StreamField([ ('heading', blocks.CharBlock(classname="full title")), ('paragraph', blocks.RichTextBlock()), ('image', ImageChooserBlock()), ]) content_panels = Page.content_panels + [ FieldPanel('author'), FieldPanel('date'), StreamFieldPanel('body'), ] 

We added StreamField with three blocks to the page - heading, paragraph, image.

Now we do not need to use to add text to the page:

 body = RichTextField(blank=True) 

everything you need is already in the StreamField we created.

Migrate - python manage.py makemigrations and python manage.py migrate

! One important note , if you previously had a RichTextField on your page, then you should make small changes to the following instructions before applying migrations: http://docs.wagtail.io/en/v1.9/topics/streamfield.html#streamfield- migrating-richtext

Now go to admin.panel and use blocks to add elements to the page.



Now you need to make changes to the page templates for which the streamfield blocks will be applied.

To include this HTML in your page, use the tag:

 {% include_block page.body %} 

Example:

 <article> {% for block in page.body %} {% if block.block_type == 'heading' %} <h1>{{ block.value }}</h1> {% else %} <section class="block-{{ block.block_type }}"> {% include_block block %} </section> {% endif %} {% endfor %} </article> 

I showed a simple example with standard blocks, but you have a huge variety of different blocks available, here is a list of some:

• Charblock
• Textblock
• Emailblock
• URLBlock
• Dateblock
• RawHTMLBlock

I recommend reading the documentation before using StreamField in practice.

API + React

If you suddenly need an API for use with React or Vue, then this is not a problem, everything is already implemented in the Wagtail API.

To do this, add wagtail.api.v2 to INSTALLED_APPS:

 # settings.py INSTALLED_APPS = [ ... 'wagtail.api.v2', ... ] 

Configure endpoints:

 # api.py from wagtail.api.v2.endpoints import PagesAPIEndpoint from wagtail.api.v2.router import WagtailAPIRouter from wagtail.wagtailimages.api.v2.endpoints import ImagesAPIEndpoint from wagtail.wagtaildocs.api.v2.endpoints import DocumentsAPIEndpoint #  . "wagtailapi"   URL. api_router = WagtailAPIRouter('wagtailapi') #     endpoints,    api_router.register_endpoint('pages', PagesAPIEndpoint) api_router.register_endpoint('images', ImagesAPIEndpoint) api_router.register_endpoint('documents', DocumentsAPIEndpoint) 

Next, you need to configure the URL for the API:

 # urls.py from .api import api_router urlpatterns = [ ... url(r'^api/v2/', api_router.urls), ... # ,    API  ,  wagtail_urls url(r'', include(wagtail_urls)), ] 

After setting up, the pages will be available at / api / v2 / pages /, images at / api / v2 / images /, and documents when contacting / api / v2 / documents /

Optionally, you can also add rest_framework to INSTALLED_APPS. This will make the API available when viewed using a web browser.

Detailed Wagtail API documentation.

An excellent example of the implementation of Wagtail CMS + React can be viewed in this project - https://github.com/emilyhorsman/wagtail-react-blog . Thanks for the info. Zpa1972

Comments plugin
Sometimes it is necessary that the site had comments. The benefit of ready-made modules for Django is complete, and they are easily integrated into the Wagtail CMS. But if you decide to implement comments based on Wagtail, then use this project .

Development for e-commerce

And now we have reached the point that in the Django community causes pain and suffering for many developers. Development of full-featured e-commerce projects.

On one of the projects I needed to create a small online store with an assortment of about 10,000 products, a basket, delivery, order status and an informative admin panel.

First of all, I interviewed the community, re-read the forums on the topic, looked through the sources of many projects and decided that the Wagtail CMS would be sawing for a long time, selected Django-oscar.

It should be the end of my story, but once again studying the group with questions about Wagtail, I found a developer who was also eager to create a convenient solution for e-commerce based on Wagtail CMS.

This is how the project https://github.com/JamesRamm/longclaw appeared, which James Ramm is actively developing.

It is currently under development, but there is already a lot in it. I think that over time, the Longclaw functionality will be able to fray even Django-oscar.

If you have time and desire, I invite you to take part in the development of the project.