[ADD] newsletter into front

main/models.py

@@ -18,7 +18,7 @@ from wagtail.admin.edit_handlers import (
     ObjectList,
     TabbedInterface,
 )
-from wagtail.contrib.routable_page.models import route
+from wagtail.contrib.routable_page.models import RoutablePageMixin, route
 from wagtail.core.blocks import CharBlock, PageChooserBlock, RichTextBlock
 from wagtail.core.fields import RichTextField, StreamField
 from wagtail.core.models import Page
@@ -48,7 +48,9 @@ class ARTICLE_TYPES(models.IntegerChoices):
     PRESS_RELEASE = 2, "Tisková zpráva"
 
 
-class MainHomePage(MenuMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, Page):
+class MainHomePage(
+    MenuMixin, RoutablePageMixin, ExtendedMetadataHomePageMixin, MetadataPageMixin, Page
+):
     # header
 
     contact_newcomers = models.URLField(

main/styleguide/source/_patterns/atoms/buttons/from-button-animated.mustache

+<button type="submit" class="btn btn__slide__wrap {{ classes }}">
+  <span class="btn text-lg bg-black px-1 text-white lg:text-base">
+    {{ btn-text }}
+  </span>
+  <span class="btn text-lg bg-white px-1 text-black lg:text-base">
+    {{ btn-text }}
+  </span>
+</button>

main/styleguide/source/_patterns/organisms/newsletter-section.mustache

@@ -8,9 +8,11 @@
           </span>
       <h5 class="newsletter-grid__main-text font-alt text-6xl xl:text-7xl uppercase">Odebírej náš newsletter</h5>
       <div class="newsletter-grid__input flex flex-col items-start">
+        <form method="post" action=".">
           {{> atoms-form-input(placeholder: "Tvůj email", classes: "mb-3 w-full") }}
           {{> atoms-form-checkbox(label: "Souhlasím se zpracováním osobních údajů", classes: "mb-3") }}
-        {{> atoms-button-animated(btn-text: "Odebírat") }}
+          {{> atoms-form-button-animated(btn-text: "Odebírat") }}
+        </form>
       </div>
     </div>
   </div>

main/templates/main/includes/form_button_animated.html

+<button type="submit" class="btn btn__slide__wrap {{ extra_classes }}">
+  <span class="btn text-lg bg-black text-white px-1 lg:text-base">
+    {{ btn_text | default_if_none:"Číst dále" }}
+  </span>
+  <span class="btn text-lg bg-white text-black px-1 lg:text-base">
+    {{ btn_text | default_if_none:"Číst dále" }}
+  </span>
+</button>

main/templates/main/includes/newsletter_section.html

 {% load static %}
 
 <div class="section-clip bg-cover bg-no-repeat flex pb-32 xl:pb-0 xl:min-h-screen relative z-10">
-  <img src="{% static 'main/images/background-images/bg-bartos-newsletter.jpg' %}" alt="" class="absolute h-full w-full object-cover">
+  <img src="{% static 'main/images/background-images/bg-bartos-newsletter.jpg' %}" alt=""
+       class="absolute h-full w-full object-cover">
   <div class="grid-container mt-20 xl:mt-0 xl:items-center z-10">
     <div class="grid-full newsletter-grid">
       <i class="newsletter-grid__icon ico--anchor text-7xl xl:text-9xl xl:w-full"></i>
@@ -10,13 +11,18 @@
           </span>
       <h5 class="newsletter-grid__main-text font-alt text-6xl xl:text-7xl uppercase">Odebírej náš newsletter</h5>
       <div class="newsletter-grid__input flex flex-col items-start">
-        <input type="text" class="text-input bg-white form-field__control mb-3 w-full" value=""
+        <form method="post" action="{{ page.root_page.newsletter_subscribe_url }}">
+          {% csrf_token %}
+          <input type="hidden" name="return_page_id" value="{{ page.id }}">
+          <input type="email" name="email" class="text-input bg-white form-field__control mb-3 w-full" value="" required=""
                  placeholder="Tvůj email"/>
           <div class="checkbox form-field__control flex items-center mb-3">
-          <input type="checkbox" id="checkbox_1">
-          <label class="text-xs font-alt font-light" for="checkbox_1">"Souhlasím se zpracováním osobních údajů"</label>
+            <input type="checkbox" id="checkbox_1" name="confirmed" required="">
+            <label class="text-xs font-alt font-light" for="checkbox_1">"Souhlasím se zpracováním osobních
+              údajů"</label>
           </div>
-        {% include 'main/includes/button_animated.html' with btn_text="Odebírat" %}
+          {% include 'main/includes/form_button_animated.html' with btn_text="Odebírat" %}
+        </form>
       </div>
     </div>
   </div>