Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Relocating Submit My Order Button In Checkout Rate Topic   - - - - -

 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 954 posts

Posted 14 November 2017 - 11:55 AM #1

I would like move up the SUBMIT MY ORDER button on my Checkout page.

See screenshot below

 

submitmyorderbutton.png

 

What part of the code and which file should I change ?


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 17608 posts

Posted 14 November 2017 - 01:30 PM #2

design/themes/THEME/templates/views/checkout/components/final_section.tpl


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 954 posts

Posted 14 November 2017 - 01:47 PM #3

Thanks so much.

PS did you guys not have an addon that allows you to pull content from a page and put that content into a block ?


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 954 posts

Posted 14 November 2017 - 02:01 PM #4

design/themes/THEME/templates/views/checkout/components/final_section.tpl

 

I have digging in the file final_section.tpl and see this line of code:

{$show_place_order = false}

{if $cart|fn_allow_place_order:$auth}
    {$show_place_order = true}
{/if}

{if $recalculate && !$cart.amount_failed}
    {$show_place_order = true}
{/if}

{if $show_place_order}

    <div class="clearfix {if !$is_payment_step} checkout__block ty-checkout-block-terms{/if}">
        {hook name="checkout:final_section_customer_notes"}
            {include file="views/checkout/components/customer_notes.tpl"}
        {/hook}
        
        {if !$suffix}
            {assign var="suffix" value=""|uniqid}
        {/if}
        {include file="views/checkout/components/terms_and_conditions.tpl" suffix=$suffix}
    </div>

    <input type="hidden" name="update_steps" value="1" />
    
    {if !$is_payment_step}
        <div class="clearfix">
            <div class="ty-checkout-buttons cm-checkout-place-order-buttons">
                {include file="buttons/place_order.tpl" but_text=__("submit_my_order") but_name="dispatch[checkout.place_order]" but_id="place_order"}
            </div>

            {if $recalculate && $cart.shipping_required}
                <input type="hidden" name="next_step" value="step_two" />
                <div class="ty-checkout-buttons cm-checkout-recalculate-buttons hidden">
                    {include file="buttons/button.tpl" but_meta="ty-btn__secondary cm-checkout-recalculate" but_name="dispatch[checkout.update_steps]" but_text=__("recalculate_shipping_cost")}
                </div>
            {/if}
        </div>
    {/if}

{else}

    {if $cart.shipping_failed}
        <p class="ty-error-text ty-center">{__("text_no_shipping_methods")}</p>
    {/if}

    {if $cart.amount_failed}
        <div class="checkout__block">
            <p class="ty-error-text">{__("text_min_order_amount_required")}&nbsp;<strong>{include file="common/price.tpl" value=$settings.General.min_order_amount}</strong></p>
        </div>
    {/if}

    <div class="ty-checkout-buttons">
        {include file="buttons/continue_shopping.tpl" but_href=$continue_url|fn_url but_role="action"}
    </div>
    
{/if}

I see the line of code between line nr 25 and 31 that you are referring to.
 

 {if !$is_payment_step}
        <div class="clearfix">
            <div class="ty-checkout-buttons cm-checkout-place-order-buttons">
                {include file="buttons/place_order.tpl" but_text=__("submit_my_order") but_name="dispatch[checkout.place_order]" but_id="place_order"}
            </div>

How far up should I move this line of code in this document ?

 


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 17608 posts

Posted 15 November 2017 - 05:46 AM #5

I have digging in the file final_section.tpl and see this line of code:

{$show_place_order = false}

{if $cart|fn_allow_place_order:$auth}
    {$show_place_order = true}
{/if}

{if $recalculate && !$cart.amount_failed}
    {$show_place_order = true}
{/if}

{if $show_place_order}

    <div class="clearfix {if !$is_payment_step} checkout__block ty-checkout-block-terms{/if}">
        {hook name="checkout:final_section_customer_notes"}
            {include file="views/checkout/components/customer_notes.tpl"}
        {/hook}
        
        {if !$suffix}
            {assign var="suffix" value=""|uniqid}
        {/if}
        {include file="views/checkout/components/terms_and_conditions.tpl" suffix=$suffix}
    </div>

    <input type="hidden" name="update_steps" value="1" />
    
    {if !$is_payment_step}
        <div class="clearfix">
            <div class="ty-checkout-buttons cm-checkout-place-order-buttons">
                {include file="buttons/place_order.tpl" but_text=__("submit_my_order") but_name="dispatch[checkout.place_order]" but_id="place_order"}
            </div>

            {if $recalculate && $cart.shipping_required}
                <input type="hidden" name="next_step" value="step_two" />
                <div class="ty-checkout-buttons cm-checkout-recalculate-buttons hidden">
                    {include file="buttons/button.tpl" but_meta="ty-btn__secondary cm-checkout-recalculate" but_name="dispatch[checkout.update_steps]" but_text=__("recalculate_shipping_cost")}
                </div>
            {/if}
        </div>
    {/if}

{else}

    {if $cart.shipping_failed}
        <p class="ty-error-text ty-center">{__("text_no_shipping_methods")}</p>
    {/if}

    {if $cart.amount_failed}
        <div class="checkout__block">
            <p class="ty-error-text">{__("text_min_order_amount_required")}&nbsp;<strong>{include file="common/price.tpl" value=$settings.General.min_order_amount}</strong></p>
        </div>
    {/if}

    <div class="ty-checkout-buttons">
        {include file="buttons/continue_shopping.tpl" but_href=$continue_url|fn_url but_role="action"}
    </div>
    
{/if}

I see the line of code between line nr 25 and 31 that you are referring to.
 

 {if !$is_payment_step}
        <div class="clearfix">
            <div class="ty-checkout-buttons cm-checkout-place-order-buttons">
                {include file="buttons/place_order.tpl" but_text=__("submit_my_order") but_name="dispatch[checkout.place_order]" but_id="place_order"}
            </div>

How far up should I move this line of code in this document ?

 

You should place it before

{include file="views/checkout/components/customer_notes.tpl"}

Thanks so much.

PS did you guys not have an addon that allows you to pull content from a page and put that content into a block ?

 

Sure

 

https://www.ecom-lab...cks-add-on.html


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 954 posts

Posted 15 November 2017 - 07:44 PM #6

I tried what you suggested and played around with it but without the desired results.

But let me explain why I was playing with the idea of relocating the SUBMIT MY ORDER button. It is related to other ecommerce platforms that have the finalize my order button closer to the top of the final checkout phase. 

We noticed that many of our customers have the expectation that the finalize my order button is either more closer to the top of the site as seen in this one step checkout sample.

 

See screenshot

 

2017-11-15 20_41_25-One Step Checkout.png

 

 


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 17608 posts

Posted 16 November 2017 - 05:33 AM #7

So did you change the location? What result did you receive?


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 954 posts

Posted 28 November 2017 - 11:21 AM #8

So did you change the location? What result did you receive?

 

The layout broke out and everything on the left was dropped below. It was a mess so I contacted Louis from CSCartRocks to amend our one step/one page checkout which I had not yet installed.


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 17608 posts

Posted 28 November 2017 - 01:12 PM #9

Thank you for the information. Looks like some tags were not closed correctly


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    CS-Cart RU                         24500 руб.
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      CS-Cart RU + UniTheme    36000 руб.


 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 954 posts

Posted 30 November 2017 - 09:24 PM #10

Thank you for the information. Looks like some tags were not closed correctly

 

Most likely not indeed but since I had to tackle a lot more things I needed a quick fix yet.. also solution for the longterm.

I have my own shortlist of cs cart service providers and although you guys are always on top my list this one I felt needed to be done by the company that we got the one step checkout module from.
 


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3157 posts

Posted 01 December 2017 - 06:51 PM #11

70% of visitors us smartphones. Is button position actually important

 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 954 posts

Posted 02 December 2017 - 09:20 AM #12

70% of visitors us smartphones. Is button position actually important

 

I agree but even on tablets and yes smartphones.

 

Checkout our new layout Darius, courtesy of CSCartRocks

 

newsecure-checkoutlayout.png

 

 


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3157 posts

Posted 02 December 2017 - 09:54 AM #13

Sure this looks nice, BUT

sometimes I get orders consisting from 20 - 50 products, so where button would appear then ?

 

I have made big research regarding checkout modification, checked all addons for that in market, but eventually decided not to change anything.

 

I like checkout experience in shopify or ebay.

 

 

I wish one day cs-cart makes checkout steps or product description elements as separate blocks, so it could be fitted anywhere you want.



 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 954 posts

Posted 02 December 2017 - 11:23 AM #14

Sure this looks nice, BUT

sometimes I get orders consisting from 20 - 50 products, so where button would appear then ?

 

I have made big research regarding checkout modification, checked all addons for that in market, but eventually decided not to change anything.

 

I like checkout experience in shopping or ebay.

 

 

I wish one day cs-cart makes checkout steps or product description elements as separate blocks, so it could be fitted anywhere you want.

 

Louis of CSCartRocks is working on that right now as we speak.


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3157 posts

Posted 02 December 2017 - 11:38 AM #15

Added just 18 products, as you can see submit button is much higher then the end of the products list, so default checkout is better at this point.

Attached Thumbnails

  • checkout2.jpg


 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3157 posts

Posted 02 December 2017 - 11:55 AM #16

Here, check proper really ONE page checkout. All elements fit in to screen. Confirm and pay is floating if you scroll down, but there is no need since all fits nicely

Attached Thumbnails

  • ebay.jpg


 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 954 posts

Posted 02 December 2017 - 01:08 PM #17

Added just 18 products, as you can see submit button is much higher then the end of the products list, so default checkout is better at this point.

 

Yes but that is not an honest comparison as the default checkout is a multi not a one step one page checkout. But I see the merits, However in this default case you offer just a few payment option, we more multiple.(perhaps too many)


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 954 posts

Posted 02 December 2017 - 01:09 PM #18

Here, check proper really ONE page checkout. All elements fit in to screen. Confirm and pay is floating if you scroll down, but there is no need since all fits nicely

 

Okay but here you have only ONE item, you spoke of multiple items


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays


 
  • Darius
  • Douchebag
  • Members
  • Join Date: 20-Apr 08
  • 3157 posts

Posted 02 December 2017 - 01:32 PM #19

Okay but here you have only ONE item, you spoke of multiple items


I mean in ebay submit order is not affected by product amount. You do not need to do any scrolling down

 
  • Mongoose
  • Senior Member
  • Members
  • Join Date: 08-Mar 13
  • 954 posts

Posted 02 December 2017 - 07:19 PM #20

I mean in ebay submit order is not affected by product amount. You do not need to do any scrolling down

 

I agree with that assumption. We will be working on that


two V4.6.2 and one  V4.2.4 - hedonist working on Sundays