Shane will be joining us on the Meet Magento Croatia 2018 stage in Osijek, Croatia with the presentation “The Road to PWA – what to do right now”. This talk addresses an increasingly common question: What can we do right now to prepare for a PWA future?
In this interview, meet Shane and read a thing or two about his view on PWA that he’ll generously share on #MM18HR stage.
Hi there! Can you let us know a thing or two about you? Who are you, what do you do and how did you end up in IT?
Hi I’m Shane – from Nottingham, England. I’m the lead Frontend developer at JH.
I have a deep interest in all types of programming and problem solving, which is probably why I get involved in so much Open Source work!
My journey into the IT industry was a rather unconventional one. I was entering my 11th year in a totally different type of career with a family business when I decided to re-train and become a developer. I had offered to build a website for a family member without actually knowing how to do it and in the process of learning I quickly realised how much I loved to write code! I spent a number of years reading books and doing online courses in my spare time… and rest, as they say, is history.
What will you be sharing with the audience at Meet Magento Croatia and how have you decided to submit this particular topic?
The buzz around the ‘PWA’ future has sparked a new-found enthusiasm for Magento and its upcoming Frontend – something we are also extremely excited by!
It does however leave a huge question mark hanging over all the existing M2 implementations out there (not to mention the ones being signed as we speak). It’s going to be a long, long time before every site we build is a Single Page PWA, so how do we work towards it?
My talk will present ways to improve the performance of the *existing* platform in ways no-one would think is possible. The improvements get close, and sometimes out-perform, some of the best PWA demo’s out there at the moment.
Who will benefit most from your presentation?
Mainly developers – especially those interested in pushing the limits of what Magento can offer right now. Improving the performance of the current platform is an extremely interesting technical problem, so anyone looking for a challenge would find it very interesting!
You are a regular contributor to many open source projects. Where do you find the will and the time for it?
Put simply, programming is my hobby. It’s also the thing that puts my mind at ease and helps me to relax – that means that any spare time I get outside of work & family commitments is happily spent writing code either for Open Source or paid work.
To those who will not be able to participate at MM18HR, what would be the NO1 key takeaway from your presentation?
Whether it’s the current platform, or the PWA future – focus first on performance, let the other features and buzzwords follow. If you skip the focus on performance, you’re not being true to the promised PWA future.
Thank you Shane! We can’t wait to host you at the #MM18HR stage!
If you are also interested in contributing with your expertise as a speaker, feel free to apply for our Call for Speakers!
For a second year in the row, Jisse will be joining us on the stage of Meet Magento Croatia, this time with “Connecting GraphQL to your own React project”. His expertise in driving innovation throughout the Magento ecosystem and dedication to delivering best-in-class implementations earned him the Mover title in Magento Masters program.
We are lucky his spy career didn’t work out!
Jisse, first of all, congratulations on being recognized as a Mover in Magento Masters program! Considering all the effort you give to the community and the platform itself, there’s no doubt you are one of the individuals that deserves this title! Where do you find the time to contribute with all the work and projects you’re involved with?
It is quite an honor to be a Magento Master. And it is part of the recognition by the community, which is again one of the reasons why I do what I do. Where do I find the time for all of the stuff that I do? I don’t know! It just happens. I see myself as capable of working hard and to make life simple, I just work hard. And every time that you have the feeling that you lack time, just take a breathe and enjoy what you’re doing. This makes life in the Magento community for me a rush – I love it!
Why Magento? For you, what makes it so special to put all of this energy into everything around it?
I have to say Magento 1 was important to my business, my way of making money. However, Magento 2 has changed a lot for me. It showed me a new learning curve, new things I could become good at, more focus on developer stuff. I guess I’m a nerd, I get energy out of technical things. And Magento 2 has so much to offer that I can’t stop learning.
How did your IT career even start? What did you want to be “when you grow up”?
I wanted to be a spy. And then a scientist. And then a cafe owner. I wanted many things in the past. However, I think my actual career started when I wanted to become something (an IT person) and then actually started to work to reach that goal. My first steps were behind a dark terminal with green letters, trying to work my way around a bash terminal of a PC running Debian somewhere in Australia in 1998. That’s when I got hooked into open source, and IT in general.
This year you are bringing an interesting piece of knowledge and expertise to share with our audience at MM18HR. What’s behind the presentation’s title “Connecting GraphQL to your own React project”?
Magento 2.3 brings us the early stages of Magento PWA Studio (a React environment to build webshops with app-like behavior) and a new GraphQL API. While many developers will be eager to start playing with PWA Studio, it might not be for everybody. And even worse, PWA Studio might not be stable either. However, the Magento 2.3 development branch now already ships with GraphQL API endpoints for products and categories and you can already start building things on top of it. So, I’m going to give a walk through of how to setup and use GraphQL with Magento 2.3 and then how to use it in your own React project, without needing to wait for the PWA Studio project. And whatever you learn now about React and GraphQL comes in handy when Magento PWA Studio is actually there.
For those who will not be able to attend MM18HR, what would be the key takeaways from your presentation?
PWA is hot, PWA is going to change the world we live it, PWA is the next big thing. Apart from the hype (with which you can disagree), it is important for a Magento developer to stay up to date with React and GraphQL: They offer a new way of building Magento frontends, without any of the old fluff of the past. But it is needed to gain experience with this: You need to start playing with React and GraphQL. My talk is part of many other talks that hand developers tips and tricks to start with all of this. Let the fun begin!
If you got a story worth sharing, great! We want to hear all about your eCommerce tips & tricks, how you’re handling new technologies (PWA for example), your pointers for getting around and about Magento 2, and your overall expertise which derived from working with major national and international clients. Apply here for MM18HR’s Call for Speakers!
Or are you pumped about joining us from 28th till 29th of September as an attendee, but you haven’t booked your spot yet? We got you covered!
Don’t miss this great opportunity to visit Osijek and enjoy our hospitality combined with awesome MM18HR conference!
In our series of articles in which we’re presenting speakers at Meet Magento Croatia event, the time has come to find out more about Miguel Balparda who will join us with “A day in Support” presentation.
As a Magento 2 Maintainer, Core contributor, and avid Magento supporter, Miguel is also known in the community as a passionate traveler. He’s probably on the beach coding, while you’re reading about his career, and his opinion on how important is it for a developer to understand client’s needs from a business perspective, rather than “just” the technical one.
Hi Miguel! Congratulations on being rewarded with the Magento Mover title! A lot of hard work led to that recognition, right?
It’s been quite a journey. I’ve been traveling non stop for the last couple of years and I was able to meet a lot of people from the community, so I can’t say it’s been a hard job to do. I really enjoy meeting new people and being a Master has helped me connect with a lot of different Magento users and developers from around the globe.
Movers are Magento’s top advocates and ecosystem thought leaders who have demonstrated their expertise in driving innovation through Magento solutions. Whose shoes are most interesting for you to walk in when thinking of solutions – developer’s or merchant’s and why?
I’m a back-end developer who has moved into the system administration world, which means my way of thinking is mostly programmatic and not so much business oriented. Being part of a company like Nexcess has helped me understand the hosting business better and be able to introduce this into my everyday decisions.
You have an interesting view on career development, especially work environment, where you always encourage developers to work remotely. What would you say was the most difficult moment of your career, and what good came from it?
Working remote isn’t for everyone, but it’s worked well for me and I think companies and developers mutually benefit. I like being a remote developer because it allows me to travel while working, but don’t get me wrong, I work 8 hrs a day just like any of you, with meetings and deadlines. I just do it in a different timezone while on the beach 😀
In your opinion, how important is it for a developer to understand client’s needs from a business perspective, rather than “just” the technical one? Should they focus on technically excellent and well-performing solution and leave the business side of things for someone else to worry about?
Developers usually want to code. Some of us like knowing more about the business behind the code and some don’t, and that’s okay too. Understanding the bigger picture is always desired skill for any developer, but it’s not something I consider mandatory if you just want to code. Also, it’s always good to have someone to work with, so you are not a jack of all trades but a specialist working in a multidisciplinary team.
It looks like you’re having an interesting topic at Meet Magento Croatia 2018 event. What’s hiding behind its title“A day in Support”?
I used to call support and be mad at them, yelling and insulting the person on the other side of the phone when I was a developer. When I joined Nexcess, I experienced first hand how people work on the other side of the phone and I realized I haven’t been always polite. In this talk, I’ll be showing the issues we see, the people who contact us and how any developer can effectively work with any support team and get better and faster results.
This speaker that will join us at Meet Magento Croatia doesn’t need a huge introduction. Almost all of us in Magento community at some point stumbled at something Karen Bakerwrote, tweeted or shared in any other form. Last year, she surprised us all with unannounced visit to MM17HR. This year, we are pleased to welcome her at the stage of Meet Magento Croatia with “From a free Extension to a SAAS Product – How you can do it too” presentation in which she’ll share her story about entrepreneurship and eCommerce world in general.
Without further ado, meet Karen!
Hi Karen! It’s an honor to welcome you to the stage of MM18HR! Last year you surprised us all with the unexpected visit to MM17HR. How was your time in Osijek?
Last year I had an operation which caused me to lose my voice, and a lot of confidence as a result. Coming to Osijek really was therapy for me, it was a last minute decision to see how I would cope in conferences and to give me a complete break from the trappings of everyday life. I remember being quite petrified (which is unlike me) when I arrived at Budapest airport and was looking for the car with no sat nav or map to follow, but I survived and I found Osijek a beautiful town. I’ve long known Tomislav from Inchoo and it was great to spend some time seeing the wonderful new offices (which are something only others can dream of)! I left Osijek much calmer than I arrived (in part due to a great walk Tomislav recommended me to go on), so thank you for all your hospitality.
Your interest in IT started at the very early age. What brought you to it (an unintended pun 🙂 )?
In the early 80’s all the kids had computers, there were Vic20’s, Spectrums, C64s, and I had a BBC (my parents thought it would be more educational). It was in reflection the best present they could have bought us (it was actually mainly for my older brother), and now I realise the sacrifice they had to make to buy it, paying it off monthly. I was immediately addicted to it, and the games quickly bored me. It was the possibilities, the fact I was in charge, and I knew quite early on the boundaries were my imagination. IT to me is part of who I am and how I think.
With interesting work background that includes corporate world, eCommerce and startups, you are definitely qualified for sharing your business experience as a learning opportunity for everyone. Please, share a few key takeaways from your upcoming MM18HR presentation “From a free Extension to a SAAS Product – How you can do it too”.
I don’t often talk about the WebShopApps/ShipperHQ story, but as I get older I feel a responsibility to discuss it more to try to encourage the next generation. I plan to talk about some of the lessons we learned both from an engineering and a business perspective. My hope is that people can leave with a view of this is possible, not to sweat the small stuff, and how to stay laser-focused on your goal. I want people to understand the seemingly impossible is possible, and how to take small steps to achieve your goals.
You are one of the most vocal individuals in the Magento community and (in)famous for doing things differently. One of the topics you’re covering in your presentations is how you at ShipperHQ “really feel about Magento open source”. We can’t wait to hear more about it! Can you share a sneak peek with us?
For whatever reason I’ve become a bit of a ‘loud’ voice around Magento, and often I’ll question what they are doing, and what the community is doing. I fully get open source, we have some open source code and we would love to do more of it in the future. We are also a business, as is pretty much everyone at the conference, so I want to just open the discussion on what that means in terms of open source and working within the Magento ecosystem.
What would you say that were the most important lessons entrepreneurship in eCommerce has taught you?
To trust myself, to accept that I can’t change everything, nor should I. I’ve learned the importance of the right team, and the right customer. To remember that this is a rollercoaster and there will be good days and bad days, and that’s okay.
Is there anything else you would like to add to this interview?
Thanks for beating us in the world cup semi’s 🙂
My youngest just said ‘who do we support now mum’ – I said back ‘ it’s okay boy I’ve got friends in Croatia we are with them now, we will get a flag and that’s who we are with now’ – he smiled, first defeat but he knows already it’s family #realMagento@inchoo@tomislavbilic
As you can see, we’re going to have great speakers joining us at #MM18HR, so hurry up and get your ticket! This event is a place to be for everyone that’s in eCommerce and Magento world!
If you have ever worked in a team or in any other way had to maintain others people code, you already know how important is to write maintainable code. Actually, this doesn’t need to be others people code at all – if you are trying to modify your year-old-code, you may already forgot all the details around it and it may be hard for you to read it, let alone modify it.
Since there are many articles on this topic, I will just mention for you few easy starting tips, something that we always have to teach our interns and junior developers.
Stick to coding standards
Whenever you do some work, try to stick to some coding standard to make your coding style consistent. If you are working with framework, that framework most likely has some coding standard. If not, discuss it with your team as it will make your life easier.
If you are reading this, most likely you are working with Magento. In that case, you should read what official documentation has to say about it. Also, set up your IDE to do those validations automatically for you.
Write meaningful comments
I know, everyone has heard about code comments and uses them. But how many times have those comments been useful to you? From my experience, they most often resemble something like this:
// we multiply it by 3$result=$firstNumber*3;
Of course we did multiply it by 3. However, nothing here about this code is obvious. For what reason? Why now? Why 3? Luckily there is one rule you need to remember about this:
“Code tells you how, comments tell you why”
Stick to that, and your comments will have much more sense.
Use conditions wisely
For starters, stop using else where it is not required, like in the example below:
function something($condition){if($condition<10){returnfalse;}else{// do something else;}}
If you put the code this way, becomes much readable:
function something($condition){if($condition<10){returnfalse;}// do something else;}
Another thing that I often see is whole functions being wrapped in if statements like this:
function something($count){if($count>0){
applyDiscounts();
getShippingRates();
sumbitTrackingInfo();}}
That example may be short, but in complex code it becomes a problem. Especially if you have another condition nested inside it. Instead, try to reverse your condition and escape the function early like this:
function something($count){if($count<=0){return;}
applyDiscounts();
getShippingRates();
sumbitTrackingInfo();}
It is easier to have visual separation of checks and logic, rather than tracking the nesting levels and what falls inside and outside of code blocks.
Avoid function with too many parameters
Although sometimes simply required, in most cases this just means that you have a single entry point that is supposed to handle a lot of edge cases. This is bad, because if your tests do not cover every possibility (and they most likely don’t), modifying something here will probably cause issues in other parts of the system. For an example:
function renderMenu($title,$body,$option1=true,$options2=false,$options3=true);
We have 3 optional parameters, which will not make anyone happy who needs to modify this. Of course, it is not an option to break DRY yourself, but perhaps you made a mistake earlier. Maybe all you need is a $menuConfig parameter that will be responsible for all validation and config handling. Maybe you do not need those options at all here, but you need to implement decorator pattern. Next time you find yourself writing a function that has more than 2-3 parameters, stop and think if you are doing something wrong.
Use tools that can help you detect complexity and overall mess
In the end, you can always use tools such as phpcs and phpmd that will help you avoid most common pitfalls. It is rather easy to set those up (also, it is topic for another article), but you should definitely try it.
One of my favorite checks in this areas is the one for cyclomatic complexity, which is a good indicator for when you need a code refactoring as obviously something is not right. Using the code sniffer, you can even trigger it for single file or folder like this:
FILE: ../app/code/core/Mage/Sales/Model/Quote.php
------------------------------------------------------------------------------------------------------
FOUND 0 ERRORS AND 2 WARNINGS AFFECTING 2 LINES
------------------------------------------------------------------------------------------------------
956 | WARNING | Function's cyclomatic complexity (13) exceeds 10; consider refactoring the function
1644 | WARNING | Function's cyclomatic complexity (11) exceeds 10; consider refactoring the function
------------------------------------------------------------------------------------------------------
Default parameters for error/warning threshold are just ok. So if you got something like this, listen to phpcs and consider refactoring the function.
And finally…
We can go on this subject for quite a while. So remember, these are just some beginners tips. If you are unsure, you can always request a code review (if that is not part of your development process, which it really should be) from one or more senior members of the team. As there has been, and still is, only one true measurement of code quality:
David Manners and Volodymyr Zaets from Magento Community Engineering team will be joining us at MM18HR Contribution Day. On September 27, Inchoo’s office will be a home-office for all Magento developers who want to actively contribute to the improvements of the Magento platform.
If you are interested, sign up! You just need to bring your laptop, we’ll provide everything else!
After the official part of the Contribution Day, we’ll have a pre-party starting at 7 PM on our office’s terrace! We’ll also be joined by all the conference participants who came a day early.
Join us and work side by side with Magento Community Engineering team! The participation is free, but you must be a Meet Magento Croatia attendee. 😉
Piotr is active on his Medium account, so be sure to follow him for the latest Vue Storefront news! But before that, enjoy this interview with him!
Hi Piotr! I know that this may be the hardest questions, but could you tell us something about yourself?
Hi Maja! Sure, it’s a pleasure I can have a speech at MMHR, and thanks for having me in this interview 🙂
I’m the co-founder and CTO of Divante. I was into programming from early 2000; first working on Windows-based apps (C++) and then the Web. Divante is growing rapidly (+40% a year) so among last 10 years I was in charge of almost every role starting from a developer, PM, HR, Sales 😉 Currently, as we’ve got 150+ employees, I can focus back on what I love most – product development. Last year I started Vue Storefront Open Source project and I believe that is the reason why I’m here. 🙂
Since 2008 you are the CTO of Divante, and since last year you are working on developing first eCommerce PWA. How it all came to be? What was the deciding factor in your business life to go down that path?
Yeah, there is a saying:” years are short, days are long”. And I must say it’s true; you have no idea how quickly it just went from the time we started Divante to this. We created a company because we wanted to build great products. We started working together with the second co-founder of Divante, personally my brother – Tom – since 2000. We created a lot of Windows-based apps back then. Then we moved to the Internet, web 2.0 (do You remember it? 2005?), creating and selling some startups. A lot of fun. Then we decided it would be good to get more professional.
We started Divante for building cool products. We started with some knowledge management tools, video-streaming (before it was available for free on Youtube 😉 ) – in parallel doing some eCommerce sites. eCommerce stream was the one which was growing most. We used to work with Magento since 2010. Vue Storefront was kind of – back to roots – setting back this product-based pilar along with Open Loyalty – our second, open sourced products.
I must say it was a great decision. The company is flourishing – building the products and providing expert consulting services. And it’s just kind of a beginning for us!
What was the thought process behind the idea of Vue-Storefront?
The idea was based more on our needs as a software house than PWA movement itself. I mean – at some point You could hardly find any talented frontend devs willing to work with huge monolithic platforms. Headless approach – where You have two separate software stacks (backend vs frontend) makes a lot of sense. So we went this path to improve the developer’s experience. Of course, it improves the user experience a lot – by providing much faster UI, Offline support, Home screen install on mobile devices. Basically, I see PWA as a future for most of business apps. It was an iterative process we came to this point.
From the beginning we thought it must be open source – we must involve the community to help us as the project is really broad. And this is how it’s started. Exactly one year ago – around 15th of August, there was the first commit pushed to our Github repository. 🙂
For those who will not be able to participate at MM18HR, what would be the key points of your presentation?
I would focus on showing how to build apps with Vue Storefront. Showing the developer’s experience, architecture, and some live-demo. I’ll try to get a little bit into tech details to show the audience how Progressive Web App works and why Vue.js is one of the best frameworks to be chosen for building them. 🙂
We are very proud to present one of our ex-coworkers – Mladen Lotar who will be joining us at Meet Magento Croatia 2018 stage with his assessment of the “Production grade PWA”. With a couple years of experience in developing PWA’s, he is more than eligible to talk about its history as well as giving the future overview.
Hi Mladen! For those who are not familiar with you, could you share more about yourself?
Sure – I’m a full stack developer for 5 years or so with over 10 years of professional development experience. That’s enough, right? 😀
As an ex-Inchooer, how does it feel to cooperate with us after all those years? 🙂
Right in the feels! 😀
Joking aside, feels great! There’s still a bunch of people in Inchoo that I’m in touch with so it really doesn’t feel like it’s been years.
How and when did you decide to pursue the career in IT, and how (and why) did you start working with Magento?
How I started? At age of 13, I had my first website deployed (oh the FTP era). In the same year I’ve found PHP 3 – and that was my initial development experience – the rest is history.
My first Magento experience was at Inchoo actually – was challenging to learn internals at times, but it made me a better developer.
Since you’ll be talking about the history as well as the future overview of the PWAs, could you tell us more about your experience with it?
Well, 6 years ago or so I moved to California to work at a startup there – that’s where I’ve started working with React. While it was a lot to process the idea of “client-side applications” in a web from my perspective (was primarily back-end developer back then) it was worthwhile.
Fast forward to 3 years ago – I’ve been working mainly with Toptal and Gigster networks on over 30 projects – and it was eye-opening. Each of the projects obviously had own specific requirements but more and more of them wanted PWA – and I’ve built quite a few ever since.
This year I’ve decided to merge own company with Trive to combine Trive’s Magento day to day experience with our custom application development experience – the result is one of first PWA Magento stores in the world.
For those who will not be able to participate at MM18HR, what will be the main idea of your presentation that you would like people to remember?
If I had to put it in a single sentence: “Traditional web development is dying – if you want to stay competitive you need to follow the trends, and at this point in time I see PWAs as a huge trend”.
Oh, almost forgot about self-promotion 😀
One of first (if not the first) Croatian Magento PWA live is done by Trive where I lead the development 😉
This article will explain how to add upsell, cross sell and related products programmatically to Magento. One of practical examples would be data migration from some other ecommerce system to Magento. You can read a nice article on how to add upsell, cross sell and related products from administration here. It explains what all these product relations mean and where are they used on the site.
Load existing product data
At the beginning, there is a product that need to be updated with product relations. It needs to be loaded as usual.
This loaded product model will not contain information about already existing upsell, cross sell and related products. If loaded product doesn’t have previous upsell, cross sell or related products set, it can be saved immediately with new data. But, if there is already existing data about these products, it must be loaded first, merged with new data and then saved. There are specific functions for that. Otherwise, it would be overwritten with new data only.
These functions load all upsell, cross sell and related product models as an array with numeric keys starting from zero.
Prepare existing product data
In order to update product’s upsell, cross sell and related information, they need to be rearranged in array with product ids as keys. This array should also contain information about product position as a subarray. Position parameter determines product’s order position on frontend, usually in sidebar or slider. This parameter can also be set through Magento administration by opening product’s upsell, cross sell or related tab.
When migrating products to Magento, products will be created, not updated, so if there is multiple upsell, cross sell or related products, this parameter can be incremented in a loop starting from zero or they can all be set to zero.Merging new upsell, cross sell and related products:
This may seem like a simple thing. All that is needed is to set upsell, cross sell and related product ids in array with their positions and save the product. Backend process is actually complicated. Magento function that handles product relations saving process is saveProductRelations($product). It is located in Mage_Catalog_Model_Product_Link class.
Database structure for product relations is eav structure. Main table, in which most of this information is saved, is “catalog_product_link”. It’s structure is very simple. It consists of 4 columns. “link_id” is increment ID, “product_id” is edited product, “linked_product_id” is ID of the product that is related to edited product, “link_type_id” is relation type ID. 4 is for upsell, 5 for cross sell and 1 for related product. Second table worth mentioning is “catalog_product_link_attribute_int” which saves product’s position parameter mentioned earlier.
This year, Óscar Recio got his recognition and award as a Magento Master in the Maker category which makes him the 1st Spanish to receive this prestigious award. Besides being “the Kingfish” in the Magento community, he is also a Magento Technical Director at Interactiv4 which is why his presentation will be “Zero Downtime in Magento 2, It’s Possible?”. During the interview, he talked about his journey to becoming the person he is today, what impact did the Magento Master title had on his life and about the topic that he is going to cover on the Meet Magento stage.
Hi Oscar! Since you will be talking about the things you do and how you do them, how about a little warm-up by telling us a bit more about yourself.
Well, my interest in computer science started at age 12, and by the time I was 14 I have already programmed my first website. My eCommerce journey actually started with my first job where I’ve helped many companies launch their online businesses.
Apart from work, my life revolves around my family, I have a girlfriend, actually, a fiance 😀 and a dog whose name is Mac, and yes, I am a fanboy.
From the way you gave a short summary of your presentation, one could guess that you just really love Magento. Could you tell us where is that passion coming from?
As I said, my first job was eCommerce developer and at that moment I realized that I love the world of online sales. It’s an exciting world where any mistake is worth money and that’s a challenge. You have to take many details into account but above all, you have to understand the client needs, because it is important that their experience is exceptional.
The passion for computer science, in general, came to me when I saw one of the computers my father had in his office. It came as a shock when I was able to interact with a machine and have an immediate answer to what I was doing.
I would like to congratulate you on the Magento Master title you got this year and ask you in which way has that title impacted your life and what does it mean to you?
It impacted me and my life in many aspects, now I have to solve all of the problems in the office, kidding.
It is a category that makes you see Magento in a different way, it sorts of make you more responsible with what you say and do since it means (at least for me) that you have to be an example for an entire community. In the end, there is only 20 Magento Masters worldwide so we just have to approach it as a responsibility, which is something that I actually enjoy on a daily basis.
What advice would you give to other developers in the Magento community who are seeking to do better and have a tendency to go down the path you did?
Summed in one word, it is consistency. I will not lie to you, you must dedicate many hours. Also, you should never give up. Everything worthwhile has a price. But the reward you get is greater than any sacrifice. I am not talking about the materialistic awards or prizes, but about the status quo of the knowledge that you acquire during the journey.
For those who will not be able to participate at MM18HR, could you at least hint us the answer behind the question in the title of the presentation?
It will be a shame for those who will not be able to come, they will miss a very interesting talk. I will talk about the challenges and processes that we have faced while deploying eCommerce based on Magento and that in a way that it is not a headache for us and a profit loss for the clients. I would compare a downtime in eCommerce with the one of closing your store in the 5th avenue during a rush hour.
For the closing words, I would like to thank my friends at Inchoo for giving me the opportunity to speak at #MM18HR. I am sure that we will have a fun time and will be able to resolve some doubts behind on how to deploy Magento.
Are you pumped up about joining us on 28th and 29th of September at Meet Magento conference but you haven’t booked your spot yet? Don’t worry, we got you covered!
Victoria is a Magento Solution Specialist and a project manager at Atwix whose greatest joy comes from working with others. She is coming to Meet Magento to share her thoughts on the “Latest eCommerce trends and popular features for your Magento store” which is why we are recommending this presentation to both business owners and developers. Before Magento became a big part of her life she tried many different things like singing, dancing, writing, and teaching, but not to reveal everything she said, read it in the interview.
Hi Victoria! I have the custom to ask each and every one of our speakers to tell us a bit more about themselves and I won’t make an exception now. Feel free to tell us anything, it doesn’t have to be work-related.
Hi Borna, first of all, thank you for this great opportunity to be a part of Meet Magento Croatia. I can’t wait to come to Osijek.
The right beginning might be that I was into new technologies right from my youth, but that’s not true. 🙂 Although, I was always very active and tried different things – from singing in the choir and dancing to being a part of the European Youth Parliament. After participating in EYP, I understood that working with people brings me the most joy and especially working in a team. It also helped me when I started managing my team at Atwix. I believe that everything is possible when you set a clear goal for yourself and your team and….do not forget about the small steps towards it.
I have stumbled upon your Tumblr page victoriaspoems and I have to say that those are some lovely poems (can say for the part I got from the google translate) but it seems like you stopped. Is it just that you don’t find time to write or are you just keeping them for yourself?
Thank you! I am thrilled you liked the poems (at least the translated ones) 🙂 To be honest, I was not very active in Tumblr and did not post the new ones for a long time. But, I am still writing and always find the inspiration in my everyday life.
Hopefully, someday there will be enough poems for a book.
By the look of it, from the moment you got your bachelor’s degree you got a job at Atwix. Since you are a Magento Solution Specialist my guess is that your work is mostly related to Magento. What do you find so appealing around Magento?
Well, it is almost right. Before Atwix I was also working as an English tutor and was going to become an International analyst. My future occupation was closer to politics rather than e-commerce but as years passed I decided to try myself as a project manager instead.
Magento is the main focus in Atwix and from the day one – I fully dived into it. First big pros of Magento is definitely the community, I’ve already been to Magento Imagine twice and the atmosphere is just amazing there. Each success and failure story is a great learning experience and there is definitely a lot to learn about Magento.
For those who will not be able to participate at MM18HR, could you give them a glimpse of the topic that you are going to talk about?
My talk will be about the latest e-commerce trends. Those would be the things which can add this WOW effect to the website and make it stand out among the others in 2018 and 2019. A lot of them were also the most requested features from my real life projects.
We live in a very creative time and simply to sell the products does not work anymore, we should surprise, inspire and deliver the personal experience every single day.
Don’t miss this great opportunity to visit Osijek and enjoy our hospitality combined with awesome #MM18HR conference! Click HERE to see the rest of the speakers and their presentations.
Alexander Kosarau is a Magento Support Manager at Amasty, as his job involves analyzing stats and collecting product improvement features where some cases are specifically challenging since they are narrowly local based he will be talking about “eCommerce solutions worldwide: working with local markets“. The combination of people-related skills and studying to become Master of Science in Mathematics puts him in his own league. How does he incorporate those two together, what did he want to be when he was young, and why you don’t want to miss his presentation – read in the interview!
Hello Alexander! First of all, I would like to ask you to say a thing or two about yourself, just so all of us could get a glimpse into who is Alexander?
Hello Borna! Well, I think that happiness is a state of activity. Here are my two core activities in life.
The first one is being a Master of Science in Mathematics student. I attend classes and I write my graduate paper. My education schedule is flexible (I call it “agile”), so I am able to work. The second huge part is my job. I help clients of Amasty with their ongoing issues. I am taking steps to solve their problems and prevent troubles in the future.
How come that you decided to work at a people-oriented job while your field of study is primarily focused on Mathematics? It may be just one of those prejudices, but I hardly do see any distinctive correlation between those two.
I agree that it looks unusual and my colleagues always ask me about this. I’ve always tended to be a people person with generalist knowledge of things.When I was 16, I considered finding a people-oriented occupation, maybe a lawyer or journalist. I was surrounded by friends and family members who were math- and science-related people. They inspired me to enter the Mechanics and Mathematics faculty.
Some people think that mathematicians are boring, but it is not true. My university years is the brightest thing that has ever happened to me.
Why have you decided to submit this particular topic?
The thing is my job is not just replying to support questions. Also, I am responsible for analyzing stats and collecting product improvement features. My math background helps me a lot in this.
We carefully listen to the clients’ business needs. Still, some cases that I face are too local, which makes them a real challenge. I found that there is something I can speak about. So, I wondered whether it made sense to develop Magento modules for a narrow target audience. And I found out that local markets indeed offer great opportunities for e-commerce solution vendors.
For those who will not be able to participate at MM18HR, what would you like to emphasize as the most important thing in your presentation that you would like everyone to know?
I believe that my presentation is the most important for those who have just started their business. If your product is compliant with local market demands, you are likely to sell more products and build stronger relationships with your customers.
As you can see, we’re going to have great speakers with very educational presentations joining us at #MM18HR, so hurry up and get your ticket! This event is a place to be for everyone that’s in eCommerce and Magento world!
Since Reacticon conferencein March, we’ve been eagerly awaiting for a chance to get our hands on the Magento PWA Studio. For the past month or so, we have dived deep into early development release of Magento PWA Studio and wanted to give a general overview of the toolkit.
Yes, you’ve read that right. In it’s core, Magento PWA Studio is a set of tools used for development of React-powered Magento 2 themes, and in this article we are going to see why is that the case. It’s also important to note that Magento PWA Studio uses GraphQL which is part of the development version of Magento 2.3.
The current Magento PWA Studio repo on GitHub consists of several parts (packages):
pwa-module
pwa-buildpack
peregrine
venia-concept
pwa-module
Magento module which provides module helpers, server-side functionality and acts as a foundation for all themes created using Magento PWA Studio. It renders an app shell, handles RootComponent assignments and embeds GraphQL payloads into a server render (optimization). As for now, this module only needs to be installed, enabled in backend and referenced as a parent for all themes (in “theme.xml”, as with every standard Magento 2 theme) created using Magento PWA Studio.
pwa-buildpack
Buildpack is a set of Webpack plugins and tools which is used for development of Magento PWA themes. It is also used to setup and configure local development environment for Magento 2 platform. It contains the following tools:
PWADevServer
Sets up development server for Magento PWA studio theme. It creates custom localhost, SSL certificate, Magento public path settings emulation, service workers, etc.
MagentoResolver
Handles config for Webpack’s resolve property and adapts Webpack to Magento file system.
MagentoRootComponentsPlugin
Handles code splitting. Generates unique bundle for each page alongside a common (global) bundle. Works out of the box automatically.
magento-layout-loader
Tool for transforming layout, similar to Magento layout system. It allows for inserting containers (before and after) and removing containers. It’s currently still in very early development.
ServiceWorkerPlugin
Wrapper around Google Workbox Webpack, used for service worker configuration depending on development scenario.
Peregrine
Peregrine is a set of React components created to handle Magento-specific functionalities like routing, root components, layout handler, product lists, price display, etc. Included in Peregrine package is Storybook JS, an environment used for documentation and visualization of UI components. This enables frontend developers to have a quick reference for components included in Peregrine package and an accessible documentation. In order to run Storybook JS in Peregrine package, use the following line in terminal in Peregrine root folder:
npm run storybook
This will return a URL to Storybook instance. Here is the preview of how Storybook displays Peregrine UI components.
venia-concept
venia-concept is a demo theme created by Magento using the Magento PWA studio. It showcases all currently available functionality, workflow and pages. It’s still early in development and is regularly updated as Peregrine and buildpack are being developed.
Custom Theme
Magento documentation covers creating custom theme step-by-step in great detail, so we will provide more of a general overview of the custom theme npm package which is the new addition (alongside the .env file) to the standard Magento 2 theme structure.
It’s interesting to see how much more flexible the PWA theme is compared to a regular Magento 2 theme. For example, these are the required npm dependencies for the Magento PWA Studio theme:
As you can see, Magento PWA Studio offers freedom and flexibility for Frontend developer to use the npm packages and tools they want to use. This is not only limited to CSS workflow and styling, it also includes React components. You can also notice that no GraphQL middleware (like Apollo which Venia demo theme is using) is included in the package. It’s nice to see Magento taking a flexible approach with Magento PWA studio by providing only components and tools that are necessary for developing Magento 2 PWA themes and which make the whole process easy and painless.
Learning Pre-requisites
If you only had experience working with Magento and Magento 2, but not with PWA and React, in order to start working with Magento PWA Studio, you should become familiar with the following technologies:
npm
Webpack
React & Redux
GraphQL & Apollo GraphQL (or some other GraphQL middleware)
Storybook JS (optional)
Conclusion
Although it’s still in early development, Magento PWA Studio shows a lot of promise by providing frontend developers a very useful and flexible toolkit for creating PWA themes for Magento 2. Compared to regular Magento 2 frontend workflow which is restrictive, it’s definitely a step in the right direction. At Inchoo, we are excited to follow the development of Magento PWA studio and start playing around with it. Expect more articles explaining Magento PWA Studio workflow, plugins and various intricacies and details.
You probably noticed that Magento PHP 7.2 support patches are available for download HERE (Magento Open Source version).
For Magento Commerce customers, you should find the patches under Magento Commerce 1.x > Support Patches and Security Patches > PHP Compatibility patches in the Downloads section of your account.
We at Inchoo worked on this contribution, so we decided to share a few more words about it, especially because we noticed that Magento released patches in somewhat different format than usual.
tomas ~/var/docker/m1.docker/html $ git status
On branch master
Your branch is up to date with 'origin/master'.
Changes not staged for commit:
(use "git add/rm ..." to update what will be committed)(use "git checkout -- ..." to discard changes in working directory)
modified: app/Mage.php
modified: app/code/core/Mage/Core/Helper/Data.php
modified: app/code/core/Mage/Core/Model/Resource/Session.php
modified: app/code/core/Mage/Core/Model/Session/Abstract/Varien.php
modified: app/code/core/Mage/Core/functions.php
modified: app/code/core/Mage/Customer/Model/Customer/Attribute/Source/Group.php
modified: app/code/core/Mage/Customer/Model/Customer/Attribute/Source/Store.php
modified: app/code/core/Mage/Customer/Model/Customer/Attribute/Source/Website.php
modified: app/code/core/Mage/Customer/Model/Entity/Address/Attribute/Source/Country.php
modified: app/code/core/Mage/Customer/Model/Resource/Address/Attribute/Source/Country.php
modified: app/code/core/Mage/Customer/Model/Resource/Address/Attribute/Source/Region.php
modified: app/code/core/Mage/Eav/Model/Entity/Attribute/Source/Store.php
modified: app/code/core/Mage/Install/etc/install.xml
modified: app/code/core/Mage/Sales/etc/config.xml
modified: app/code/core/Mage/Shipping/Model/Carrier/Abstract.php
modified: app/code/core/Mage/Wishlist/Model/Observer.php
modified: lib/Varien/Autoload.php
modified: lib/Varien/File/Uploader.php
modified: lib/Varien/Io/Sftp.php
modified: lib/phpseclib/Crypt/AES.php
modified: lib/phpseclib/Crypt/DES.php
modified: lib/phpseclib/Crypt/Hash.php
modified: lib/phpseclib/Crypt/RC4.php
modified: lib/phpseclib/Crypt/RSA.php
modified: lib/phpseclib/Crypt/Random.php
modified: lib/phpseclib/Crypt/Rijndael.php
modified: lib/phpseclib/Crypt/TripleDES.php
modified: lib/phpseclib/Math/BigInteger.php
modified: lib/phpseclib/Net/SFTP.php
modified: lib/phpseclib/Net/SSH1.php
modified: lib/phpseclib/Net/SSH2.php
deleted: lib/phpseclib/PHP/Compat/Function/array_fill.php
deleted: lib/phpseclib/PHP/Compat/Function/bcpowmod.php
deleted: lib/phpseclib/PHP/Compat/Function/str_split.php
Untracked files:
(use "git add ..." to include in what will be committed)
PATCH-1.9.3.1-1.9.3.9_PHP7-2018-09-13-08-01-43.2_v2
lib/mcrypt_compat/
lib/phpseclib/Crypt/Base.php
lib/phpseclib/Crypt/Blowfish.php
lib/phpseclib/Crypt/RC2.php
lib/phpseclib/Crypt/Twofish.php
lib/phpseclib/File/
lib/phpseclib/Net/SCP.php
lib/phpseclib/Net/SFTP/
lib/phpseclib/System/
lib/phpseclib/bootstrap.php
lib/phpseclib/openssl.cnf
no changes added to commit (use "git add" and/or "git commit -a")
Just in case…
1) Keep in mind that even after you patch your site, it will still be compatible with the PHP version you used before applying this patch.
2) Note that your site needs to meet requirements regarding SUPEE_* patches listed next to each specific version supported by PHP 7.2 patch.
3) Make sure that you have uninstalled Inchoo’s original PHP7 compatibility patchhttps://github.com/Inchoo/Inchoo_PHP7 in case you were using it before applying these patches. (note that it has files in app/code/local/Mage or app/code/community/Mage depending on which version you are using)
4) Check if you have any 3rd party extensions that are incompatible with PHP 7 using this regex against local and community directories:
->\$.+\[.+\]\(.*\)
5) Make sure that you test this on your setup just as precaution to avoid issues with third party extensions etc.
And finally… it is great seeing our own contribution make its way to the official product!
Thanks, Magento, for reaching out to us to make these patches available for everyone!
Back in the days, Zvonimir was an Inchooer. He was a part of a team that developed one of the Inchoo’s first responsive sites for our clients! It was for Zee & Co. We feel like it was a century ago! Zvonimir found his new home in Germany in 2013, so we were really excited when he contacted us for a speaking position at Meet Magento Croatia.
He always showed a deep understanding of the Magento platform, and with his special skill where he can explain complex matters in a simple way, we’re sure you will enjoy his Case study of Emma Mattress and challenges they had with moving it to the AWS colud.
Hi Zvonimir! Tell us a bit about yourself!
Hello Maja! First of all, thank you for giving me the opportunity to have a speech at MM18HR and to participate in this interview. I started working with Magento at Inchoo back in 2012, while I was finishing my bachelor’s degree in computer science here at University of Osijek. That was actually my first contact with Magento. I did some C programming in my high school. I found it very interesting and after that PHP was piece of cake for me. Right now I live and work in Germany. When I don’t work I spend time with my family.
How did you decide to start a career in IT?
Well, I could say I never made an official decision. It was a natural development of me being a programmer. First I wrote the code for fun, then I tried to earn some money as a freelancer during my studies. I think that was the point when I realized I can make a living from programming.
At Bettzeit Group, you lead a software development team and take care of the whole technology stack of the company’s three Magento shops. Can you share with us how your “normal/everyday” work looks like?
After arriving to the office I make a coffee, of course 😀 Then I read my emails and check my calendar for that day and finally I dive into the tech stuff. Often I participate in different meetings. They are usually about new features, scaling, optimizing, automating, preparing for further growth etc. When I have time I also do coding.
“Case study: Emma Mattress – Magento on the AWS Cloud” is a presentation you prepared for MM18HR. What’s it about?
I will talk about the challenges we had with moving one of our Magento shops to the AWS cloud. I will explain why we decided to go to the cloud. Main topics will be deployment in the multi-server auto-scaled environment, auto scaling, using Amazon Aurora relational database service, Redis cluster, CDN, cron job synchronization. I hope my case study will help some companies/individuals in the migration to AWS.
We are surrounded by young developers who are interested in Magento. What would you advise to them? From where to learn, on what to pay special attention to?
Apply for a job at Inchoo! 🙂 Inchoo has really good Magento developers that are also good educators. I am very thankful and happy that I was able to start my professional career at Inchoo.
Besides that, I would say: work hard, be detail oriented and try to understand what you are doing and the success will come.
Thank you Zvonimir for this interview! We are sure that Meet Magento Croatia delegates will enjoy your interesting topic.
Routing in React is quite complex, and trying to adapt it to work with Magento 2 can be a very challenging task, considering how many URL-related functionalities (like URL rewrites) Magento 2 offers. Luckily, Magento PWA Studio comes with a built-in solution for handling Magento 2 URL-s which is very flexible. In this article, we are going to take a look at the Magento PWA Studio routing and Root Components concept.
Please note that at the time of writing this article, Magento PWA Studio is still in early development, so some details may be out of date depending on the time you’re reading the article.
Magento PWA Studio Peregrine package comes with a MagentoRouter component which is a wrapper around the React Router and is extended with Magento-specific route-handling functionalities. MagentoRouter compontent is located on the following path inside the folder where pwa studio is located:
packages/peregrine/src/Router/Router.js
Currently, MagentoRouter supports only 3 types of page URL-s:
CMS Pages
Category Pages
Product pages
How Routing in Magento PWA Studio works
React Router is extended with Magento Router functionality which, basically, asks Magento 2 (using GraphQL) to return a page type variable based on the received URL. When Magento 2 returns a page type, Magento Router renders a Root Component that has been assigned to the respective page type.
This is how routing in Magento PWA Studio works step-by-step:
MagentoRouter passes the URL to the MagentoRouteHandler component
MagentoRouteHandler resolves the route by querying Magento 2 using GraphQL and then it receives page type from the query. Currently, those page types are: CMS_PAGE, CATEGORY and PRODUCT.
If the URL doesn’t exist, Magento 2 will send out a 404 error (temporary until proper 404 page type has been implemented). If the URL exists, MagentoRouter will render a RootComponent which is assigned to the received page type.
How to specify a Root Component for a specific page type
All Root Component folders must be placed in the following path in Magento PWA studio theme:
src/RootComponents/
One of the interesting features of Magento PWA studio is that the Root Components are not specified by file type, so you can name the page-specific Root Component folder however you like. For example, for CMS_PAGE type, we can create a following subfolder:
src/RootComponents/MyCMS/
In the subfolder, we then create the index.js entry point file with the following content and this is where it gets interesting:
As you can see, the commented section in index.js defines the RootComponent for a specific page type. If we change pageTypes variable value to PRODUCT (webpack restart is required to perform code-splitting again), this component will be used for Product page, and not for CMS page as specified previously.
Where to look for page type value for a specific page
Since Magento PWA Studio is still in development, page types are limited to the three types mentioned in the article (CMS, category and product). Memorizing all page type variables when Magento PWA Studio is fully released would be really hard, not to mention custom page type values, in case we add some custom-created pages or pages created by an extension. Luckily, we can see the page type values from the GraphQL schema.
Magento 2.3 Magento core comes with some modules adapted for GraphQL. And each module containing GraphQL comes with a GraphQL schema which is basically a very detailed and accessible documentation for GraphQL queries. It specifies which GraphQL queries are available, types, interfaces, etc. For example, let’s open up the following file:
These are our page types for product page and category page which can be used in our RootComponents assignment. Now we know where to look for GraphQL schema data. Following the path and naming pattern, you can easily find the page type variable for CMS page in:
Magento/CmsUrlRewriteGraphQl/etc/schema.graphqls
enum UrlRewriteEntityTypeEnum {
CMS_PAGE
}
This is the value that we have used in our example in this article. So you can know which page type value to use either by opening a schema.graphqls file of the module you are using, or by searching UrlRewriteEntityTypeEnum string to list all possible values.
Conclusion
Peregrine package, which is the part of Magento PWA studio, comes with a Magento Router wrapper for React Router which adapts React Router to work with Magento 2 URL logic. Magento Router offers a flexible way of defining Root Components for each page type and an easy way of finding page type variable value for each module. It will be interesting to see how Magento PWA Studio will handle other Magento 2 specific functionalities like layout updates. Expect more articles from Inchoo as we keep playing around with the development version of Magento PWA Studio.
The words, the photos, the video – not even all those things combined could sufficiently convey the incredible atmosphere that was created around Meet Magento Croatia 2018! This year, almost 230 delegates from 17 countries came to Osijek! Developers, agencies, merchants, we all gathered to meet Magento and to meet and greet each other. We at Inchoo are beyond honoured to have had the privilege to welcome everyone in our hometown!
For three days, Osijek was a warm host all the way from Contribution day and pre-party at Inchoo office to the two-day conference and the boat party.
Contribution day and pre-party
Under the technical leadership from Magento’s Community Engineering team represented by Volodymyr Zaets and Eugene Shakshuvarov, developers and Magento enthusiasts gathered in our lounge room not just to contribute, but also to discuss developer activities and challenges they face every day. It was a productive event, followed by pre-party later that evening.
Pre-party was originally planned as a small gather-up of MM18HR delegates who arrived to Osijek, but it went beyond every expectation! Our office was filled with great people from all over the world, ready to mingle and enjoy a relaxed evening among the like-minded crowd. Our acoustic guitar player has felt the vibe to tune things up a little bit and got this party started. It started as a pre-party, and it soon transformed to a full-on party that, for some, ended well after the curfew!
MM18HR presentations, boat party and MageRun
During the official opening of Meet Magento Croatia 2018 event, our CEO Tomislav Bilic officially welcomed everyone to the conference, followed by Tomislav Krolo, Head of Department of Economy at City of Osijek, who gave us remarkable local government support.
Ignacio Riesco, CEO and founding partner of Interactiv4 greeted us all in front of Meet Magento Association, and Sherrie Rohde shared a few words as the representative of the greatest eCommerce open source platform – Magento (An Adobe Company). 🙂
It would be ungrateful to single out just some of the really great speakers and experts that took the #MM18HR stage, because there were more than 35 of them, so we would like to THANK THEM ALL once again, for taking things to the next level, giving real development and business life examples, answering all the questions from the audience, and sharing the knowledge in general.
To get a feeling of what the presentations were about, browse through Twitter’s #MM18HR hashtag. It sums up well some of the key takeaways, and you can also read interviews with the speakers on the conference website.
Since you’ve asked for it, :::HERE::: you can access and download the presentations. Hope they’ll come in handy.
After the full day of filling our heads with new (and some familiar) how-tos, we headed out to the boat on the Drava river to party! DJ played our favorite songs, the ones we all know and love to move our hips to!
The morning of the MM18HR day two started with traditional MageRun. It was a beautiful route, 5km on the promenade of Drava river.
Presentations and panels were exciting, and we closed the conference with an award for the best Croatian Magento online store! It was the first one of this type ever awarded in Croatia, and it went into the hands of the Svijet vode. Congratulations!
Meeting Osijek, Inchoo’s hometown
We think that Meet Magento conferences are about meeting the platform, meeting the community, but also meeting the city the conference is in.
So we prepared a guided tour of the city of Osijek, which included an outdoor theater experience entitled Living History that revives the legends of our city in an interesting and innovative way. Almost 40 delegates enjoyed the tour.
Final thoughts
On a personal note, I’m thrilled to see the numbers shown below. Women of Inchoo contributed a great deal to this conference, and I’m so happy to have seen so many amazing women take the stage at this type of an event.
Granted, this should not be something to brag about, or even mention as it should be a standard, not a deviation from the norm. But, until then – I’m happy to share this as something very positive in the Magento community.
Hi everyone, in my first-ever article, I’ll show you how to setup your custom theme workflow in the latest Sylius release (1.3.0), powered with webpack and with latest Symfony 4 standards. If you haven’t read Stanislav’s articles about Sylius frontend overview and setting up a custom theme, go check it out so you can understand this part completely. 🙂
Starting with Symfony 4, web folder isnt public anymore. Only public folder is a public folder. Because of that, Symfony 4 best practices offers you Webpack Encore to use for managing assets.
Webpack Encore is a simpler way to integrate Webpack into your application. It wraps Webpack, giving you a clean & powerful API for bundling JavaScript modules, pre-processing CSS & JS, and compiling and minifying assets.
Personally, I think that Webpack Encore is cool and you get a lot out of out-of-the-box features to use. But if you want to know how things work under the hood, or you want to control your build process, then you need to make your own webpack workflow for managing assets.
For a purpose of this article, my custom theme is called inchoo-rwd.
Because we use css-loader to have css-in-js feature, we need to import main sass file inside app.js to be rendered. In this workflow, app.js represents our main file where you include all your components and vendors.
styles.scss
$primary:#56db59;
body {background: $primary;font-size:24px;}
Great! Now you configured your basic workflow powered with webpack.
Go inside your theme SyliusShopBundle/views/layout.twig.html and add folowing code:
If you got lost, you can download files from github repo. 🙂
To be upgrade-proof, my advice is not to remove Sylius vendor app.js (Sylius render core logic through it), while trying to grab parts from Sylius vendor js, and join it up with your custom js logic into one single js file. When updates come, and if something changes, you will need to check changelogs to fix what went wrong. 🙂
In current frontend workflow, you have three options for webpack build process (you can look inside package.json)
Development – in console: npm run build
Development+watch – in console: npm run watch
Production – in console: npm run production
In the same terminal directory, hit following command:
npm run build
That command will run folowing script to start webpack build task process. If you complete all previous steps, you should see new files and folders inside public folder.
Refresh the browser. You should see the changes.
Woohoo! 🙂 you made it to the end. Here is a last final tip for ya 🙂
Because of Sylius’ core, app.js that we use in layout.twig.html we can use libaries that Sylius use like:
jquery”: “^3.2.0”
lightbox2″: “^2.9.0”
semantic-ui-css”: “^2.2.0”
and others…
So you dont need to include them again if you need them.
To test it out inside our theme app.js file, insert the following code:
In the same terminal directory, hit following command:
npm run build
Refresh the browser.
And that’s it! 🙂
Conclusion
Hope I helped you to quickly and easily understand the process of creating custom theme workflow on Sylius 1.3.0 version based on Symfony 4 best practices. I want to emphasize that currently, there isn’t a standard way for creating custom theme, and this is my interpretation of doing it, based on my previous experience working with Sylius. My advice to you guys is to regularly check changelogs to see what is going on with current development, so you can be up to date with it for future updates! 🙂
Shop4runners and Inchoo go way back together. In 2014, we started the support of the existing site for these running experts. In 2015, the support leveled up to the point where we modified the existing theme to make it more responsive alongside cleaning the project from numerous core rewrites and bad practices. Their Magento 1.6.2. store was stable, but couldn’t stay that way for too long. After years of operations without performing a major upgrade, the technical debt became too high. It needed a boost!
In 2018, we headed off to Germany for a joint workshop. Inchoo’s CEO, Project Manager, Backend Developer, and Designer went to Pforzheim and met with everyone from shop4runners.
The workshop was productive. We discussed business face-to-face, saw their work enthusiasm, and felt firsthand that they truly live what they preach: running. The whole team runs a few times a week, some of them even run every day, and test the products that they offer in the store!
What’s special about shop4runners is that they aren’t “just” a store. They are experts in running who are delivering highly professional service, while sharing running knowledge and advice.
When you contact their customer support, you will learn the reasons why the sneakers you’ve chosen are a good or bad choice for your running style. They will do their best to truly understand why you should maybe order a size bigger than the usual size that you wear, and how you will benefit from that. We were inspired by their attitude and customer nurturing, and we challenged ourselves to transfer those values online, to a new store.
We saw from the beginning that one of our major strengths can be fully used in this project. Our consulting services.
It’s great to have a merchant with such expertise in the products they are selling! But they need guidance. And that’s ok! That’s what we’re here for. To be a partner who will guide them through challenging eCommerce road to success. To consult, design, and develop. To be a merchant’s best friend!
Design process
Our designers don’t rely only on the creative spark, but also do the heavy data crunching and dig deep into researching users before making UX decisions. That’s why we started with identifying the challenges users are facing while interacting with the store.
We saw that 95% of customers left a positive comment after the checkout process. Google Analytics and Hotjar analysis showed us how visitors use the existing store and what are the UX challenges they are experiencing in the purchase and browsing process.
By creating User Personas with their User Flows, we’ve gotten a chance to evaluate how shop4runners users navigate through the store. The gathered data helped us indicate where are the UX issues that needed to be fixed for achieving a smoother sales process. Some workflows needed to be updated with more information to help users make a good decision, others needed less, to avoid distraction.
To be even more effective in planning and designing the store, our design process includes the development of mood boards. This online store was no exception. The mood boards had a significant role in the overall style guide, UI design, and interactive prototype. They helped us craft the overall experience users encounter throughout the website and put out the vibe that true running experts are behind shop4runners!
The process of building a new website started with technical and design analysis of the existing store. The results gave us insights that were a great starting point for the results we want to reach in the future.
With a new technical upgrade and redesign, shop4runners had 3 major goals they wanted to reach:
improving information architecture
showcasing their expertise in running
decreasing return rates
To achieve all that, we started with the development of the entire navigation structure from the ground up. It also included showcasing products and grouping them in a way that our previous analysis showed would work best, by mixing categories and attributes. The site is now divided according to type of activities you need gear for and by basic demographics (men, women, children).
There’s a full section on the homepage, dedicated to the profiles of shop4runners experts where they share personal running experiences, pieces of advice, and personal records in half marathons and marathons. It later leads you to their full personal blog post and overall blog, where they can show their expertise in running related content, and maybe the best part, tests of running equipment they offer in stores.
Decreasing of return rates called for the development of a complex new shoe size feature. To help the customer buy the right size shoes, we established the following method on the product page: through pictures and description, we show how to accurately measure the foot size in centimeters. After the customer enters his exact foot length, they have an option to pick an activity they want to use the shoes for.
The system then tells them what is customer’s recommended size for that activity, and also educates them why it’s better to wear one size bigger shoes for running. The final step puts the customer’s proper fit shoes in the cart. Educational, easy to use, and accurate feature for customers to be happy with their purchase!
We also developed a custom shoe advisor widget, which recommends the collection of shoes according to gender, shoe size, and activity. It’s great to use for customers who want to get almost instant search results for very specific products they are looking for in their size.
The search engine used for this project is Findologic. This search solution has the ability to understand users’ search terms and build up its own vocabulary. Its intelligent search function ensures that the user can find the items they are really searching for. Their motto showcases it the best: “stop searching – find!”
Results
All our of our initial analyses paid off! That’s why it’s important to leave enough space for the discovery phase, that is determined to face the complexity of development project like this one.
“We are working with Inchoo for over 5 years and we are really happy with our collaboration. We were especially pleased that the team working on our project joined us in our offices in Germany for a planning phase of the new project. Their organization and work are top levels. We are really happy to have such an amazing technical partner on our side and we are sure that Inchoo will help us to grow further in our eCommerce strategy.”
The only point of contact your customer has with your online store, is the designed interface. Ever wondered exactly what they think of it? Long gone are the days when the design was purely a visual discipline. It shifted into a responsibility, where designers are also to be valued for their understanding of the product being built. Design doesn’t just paint the building, it builds the stairs to an overall better usability and collaboration of everyone included. It is necessary to update our processes with thorough understanding of end users, colleagues and stakeholders to make responsible and risk-reduced design decisions. Change through user testing is what keeps the design process relevant and competitive.
In a single sentence, we work to make incremental user interface and user experience changes based on usability test results and actual user feedback. This process ensures we’ve improved your online store’s usability, not just with our knowledge of best UX practices, but also with real data from your own customers. This process also keeps us proactive, as we’re able to find bottlenecks we would have never thought of or noticed otherwise. Here’s a short overview of the process – and for more information, you can always drop us a line!
Get to know your online store
For best insights, a combination of qualitative and quantitative data works ideal. With quantitative data from Google Analytics and Hotjar, we start to understand the site and possible bottlenecks. If possible, we conduct a preliminary unmoderated live study on the current site, which gives us valuable qualitative data to get us working on well founded ideas for the redesign. The live study includes audio and video feedback from customers instructed to complete tasks on usual store flows. An ideal alternative would be to visit our clients for a workshop to get most of the customer information but we usually have a remote kickoff meeting and ask most of the questions then.
Additionally, to get a jumpstart on our research phase, we initiate a recruiting screener (we use Hotjar) on the live site to get started on gathering our group of relevant test users.
Analyse from the ground up
User journeys help us define customer activity, goals, needs, expectations, touchpoints, quality of experience, business goals as well as organisational activities (ideas and solutions). All defined benchmarks and project goals will be tracked to present results of the new design. User journeys also help defineuser tasks that would be included in usability tests later on. Personas guide in conducting these tests on specific customer profiles (we could pick and choose from recruits as audience segments). Towards the end of this phase, a sitemap is defined. The sitemap assists the team visualise the structure of the navigation and relationship between pages and taxonomy. It also serves as a starting point for wireframes, functional specifications and content maps.
Boldly go where no one has gone before
During the exploration phase, we try to create solution concepts. The team gets together to provide their specific services for another workshop. We brainstorm & sketch pages (whiteboard), which are turned into medium fidelity wireframes (Sketch) and clickable prototypes (InVision). These encompass all of the ideas and changes the team uncovered so far. The next step is to validate or dispute them through tests on actual online store customers we’ve been recruiting up until this point.
Test the prototypes, learn and repeat
We test our minimum viable product to analyze and refine it in as many cycles as needed. Tools like Validately are used to perform unmoderated live studies on our InVision prototype, assigning tasks to recruited test users.Recordings of these tests are then analysed giving attention to test duration, task error rate, task completion and answers to custom follow up questions. So, what do these live studies contain? We receive audible data as well as video of the prototype in use, with our most important findings being the result of user interaction with given prototype through assigned tasks (e.g. buy a specific product, add it to cart and checkout). Tasks can range in complexity depending on what we’re trying to learn. In collaboration with the client, we arrange an incentive to be provided for all test participants. Having direct feedback on early prototypes from relevant users, ensures significantly reduced risk of friction for our future designs.
Suit up your designs
With early tests done, we’re confident to proceed to the design phase and open up a dialog to communicate moodboard look and feel as well as create the user interface design. The moodboard helps us communicate the purely visual aspect of the project with stakeholders involved. Following the moodboard, the homepage gets the look of the site going while, at the same time, we start developing the style guide for all pages to be designed upon. For the entire user interface, we focus on creating user flows instead of presenting mere pages. Flows are again presented through InVision prototypes and include all of the findings from the previous testing phase both the client and the team agree on implementing.
Test again, don’t assume
The completed designs are based not only on industry best practices but also on actual customer feedback. Nevertheless, we test again to see how the designs perform from a usability and user experience point of view, avoiding any assumptions that might not prove to be true. The mechanisms we tested on wireframes might work, but our design influences their effectiveness as well. We repeat this cycle until optimal solutions are found.
Post launch care
After launch, we keep monitoring the live site with the goal of optimising the organic conversion rate. We continue the usability tests and include A/B tests to provide basis for further incremental design changes. Tracking previously set benchmarks and goals gives us results to affirm the work so far. After all, your online store is a living and ever changing organism that can be improved at any point.
All key teams at Inchoo (designers, consultants and developers) are included in the decision making process. At all times we are working closely with our client. This approach is in service of optimal store usability as everyone in the team contribute from their perspective while changes and improvements are based on the real customer feedback. If there is a concern whether an investment in such a thorough process is justified, you should consider the risks of not investing in testing at all and basing your decisions on information that doesn’t include your customer feedback.
We would love to take you and your customers on this journey and show you the value of our approach firsthand. Contact us to see how we can improve your store’s usability!