Re: svn commit: r690255 - in /ofbiz/trunk/applications/ecommerce: config/EcommerceUiLabels.xml webapp/ecommerce/images/checkoutProcess.js webapp/ecommerce/order/OnePageCheckoutProcess.ftl

[Adrian Crum]

Vikas,

One suggestion: Instead of hard-coding the Effect durations, use global
JS variables - so that the timings can be adjusted in one place instead
of many.

In selectall.js:

var effectFadeDuration = 0.1;
var effectBlindsDuration = 0.5;

In ftl file:

Effect.Fade('editShippingOptions', {duration: effectFadeDuration});
Effect.BlindUp('editShippingOptionPanel', {duration: effectBlindsDuration});

-Adrian

[hidden email] wrote:

> Author: mor
> Date: Fri Aug 29 06:46:49 2008
> New Revision: 690255
>
> URL: http://svn.apache.org/viewvc?rev=690255&view=rev
> Log:
> Added a new label "Please wait" on one page panels which appears when a user click on continue to step # link.
> Panels of one page now show - hide in much smoother way.
>
> Thanks to Brajesh Patel for this work.
>
>
> Modified:
>     ofbiz/trunk/applications/ecommerce/config/EcommerceUiLabels.xml
>     ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js
>     ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl
>
> Modified: ofbiz/trunk/applications/ecommerce/config/EcommerceUiLabels.xml
> URL: http://svn.apache.org/viewvc/ofbiz/trunk/applications/ecommerce/config/EcommerceUiLabels.xml?rev=690255&r1=690254&r2=690255&view=diff
> ==============================================================================
> --- ofbiz/trunk/applications/ecommerce/config/EcommerceUiLabels.xml (original)
> +++ ofbiz/trunk/applications/ecommerce/config/EcommerceUiLabels.xml Fri Aug 29 06:46:49 2008
> @@ -2507,6 +2507,9 @@
>          <value xml:lang="it">password inviata a te</value>
>          <value xml:lang="th">ส่งรหัสผ่านถึงคุณ</value>
>      </property>
> +    <property key="EcommercePleaseWait">
> +        <value xml:lang="en">Please wait</value>
> +    </property>
>      <property key="EcommercePointsFrom">
>          <value xml:lang="en">Points From</value>
>          <value xml:lang="es">puntos de</value>
>
> 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=690255&r1=690254&r2=690255&view=diff
> ==============================================================================
> --- ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js (original)
> +++ ofbiz/trunk/applications/ecommerce/webapp/ecommerce/images/checkoutProcess.js Fri Aug 29 06:46:49 2008
> @@ -29,6 +29,8 @@
>      var validateBill = new Validation('billingForm', {immediate: true, onSubmit: false});    
>      Event.observe($('editShipping'), 'click', function() {
>          if (validateCart.validate()) {
> +            Effect.Fade('editShipping', {duration: 0.1});
> +            Effect.Appear('processingShipping', {duration: 0.1});
>              displayShippingPanel();
>              isCartStepValidate = true;
>          }
> @@ -42,6 +44,8 @@
>      Event.observe($('editShippingOptions'), 'click', function() {
>          if (isCartStepValidate) {
>              if (validateShip.validate()) {
> +                Effect.Fade('editShippingOptions', {duration: 0.1});
> +                Effect.Appear('processingShippingOptions', {duration: 0.1});
>                  processShippingAddress();
>                  displayShippingOptionPanel();
>                  isShipStepValidate = true;
> @@ -61,6 +65,8 @@
>      Event.observe($('editBilling'), 'click', function() {
>          if (isCartStepValidate && isShipStepValidate) {
>              if (validateShipOption.validate()) {
> +                Effect.Fade('editBilling', {duration: 0.1});
> +                Effect.Appear('processingBilling', {duration: 0.1});
>                  setShippingOption();
>                  displayBillingPanel();
>                  isShipOptionStepValidate = true;
> @@ -84,6 +90,8 @@
>      Event.observe($('openOrderSubmitPanel'), 'click', function() {
>          if (isCartStepValidate && isShipStepValidate && isShipOptionStepValidate) {
>              if (validateBill.validate()) {
> +                Effect.Fade('openOrderSubmitPanel', {duration: 0.1});
> +                Effect.Appear('processingOrderSubmitPanel', {duration: 0.1});
>                  processBillingAndPayment();
>                  displayOrderSubmitPanel();
>                  isBillStepValidate = true;
> @@ -128,30 +136,39 @@
>  function displayShippingPanel() {
>      if (!$('editShippingPanel').visible()) {
>          Effect.BlindDown('editShippingPanel', {duration: 0.5});
> -        Effect.BlindUp('editCartPanel', {duration: 0.5});
> +        Effect.Fade('editCartPanel', {duration: 0.3});
>          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('cartSummaryPanel', {duration: 0.3});
>          Effect.Appear('shippingOptionSummaryPanel', {duration: 0.5});
>          Effect.Appear('billingSummaryPanel', {duration: 0.5});
> +        Effect.Appear('editShippingOptions', {duration: 0.3});
> +        Effect.Fade('editShipping', {duration: 0.5});
> +        Effect.Fade('editBilling', {duration: 0.5});
> +        Effect.Fade('openOrderSubmitPanel', {duration: 0.3});
> +        Effect.Fade('processingShipping', {duration: 0.9});
>          //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.Fade('editShippingPanel', {duration: 0.3});
> +        Effect.Fade('editShippingOptionPanel', {duration: 0.5});
>          Effect.BlindUp('editBillingPanel', {duration: 0.5});
>          Effect.BlindUp('orderSubmitPanel', {duration: 0.5});
>  
> -        Effect.Fade('cartSummaryPanel', {duration: 0.5});
> +        Effect.Fade('cartSummaryPanel', {duration: 0.3});
>          Effect.Appear('shippingSummaryPanel', {duration: 0.5});
>          Effect.Appear('shippingOptionSummaryPanel', {duration: 0.5});
>          Effect.Appear('billingSummaryPanel', {duration: 0.5});
> +        Effect.Appear('editShipping', {duration: 0.1});
> +        Effect.Fade('editShippingOptions', {duration: 0.3});///
> +        Effect.Fade('editBilling', {duration: 0.3});
> +        Effect.Fade('openOrderSubmitPanel', {duration: 0.3});
>          //Effect.Appear('orderSubmitPanel', {duration: 0.5});
>      }
>  }
> @@ -170,6 +187,11 @@
>          Effect.Appear('cartSummaryPanel', {duration: 0.5});
>          Effect.Appear('shippingSummaryPanel', {duration: 0.5});
>          Effect.Appear('billingSummaryPanel', {duration: 0.5});
> +        Effect.Appear('editBilling', {duration: 0.3});
> +        Effect.Fade('editShipping', {duration: 0.3});
> +        Effect.Fade('processingShippingOptions', {duration: 0.9});
> +        Effect.Fade('openOrderSubmitPanel', {duration: 0.3});
> +        Effect.Fade('editShippingOptions', {duration: 0.3});
>          //Effect.Appear('orderSubmitPanel', {duration: 0.5});
>      }
>      setDataInShippingCompleted();
> @@ -189,6 +211,11 @@
>          Effect.Appear('cartSummaryPanel', {duration: 0.5});
>          Effect.Appear('shippingSummaryPanel', {duration: 0.5});
>          Effect.Appear('shippingOptionSummaryPanel', {duration: 0.5});
> +        Effect.Appear('openOrderSubmitPanel', {duration: 0.3});
> +        Effect.Fade('editShipping', {duration: 0.3});
> +        Effect.Fade('processingBilling', {duration: 1.9});
> +        Effect.Fade('editShippingOptions', {duration: 0.3});
> +        Effect.Fade('editBilling', {duration: 0.3});
>          //Effect.Appear('orderSubmitPanel', {duration: 0.5});
>      }
>      setDataInShippingOptionCompleted();
> @@ -210,6 +237,7 @@
>          Effect.Appear('billingSummaryPanel', {duration: 0.5});
>          Effect.Fade('processingOrderButton', {duration: 0.5});
>          Effect.Appear('processOrderButton', {duration: 0.5});
> +        Effect.Fade('processingOrderSubmitPanel', {duration: 0.9});
>      }
>      setDataInBillingCompleted();
>  }
>
> 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=690255&r1=690254&r2=690255&view=diff
> ==============================================================================
> --- ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl (original)
> +++ ofbiz/trunk/applications/ecommerce/webapp/ecommerce/order/OnePageCheckoutProcess.ftl Fri Aug 29 06:46:49 2008
> @@ -203,7 +203,10 @@
>                  </tbody>
>                </table>
>              </form>
> -            <div align="right"><h3><span><a class="buttontext" href="javascript:void(0);" id="editShipping">${uiLabelMap.CommonContinue} ${uiLabelMap.CommonFor} ${uiLabelMap.EcommerceStep} 2</a></span></h3></div>              
> +          </div>
> +          <div align="right">
> +            <h3><span><a class="buttontext" href="javascript:void(0);" id="editShipping">Continue for step 2</a></span></h3>
> +            <h3><span><a class="buttontext" style="display: none" href="javascript:void(0);" id="processingShipping">${uiLabelMap.EcommercePleaseWait}....</a></span></h3>
>            </div>
>          </div>
>          
> @@ -347,7 +350,10 @@
>                  </tr>
>                </table>
>              </form>
> -            <div align="right"><h3><span><a class="buttontext" href="javascript:void(0);" id="editShippingOptions">${uiLabelMap.CommonContinue} ${uiLabelMap.CommonFor} ${uiLabelMap.EcommerceStep} 3</a></span></h3></div>              
> +          </div>
> +          <div align="right">
> +            <h3><span><a class="buttontext" style="display:none" href="javascript:void(0);" id="editShippingOptions">Continue for step 3</a></span></h3>
> +            <h3><span><a class="buttontext" style="display:none" href="javascript:void(0);" id="processingShippingOptions">${uiLabelMap.EcommercePleaseWait}....</a></span></h3>
>            </div>
>          </div>
>            
> @@ -386,7 +392,10 @@
>                  </tr>
>                </table>
>              </form>
> -            <div align="right"><h3><span><a class="buttontext" href="javascript:void(0);" id="editBilling">${uiLabelMap.CommonContinue} ${uiLabelMap.CommonFor} ${uiLabelMap.EcommerceStep} 4</a></span></h3></div>
> +          </div>
> +          <div align="right">
> +            <h3><span><a class="buttontext" style="display:none" href="javascript:void(0);" id="editBilling">Continue for step 4</a></span></h3>
> +            <h3><span><a class="buttontext" style="display:none" href="javascript:void(0);" id="processingBilling">${uiLabelMap.EcommercePleaseWait}....</a></span></h3>
>            </div>
>          </div>
>                  
> @@ -584,7 +593,10 @@
>                  </tr>
>                </table>
>              </form>
> -            <div align="right"><h3><span><a class="buttontext" href="javascript:void(0);" id="openOrderSubmitPanel">${uiLabelMap.CommonContinue} ${uiLabelMap.CommonFor} ${uiLabelMap.EcommerceStep} 5</a></span></h3></div>
> +          </div>
> +          <div align="right">
> +            <h3><span><a class="buttontext" href="javascript:void(0);" style="display: none;" id="openOrderSubmitPanel">Continue for step 5</a></span></h3>
> +            <h3><span><a class="buttontext" href="javascript:void(0);" style="display: none;" id="processingOrderSubmitPanel">${uiLabelMap.EcommercePleaseWait}....</a></span></h3>
>            </div>
>          </div>
>                        
>
>
>