{"id":2361,"date":"2022-01-31T08:40:39","date_gmt":"2022-01-31T08:40:39","guid":{"rendered":"https:\/\/prelive-new.opus.ee\/?p=2361"},"modified":"2026-02-19T15:46:21","modified_gmt":"2026-02-19T15:46:21","slug":"constructing-an-accessible-e-pharmacy-giant-the-marriage-of-react-and-magento-2","status":"publish","type":"post","link":"https:\/\/www.opus.ee\/en\/journal\/constructing-an-accessible-e-pharmacy-giant-the-marriage-of-react-and-magento-2\/","title":{"rendered":"Constructing an Accessible e-Pharmacy Giant: The Marriage of React and Magento 2"},"content":{"rendered":"\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n

Being a public service provider, Estonia\u2019s leading pharmacy chain Apotheka needs to comply with WCAG accessibility guidelines when it comes to its digital channels. Introducing new accessibility features also opened up the possibility to migrate the entire front-end of the store from Magento to React.<\/strong><\/p>\r\n\r\n\r\n\r\n

The digital pharmacy built for Apotheka by Opus several years ago has served the chain well. However, as times change, so do the needs placed on any e-commerce solution. By the time this project kicked off, Apotheka had decided to refresh its web channels\u2019 designs, implement every and all features required by the WCAG 2 AA standard, and offer even more features for its customers in several different markets.<\/p>\r\n\r\n\r\n\r\n

To achieve these goals, Apotheka turned to its long-time development partner Opus, who was to work alongside Apotheka\u2019s design partner Trinidad Wiseman to flesh out a new WCAG 2 AA compliant digital storefront that would also satisfy all of the needs related to the overall design and features.<\/p>\r\n\r\n\r\n\r\n

\u201cHaving recently married React and Magento 2 for Apple\u2019s Premium Reseller iDeal, we decided to go with the same approach here as well,\u201d explained Tanel S\u00e4rgava, project manager responsible for Apotheka\u2019s development. \u201cWhilst the old Magento front-end could have probably been salvaged, it made a lot more sense to start off fresh with an approach we knew would work better in the long run.\u201d<\/p>\r\n\r\n\r\n\r\n

The design work for the new front-end was handled mostly by Trinidad Wiseman, who was tasked with figuring out how to implement Apotheka\u2019s CVI and needs for features whilst also being in compliance with accessibility requirements. This meant that the entire layout of the site had to be easily accessible by screen readers, as well as offer varying contrast settings for people with partially impaired vision.<\/p>\r\n\r\n\r\n\r\n

\u201cThis means that at most meetings where new features were discussed, the main question was \u201cHow can this be made compatible with WCAG?\u201d. In most cases a solution was found, however, several ideas had to be scrapped as implementing them within this framework would not have been feasible budget or time-wise,\u201d said S\u00e4rgava.<\/p>\r\n\r\n\r\n\r\n

<\/p>\r\n\r\n\r\n\r\n

\"\"
Apotheka’s product page<\/figcaption><\/figure>\r\n\r\n\r\n\r\n

<\/p>\r\n\r\n\r\n\r\n

Opus\u2019s team was tasked with implementing the new design in practice, using a combination of Magento 2 and React to do so. However, due to the nature of the project, it was expected that the back-end of the web store would be left more or less alone, meaning that the React front-end had to be added on top of it with minimal time spent on tinkering with Magento itself.<\/p>\r\n\r\n\r\n\r\n

S\u00e4rgava noted that thanks to the fact that Opus was the one who had built the original Magento 2 back-end, the implementation went quite smoothly with minimal adjustments being made to make the solution work. \u201cOf course, if there was the option to leave the back-end alone and offer a lesser experience in the front-end, or implement a quick update for Magento and deliver a flawless front-end experience, we chose the latter,\u201d he added.<\/p>\r\n\r\n\r\n\r\n

Alongside a lot of accessibility features that had to be translated into code and implemented by Opus\u2019 development team, a large emphasis was also placed on the mobile experience. Whilst Magento 2 and React both play very nicely with a wide array of screen sizes and devices, some fine-tuning was needed to offer premium quality in all instances. All of this was complemented by the usual mix of UX improvements, performance upgrades, and futureproofing.<\/p>\r\n\r\n\r\n\r\n

But why React?<\/strong><\/h3>\r\n\r\n\r\n\r\n

Magento is known for being an excellent all-around platform, offering plenty on the back-end and being decent on the front-end as well. So why would one stick React on top of that? Well, as usual, there are several reasons.<\/p>\r\n\r\n\r\n\r\n

S\u00e4rgava explained that using React in conjunction with Magento 2 opens up a whole world of possible future upgrades, updates, and enhancements, that would be costly and time-consuming with pure Magento. On the one hand, React is evolving rapidly, offering more options every single day. On the other hand, it\u2019s no secret that there are more skilled React developers out there than Magento developers.<\/p>\r\n\r\n\r\n\r\n

\u201cThis means that any future developments can be carried out more efficiently, as there are more resources available,\u201d he said. \u201cWe\u2019re also seeing great performance from the React-Magento 2 marriage, something that\u2019s paramount given the number of people visiting Apotheka\u2019s digital pharmacy each and every day.\u201d<\/p>\r\n\r\n\r\n\r\n

The use of React also enables advanced prototyping, where all of the components can be created with React, reviewed and verified by the client, and then migrated to the build pipeline, as such giving the customer a clearer overview of what they\u2019d be actually getting, and with that slashing the time-to-market and development costs, thanks to avoiding any miscommunication and costly unnecessary iterations.<\/p>\r\n\r\n\r\n\r\n

Whilst all of this might make it sound like React is the star of the show here, Magento 2 manages to punch above its weight as well. As Apotheka is operating all over the Baltic states, it needs to offer an excellent multi-language and multi-storefront feature set, which would enable customized and easily adjustable experiences for shoppers from any country.<\/p>\r\n\r\n\r\n\r\n

<\/p>\r\n\r\n\r\n\r\n

\"\"
Apotheka’s custom chat<\/figcaption><\/figure>\r\n\r\n\r\n\r\n

<\/p>\r\n\r\n\r\n\r\n

This party-trick came extremely handy in Lithuania, where Apotheka used to just have an informative website, but can now sell non-prescription drugs via its web store as well. \u201cTo achieve this, we had to build a custom chat feature with robust data security to enable patient-pharmacist live communication,\u201d explained the project manager. \u201cOther pharmacies in the country have opted for speaking to the patients on the phone, whereas Apotheka\u2019s live-chat solution, untied from all external servers, offers a user experience that\u2019s leaps and bounds ahead of the competition.\u201d<\/p>\r\n\r\n\r\n\r\n

All in all, the new solution now live delivers a much-improved user experience, greater performance, and top-notch accessibility. \u201cNot to mention the fact that Opus\u2019 team has once again shown that there is no challenge it can\u2019t conquer.\u201d<\/p>\r\n\r\n\r\n\r\n

Want to join our team? Take a look at our open positions.<\/strong><\/a> We\u2019re looking forward to hearing from you!<\/p>\r\n\r\n\r\n\r\n

Can we help you as well? Get in touch with us!<\/a><\/strong> We\u2019d love to talk.<\/p>\r\n\r\n\r\n\r\n

<\/p>\r\n","protected":false},"excerpt":{"rendered":"

Being a public service provider, Estonia\u2019s leading pharmacy chain Apotheka needs to comply with WCAG accessibility guidelines when it comes to its digital channels. Introducing new accessibility features also opened up the possibility to migrate the entire front-end of the store from Magento to React. The digital pharmacy built for Apotheka by Opus several years…<\/p>\n","protected":false},"author":10,"featured_media":2362,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.opus.ee\/en\/wp-json\/wp\/v2\/posts\/2361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.opus.ee\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.opus.ee\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.opus.ee\/en\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.opus.ee\/en\/wp-json\/wp\/v2\/comments?post=2361"}],"version-history":[{"count":5,"href":"https:\/\/www.opus.ee\/en\/wp-json\/wp\/v2\/posts\/2361\/revisions"}],"predecessor-version":[{"id":4065,"href":"https:\/\/www.opus.ee\/en\/wp-json\/wp\/v2\/posts\/2361\/revisions\/4065"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.opus.ee\/en\/wp-json\/wp\/v2\/media\/2362"}],"wp:attachment":[{"href":"https:\/\/www.opus.ee\/en\/wp-json\/wp\/v2\/media?parent=2361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.opus.ee\/en\/wp-json\/wp\/v2\/categories?post=2361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.opus.ee\/en\/wp-json\/wp\/v2\/tags?post=2361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}