Marcos Rêgo Web Developer

Fazer

Posted on by Marcos Rego
Fazer site thumbnail

Fazer is a new Portuguese magazine about design, their eCommerce website was designed by Carvalho Bernau and developed by me.

Visit website

The development of this project showcases perfectly the combined power of WordPress‘ block editor, with Mr.Dev.’s Framework, Mr.Dev’s Theme, Mr.Utils and some custom code.

Mr.Dev.’s Theme is a boilerplate theme, that allowed using all the features of the block editor on WooCommerce pages (including products and templates), while having the default colors managed from Mr.Dev.’s Framework.

Mr.Utils with Mr.Dev.’s Framework, added extra style options to the block editor including custom utility classes. That was very handy to define variables to all sizes (font-sizes, padding, margins, etc) and have them editable from one unique place in the backend if needed.

For all the custom code, I used the file manager of Mr.Dev.’s Framework to select where to load each CSS and JS, reducing unused code for each page. This was important for speed purposes. Some PHP custom code was also created. All files can be accessed trough the Framework and edited on the backend, using WordPress’ default plugin files editor.

The custom code was important to reach some specific needs of the design, here are some examples:

  • Temporarily have the homepage redirecting to the most recent product/magazine-issue.
  • Align footnotes with the text, according to the position of the note in the text (on non-mobile breakpoints).
  • Automatically detect the color of the most recent product and apply it as accent color on the entire site (Products’ colors are added on Mr.Dev.’s Framework, by having the variable equal to the product slug).
  • Allow different svg logos for each product (Uses safe SVG).
  • Enable cache for almost all the pages, regardless of the cart item count. This was made possible by having custom javascript and cookies, to detect the number of items in cart. Also detects which products, to show a “View the cart” when a product is already in the cart.
  • Detect when the scroll passes the header to change the color of the logo, menu, and “Buy” buttons from white to the accent color.
  • Use the alt text of an image, to tell which should be the object-position/background-position for each breakpoint.
  • Highlight the sub-menus according to the scroll on the page.
  • Replace default tags taxonomy in favor of authors (multiple authors).
  • Automatically create categories in Afazeres/Blog matching each WooCommerce product.