Slim Checkout for BS

[♥raiwa]

Slim-Checkout

Common opinion is that the checkout process should be as "slim" as possible. This means to hide all page elements which are not strict necessary to show to the customer a simple clean layout, so nothing disturbs his attention from the purchase process.

This add-on allows to do it by simple settings in a Header Tag module.

Git Hub Repository: https://github.com/raiwa/Slim-Checkout/tree/master

What it does:
- allows to hide elements on checkout pages
    - optional hide on checkout pages (checkout_shipping.php, checkout_payment.phpheckout_confirmation.php and checkout_success)
    - optional hide also on shopping_cart.php
    - select each group to hide (navbar, header area, boxes, footer and footer suffix
    
Installation:
  - copy all new files
  - install and adjust Slim Checkout Header Tag

 

testing , Bug reports and suggestions very welcome.

 

rgds

Rainer

[LeeFoster]

I'll start a clean test environment later to look at this.

[burt]

Really nice idea to use an extender for the oscTemplate class.

I did something similar (in fact also using a HT module) for a shopowner, but did not think to extend the class.

[♥raiwa]

Thank You @burt,

Some ideas to improve the actual version:

1. Page selection:

Option A:

• add setting 3+4 for each group:
  • 0 = Do Not Hide
  • 1 = Hide on Checkout Pages
  • 2 = Hide on Shopping Cart and Checkout Pages
  • 3 = Hide on Checkout Pages except Checkout Success
  • 4 = Hide on Shopping Cart and Checkout Pages except Checkout Success

Option B:

• use coma separated list to flag pages 0 (hide) or 1 (show)
  • 1. digit = shopping cart
  • 2. digit = checkout_shipping
  • 3. digit = checkout payment
  • 4. digit = checkout confirmation
  • 5. digit = checkout success
• Example: 1,0,0,0,1
  • Hide on checkout shipping, payment and confirmation, shows on shopping cart and checkout success

2. Add configuration setting for the content width if side column boxes are hidden

• Maybe not all store owners want to stretch the main content to full width even the side column boxes are hidden.

3. Integrate the class extension into the Header Tag module.

• Pro: one file less
• Contra: none known for me

Thoughts, discussion?

Edited October 19, 2017 by raiwa

[ArtcoInc]

@raiwa

 

2 hours ago, raiwa said:

1. Page selection:

Option A:

• add setting 3+4 for each group:
  • 0 = Do Not Hide
  • 1 = Hide on Checkout Pages
  • 2 = Hide on Shopping Cart and Checkout Pages
  • 3 = Hide on Checkout Pages except Checkout Success
  • 4 = Hide on Shopping Cart and Checkout Pages except Checkout Success

Option B:

• use coma separated list to flag pages 0 (hide) or 1 (show)
  • 1. digit = shopping cart
  • 2. digit = checkout_shipping
  • 3. digit = checkout payment
  • 4. digit = checkout confirmation
  • 5. digit = checkout success
• Example: 1,0,0,0,1
  • Hide on checkout shipping, payment and confirmation, shows on shopping cart and checkout success

I like Option B. It gives the shop owner greater control over how things display.

In fact, you have check-boxes in the Admin to allow the shop owner to select which to use, and 'hide' the coma separated list ... making things even easier and cleaner.

 

2 hours ago, raiwa said:

2. Add configuration setting for the content width if side column boxes are hidden

• Maybe not all store owners want to stretch the main content to full width even the side column boxes are hidden.

I'm working on a shop where I've written some 'blank column' boxes, which basically create empty side columns. With no other content in the side columns, this creates a clean space on each side of the main content. I would prefer to have the option to be able to keep this clean space, and not expand the main content to full width.

 

2 hours ago, raiwa said:

3. Integrate the class extension into the Header Tag module.

• Pro: one file less
• Contra: none known for me

Sounds good to me.

Thank you for your contribution!

Malcolm

Edited October 19, 2017 by ArtcoInc

[♥raiwa]

@wHiTeHaT

It is addressed to page areas, not single elements. But, if people feel the need to hide left or right column separate, it can be added.

Edited October 19, 2017 by raiwa

[♥raiwa]

@wHiTeHaT,

In my opinion addressing each individual module would be overengineered for the checkout process cleaning up purpose.

If someone needs to control one individual module, it can be done via the traditional if ($PHP_SELF = 'desired page') "enabled = false" method. I guess it is a very small minority who needs it.

But, discussion is open, opinions very welcome.

EDIT: This could be much better and easier done adding a configuration option in each module => core.

Edited October 19, 2017 by raiwa

[Omar_one]

@raiwa Installed and tested .. It worked good and nicely.

but  Hide Side Column Boxes not working well , if I hide the boxes  and if change back to 0 it is not shown the boxes again

and Hide Side Column Boxes will hide the boxes from the whole shop from all the pages
nice addon

Omar

Edited October 19, 2017 by Omar_one

[♥raiwa]

@Omar_one,

 

Thanks for reporting this. Last change screwed it up.

Please find in the class file:

        if ( ((strpos($group, 'boxes_column') !== false) || ((MODULE_HEADER_TAGS_SLIM_CHECKOUT_BOXES == '0' || strpos($this->_page, 'checkout') !== false)) || (MODULE_HEADER_TAGS_SLIM_CHECKOUT_BOXES == '2' && $this->_page == 'shopping_cart.php')) ) {
          $this->_hide_columns = true;
        }  

and change to:

        if ( ((MODULE_HEADER_TAGS_SLIM_CHECKOUT_BOXES == '0' || strpos($this->_page, 'checkout') !== false)) || (MODULE_HEADER_TAGS_SLIM_CHECKOUT_BOXES == '2' && $this->_page == 'shopping_cart.php') ) {
          $this->_hide_columns = true;
        }

or just replace the calss file from git hub. I updated it.

 

[Omar_one]

@raiwa still same

 

 

Edited October 19, 2017 by Omar_one

[♥raiwa]

@Omar_one,

Sorry, you are right.

It works now. Had to move the hide check out of the class constructor.

Please replace the class file from git hub repository.

[Omar_one]

@raiwa   Working well

Omar

[frankl]

I remember proposing this idea last year, and you've executed it beautifully Rainer. Something like this should be core in an ecommerce store, not an addon.

[♥Tsimi]

@raiwa

Well done!

We appreciate all the hard work you put into your addons and projects but please do me a favor and don't work too much/hard. In the past I/we  have lost 2 very good friends from this forum and the last thing I remember was, they were working hard on some addons/projects and it could have been just mere coincidence or just fact that they overworked themselfs till their body gave up. You maintain multiple addons, you work with me on the Point and Rewards module, Sloppy words cleaner and, and, and....

Long story short, watch your health and take enough rest so that we will be able to enjoy you and your work for many years to come.

That goes for all of you out there. osC is nice and all but it won't bring you anything if you work yourself to death.

Now back to work....

[discxpress]

@raiwa

This addon takes aim at one of the issues I recently posted about why some shoppers abandon carts because of distraction. I don't know how long you were contemplating this addon, you delivered at the right time. We're approaching the holiday shopping season. Now maybe after you get some rest and relaxation a nice, clean, expanding/contracting one-page checkout needs to be looked at. 

I'm about to install this now.

[discxpress]

@raiwa

I've tested this out and I love it!

One question comes to mind: How does the shopper navigate to the shopping cart to make adjustments if the navbar and headers are hidden?

Especially on mobile screens which would cause the shopper to tap the back key several times. That could be annoying.

I would suggest a  floating "View Cart" button to reveal a popup shopping cart or go back to shopping cart page. Maybe a breadcrumb in case they want to add another product. 

Thanks

Edited October 20, 2017 by discxpress

[♥raiwa]

6 hours ago, Tsimi said:

Long story short, watch your health and take enough rest so that we will be able to enjoy you and your work for many years to come.

@Tsimi,

Thank you very much for the advice. I'm taking care of my health, do not worry. I'm breaking regularly my coding hours by long walks trhough the beautiful nature surrounding my place, cooking, handcrafting jewellery, diy woodworking projects and much more. Times of letting things stressing me have past since years.

This project was born by using manual hiding modules during checkout in my wife's 2.3.4 BS store since the beginning 2 years ago. I just was curious how to do it in a more simple way and first looked into template_top and bottom where the modules are included. Then i found no way to control them there without core changes and began to dig into the osc_template class to find out how to condition the module inclusions. It was palaying around to discover things rather than a working goal.

[♥raiwa]

1 hour ago, discxpress said:

Now maybe after you get some rest and relaxation a nice, clean, expanding/contracting one-page checkout needs to be looked at.

@discxpress, thanks for your try and feedback.

Sorry, but I'm not a friend of one page checkouts. I updated an old on time ago for a 2.3.4 upgrading project and got it to work for that store, but some other shipping or payment modules for sure can brake the code. Also it is very slow loading(lot of javascript) for my taste. I realyy prefer a simple, clean and fast 2-3 step checkout.

I send you a PM about.

45 minutes ago, discxpress said:

One question comes to mind: How does the shopper navigate to the shopping cart to make adjustments if the navbar and headers are hidden?

Especially on mobile screens which would cause the shopper to tap the back key several times. That could be annoying.

It is not intended to hide all areas. It is supposed to be used alternative, hide or navabar or header modules, not both.

Each store is setup on different way. Most will have the important links like account and shopping cart in the navbar and will need to keep it showing. But some may use the account and shopping cart buttons in the header or something else, so these stores may wish to hide the navbar, but keep the header area showing.

I also had already the idea to exclude the store logo and keep it always showing even the header area is hidden. I believe no one would like to hide the store logo never and it keeps at least a link to the home page available.

rgds

Rainer

[♥raiwa]

11 hours ago, frankl said:

I remember proposing this idea last year, and you've executed it beautifully Rainer. Something like this should be core in an ecommerce store, not an addon.

Thank you @frankl

[discxpress]

59 minutes ago, raiwa said:

It is not intended to hide all areas. It is supposed to be used alternative, hide or navabar or header modules, not both.

I understand your point. Keeping a logo would be nice. Looking at it in mobile if I hide the navbar there is no way to navigate to shopping cart for changes. Links to reviews, new products, etc are not needed during checkout. The goal I think is to remove access to other parts of the store to attempt to avoid distraction during the checkout process. 

In my opinion, I think all that is needed to be accessible during checkout is logo, shopping cart and contact us.

[cupidare]

This is a really nice addon, and it works without any trouble here...

one question: what do you think about including login.php to the hiding options? It's just if one decided to order the cart there shouldn't be any anoying stuff... 

Thank you for sharing this module

[♥raiwa]

10 minutes ago, cupidare said:

one question: what do you think about including login.php to the hiding options? It's just if one decided to order the cart there shouldn't be any anoying stuff...

@cupidare, thank you for the feedback,

Mhm, login is also used apart of the checkout process. Some customer log in before checkout or just to manage their account, see their order status, available points (points and redeem) write reviews ...wholesale customers to see their prices, conditions,

[♥raiwa]

2 hours ago, discxpress said:

In my opinion, I think all that is needed to be accessible during checkout is logo, shopping cart and contact us.

I would say, even contact us is not needed during checkout.

[burt]

I'd suggest this (and please note that I have not thought to through to conclusion and therefore the whole idea might be unworkable)...

1.  a way for each shopowner to choose which pages make a checkout.
For some it might be _shipping, _payment, _confirmation
Others might add in login
Others might add in _success
Etc etc

2.  For each of those pages a way for shopowners to turn on/off modules

Maybe this could be done by a new admin page(s) one of which allows people to assign pages as checkout pages.  Another of which lists a tickbox matrix of modules/pages allowing shopowners to tick appropriately.

 

[♥raiwa]

Agree, each shopowner can choose, I'll add login to the addressable pages.