joel

Magento 2 checkout customisation

I recently did some extensive layout/styling to the checkout in Magento 2 EE this included adding additional steps, removing steps and customising the experience into collapsible sections, plenty of Knockout, JS and template changes along with some Local Storage state management.

Out of the box it’s a two step checkout, but breaking it down into sections can offer a better UI experience.

The checkout and minicart are some of the most complicated aspects of Magento 2’s frontend especially if you have 3rd party integrations.

Get in touch if your looking for development of the Magento2 checkout experience.

Magento2 breadcrumbs on a product page

By default Magento2 does not show the product page breadcrumb.

Refer to this answer by nuwas for a decent breadcrumb implementation.

https://magento.stackexchange.com/questions/225370/magento-2-2-4-breadcrumbs-do-not-show-on-product-pages-when-default-navigation

If there is multiple categories or sub categories, it may not order the navigation correctly, fix that by ordering by level, it could be improved further by also ordering by position.

    $cats = [];
                foreach ($breadcrumbCategories as $category) {
                    $cats[]=['level' => $category->getData('level'),
                        'position' => $category->getData('position'),
                        'name' => $category->getName(),
                        'url' => $category->geturl(),
                        'id' => $category->getId()];
                }
                usort($cats, function ($item1, $item2) {
                    return $item1['level'] <=> $item2['level'];
                });

                foreach ($cats as $category) {
                    $catbreadcrumb = array("label" => $category['name'], "link" => $category['url']);
                    $breadcrumbsBlock->addCrumb("category" . $category['id'], $catbreadcrumb);
                    $title[] = $category['name'];
                }

Using WordPress as a CMS for Magento2

There’s already integrations out there like FishPig that integrate WordPress into Magento2 however what I’m talking about here is a more tightly integrated website where WordPress serves all the content pages and Magento the product pages.

After all one of Magento’s weaknesses is it’s CMS editing tools so this makes it a perfect match for any project.

Project criteria:

Both WordPress and Magento2 Must support multi language via the URL
Magento2 to live in /products
WordPress to live in the root /
WordPress to use WMPL and support multi language via the URL

I also wanted WordPress to not physically live in the root folder but it’s own /wp folder. For a clean seperation of products so my directory structure looked like this:

/wp
/products
index.php
.htaccess

To get the languages to work the only workable solution I could come to was to create directories for each language in the root.

/en/
/fr/
/fr/index.php
/fr/products (symlink)

Inside these folders is an index.php and a symlink to the /products folder.

The actual root .htaccess looks like this:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www.)?mywebsite.com$
RewriteCond %{REQUEST_URI} !^/wp/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /wp/$1
RewriteCond %{HTTP_HOST} ^(www.)?mywebsite.com$
RewriteRule ^(/)?$ wp/index.php [L]

This works perfectly because it’s bypassed for physical files and folders. Which allows us to reach Magento.

You can then set up a global header/footer which can sit in WordPress.

In our case we have a mainly static header/footer but you could easily use Magento/WP inside these by having a seperate header/footer that includes this file and setting up variables that can be used in this file.

For example the header.phtml in Magento

$magentoLocale=$this->getLocaleCode();
include_once ('/var/www/mywebsite/wp/wp-content/themes/mytheme/global-header.php');

The only downside to the whole setup is having to use long relative paths or absolute paths as above.

$localeUrl = '/';
if (isset($wp_version)) {
    //Language code from WMPL
    if ( defined( 'ICL_LANGUAGE_CODE' ) ) {
        $localeUrl .= ICL_LANGUAGE_CODE;
    } else {
        $localeUrl .= 'en';
    }
} else {
    //Language code from Magento
    $localeUrl .= $this->getLocaleCode();
}

In the above we have a simple $localeUrl that we can use before any links.

I would highly recommend a setup like this over just using Magento as content driven pages can then be just that, without the need to buy expensive 3rd party CMS extensions for Magento.

Resetting your Ionic project when all else fails

Sometime you get un-expected errors, missing plugins etc. A simple way to reset everything to afresh is this:

Delete the app’s

node_modules/

Delete the app’s package-lock file (if present)

package-lock.json

Delete the app’s

platforms/

Delete the app’s

plugins/

Run

npm install

(which will regenerate what you deleted above)

Run

npm run build

(try with and without the –prod flag)

Run

ionic cordova platform add android

Run

ionic cordova platform add ios

HMO Renovation cost for large victorian terrace house

Converting a 6-bed HMO in 2018

We wanted to take on this project because the house had already been converted to some extent and some other work recently completed:

Fire system in place with fire doors
Recently re-wired with modern RCD breaker box
Inside of the property in reasonable condition
Upto 6 large bedrooms without doing any house re-arranging or building stud walls
External walls recently re-pointed
Existing HMO licence recently inspected and approved by the local council

The previous owner had run it without success, we partnered with a local agency with the aim to provide contractor only tenancy, for this we would need to make the standard of the accommodation much higher.

As we lived quite far away from the property we also needed it to be low maintenance the main aim here was for at least 5 years low maintenance. Some letting agents we spoke to said it could be letted out as is, but we opted not to fall into the trap of constant maintenance issues and unhappy tenants.

Before we purchased the property we spent a lot of time researching some of the costs involved in renovating a large property to HMO standard. I came across a few posts with actual costs, here’s a breakdown of what to expect and some of the problems you might need to overcome.

This was a large 6 bed stone built victorian terraced house with high ceilings, and across 3 floors, based in Cumbria in the North West.

Roofing/Chimney – £9000

There was a number of damp issues starting to appear in the house largely down to the roof, we had to get new tiling front/back and on the rear kitchen extension along with new guttering/fixing throughout. Initially we where expecting to pay £900 to put the roof right, from previous examination in the summer, but it came clear after the purchase went through in December that much more work was needed including replacing two velux windows which where rotten.

Finding the right roofer who was able to understand our low maintenance goals and give an honest view of what was needed to meet them was a challenge, we finally came across Richard at http://www.rivervalleyroofing.co.uk/ Richard and his team where extremely helpful in taking the time to explain the work that was needed, and clearly has a passion for the craft that he does.

The roofer also explained the huge chimney stack was tilting, whilst probably not urgently needed there’s little point getting a new roof to have the chimney stack collapse at a later date on top of it, so we opted to get this taken down whilst the scaffolding was up, again think about your long term goals for maintenance.

Kitchen – £7000

We opted for an Ikea kitchen personally love their stuff, some of it can be a bit breakable but their kitchens are better than Wren and others especially from the look and feel for the price.

The kitchen itself came in at around £3000 but there was a lot to do in the kitchen stripping it out to the brick and applying some tanking to some of the rear walls. Overall for the amount of work done and getting a new kitchen the cost is pretty reasonable.

Bathrooms – £13000

A lot of work was needed here, the house had two existing bathrooms one small and large, after exploring lots of options including en-suite the most sensible option was to drop one of the bedrooms and convert it into a bathroom. Much larger investment would be needed to add extra soil pipes, water tanks etc. Each was completely stripped out with some re-skimming and patchwork. Fitting new larger showers and suite.

A major mistake here was that the contractor quoted on a labour only basis, this not only created headaches with the supplier where wrong items where delivered, but aside from the obvious bathroom costs, the materials like plaster,plumbing etc came to many thousands, doing this again I would opt for an all-inclusive fee, it also puts the responsibility of dealing with the suppliers on the contractor.

Carpets – £3000

It’s a large house and we fitted new carpet to every room and landing.

Furniture – £5000

Again opting for Ikea, it made sense because we can get a consistent look across the house by getting everything in one place, it’s also cheap for a reasonable quality. We looked at fusion furniture and others who claim their furniture is unbreakable etc.. Some of that stuff isn’t the most inspiring furniture. I always believe in creating a home you would like to live in rather than buying the most basic of basics.

For under a £1000 each room that included:

full length mirror
large wardrobe
3 set drawers
bedside cabinet
bedframe with mattress,pillows and throw
standing lamp
ceiling lamp
3 of the larger rooms had a desk and chair

It took around 2 days per room to build all the furniture.

Other costs

Some other costs that came in that might get overlooked

Skips £1000
Kitchen appliances £1300
HMO licence £450
Painting/Materials and tools £700
TV’s and wall mounts £1300
Boiler move £800
Fire certificate £250

Total for the conversion came in around £50,000 this was without having to install fire doors, alarms or re-wire, re-plumb it would have been a whole lot more had those things not been done already.

As part of the project I made a simple excel calculator to work out all sorts of figures to check that I had the capital available and that the project was viable, see my BTL calculator

How to get a persistent unique device ID in Ionic for iOS

Simple way to store uuid as device.uuid. Using the Native cordova device plugin gives inconsistent results in iOS. Not only this it changes every time the app is installed. Might be a rare case for some but in the app i’m building we use it to lockdown which devices can use the app irrespective of login credentials.

I used this in conjunction with the hashids library. And you will need to follow the instructions to include the KeyChain plugin and ionic library.

validateUuid() {
    let date = new Date();
    let components = [
        date.getFullYear(),
        date.getMonth(),
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
        date.getMilliseconds()
    ];

    let id = components.join("");
    let hashids = new Hashids();
    let newKey = hashids.encode(id).toUpperCase();

        return new Promise((resolve,reject) => {
            if(window.cordova) {
                this.keychain.get('APP_NAMESPACE_KEY').then((uuid) => {
                    if (!uuid) {
                          this.keychain.set('APP_NAMESPACE_KEY', newKey, false).then(() => {
                              this.appService.set('deviceId',newKey);
                              return resolve();
                          }).catch((err) => {
                              return resolve();
                          });

                      } else {
                          this.appService.set('deviceId', val);
                          return resolve();
                      }
                }).catch(() => {
                    //something went wrong
                    return resolve();

                });
            } else {
                this.appService.set('deviceId','browser-id');
                return resolve();
            }
        }).then(() => {
            if(this.platform.is('android')) {
                this.appService.set('deviceId',window.device.uuid);
            }
        });
}

Here our validateUuid function returns a promise, first we generate a new hash in case we need it later, then first check if the keychain value exists (APP_NAMESPACE_KEY). If it does return that value, or create it.

We also do a check if running in the browser by checking for window.cordova or not, if not returning a default “browser-id”.

In my app I have an appService that sets/gets the value of the deviceId which is used elsewhere around the app.

Finally if running on Android then simply set it to window.device.uuid as Android does not currently change this each time.

Clapham & Collinge – Legal services for Buy to Let customer review

We recently used Clapham & Collinge in Norwich to purchase a buy to let via a Ltd Company. The service they provided was thorough however there was some issues throughout the process, and we did not find the customer service very friendly. (law firms reading this have a read through this article)

In total the mortgage took nearly 6 months (note there was no-chain either end), mostly I believe to the fact of Clapham and Collinge taking their time with every detail (which can be a good thing) even though it was known to be a family sale, they also did walk us through the company legal side reasonably well. That said this still seems a very long time even though we where very prompt with our responses.

We also had a gifted equity deposit this caused a lot of confusion after several phone calls and emails over two weeks from us, and calls from the sellers solicitors they finally understood the concept of a gifted deposit, even though they knew this from the outset, and instead of requesting additional deposit funds from us, adjusted the completion statement correctly.

Finally when we did complete, we found out that additional charges of £600 where applied these where not on the completion statement, they did send an engagement letter which had the charges in there but we thought these formed part of the initial quote.

In their brochure they quote

“We offer fixed fee quotations which means that we are honest and upfront with no hidden charges. The disbursments can change but your member of staff will always advise you of this and obtain your consent.”

We feel they did not highlight this in non-lawyer terms that there would be additional charges for the business part of the transaction.

We highlighted this to them and the only response they could give was from a graduate, so much for being in experienced hands and customer care.

They also waited till after the exchange to do company checks. So after waiting nearly 6 months , if something was wrong with the ltd company setup, it could be a big problem to correct it, this seems the wrong order to do things.

In summary they would not be my first choice in future, the initial quote they gave did not include the business legals and checks, the additional charges seemed like hidden charges to us. Had we known this we would have used another supplier who came in cheaper. Wether this was down to our broker who recommended and obtained the quote or down to Clapham and Collinge is unknown.

We’ve also used solicitors who conduct their business via email/online it’s much more efficient, one we recommend that we’ve used in the past is Beaumont legal. They give an updated email status every step of the way which also has the outstanding steps, and avoids a lot of the unnecessary letter writing.

AWS Opsworks review one year on

For the past year I’ve been using opsworks on AWS. I’m not sure who this product is aimed at but clearly people who are experts in Chef automation and or have deep knowledge of AWS from querying support, information not available on their technical docs. When I initially set up Opsworks it had recently been moved onto using a newer version of Chef (12), there’s very little documentation around there example github repo and cookbooks are pretty old https://github.com/aws/opsworks-cookbooks

And I could be wrong but I think these didn’t work either, the major caveat is that their online interface doesn’t seem to pick up on any changes you make outside of Opsworks. Which might be acceptable however even changing things inside the Opsworks GUI does not work sometimes. Try changing the name of the machine (this is used as the hostname) it picks this up from the machine itself. You then change the machine’s hostname, but it still reverts back to what’s set in Opsworks. Other anomalies include it showing the wrong IP address when an elastic IP is assigned.

Here’s a snippet from a support query:

When we use managed services, updates, deletes, and other modifications to the infrastructure need to be done within the management console for that service. When we make changes to resources created by something like OpsWorks outside of the OpsWorks console or AWS cli, weird behavior can occur. This is because agents controlling those resources cannot track the changes made to those resources if they are made outside of their jurisdiction. These changes are called “out of band changes.” The above scenario would be considered an out of band change, and OpsWorks is reacting to changes to its resources in an expected manner for this situation. Right now, because of the series of events surrounding the use of that EIP, OpsWorks views that EIP as unassigned to any instance in the stack, hence the conflicting information about the public IP for that instance.

Another feature of Opsworks is the auto-healing aspect. Server failure where there is a hardware fault can be automatically handled by Opsworks bringing the instance back up. After a colleague had a long chat with AWS support this isn’t supported unless you configure you instances in a specific way. Even when it does work it can get in a stop_failed status. Which effectively means it didn’t work.

The only useable aspect of Opsworks which is the only reason we are using it is for the integrated user management with AWS iam policies, which is great for SSH key management. Past that we haven’t found it reliable enough or easy to use any of the other claimed features.

Fully css carousel cross browser?

I was asked to see if I could develop a carousel using nothing other than CSS. Firstly it depends how you define a carousel if it’s infinite loops then I think this can’t really be achieved through CSS alone (I would be happy to be proved wrong though!) this carousel is going to be left to right only.

After doing a little research there are some experimental slideshow type examples out there using checkboxes which have an on/off state equating to our left and right actions. I figured I could use a radio group which again provides the states we need. and using :before and :after on the navigation thus keeping the whole carousel at the same level in the dom. After going off on a tangent in this direction and after cross browser testing it seems elements that don’t have content can’t have :before or :after which actually makes sense. All browsers except Chrome seem to adhere to this. Chrome is a bit naughty when it comes to development as in my view it is too lenient with the rules.

The next thing then that immediately comes to mind in order to achieve this is using the :focus on a link but how do you then select the carousel?

Well using the ~ + selectors to select the immediate siblings and as above using :before and :after on the navigation we can keep everything at the same level.

Then using some keyframe animation we can animate the carousel when the link becomes active.

This works in all current browsers except IE9, as of course IE9 does not support CSS animations, so it’s not truly rid of JS if that’s a requirement and I don’t see a CSS workaround for that other than having a blunt left/right animation.

The other aspect to this is mobile, here :focus does not have the same meaning on mobile and I had to use :hover again usually you would solve this kind of problem adding classes with JS as I only tested on Safari it may differ on other devices.

Have a look at the example carousel

Brand management and proposition development

Maximise the impact of your offer by positioning your business, product or service correctly

Use a proven framework, including brand values, to help focus your decisions

Stand out from the crowd and stay top of mind by creating the right name for your business, product, service or portfolio.

Need any of the above then visit Ascendit