diff --git a/docs/tutorial/frontend.md b/docs/tutorial/frontend.md index 2061ffc..c595470 100644 --- a/docs/tutorial/frontend.md +++ b/docs/tutorial/frontend.md @@ -3,18 +3,20 @@ title: Displaying Products sidebar_label: Frontend --- -Now we have created products and configured our shipping, we can start thinking about actually displaying the products to our customers. +You will see that if you click on `View` for the products or product index, you will taken to a basic product index or product page. +You will find the HTML templates for these pages in `catalog/templates/catalog`. +This basic template uses CSS grid to show the products as a grid of 'cards'. +You can check out the CSS in `longclaw_bakery/static/css/longclaw_bakery.css`. +The CSS is included in `longclaw_bakery/templates/base.html` which our `product_index.html` extends. -Since `ProductIndex` and `Product` are Wagtail pages, we write templates for them just like any other page. -The Wagtail documentation already comprehensively covers [writing templates](http://docs.wagtail.io/en/v1.9/topics/writing_templates.html). +> The Wagtail documentation also has some comprehensive documentation on [writing templates for Pages](http://docs.wagtail.io/en/v1.9/topics/writing_templates.html). -Our template project already has some basic templates for `ProductIndex` and `Product`: +For more complex projects, you might want to use Sass and/or other frontend libraries. In this case you might want to look at using Webpack to bundle your static assets. There are some [useful guides](https://owais.lone.pw/blog/webpack-plus-reactjs-and-django/) out there to help you. + + +## Improving the product page -- `my_shop/my_shop/templates/products/product_index.html` -- `my_shop/my_shop/templates/products/product.html` -They contain just enough information to demonstrate how to traverse the products and their fields. -For a more complete template, take a look at the [demo project](https://github.com/JamesRamm/longclaw_demo). ### Adding Products to the Basket diff --git a/docs/tutorial/products.md b/docs/tutorial/products.md index efbfd92..2b9380d 100644 --- a/docs/tutorial/products.md +++ b/docs/tutorial/products.md @@ -134,5 +134,3 @@ If we navigate back to the product index page, we see the new product listed: ![Image of the product index](assets/longclaw-bakery-product-index.png) -You will see that if you click on `View` for the products or product index, you will get an error. This is because we have not yet written any templates for displaying our shop frontend. We [will get to this](shipping.md) but first we will move on to configuring the shipping. - diff --git a/longclaw/project_template/catalog/templates/catalog/product_index.html b/longclaw/project_template/catalog/templates/catalog/product_index.html index ce47611..c1677a8 100644 --- a/longclaw/project_template/catalog/templates/catalog/product_index.html +++ b/longclaw/project_template/catalog/templates/catalog/product_index.html @@ -6,14 +6,17 @@ {% templatetag openblock %} block content {% templatetag closeblock %}

{% templatetag openvariable %} page.title {% templatetag closevariable %}

-
+
{% templatetag openblock %} for post in page.get_children {% templatetag closeblock %} {% templatetag openblock %} with post=post.specific {% templatetag closeblock %} -
-
-

{% templatetag openvariable %} post.title {% templatetag closevariable %}

-

{% templatetag openvariable %} post.description|richtext {% templatetag closevariable %}

-
+
+ {% templatetag openblock %} image post.images.first.image max-500x320 {% templatetag closeblock %} +
+ +

{% templatetag openvariable %} post.title {% templatetag closevariable %}

+ +

{% templatetag openvariable %} post.description|richtext {% templatetag closevariable %}

+
{% templatetag openblock %} endwith {% templatetag closeblock %} {% templatetag openblock %} endfor {% templatetag closeblock %} diff --git a/longclaw/project_template/project_name/static/css/project_name.css b/longclaw/project_template/project_name/static/css/project_name.css index e69de29..8228429 100644 --- a/longclaw/project_template/project_name/static/css/project_name.css +++ b/longclaw/project_template/project_name/static/css/project_name.css @@ -0,0 +1,63 @@ +:root { + --brand-primary: #b14344; + --border-radius-default: 5px; + --header-height: 70px; + } + + +body { + margin: 0; +} + +.layout { + display: grid; + grid-template-columns: auto; + grid-template-rows: var(--header-height) 1fr auto; + grid-template-areas: "header" + "main" + "footer"; + min-height: 100vh; + +} + +.header { + grid-area: header; + padding: 5px; + background-color: var(--brand-primary) +} + +.main { + grid-area: main; + margin: 1em; +} + + + +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} + +.card { + transition: 0.3s; + border-radius: var(--border-radius-default); + max-width: 100%; + min-width: 20%; + min-height: 100px; + margin: 5px; + box-shadow: 0 0 6px 0 rgba(0,0,0,0.2), 0 2px 0px 0 var(--brand-primary); +} + +.card-body { + padding: 1rem 2rem; +} + +.card > img { + border-style: none; + border-radius: var(--border-radius-default) var(--border-radius-default) 0 0; + vertical-align: middle; + width: 100%; + max-height: 300px; + min-height: 50px; + object-fit: cover; +} diff --git a/longclaw/project_template/project_name/templates/base.html b/longclaw/project_template/project_name/templates/base.html index 76c7680..c49d740 100644 --- a/longclaw/project_template/project_name/templates/base.html +++ b/longclaw/project_template/project_name/templates/base.html @@ -21,10 +21,14 @@ +
{% templatetag openblock %} wagtailuserbar {% templatetag closeblock %} +
+
{% templatetag openblock %} block content {% templatetag closeblock %}{% templatetag openblock %} endblock {% templatetag closeblock %} - +
+
{% templatetag opencomment %} Global javascript {% templatetag closecomment %}