Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
E
ecommerce-ui
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
ecommerce-ui
Commits
ee278413
Commit
ee278413
authored
Jul 31, 2013
by
Sven Franck
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Gadgets/Item: first commit
parent
85eea50d
Changes
7
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
298 additions
and
21 deletions
+298
-21
lang/de-DE/app.json
lang/de-DE/app.json
+16
-0
lang/en-EN/app.json
lang/en-EN/app.json
+16
-0
lang/fr-FR/app.json
lang/fr-FR/app.json
+16
-0
modules/core/storage/storage.js
modules/core/storage/storage.js
+13
-13
modules/ui/details/details.css
modules/ui/details/details.css
+10
-1
modules/ui/details/details.html
modules/ui/details/details.html
+19
-1
modules/ui/item/item.js
modules/ui/item/item.js
+208
-6
No files found.
lang/de-DE/app.json
View file @
ee278413
{
"custom"
:
{
"dimensions"
:
{
"colors"
:
"Farben"
,
"sizes"
:
"Größen"
},
"colors"
:
{
"peppermint"
:
"Pfefferminz"
,
"blue"
:
"Blau"
,
"orange"
:
"Orange"
,
"shell"
:
"Natur"
,
"passy"
:
"Lila"
,
"vert"
:
"Grün"
,
"peach"
:
"Pfirsich"
}
},
"common"
:
{},
"errors"
:
{},
"address"
:
{
...
...
@@ -58,6 +73,7 @@
"title"
:
"Willkommen"
},
"item"
:
{
"select"
:
"Wählen"
,
"add_basket"
:
"In den Warenkorb"
,
"finish_order"
:
"Bestellung abschliessen"
},
...
...
lang/en-EN/app.json
View file @
ee278413
{
"custom"
:
{
"dimensions"
:
{
"colors"
:
"Colors"
,
"sizes"
:
"Sizes"
},
"colors"
:
{
"peppermint"
:
"Peppermint"
,
"blue"
:
"Blue"
,
"orange"
:
"Orange"
,
"shell"
:
"Offwhite"
,
"passy"
:
"Purple"
,
"vert"
:
"Green"
,
"peach"
:
"Peach"
}
},
"common"
:
{},
"errors"
:
{},
"address"
:
{
...
...
@@ -58,6 +73,7 @@
"title"
:
"Welcome"
},
"item"
:
{
"select"
:
"Select"
,
"add_basket"
:
"Add to basket"
,
"finish_order"
:
"Finish your order"
},
...
...
lang/fr-FR/app.json
View file @
ee278413
{
"custom"
:
{
"dimensions"
:
{
"colors"
:
"Coleurs"
,
"sizes"
:
"Tailles"
},
"colors"
:
{
"peppermint"
:
"Menthe Poivrée"
,
"blue"
:
"Blue"
,
"orange"
:
"Orange"
,
"shell"
:
"Coquille"
,
"passy"
:
"Pourpre"
,
"vert"
:
"Vert"
,
"peach"
:
"Pêche"
}
},
"common"
:
{},
"errors"
:
{},
"address"
:
{
...
...
@@ -61,6 +76,7 @@
"title"
:
"Accueil"
},
"item"
:
{
"select"
:
"Sélectionner"
,
"add_basket"
:
"Ajoter au panier"
,
"finish_order"
:
"Vers la Caisse"
},
...
...
modules/core/storage/storage.js
View file @
ee278413
...
...
@@ -91,7 +91,7 @@ define([
}],
"
dimensions
"
:
[{
"
name
"
:
"
colors
"
,
"
i18n
"
:
"
custom.colors
"
,
"
i18n
"
:
"
custom.
dimensions.
colors
"
,
"
vars
"
:
[{
"
name
"
:
"
blue
"
,
"
i18n
"
:
"
custom.colors.blue
"
,
...
...
@@ -113,7 +113,7 @@ define([
},
"
variations
"
:
{
"
name
"
:
"
sizes
"
,
"
i18n
"
:
"
custom.sizes
"
,
"
i18n
"
:
"
custom.
dimensions.
sizes
"
,
"
variants
"
:
[{
"
ean
"
:
""
,
"
name
"
:
"
S
"
,
...
...
@@ -177,7 +177,7 @@ define([
}],
"
dimensions
"
:
[{
"
name
"
:
"
colors
"
,
"
i18n
"
:
"
custom.colors
"
,
"
i18n
"
:
"
custom.
dimensions.
colors
"
,
"
vars
"
:
[{
"
name
"
:
"
blue
"
,
"
i18n
"
:
"
custom.colors.blue
"
,
...
...
@@ -199,7 +199,7 @@ define([
},
"
variations
"
:
{
"
name
"
:
"
sizes
"
,
"
i18n
"
:
"
custom.sizes
"
,
"
i18n
"
:
"
custom.
dimensions.
sizes
"
,
"
variants
"
:
[{
"
ean
"
:
""
,
"
name
"
:
"
34
"
,
...
...
@@ -261,7 +261,7 @@ define([
}],
"
dimensions
"
:
[{
"
name
"
:
"
colors
"
,
"
i18n
"
:
"
custom.colors
"
,
"
i18n
"
:
"
custom.
dimensions.
colors
"
,
"
vars
"
:
[{
"
name
"
:
"
orange
"
,
"
i18n
"
:
"
custom.colors.orange
"
,
...
...
@@ -283,7 +283,7 @@ define([
},
"
variations
"
:
{
"
name
"
:
"
sizes
"
,
"
i18n
"
:
"
custom.sizes
"
,
"
i18n
"
:
"
custom.
dimensions.
sizes
"
,
"
variants
"
:
[{
"
ean
"
:
""
,
"
name
"
:
"
S
"
,
...
...
@@ -344,7 +344,7 @@ define([
}],
"
dimensions
"
:
[{
"
name
"
:
"
colors
"
,
"
i18n
"
:
"
custom.colors
"
,
"
i18n
"
:
"
custom.
dimensions.
colors
"
,
"
vars
"
:
[{
"
name
"
:
"
peppermint
"
,
"
i18n
"
:
"
custom.colors.peppermint
"
,
...
...
@@ -366,7 +366,7 @@ define([
},
"
variations
"
:
{
"
name
"
:
"
sizes
"
,
"
i18n
"
:
"
custom.sizes
"
,
"
i18n
"
:
"
custom.
dimensions.
sizes
"
,
"
variants
"
:
[{
"
ean
"
:
""
,
"
name
"
:
"
34
"
,
...
...
@@ -410,7 +410,7 @@ define([
},
"
variations
"
:
{
"
name
"
:
"
sizes
"
,
"
i18n
"
:
"
custom.sizes
"
,
"
i18n
"
:
"
custom.
dimensions.
sizes
"
,
"
variants
"
:
[{
"
ean
"
:
""
,
"
name
"
:
"
34
"
,
...
...
@@ -448,7 +448,7 @@ define([
},
"
variations
"
:
{
"
name
"
:
"
sizes
"
,
"
i18n
"
:
"
custom.sizes
"
,
"
i18n
"
:
"
custom.
dimensions.
sizes
"
,
"
variants
"
:
[{
"
ean
"
:
""
,
"
name
"
:
"
34
"
,
...
...
@@ -489,7 +489,7 @@ define([
},
"
variations
"
:
{
"
name
"
:
"
sizes
"
,
"
i18n
"
:
"
custom.sizes
"
,
"
i18n
"
:
"
custom.
dimensions.
sizes
"
,
"
variants
"
:
[{
"
ean
"
:
""
,
"
name
"
:
"
34
"
,
...
...
@@ -552,7 +552,7 @@ define([
}],
"
dimensions
"
:
[{
"
name
"
:
"
colors
"
,
"
i18n
"
:
"
custom.colors
"
,
"
i18n
"
:
"
custom.
dimensions.
colors
"
,
"
vars
"
:
[{
"
name
"
:
"
vert
"
,
"
i18n
"
:
"
custom.colors.vert
"
,
...
...
@@ -574,7 +574,7 @@ define([
},
"
variations
"
:
{
"
name
"
:
"
sizes
"
,
"
i18n
"
:
"
custom.sizes
"
,
"
i18n
"
:
"
custom.
dimensions.
sizes
"
,
"
variants
"
:
[{
"
ean
"
:
""
,
"
name
"
:
"
T0
"
,
...
...
modules/ui/details/details.css
View file @
ee278413
/* scope CSS? */
.details_element
{
display
:
inline-block
;
vertical-align
:
top
;
width
:
45%
;
}
@media
(
max-width
:
40em
)
{
.details_element
{
width
:
100%
;
}
}
modules/ui/details/details.html
View file @
ee278413
...
...
@@ -52,14 +52,32 @@
<!-- gallery with zoom -->
<div
id=
"media"
class=
"details_element"
data-gadget=
"modules/media/media.html"
data-gadget-module=
"media"
>
</div>
<!-- item info -->
<div
id=
"item"
class=
"details_element"
data-gadget=
"modules/item/item.html"
data-gadget-module=
"item"
>
data-gadget-module=
"item"
data-gadget-property=
'{
"state": [
{
"item": {
"_config": {
"datasource": {"module": "storage"}
},
"_links": {
"self": {"href": ""},
"datasource": {"href": "modules/storage/storage.html#queryStorage?method=allDocs"},
"show": {"href": "search.html#queryStorage?method=allDocs"}
}
}
}
]
}'
>
</div>
<!-- item details -->
...
...
modules/ui/item/item.js
View file @
ee278413
...
...
@@ -4,27 +4,229 @@ define([
,
'
css!item
'
],
function
(
App
,
source
)
{
var
response
=
{};
var
that
=
{};
var
priv
=
{};
response
.
data
=
source
;
response
.
callback
=
function
(
self
)
{
// ========================== ATTRIBUTES ==============================
// set response, so it's available across function calls
priv
.
response
;
priv
.
generateContent
=
function
(
response
)
{
var
i
,
j
,
k
,
content
,
child
,
dimension
,
dimensions
,
variation
,
sub_dimension
,
sub_dimension_i18n
;
// expose response (will be overwritten, when next item loads
priv
.
response
=
response
;
if
(
response
.
price
===
response
.
original_price
)
{
price
=
response
.
price
+
response
.
currency
;
}
else
{
price
=
"
<span class='rebate'>
"
+
response
.
price
+
response
.
currency
+
"
</span> (
"
+
response
.
original_price
+
response
.
currency
+
"
)
"
;
}
content
=
"
<ul data-role='listview' data-inset='true' class='
"
+
"
content_wrap'><li><h3><span class='content_brand'>
"
+
response
.
brand
+
"
</span> <span class='content_title translate' data-i18n=''>
"
+
response
.
title
+
"
</span></h3><p class='content_description
"
+
"
translate' data-i18n=''>
"
+
response
.
description
+
"
</p><p class='content_pricing ui-li-aside'>
"
+
price
+
"
</p></li></ul>
"
;
dimensions
=
"
<div data-role='fieldcontain' class='dimension_wrap'>
"
;
// for every dimension
for
(
i
=
0
;
i
<
response
.
dimensions
.
length
;
i
+=
1
)
{
dimension
=
response
.
dimensions
[
i
];
dimensions
+=
"
<label for='dims_
"
+
dimension
.
name
+
"
' class='
"
+
"
translate' data-i18n='item.select'>Select</label>
"
+
"
<select class='main_dimension' name='dims_
"
+
dimension
.
name
+
"
' id='
"
+
dimension
.
name
+
"
'>
"
+
"
<option class='translate' data-i18n='
"
+
dimension
.
i18n
+
"
' selected='selected' disabled>
"
+
dimension
.
name
+
"
</option>
"
;
// for every variantion of this dimension
for
(
j
=
0
;
j
<
dimension
.
vars
.
length
;
j
+=
1
)
{
variation
=
dimension
.
vars
[
j
];
dimensions
+=
"
<option class='translate' data-i18n='
"
+
variation
.
i18n
+
"
' value='
"
+
variation
.
name
+
"
'>
"
+
variation
.
name
+
"
</option>
"
;
// TODO: bad, should not set subdimensions like this...
if
(
j
===
0
)
{
sub_dimension
=
variation
.
variations
.
name
;
sub_dimension_i18n
=
variation
.
variations
.
i18n
;
}
}
dimensions
+=
"
</select>
"
;
// TODO: handling of colors is crap. Should be another dimension, but
// this would be to difficult to associate now. Fix later.
// TODO: multiple dimensions should work both ways = user can pick a
// color and all available sizes are shown or user picks a size and
// all available colors are shown.
// TODO: change of selected color should also update gallery
// child dimension container
child
=
"
<label for='dims_child' class='translate' data-i18n='
"
+
"
item.select'>Select</label>
"
+
"
<select name='dims_child' id='dims_child'>
"
+
"
<option class='translate' data-i18n='
"
+
sub_dimension_i18n
+
"
' selected='selected' disabled>
"
+
sub_dimension
+
"
</option></select>
"
;
}
return
str
=
content
+
dimensions
+
child
+
"
</div>
"
;
};
// TODO: show some thing
priv
.
generateError
=
function
()
{
return
"
<p>JIO ERROR</p>
"
;
};
// generate content items?
priv
.
generateContentItems
=
function
(
name
)
{
// var i, j, item, img, str = "";
//
// item = priv.response.dimensions[0].vars[0];
//
// // find item name or default to first variant in dimension
// if (name !== undefined) {
// for (i = 0; i < priv.response.dimensions[0].vars.length; i += 1) {
// item = priv.response.dimensions[0].vars[i];
// if (item.name === name || location.hash === name) {
// break;
// }
// }
// }
//
// // for every variant (colors, size?, foo?)
// // TODO: declare a variant that carries images in products JSON!
// // build string
// for (j = 0; j < item.media.img.length; j += 1) {
// img = item.media.img[j];
// // TODO: add zoom/photoswipe later!
// str += "<li class='product_img'><a href='#'><img src='" + priv.response.media +
// img[shortcut] + size + "' alt='" + item.name + "' />" +
// "<h3 class='translate gallery_header' data-i18n='" +
// item.i18n + "'></h3></a></li>";
// }
//
// return str;
};
priv
.
swapSecondaryOptions
=
function
(
name
,
element
)
{
// var newString = priv.generateContentItems(name),
// // TODO: if thumbnails are a gallery option, it should be possible
// // to reference the gallery from the thumbnail without doing this:
// wrap = App.util.closest(element, ".gallery_thumbnails").previousSibling,
// gallery = wrap.getElementsByTagName("ul");
//
// $(gallery[0]).empty().append(newString).carousel("refresh");
};
// generate items to display
priv
.
generateItems
=
function
(
params
)
{
var
markup
,
spec
,
response
;
id
=
params
.
gadget
.
dom
.
attr
(
'
id
'
).
split
(
"
__
"
).
splice
(
-
1
)[
0
],
config
=
params
.
gadget
.
state
[
0
][
id
].
_config
,
module
=
config
.
datasource
.
module
,
urlPointer
=
params
.
pointer
.
length
>
1
,
jsonPointer
=
config
.
datasource
.
pointer
;
// if we have a pointer-array passed, query that
// TODO: this access a globally stored current_item set by details gadget!
if
(
urlPointer
)
{
spec
=
{};
spec
.
storage
=
"
items
"
spec
.
method
=
"
get
"
spec
.
doc
=
{
"
_id
"
:
params
.
pointer
[
1
]}
}
if
(
jsonPointer
)
{
}
// callback to generate gallery
spec
.
callback
=
function
(
err
,
response
)
{
if
(
err
)
{
str
=
priv
.
generateError
();
}
else
{
str
=
priv
.
generateContent
(
response
);
}
// TODO: this should not replace the whole gadget content
markup
=
params
.
source
.
replace
(
/<!-- dimensions_template -->/g
,
str
);
// this is not response.callback(!!)
params
.
callback_mockup
(
markup
);
};
if
(
urlPointer
)
{
// query for items
App
[
module
].
switchboard
(
spec
);
}
}
// response object
that
.
data
=
source
;
that
.
mockup
=
function
(
source
,
callback_mockup
)
{
var
spec
=
{};
spec
.
gadget
=
RenderJs
.
getSelfGadget
();
spec
.
page
=
App
.
util
.
closest
(
spec
.
gadget
.
dom
.
get
(
0
),
"
div[data-role='page']
"
);
spec
.
pageId
=
"
#
"
+
spec
.
page
.
id
;
// TODO: retrieving pointers should be a generic method that retrieves
// pointers either from the URL or from a JSON config object passed!
spec
.
pointer
=
location
.
search
.
split
(
"
=
"
);
spec
.
callback_mockup
=
callback_mockup
;
spec
.
source
=
source
;
// TODO: remove to separate function
if
(
!
spec
.
page
.
getAttribute
(
"
events_items
"
))
{
spec
.
page
.
setAttribute
(
"
events_items
"
,
true
);
$
(
document
).
on
(
"
pagebeforeshow.items
"
,
spec
.
pageId
,
function
(
e
)
{
// the pointer in the URL may be updated
if
(
location
.
search
)
{
spec
.
pointer
=
location
.
search
.
split
(
"
=
"
);
}
priv
.
generateItems
(
spec
,
true
);
})
.
on
(
"
change.item
"
,
spec
.
pageId
+
"
.main_dimension
"
,
function
(
e
)
{
// var target = e.target,
// color;
//
// if (e.target.tagName === "A") {
// color = target.href.split("#")[1];
// } else {
// color = App.util.closest(target, "a").href.split("#")[1];
// }
// priv.swapSecondaryOptions(color, e.target);
});
// and run intial
priv
.
generateItems
(
spec
);
}
};
that
.
callback
=
function
(
self
)
{
if
(
App
===
undefined
)
{
def
=
new
$
.
Deferred
;
def
.
done
(
function
(
gadget
)
{
// prefix instance-ids, pass JSON
App
.
renderGadgets
(
gadget
);
App
.
renderGadgets
(
gadget
,
true
);
});
window
.
fallbackLoader
.
deferreds
.
push
(
def
);
window
.
fallbackLoader
.
args
.
push
(
self
);
}
else
{
// prefix instance-ids, pass JSON
App
.
renderGadgets
(
self
);
App
.
renderGadgets
(
self
,
true
);
}
};
// return response object
return
response
;
return
that
;
}
);
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment