Skip to content

O
officejs
Commit 9d3c0361 authored by Ivan Tyagov's avatar Ivan Tyagov
Browse files
Options

Add basic switch between products in same page.

parent ca5fcc74
Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 120 deletions
UNGProject/poc/shopping/_/js/renderjs/render.js 0 → 100644
View file @ 9d3c0361
var RenderJs={
bootstrap: function (root){
// initial load application gadget
RenderJs.load(root);
},
load: function (root) {
// Load gadget layout by traversing DOM
gadget_list = root.find("[gadget]");
// Load chilren
gadget_list.each(function(i,v){RenderJs.loadGadgetFromUrl($(this));});
},
loadGadgetFromUrl: function(gadget) {
// Load gadget's SPECs from URL
url = gadget.attr("gadget")
//console.log(url);
$.ajax({url:url,
success: function (data) {
RenderJs.parse (data);
gadget.append(data);
// a gadget may contain sub gadgets
RenderJs.load(gadget);
//console.log(url+ data);
gadget.find("a").each(
function(){
$(this).click(
function(){
alert("disabled link, do action on *same* page"); return false;})}
)
},
});
},
// XXX: finish below
parse: function (data){
// XXX: Parse an HTML document and get out .js and .css
// XXX: load .css
// XXX: load .jss (see requirejs)
// $.ajax({url:"jquery-ui.js",
// type: "script"});
},
save: function () {
// XXX: Save gadget layoyut by traversing DOM and using some kind of storage
console.log("XXX: save");
},
}
// init all when DOM is ready
$(document).ready(function() {
RenderJs.bootstrap($("#application"));
});
UNGProject/poc/shopping/_/js/renderjs/renderjs.js
View file @ 9d3c0361
......@@ -8,7 +8,6 @@ var RenderJs={
load: function (root) {
// Load gadget layout by traversing DOM
gadget_list = root.find("[gadget]");
// Load chilren
gadget_list.each(function(i,v){RenderJs.loadGadgetFromUrl($(this));});
},
......@@ -24,7 +23,7 @@ var RenderJs={
// a gadget may contain sub gadgets
RenderJs.load(gadget);
//console.log(url+ data);
gadget.find("a").each(
gadget.find("a1").each(
function(){
$(this).click(
function(){
......
UNGProject/poc/shopping/ecommerce/pc/laptop/thinkpadT400/index.json 0 → 100644
View file @ 9d3c0361
{"price": "100,00 EUR",
"title": "chair",
"description": "A bar chair which ......................"}
UNGProject/poc/shopping/ecommerce/phone/android/nexus/index.json 0 → 100644
View file @ 9d3c0361
{"price": "200,00 EUR",
"title": "Nexus phone",
"description": "an adroid Os based nexus phone................"}
UNGProject/poc/shopping/ecommerce/phone/ios/iphone4s/index.json 0 → 100644
View file @ 9d3c0361
{"price": "300,00 EUR",
"title": "Iphone 4s",
"description": "Iphone 4s ..........................."}
UNGProject/poc/shopping/portal_gadgets/application/gadget.html
View file @ 9d3c0361
<!-- Root application gadget code goes here -->
\ No newline at end of file
UNGProject/poc/shopping/portal_gadgets/breadcrumb/gadget.html 0 → 100644
View file @ 9d3c0361
<ul class="breadcrumb">
<li><a href="#">home</a></li>
<li><a href="#">path</a></li>
<li><a href="#">to</a></li>
<li>page</li>
</ul>
\ No newline at end of file
UNGProject/poc/shopping/portal_gadgets/feed/gadget.html
View file @ 9d3c0361
<div class="feed">
<div class="feed">
<ul class="breadcrumb">
<li><a href="#">home</a></li>
<li><a href="#">path</a></li>
<li><a href="#">to</a></li>
<li>page</li>
</ul>
<br>
<article class="productdetail">
<h3>Bar Stud Stool (bar stools)</h3>
<div class="product-gallery tabber">
<ul>
<li><a href="#pic-1"><img src="img/product-dummy-small-1.jpg"></a></li>
<li><a href="#pic-2"><img src="img/product-dummy-small-2.jpg"></a></li>
</ul>
<div id="pic-1">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
<div id="pic-2">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
</div>
<div class="product-action">
<form action="#" method="post">
<ol>
<li>Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. </li>
<li><a href="#" class="more">more details &raquo;</a></li>
<li class="swatches">
select a color:
<ul>
<li><a href="#"><img src="img/swatch-1.jpg"></a></li>
<li><a href="#"><img src="img/swatch-2.jpg"></a></li>
<li><a href="#"><img src="img/swatch-3.jpg"></a></li>
</ul>
</li>
<li>
<strong class="price">299,99 &euro;</strong>
<span class="old">499,99 &euro;</span>
</li>
<li>
<label for="select-option-1">Option1:</label>
<select name="option-1" id="select-option-1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="select-option-2">Option2:</label>
<select name="option-2" id="select-option-2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="input-amount">Amount:</label>
<input type="text" name="amount" id="input-amount" value="1">
</li>
<li class="availability">
<label>Availability:</label>
<strong class="ok">In Stock</strong>
<!--<strong class="no">Out of Stock</strong>//-->
</li>
<li>
<button type="submit">Add to Cart</button>
</li>
</ol>
</form>
</div>
<ul class="tools">
<li><a href="#">zoom </a></li>
<li class="last"><a href="#">print this page</a></li>
</ul>
</article>
<article class="product-description">
<div class="tabber">
<ul>
<li><a href="#desc-1">Description</a></li>
<li class="current"><a href="#desc-2">Technical Details</a></li>
</ul>
<div id="desc-1">
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien. Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque pellentesque. Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam. Sed dapibus vehicula odio. Proin bibendum gravida nisl. Fusce lorem. Phasellus sagittis, nulla in hendrerit laoreet, libero lacus feugiat urna, eget hendrerit pede magna vitae lorem. Praesent mauris.</p>
</div>
<div id="desc-2">
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien. Vestibulum posuere nulla eget wisi. Integer volutpat ligula eget enim. Suspendisse vitae arcu. Quisque pellentesque. Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam. Sed dapibus vehicula odio. Proin bibendum gravida nisl. Fusce lorem. Phasellus sagittis, nulla in hendrerit laoreet, libero lacus feugiat urna, eget hendrerit pede magna vitae lorem. Praesent mauris.</p>
</div>
<div id="breadcrumb" gadget="portal_gadgets/breadcrumb/gadget.html"
gadget:property="{}"></div>
<br>
<div id="product" gadget="portal_gadgets/product/gadget.html"
gadget:property="{}"></div>
</div>
</article>
</div>
\ No newline at end of file
UNGProject/poc/shopping/portal_gadgets/header/gadget.html
View file @ 9d3c0361
......@@ -11,7 +11,6 @@
<li><a href="">About Us</a></li>
<li><a href="">Customer Service</a></li>
<li><a href="">User Page 1</a></li>
<li><a href="">User Page 2</a></li>
</ol>
......
UNGProject/poc/shopping/portal_gadgets/product/gadget.css 0 → 100644
View file @ 9d3c0361
.product-title{
color:red!important;
}
\ No newline at end of file
UNGProject/poc/shopping/portal_gadgets/product/gadget.html 0 → 100644
View file @ 9d3c0361
<!-- Pure HTMl template part which is to be filled by javascript for given object -->
<article class="productdetail">
<h3 class="product-title">Bar Stud Stool (bar stools)</h3>
<div class="product-gallery tabber">
<ul>
<li><a href="#pic-1"><img src="img/product-dummy-small-1.jpg"></a></li>
<li><a href="#pic-2"><img src="img/product-dummy-small-2.jpg"></a></li>
</ul>
<div id="pic-1">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
<div id="pic-2">
<a href="#">
<img src="img/product-dummy-large.jpg">
<strong>Zoom</strong>
</a>
</div>
</div>
<div class="product-action">
<form action="#" method="post">
<ol>
<li class="short-description">Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. </li>
<li><a href="#" class="more">more details &raquo;</a></li>
<li class="swatches">
select a color:
<ul>
<li><a href="#"><img src="img/swatch-1.jpg"></a></li>
<li><a href="#"><img src="img/swatch-2.jpg"></a></li>
<li><a href="#"><img src="img/swatch-3.jpg"></a></li>
</ul>
</li>
<li>
<strong class="price">299,99 &euro;</strong>
<span class="old">499,99 &euro;</span>
</li>
<li>
<label for="select-option-1">Option1:</label>
<select name="option-1" id="select-option-1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="select-option-2">Option2:</label>
<select name="option-2" id="select-option-2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</li>
<li>
<label for="input-amount">Amount:</label>
<input type="text" name="amount" id="input-amount" value="1">
</li>
<li class="availability">
<label>Availability:</label>
<strong class="ok">In Stock</strong>
<!--<strong class="no">Out of Stock</strong>//-->
</li>
<li>
<button type="submit">Add to Cart</button>
</li>
</ol>
</form>
</div>
<ul class="tools">
<li><a href="#">zoom </a></li>
<li class="last"><a href="#">print this page</a></li>
</ul>
</article>
<article class="product-description">
<div class="tabber">
<ul>
<li><a href="#desc-1">Description</a></li>
<li class="current"><a href="#desc-2">Technical Details</a></li>
</ul>
<div id="desc-1">
<p>Desc-1</p>
</div>
</div>
</article>
<link href="portal_gadgets/product/gadget.css" media="all" type="text/css" rel="stylesheet">
<script type="text/javascript" language="javascript">
function updateProduct(url){
$.ajax({
url: url,
dataType: 'json',
success: function(data){
price = data.price;
title = data.title;
description = data.description;
$(".price").html(price);
$(".product-title").html(title);
$(".short-description").html(title);
$("#desc-1 p").html(description);
}
});}
// first one
updateProduct("ecommerce/pc/laptop/thinkpadT400/index.json");
</script>
\ No newline at end of file
UNGProject/poc/shopping/portal_gadgets/sidebar/gadget.html
View file @ 9d3c0361
<div class="sidebar">
<ol>
<li><h3>Filter by type</h3>
<ol>
<li class="selected"><a href="#"
onclick="updateProduct('ecommerce/pc/laptop/thinkpadT400/index.json')">Laptop Thinkpad T400</a></li>
<li><a href="#"
onclick="updateProduct('ecommerce/phone/android/nexus/index.json')">Phone Andoid Nexus</a></li>
<li><a href="#"
onclick="updateProduct('ecommerce/phone/ios/iphone4s/index.json')">IPhone4s</a></li>
</ol>
</li>
<li><h3>Filter by Brand</h3>
<ol>
<li class="selected"><a href="#">Acuvue (12)</a></li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7