[bknr-cvs] hans changed trunk/projects/quickhoney/website/ - bknr-cvs@common-lisp.net - mailman3.common-lisp.net

26 Jul 2008

Revision: 3647
Author: hans
URL: http://bknr.net/trac/changeset/3647
Add shopping cart skeleton
U   trunk/projects/quickhoney/website/static/javascript.js
U   trunk/projects/quickhoney/website/static/styles.css
U   trunk/projects/quickhoney/website/templates/index.xml
Modified: trunk/projects/quickhoney/website/static/javascript.js
===================================================================

--- trunk/projects/quickhoney/website/static/javascript.js	2008-07-26 10:17:52 UTC (rev 3646)
+++ trunk/projects/quickhoney/website/static/javascript.js	2008-07-26 12:19:43 UTC (rev 3647)
@@ -207,6 +207,16 @@
     $("edit_client_select").innerHTML = make_clients_selector('edit_client');
 }
+/* shopping cart */
+
+var cart = {
+    products: [],
+    add: function (product) {
+        this.products.push(product);
+        $('checkout').style.visibility = 'visible';
+    }
+}
+
 /* news */
function loadXMLDoc(fname)
@@ -441,27 +451,6 @@
    	   current_directory = 'contact';
           });
-function preload_menu_images() {
-    var colors = [];
-
-    for (var i in pages) {
-	var page = pages[i];
-	for (var j in page.colors) {
-	    colors[page.colors[j]] = true;
-	}
-    }
-
-    var images = [];
-
-    for (var color in colors) {
-	for (page in pages) {
-	    var button = new Image;
-	    button.src = '/image/' + page + '/color,000000,' + color;
-	    push(images, new Image);
-	}
-    }
-}
-
 function change_colors(pagename, colors) {
foreground_color = colors[0];
@@ -509,6 +498,7 @@
     // Activate the menu by coloring the buttons correctly
     change_colors(pagename, page.colors);
     $('menu').className = pagename;
+    document.body.className = pagename;
// Update globals
     current_directory = pagename;
@@ -520,23 +510,12 @@
     display_path();
// Make all elements of this page visible
-    var elements = $("elements").childNodes;
+    map(function (element) {
+            if (element.id && element.style) {
+                element.style.visibility = (findValue(page.elements, element.id) != -1) ? 'visible' : 'hidden';
+            }
+        }, $("elements").childNodes);
-    for (var i = 0; i < elements.length; i++) {
-	if (elements[i].id) {
-	    var element_name = elements[i].id;
-	    var show = false;
-	    for (var j in page.elements) {
-		if (element_name == page.elements[j]) {
-		    show = true;
-		}
-	    }
-	    if (elements[i].style) {
-		elements[i].style.visibility = show ? "visible" : "hidden";
-	    }
-	}
-    }
-
     page.action();
display_cms_window();
@@ -625,20 +604,14 @@
    $("contactimage").src = button_images['contact/contact'];
     }
-    debug('checking jump_to: ' + document.jump_to);
     if (document.jump_to) {
-        debug('got jump_to: ' + document.jump_to);
    var components = document.jump_to.split("/");
    document.jump_to = null;
-        debug('before show_page');
    show_page(components[0]);
-        debug('after show_page');
         if (components[1]) {
             subdirectory(components[1]);
-            debug('after subdirectory');
         }
         document.show_picture = components[2];
-        debug('show_picture set');
     }
 }
@@ -1126,8 +1099,6 @@
     }
debug('init - done');
-
-    //    setTimeout("preload_menu_images();", 100);
 }
/* old cms support */
@@ -1200,10 +1171,45 @@
 SPACER = partial(DIV, { 'class': 'spacer' });
 ARTWORK_NAME = partial(SPAN, { 'class': 'artwork-name' });
+function remove_overlay()
+{
+    $('overlay').style.visibility = 'hidden';
+    replaceChildNodes('overlay');
+}
+
+function buy_file()
+{
+    cart.add([ 'file', current_image.name ]);
+    return "File added to shopping cart";
+}
+
+function buy_print()
+{
+    cart.add([ 'print', current_image.name ]);
+    return "Print added to shopping cart";
+}
+
+function buy_t_shirt()
+{
+    cart.add([ 't-shirt', current_image.name ]);
+    return "T-Shirt added to shopping cart";
+}
+
+function buy_product_button (buy_function) {
+    var button = BUTTON(null, IMG({ src: '/image/add-to-cart', width: 102, height: 40 }));
+    button.onclick = function () {
+        var confirmation = buy_function();
+        replaceChildNodes('overlay', H1(null, confirmation));
+        callLater(1, remove_overlay);
+        return false;
+    }
+    return button;
+}
+
 var make_buy_forms = {
     'buy-file' : function () {
         make_overlay('buy-file', 'Buy Art as Vector PDF File', 426,
-                     FORM({ method: 'POST', action: '#' },
+                     FORM({ action: '#', onsubmit: 'return false' },
                           SPACER("Download Artwork ", ARTWORK_NAME(current_image.name), " for one-time private use only.  ",
                                  "Please read our ",
                                  A({ href: '/static/user-agreement.html', target: 'user-agreement' }, "User Agreement"),
@@ -1215,13 +1221,13 @@
                                  PRICE('45 €'), NOTICE(' (inside EU, incl. tax)*'), BR(),
                                  PRICE('37.82 €'), NOTICE(' (outside EU, tax free)*'), BR(),
                                  BR(),
-                                 BUTTON(null, IMG({ src: '/image/add-to-cart', width: 102, height: 40 })),
+                                 buy_product_button(buy_file),
                                  BR(), BR(),
                                  NOTICE("Please note:  Our shop is operating from Germany, that's why there is a sales tax within Europe and none outside"))));
     },
     'buy-print' : function () {
         make_overlay('buy-print', 'Buy Art Floating Gallery Plexiglas', 426,
-                     FORM({ method: 'POST', action: '#' },
+                     FORM({ action: '#', onsubmit: 'return false' },
                           SPACER("Fineart print mounted behind plexiglas on aluminium board with a 3/4'' wood brace. ",
                                  NOTICE('Please allow 4-6 days for production in addition to the shipping time')),
                           IMG({ src: '/image/print-sample', width: 426, height: 428 }),
@@ -1241,13 +1247,13 @@
                                                    PRICE('190 €'), NOTICE('(inside EU, incl. tax)*'), BR(),
                                                    PRICE('159.66 €'), NOTICE('(outside EU, tax free)*'), BR())))),
                                  BR(),
-                                 BUTTON(null, IMG({ src: '/image/add-to-cart', width: 102, height: 40 })),
+                                 buy_product_button(buy_print),
                                  BR(), BR(),
                                  NOTICE("Please note:  We are shipping from Germany, that's why there is a sales tax within Europe and none outside"))));
     },
     'buy-t-shirt' : function () {
         make_overlay('buy-t-shirt', 'Buy Art on T-Shirt', 426,
-                     FORM({ method: 'POST', action: '#' },
+                     FORM({ action: '#', onsubmit: 'return false' },
                           SPACER("Artwork ", ARTWORK_NAME(current_image.name), " in colored flocked foil ",
                                  "hot pressed on an American Apparel T-Shirt. ",
                                  NOTICE('These Tees are custom made, so please allow 4-6 days for production in addition to the shipping time')),
@@ -1279,7 +1285,7 @@
                                                    INPUT({ name: 'quantity', size: 1, maxlength: 1 }),
                                                    BR(),
                                                    BR(),
-                                                   BUTTON(null, IMG({ src: '/image/add-to-cart', width: 102, height: 40 })))))),
+                                                   buy_product_button(buy_t_shirt))))),
                                  BR(), BR(),
                                  NOTICE("Please note:  We are shipping from Germany, that's why there is a sales tax within Europe and none outside"))))
     }
Modified: trunk/projects/quickhoney/website/static/styles.css
===================================================================
--- trunk/projects/quickhoney/website/static/styles.css	2008-07-26 10:17:52 UTC (rev 3646)
+++ trunk/projects/quickhoney/website/static/styles.css	2008-07-26 12:19:43 UTC (rev 3647)
@@ -83,22 +83,27 @@
 #menu.home a img { background-color: #953cfd; }
#menu.pixel a img { background-color: #ff00ff; }
+.pixel a { color: #ff00ff; }
 #menu.pixel a#m_pixel img.selected { visibility: visible }
 #menu.pixel a#m_pixel img.unselected { visibility: hidden }
#menu.vector a img { background-color: #00ccff; }
+.vector a { color: #00ccff; }
 #menu.vector a#m_vector img.selected { visibility: visible }
 #menu.vector a#m_vector img.unselected { visibility: hidden }
#menu.news a img { background-color: #30be01; }
+.news a { color: #30be01; }
 #menu.news a#m_news img.selected { visibility: visible }
 #menu.news a#m_news img.unselected { visibility: hidden }
#menu.shop a img { background-color: #0054ff; }
+.shop a { color: #0054ff; }
 #menu.shop a#m_shop img.selected { visibility: visible }
 #menu.shop a#m_shop img.unselected { visibility: hidden }
#menu.contact a img { background-color: #ffa200; }
+.contact a { color: #ffa200; }
 #menu.contact a#m_contact img.selected { visibility: visible }
 #menu.contact a#m_contact img.unselected { visibility: hidden }
@@ -576,7 +581,6 @@
    top: 0px;
 }
-
 #overlay #hey {
    padding: 10px 15px 10px 10px;
 }
@@ -617,4 +621,5 @@
    position: absolute;
    top: 0px;
    left: 585px;
+        visibility: hidden;
 }
\ No newline at end of file
Modified: trunk/projects/quickhoney/website/templates/index.xml
===================================================================
--- trunk/projects/quickhoney/website/templates/index.xml	2008-07-26 10:17:52 UTC (rev 3646)
+++ trunk/projects/quickhoney/website/templates/index.xml	2008-07-26 12:19:43 UTC (rev 3647)
@@ -139,7 +139,7 @@
               description
             </div>
           </div>
-          <div class="news_sep" />
+          <div class="news_sep"> </div>
           <br/>
           <div class="newsentry news_pixel">
             <img src="/image/TSG_Platforms_web/cutout-button,,00ccff,98,4"/>

    