Templates for Wagtail

- product_card_preview - the template for a product card
- product_wagtail - a single product template
- products_wagtail - a multiple products template

kitsune/products/jinja2/products/product_card_preview.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+{% set title = _('Products') %}
+{% block contentwrap %}
+  <section class="mzp-l-content sumo-page-section" id="main-content">
+    <div class="sumo-card-grid is-product-wrap">
+      <div class="scroll-wrap">
+        <div class="card card--product zoom-on-hover"> 
+          <img class="card--icon" src="{{ object.image_url }}" alt="{{ object.title }}" />
+          <div class="card--details">
+            <h3 class="card--title">
+              <a class="expand-this-link" href=""
+                 data-event-name="link_click"
+                 data-event-parameters='{
+                   "link_name": "product-home",
+                   "link_detail": "{{ object.slug }}"
+                 }'>
+                {{ object.title }} PRODUCT CARD
+              </a>
+            </h3>
+            <p class="card--desc">{{ object.description }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+{% endblock %}

kitsune/products/jinja2/products/product_wagtail.html

@@ -0,0 +1,74 @@
+{% extends "base.html" %}
+{% set product = page.product %}
+{% from 'includes/common_macros.html' import for_contributors_sidebar, download_firefox, featured_articles %}
+{% from 'products/includes/topic_macros.html' import help_topics, topic_metadata with context %}
+{% set crumbs = [(None, pgettext('DB: products.Product.title', product.title))] %}
+{% set classes = 'product-landing' %}
+{% set search_params = {'product': product.slug} %}
+{% set extra_body_attrs = {'data-product-slug': product.slug} %}
+{% set canonical_url = canonicalize(model_url=product.get_absolute_url()) %}
+{% set ga_products = "/" + product.slug + "/" %}
+{% set ga_content_group = "product-home" %}
+
+{% block title %}{{ _('{product} Help')|f(product=pgettext('DB: products.Product.title', product.title)) }}{% endblock %}
+
+{% block base_container_classes %}container_wide{% endblock %}
+
+{% block hidden_search_masthead %}{% endblock %}
+
+{% block masthead %}
+
+{% for block in page.body %}
+  {%if block.block_type == 'search' %}
+    {% include_block block %}
+  {% endif %}
+{% endfor %}
+{% endblock %}
+
+{% block contentwrap %}
+<div id="main-content">
+
+{% for block in page.body %}
+  {% if block.block_type == 'text' %}
+    <section class="mzp-l-content mzp-l-content sumo-page-section--inner">
+      {% include_block block %}
+    </section>
+  {% endif %}
+{% endfor %}
+
+{% for block in page.body %}
+  {% if block.block_type == 'frequent_topics' %}
+    {% include_block block %}
+  {% endif %}
+{% endfor %}
+
+{% if page.body.first_block_by_name('featured_articles') %}
+  <section class="mzp-l-content mzp-l-content sumo-page-section--inner">
+        <h2 class="sumo-page-subheading text-center-to-left-on-large">{{ _('Featured Articles') }}</h2>   
+          <div class="sumo-card-grid is-four-wide">
+            <div class="scroll-wrap">
+              {% for block in page.body %}
+                {% if block.block_type == 'featured_articles' %}
+                  {% include_block block %}
+                {% endif %}
+              {% endfor %}
+            </div>
+          </div>
+  </section>
+{% endif %}
+
+{% for block in page.body %}
+  {% if block.block_type == 'cta' %}
+    {% include_block block %}
+  {% endif %}
+{% endfor %}
+
+
+</div>
+
+{% endblock %}
+
+{% block for_contributors %}{% endblock %}
+
+{% block outer_side %}
+{% endblock %}

kitsune/products/jinja2/products/products_wagtail.html

@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+{% from 'products/includes/product_macros.html' import product_cards with context %}
+
+{% set crumbs = [(None, title)] %}
+{% set canonical_url = canonicalize(viewname='products') %}
+{% set ga_content_group = "list-products" %}
+
+{% block hidden_search_masthead %}{% endblock %}
+
+{% block masthead %}
+<section class="home-search-section sumo-page-section shade-bg" id="products-and-services" >
+  <div class="mzp-l-content">
+    {% block breadcrumbs %}
+      {{ breadcrumbs(crumbs, id='main-breadcrumbs') }}
+    {% endblock %}
+  </div>
+  <div class="mzp-l-content narrow">
+    <div class="home-search-section--content">
+      <h1 class="sumo-page-heading-xl">{{ page.title }}</h1>
+      {{ search_box(settings, id='support-search-masthead', params=search_params) }}
+    </div>
+  </div>
+</section>
+{% endblock %}
+
+
+{% block contentwrap %}
+  <section class="mzp-l-content sumo-page-section" id="main-content">
+    <div class="sumo-card-grid is-product-wrap">
+      <div class="scroll-wrap">
+        {% for block in page.body %}
+            {{ block.render() }}
+        {% endfor %}
+      </div>
+    </div>
+  </section>
+{% endblock %}