Author: mor
Date: Sat Jun 28 04:09:59 2008 New Revision: 672493 URL: http://svn.apache.org/viewvc?rev=672493&view=rev Log: Now panels are collapsible in One page checkout Modified: ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl ofbiz/trunk/applications/ecommerce/widget/OrderScreens.xml Modified: ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js URL: http://svn.apache.org/viewvc/ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js?rev=672493&r1=672492&r2=672493&view=diff ============================================================================== --- ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js (original) +++ ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js Sat Jun 28 04:09:59 2008 @@ -16,3 +16,124 @@ * specific language governing permissions and limitations * under the License. */ + +Event.observe(window, 'load', function() { + // Cart + Event.observe($('editShipping'), 'click', function() { + displayShippingPanel(); + }); + + Event.observe($('openCartPanel'), 'click', function() { + displayCartPanel(); + }); + + // Shipping + Event.observe($('editShippingOptions'), 'click', function() { + displayShippingOptionPanel(); + }); + + Event.observe($('openShippingPanel'), 'click', function() { + displayShippingPanel(); + }); + + // Shipping Options + Event.observe($('editBilling'), 'click', function() { + displayBillingPanel(); + }); + + Event.observe($('openShippingOptionPanel'), 'click', function() { + displayShippingOptionPanel(); + }); + + // Billing + Event.observe($('openBillingPanel'), 'click', function() { + displayBillingPanel(); + }); + + Event.observe($('openOrderSubmitPanel'), 'click', function() { + displayOrderSubmitPanel(); + }); +}); + +// Cart +function displayShippingPanel() { + if(!$('editShippingPanel').visible()) { + Effect.BlindDown('editShippingPanel', {duration: 0.5}); + Effect.BlindUp('editCartPanel', {duration: 0.5}); + Effect.BlindUp('editShippingOptionPanel', {duration: 0.5}); + Effect.BlindUp('editBillingPanel', {duration: 0.5}); + Effect.BlindUp('orderSubmitPanel', {duration: 0.5}); + + Effect.Fade('shippingSummaryPanel', {duration: 0.5}); + Effect.Appear('cartSummaryPanel', {duration: 0.5}); + Effect.Appear('shippingOptionSummaryPanel', {duration: 0.5}); + Effect.Appear('billingSummaryPanel', {duration: 0.5}); + //Effect.Appear('orderSubmitPanel', {duration: 0.5}); + } +} +function displayCartPanel() { + if(!$('editCartPanel').visible()) { + Effect.BlindDown('editCartPanel', {duration: 0.5}); + Effect.BlindUp('editShippingPanel', {duration: 0.5}); + Effect.BlindUp('editShippingOptionPanel', {duration: 0.5}); + Effect.BlindUp('editBillingPanel', {duration: 0.5}); + Effect.BlindUp('orderSubmitPanel', {duration: 0.5}); + + Effect.Fade('cartSummaryPanel', {duration: 0.5}); + Effect.Appear('shippingSummaryPanel', {duration: 0.5}); + Effect.Appear('shippingOptionSummaryPanel', {duration: 0.5}); + Effect.Appear('billingSummaryPanel', {duration: 0.5}); + //Effect.Appear('orderSubmitPanel', {duration: 0.5}); + } +} + +// Shipping +function displayShippingOptionPanel() { + if(!$('editShippingOptionPanel').visible()) { + Effect.BlindDown('editShippingOptionPanel', {duration: 0.5}); + Effect.BlindUp('editCartPanel', {duration: 0.5}); + Effect.BlindUp('editShippingPanel', {duration: 0.5}); + Effect.BlindUp('editBillingPanel', {duration: 0.5}); + Effect.BlindUp('orderSubmitPanel', {duration: 0.5}); + + Effect.Fade('shippingOptionSummaryPanel', {duration: 0.5}); + Effect.Appear('cartSummaryPanel', {duration: 0.5}); + Effect.Appear('shippingSummaryPanel', {duration: 0.5}); + Effect.Appear('billingSummaryPanel', {duration: 0.5}); + //Effect.Appear('orderSubmitPanel', {duration: 0.5}); + } +} + +// Billing +function displayBillingPanel() { + if(!$('editBillingPanel').visible()) { + Effect.BlindDown('editBillingPanel', {duration: 0.5}); + Effect.BlindUp('editCartPanel', {duration: 0.5}); + Effect.BlindUp('editShippingPanel', {duration: 0.5}); + Effect.BlindUp('editShippingOptionPanel', {duration: 0.5}); + Effect.BlindUp('orderSubmitPanel', {duration: 0.5}); + + Effect.Fade('billingSummaryPanel', {duration: 0.5}); + Effect.Appear('cartSummaryPanel', {duration: 0.5}); + Effect.Appear('shippingSummaryPanel', {duration: 0.5}); + Effect.Appear('shippingOptionSummaryPanel', {duration: 0.5}); + //Effect.Appear('orderSubmitPanel', {duration: 0.5}); + } +} + +// Order Submit +function displayOrderSubmitPanel() { + if(!$('orderSubmitPanel').visible()) { + Effect.BlindDown('orderSubmitPanel', {duration: 0.5}); + Effect.BlindUp('editCartPanel', {duration: 0.5}); + Effect.BlindUp('editShippingPanel', {duration: 0.5}); + Effect.BlindUp('editShippingOptionPanel', {duration: 0.5}); + Effect.BlindUp('editBillingPanel', {duration: 0.5}); + + //Effect.Fade('billingSummaryPanel', {duration: 0.5}); + Effect.Appear('cartSummaryPanel', {duration: 0.5}); + Effect.Appear('shippingSummaryPanel', {duration: 0.5}); + Effect.Appear('shippingOptionSummaryPanel', {duration: 0.5}); + Effect.Appear('billingSummaryPanel', {duration: 0.5}); + } +} \ No newline at end of file Modified: ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl URL: http://svn.apache.org/viewvc/ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl?rev=672493&r1=672492&r2=672493&view=diff ============================================================================== --- ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl (original) +++ ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl Sat Jun 28 04:09:59 2008 @@ -36,7 +36,7 @@ <form name="cartForm" id="cartForm" method="post" action="<@ofbizUrl></@ofbizUrl>"> Shopping cart information. </form> - <div><h3><span class="editStep"><a href="javascript:void(0);" id="editShippingAndPersonalDetail"><h3>Continue for step 2</h3></a></span></h3></div> + <div><h3><span class="editStep"><a href="javascript:void(0);" id="editShipping"><h3>Continue for step 2</h3></a></span></h3></div> </div> </div> @@ -52,23 +52,23 @@ <form name="shippingForm" id="shippingForm" action="<@ofbizUrl></@ofbizUrl>" method="post"> Shipping Detail. </form> - <div><h3><span class="editStep"><a href="javascript:void(0);" id="editShipmentOptions"><h3>Continue for step 3</h3></a></span></h3></div> + <div><h3><span class="editStep"><a href="javascript:void(0);" id="editShippingOptions"><h3>Continue for step 3</h3></a></span></h3></div> </div> </div> - <div id="shipmentOptionPanel" class="screenlet"> - <div class="screenlet-header"><div class="boxhead" align="left">Step 3: Shipment Options</div></div> - <div id="shipmentOptionSummaryPanel"> - <div align="left" style="width: auto; padding: 10px 40px 30px 40px;"><a href="javascript:void(0);" id="openShipmentOptionPanel"><h3>Click here to edit</h3></a></div> - <div id="shipmentOptionSummary" style="display: none;"> + <div id="shippingOptionPanel" class="screenlet"> + <div class="screenlet-header"><div class="boxhead" align="left">Step 3: Shipping Options</div></div> + <div id="shippingOptionSummaryPanel"> + <div align="left" style="width: auto; padding: 10px 40px 30px 40px;"><a href="javascript:void(0);" id="openShippingOptionPanel"><h3>Click here to edit</h3></a></div> + <div id="shippingOptionSummary" style="display: none;"> Shipping Methods summary. </div> </div> - <div id="editShipmentOptionPanel" style="display: none;"> - <form name="shipmentOptionForm" id="shipmentOptionForm" action="<@ofbizUrl></@ofbizUrl>" method="post"> + <div id="editShippingOptionPanel" style="display: none;"> + <form name="shippingOptionForm" id="shippingOptionForm" action="<@ofbizUrl></@ofbizUrl>" method="post"> Shipping Methods. </form> - <div><h3><span class="editStep"><a href="javascript:void(0);" id="editBillingAndPayment"><h3>Continue for step 4</h3></a></span></h3></div> + <div><h3><span class="editStep"><a href="javascript:void(0);" id="editBilling"><h3>Continue for step 4</h3></a></span></h3></div> </div> </div> @@ -84,7 +84,7 @@ <form name="billingForm" id="billingForm" class="theform" action="<@ofbizUrl></@ofbizUrl>" method="post"> Billing and Payment Detail. </form> - <div><h3><span class="editStep"><a href="javascript:void(0);" id=""><h3>Continue for step 5</h3></a></span></h3></div> + <div><h3><span class="editStep"><a href="javascript:void(0);" id="openOrderSubmitPanel"><h3>Continue for step 5</h3></a></span></h3></div> </div> </div> Modified: ofbiz/trunk/applications/ecommerce/widget/OrderScreens.xml URL: http://svn.apache.org/viewvc/ofbiz/trunk/applications/ecommerce/widget/OrderScreens.xml?rev=672493&r1=672492&r2=672493&view=diff ============================================================================== --- ofbiz/trunk/applications/ecommerce/widget/OrderScreens.xml (original) +++ ofbiz/trunk/applications/ecommerce/widget/OrderScreens.xml Sat Jun 28 04:09:59 2008 @@ -612,9 +612,11 @@ <section> <actions> <script location="component://ecommerce/webapp/ecommerce/WEB-INF/actions/cart/showcart.bsh"/> + <set field="layoutSettings.javaScripts[+0]" value="/ecommerce/images/checkoutProcess.js" global="true"/> + <set field="layoutSettings.javaScripts[+0]" value="/images/prototypejs/scriptaculous.js" global="true"/> </actions> <widgets> - <decorator-screen name="quickAnonCheckoutDecorator"> + <decorator-screen name="main-decorator" location="${parameters.mainDecoratorLocation}"> <decorator-section name="body"> <platform-specific><html><html-template location="component://ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl"/></html></platform-specific> </decorator-section> |
Free forum by Nabble | Edit this page |