|
The code which builds the shopping cart tree is the following:
Example: |
treeA = new LiknoTreeRoot("treeA", "cart", 0, 0, 212, 256, 16, false, "padding:4px; background-color:#f7f7f7; border:1px solid #000066;", "png");
treeA.setImagesDir("images/ldmt/16x16/crystalballs/");
treeA.addClass("de", "font-family:Tahoma; font-size:11px; color:#000066; background-color:; text-decoration:none; font-weight:normal; padding-left:4px; padding-right:4px;");
treeA.addClass("mo", "font-family:Tahoma; font-size:11px; text-decoration:underline; color:#FF6D15; padding-left:4px; padding-right:4px;");
treeA.addClass("se", "font-family:Tahoma; font-size:11px; font-weight: bold; color:#ff4a00; background-color:; padding-left:4px; padding-right:4px;");
treeA.setClickToExpand(true);
treeA.setAllowFolderSelect(false);
treeA.setMultiSelect(true);
treeA.setUseCtrl(true);
t2_a = treeA.addLeafWithParams("Cameras", "", "", true, "");
t2_a0 = t2_a.addLeafWithParams("Digital cameras", "", "", true, "");
t2_a00 = t2_a0.addLeafWithParams("PANASONIC Lumix DMC-FX01 black", "", "", true, "");
var price = new Array();
price[0] = 376;
t2_a00.setData(price);
t2_a00.setTooltip("376 €");
t2_a00.setJscriptCommand("calcPriceSelected();");
t2_a2 = t2_a.addLeafWithParams("Accessories", "", "", true, "");
t2_a20 = t2_a2.addLeafWithParams("Cases", "", "", true, "");
t2_a200 = t2_a20.addLeafWithParams("AQUAPAC Waterproof case - 410", "", "", true, "");
price = new Array();
price[0] = 25;
t2_a200.setData(price);
t2_a200.setTooltip("25 €");
t2_a200.setJscriptCommand("calcPriceSelected();");
t2_a21 = t2_a2.addLeafWithParams("Batteries", "", "", true, "");
t2_a210 = t2_a21.addLeafWithParams("Rechargeable", "", "", true, "");
t2_a2100 = t2_a210.addLeafWithParams("Panasonic CGA-S005E/1B battery", "", "", true, "");
price = new Array();
price[0] = 69;
t2_a2100.setData(price);
t2_a2100.setTooltip("69 €");
t2_a2100.setJscriptCommand("calcPriceSelected();");
t2_b = treeA.addLeafWithParams("Sound", "", "", true, "");
t2_b0 = t2_b.addLeafWithParams("MP3 Players", "", "", true, "");
t2_b00 = t2_b0.addLeafWithParams("SAMSUNG Multimedia player YP-T7FX 512 MB", "", "", true, "");
price = new Array();
price[0] = 138;
t2_b00.setData(price);
t2_b00.setTooltip("138 €");
t2_b00.setJscriptCommand("calcPriceSelected();");
treeA.drawTree();
treeA.addContextMenu(new Array("Remove selected items", "removeSelected()", "Add selected items", "addSelected()", "Add new items", "addNew()")); |
Again, we use the data property to hold the price of each item, and we also add a tool tip to allow the user to see the price for each item when she moves the mouse over that item. We also add a Javascript command (calcPriceSelected) to be executed each time the user clicks on one of the items in her shopping cart. The user can press and hold the Ctrl key to select multiple items. When calcPriceSelected is called, the price for all currently selected items in the cart is calculated.
We also added a custom context menu to allow the user to temporarily remove items from the cart, or add new items from the bottom tree.
The code for the product categories tree is much simpler, we only add some custom icons in some nodes and specify each node to load our products.php page with the category id as a parameter (e.g. products.php?catid=7) in the frame "main". The idea is that when the user selects a category from the bottom tree, the corresponding list of products will load in the frame "main" to allow her to select more products. Then she can use the "Add new items" menu option from the custom context menu of the top tree to add the items she selected in her cart.
The code which builds the product categories tree is the following:
Example: |
treeB = new LiknoTreeRoot("treeB", "shop", 0, 0, 212, 320, 16, false, "padding:4px; background-color:#f7f7f7; border:1px solid #000066;", "png");
treeB.setImagesDir("images/ldmt/16x16/crystalballs/");
treeB.addClass("de", "font-family:Tahoma; font-size:11px; color:#000066; background-color:; text-decoration:none; font-weight:normal; padding-left:4px; padding-right:4px;");
treeB.addClass("mo", "font-family:Tahoma; font-size:11px; text-decoration:underline; color:#FF6D15; padding-left:4px; padding-right:4px;");
treeB.addClass("se", "font-family:Tahoma; font-size:11px; font-weight: bold; color:#ff4a00; background-color:; padding-left:4px; padding-right:4px;");
treeB.setClickToExpand(true);
t2_a = treeB.addLeafWithParams("Cameras", "products.php?catid=1", "main", true, "");
t2_a0 = t2_a.addLeafWithParams("Digital cameras", "products.php?catid=2", "main", true, "images/cameras_digital.gif");
t2_a1 = t2_a.addLeafWithParams("Traditional cameras", "products.php?catid=3", "main", true, "images/cameras_traditional.gif");
t2_a2 = t2_a.addLeafWithParams("Accessories", "products.php?catid=4", "main", true, "");
t2_a20 = t2_a2.addLeafWithParams("Cases", "products.php?catid=5", "main", true, "");
t2_a21 = t2_a2.addLeafWithParams("Tripods", "products.php?catid=6", "main", true, "");
t2_a22 = t2_a2.addLeafWithParams("Strap", "products.php?catid=7", "main", true, "");
t2_a23 = t2_a2.addLeafWithParams("Camera connectivity", "products.php?catid=8", "main", false, "images/connectivity.gif");
t2_a24 = t2_a2.addLeafWithParams("Batteries", "products.php?catid=9", "main", true, "");
t2_a240 = t2_a24.addLeafWithParams("Rechargeable", "products.php?catid=10", "main", true, "images/batteries.gif");
t2_a241 = t2_a24.addLeafWithParams("Non rechargeable", "products.php?catid=11", "main", true, "");
t2_a25 = t2_a2.addLeafWithParams("Chargers", "products.php?catid=12", "main", true, "");
t2_b = treeB.addLeafWithParams("Sound", "products.php?catid=13", "main", true, "");
t2_b0 = t2_b.addLeafWithParams("HiFi Systems", "products.php?catid=14", "main", true, "");
t2_b1 = t2_b.addLeafWithParams("MP3 Players", "products.php?catid=15", "main", true, "");
t2_c = treeB.addLeafWithParams("IT products", "products.php?catid=16", "main", true, "");
t2_c0 = t2_c.addLeafWithParams("Computers", "products.php?catid=17", "main", true, "images/computers.gif");
t2_c1 = t2_c.addLeafWithParams("Printers", "products.php?catid=18", "main", true, "images/printers.gif");
t2_c2 = t2_c.addLeafWithParams("Peripherals", "products.php?catid=19", "main", true, "");
treeB.drawTree(); |
This is how our example looks like:
« |
