raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-27 01:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reworking the shop page

Browse Source
This commit is contained in:
Will Marshall
2014-05-13 15:54:14 +10:00
parent 3ce196e042
commit 12ddbb6a32
11 changed files with 119 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/darkswarm/controllers/products/product_node_controller.js.coffee Normal file
View File

@@ -0,0 +1,9 @@
Darkswarm.controller "ProductNodeCtrl", ($scope) ->
$scope.price = ->
if $scope.product.variants.length > 0
prices = (v.price for v in $scope.product.variants)
Math.min.apply(null, prices)
else
$scope.product.price
$scope.hasVariants = $scope.product.variants.length > 0

6
app/assets/javascripts/darkswarm/controllers/products_controller.js.coffee
View File

@@ -2,7 +2,6 @@ Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Product, OrderCycle) -
$scope.data = Product.data
$scope.limit = 3
$scope.order_cycle = OrderCycle.order_cycle
Product.update()
$scope.incrementLimit = ->
if $scope.limit < $scope.data.products.length
@@ -14,8 +13,3 @@ Darkswarm.controller "ProductsCtrl", ($scope, $rootScope, Product, OrderCycle) -
e.preventDefault()
$scope.productPrice = (product) ->
if product.variants.length > 0
prices = (v.price for v in product.variants)
Math.min.apply(null, prices)
else
product.price

8
app/assets/javascripts/darkswarm/services/product.js.coffee
View File

@@ -1,12 +1,12 @@
Darkswarm.factory 'Product', ($resource) ->
new class Product
data: {
constructor: ->
@update()
data:
products: null
loading: true
}
update: ->
@data.products = $resource("/shop/products").query =>
@data.loading = false
@data
all: ->
@data.products || @update()

4
app/assets/stylesheets/darkswarm/product_table.css.sass Normal file
View File

@@ -0,0 +1,4 @@
.product_table
.row
border: 1px solid black
padding: 8px inherit

60
app/assets/stylesheets/darkswarm/shop.css.sass
View File

@@ -82,63 +82,3 @@ product
padding-top: 1em
input.button.right
float: left
table
table-layout: fixed
width: 100%
border-collapse: collapse
border: none
th
line-height: 50px
&.name
width: 330px
//&.notes
//width: 140px
&.variant
width: 180px
&.quantity, &.bulk, &.price
width: 90px
.notes
max-width: 300px
td, th
background: #fff
> span
min-width: 50px
display: block
tbody
border: 1px solid #cccccc
border-left: 0px
border-right: 0px
td
padding: 20px 0px
&.name
img
float: left
margin-right: 30px
@media all and (max-width: 768px)
margin-right: 1em
div
min-width: 150px
tr.product-description
display: none
// Responsive
@media all and (max-width: 768px)
td.notes, th.notes
display: none
img
width: 20px
height: auto
tr.product-description
display: table-row
td:empty
display: none
input[type=number]
width: 60px
margin: 0px
display: block
float: right
padding-top: 14px

43
app/views/shop/_product_master.html.haml Normal file
View File

@@ -0,0 +1,43 @@
.small-1.column
%span.bulk{"bo-if" => "product.group_buy"} bulk
&nbsp;
.small-5.columns
{{ product.name }}
({{ product.master.options_text }})
-# WITHOUT GROUP BUY
.small-5.columns{"bo-if" => "!product.group_buy"}
%input{type: :number,
min: 0,
"ofn-disable-scroll" => true,
max: "{{product.on_demand && 9999 || product.count_on_hand }}",
name: "variants[{{product.master.id}}]",
id: "variants_{{product.master.id}}",
"ng-model" => "product.quantity"}
{{ product.master.options_text }}
-# WITH GROUP BUY
.small-2.columns{"bo-if" => "product.group_buy"}
%input{type: :number,
min: 0,
"ofn-disable-scroll" => true,
max: "{{product.on_demand && 9999 || product.count_on_hand }}",
name: "variants[{{product.master.id}}]",
id: "variants_{{product.master.id}}",
"ng-model" => "product.quantity"}
{{ product.master.options_text }}
(min)
.small-3.columns{"bo-if" => "product.group_buy"}
%input{type: :number,
min: 0,
"ofn-disable-scroll" => true,
max: "{{product.on_demand && 9999 || product.count_on_hand }}",
name: "variant_attributes[{{product.master.id}}][max_quantity]",
"ng-model" => "product.max_quantity"}
(max)
.small-1.column
{{ product.price | currency }}

12
app/views/shop/_product_summary.html.haml Normal file
View File

@@ -0,0 +1,12 @@
.row{bindonce: true}
.small-1.column
%img{"bo-src" => "product.master.images[0].small_url"}
%img{name: "taxon icon here"}
.small-5.columns
%strong {{ product.name }}
.small-4.columns
{{ product.supplier.name }}
.small-1.columns
%span{"ng-if" => "hasVariants"} from
{{ price() | currency }}

44
app/views/shop/_product_variants.html.haml Normal file
View File

@@ -0,0 +1,44 @@
.row{bindonce: true,
"ng-repeat" => "variant in product.variants"}
.small-1.column
%span.bulk{"bo-if" => "product.group_buy"} bulk
&nbsp;
.small-5.columns
{{ variant.options_text }}
{{ variant.id }}
-# WITHOUT GROUP BUY
.small-5.columns{"bo-if" => "!product.group_buy"}
%input{type: :number,
value: nil,
min: 0,
"ofn-disable-scroll" => true,
max: "{{variant.on_demand && 9999 || variant.count_on_hand }}",
name: "variants[{{variant.id}}]", id: "variants_{{variant.id}}",
"bo-model" => "variant.quantity"}
{{ variant.options_text }}
-# WITH GROUP BUY
.small-2.columns{"bo-if" => "product.group_buy"}
%input{type: :number,
value: nil,
min: 0,
"ofn-disable-scroll" => true,
max: "{{variant.on_demand && 9999 || variant.count_on_hand }}",
name: "variants[{{variant.id}}]", id: "variants_{{variant.id}}",
"bo-model" => "variant.quantity"}
{{ variant.options_text }}
(min)
.small-3.columns{"bo-if" => "product.group_buy"}
%input{type: :number,
min: 0,
"ofn-disable-scroll" => true,
max: "{{variant.on_demand && 9999 || variant.count_on_hand }}",
name: "variant_attributes[{{variant.id}}][max_quantity]",
"ng-model" => "variant.max_quantity"}
(max)
.small-1.columns
{{ variant.price | currency }}

7
app/views/shop/_products.html.haml
View File

@@ -11,19 +11,18 @@
.row
.small-12.columns
.product_table
.product_table{bindonce: true}
%product.row{"ng-controller" => "ProductNodeCtrl",
"ng-repeat" => "product in data.products | filter:query | limitTo: limit track by product.id"}
= render partial: "shop/product_summary"
.row{bindonce: true, "ng-if" => "hasVariants()"}
%div{"bo-if" => "hasVariants"}
= render partial: "shop/product_variants"
.row{bindonce: true, "ng-if" => "!hasVariants()"}
.row{"bo-if" => "!hasVariants"}
= render partial: "shop/product_master"
-#%table
-#%thead
-#%th.name Item

0
app/views/shop/_variants.html.haml Normal file
View File

4
app/views/shop/products.rabl
View File

@@ -1,10 +1,6 @@
collection @products
attributes :id, :name, :permalink, :count_on_hand, :on_demand, :group_buy
node :show_variants do
true
end
node do |product|
{
notes: strip_tags(product.notes),