Create product Add products to homepage
Tom Rutgers
committed Aug 17, 2018
commit b327150621c864f304be92d34ef95b170c5e63fa
Showing 6
changed files with
82 additions
and 15 deletions
source/index.html.slim
+2
-1
| @@ | @@ -3,4 +3,5 @@ title: Home - Middleman + Netlify CMS Example |
| --- | |
| = partial 'partials/homepage/hero' | |
| - | = partial 'partials/homepage/story' |
| \ No newline at end of file | |
| + | = partial 'partials/homepage/story' |
| + | = partial 'partials/homepage/products' |
| \ No newline at end of file | |
source/partials/homepage/_products.slim
+23
-13
| @@ | @@ -1,18 +1,28 @@ |
| .homepage-products | |
| .container | |
| + | h2 |
| + | | Products |
| .row | |
| - data.products.each do | product | | |
| - | .product |
| - | .product-image |
| - | = image_tag product.image |
| - | .product-content |
| - | .title |
| - | h2 = product.title |
| - | .weight |
| - | p |
| - | = product.weight.amount |
| - | | |
| - | = product.weight.unit |
| - | .price |
| - | = product.price |
| \ No newline at end of file | |
| + | //product is formatted ['filename', 'data'] |
| + | //to get the actual data: |
| + | - product = product[1] |
| + | |
| + | = link_to '/products/' + product.title.parameterize |
| + | .product |
| + | .product-image |
| + | = image_tag product.image |
| + | .product-content |
| + | .title |
| + | h3 = product.title |
| + | .price |
| + | p |
| + | = product.price.currency || '€' |
| + | | |
| + | = product.price.amount |
| + | .weight |
| + | p |
| + | = product.weight.amount |
| + | | |
| + | = product.weight.unit || 'kg' |
source/stylesheets/all.css.scss
+5
-1
| @@ | @@ -12,5 +12,9 @@ |
| @import 'demo/shared/header-primary'; | |
| @import 'demo/shared/main-content'; | |
| + | @import 'demo/products/product'; |
| + | |
| @import 'demo/homepage/hero'; | |
| - | @import 'demo/homepage/story'; |
| \ No newline at end of file | |
| + | @import 'demo/homepage/story'; |
| + | @import 'demo/homepage/products'; |
| + | |
source/stylesheets/demo/base/_colors.scss
+2
-0
| @@ | @@ -2,3 +2,5 @@ $primary-color: rgba(255, 68, 0, 1); |
| $secondary-color: rgba(112,93,86, 1); | |
| $text-color: rgba(51,51,51, 1); | |
| + | |
| + | $background-color-light: rgba(239,237,242, 1) |
source/stylesheets/demo/homepage/_products.scss
+19
-0
| @@ | @@ -0,0 +1,19 @@ |
| + | .homepage-products { |
| + | padding-top: 60px; |
| + | padding-bottom: 60px; |
| + | background-color: $background-color-light; |
| + | |
| + | h2 { |
| + | margin: 0 0 30px; |
| + | font-size: 32px; |
| + | font-weight: 700; |
| + | } |
| + | |
| + | .product { |
| + | @extend %column; |
| + | @extend %col-md-4; |
| + | @extend %col-sm-6; |
| + | @extend %col-xs-6; |
| + | @extend %product; |
| + | } |
| + | } |
| \ No newline at end of file | |
source/stylesheets/demo/products/_product.scss
+31
-0
| @@ | @@ -0,0 +1,31 @@ |
| + | %product { |
| + | color: $text-color; |
| + | |
| + | img { |
| + | @extend %img-responsive; |
| + | } |
| + | |
| + | .product-image, .product-content { |
| + | background-color: #fff; |
| + | } |
| + | |
| + | .product-content { |
| + | padding: 10px 20px; |
| + | } |
| + | |
| + | .title, .price { |
| + | display: inline-block; |
| + | } |
| + | |
| + | .price { |
| + | float: right; |
| + | font-weight: 700; |
| + | color: $primary-color |
| + | } |
| + | |
| + | h3 { |
| + | font-size: 18px; |
| + | font-weight: 700; |
| + | margin: 0; |
| + | } |
| + | } |
| \ No newline at end of file | |