Magento PWA Studio: Useful Links and Resources

01/20/2022  3 MINS READ

SHARE

Table of contents

• What is Magento PWA Studio?
• Official PWA Studio resources from Magento
• Magento 2 PWA Studio demo
• Real-life Magento PWA examples
• PWA Studio Tools & Extensions
• Magento PWA Studio developer tutorials
• Magento PWA Studio roadmap
• PWA Studio Developer Community
• List of current live Magento 2 PWA Studio websites
  • Fashion
  • Technology
  • Home & Garden
  • Health & Beauty
  • Food & Beverages
  • Other verticals
    • Vape
    • Skiing equipment
    • Gaming collections

Ever since Progressive Web Apps concept was introduced by Google back in 2015, it has been an on-going trend on the world wide web. It is a next-generation technology that is destined to replace the current web technology, and applicable to various industries including e-commerce.

What is Magento PWA Studio?

In September 2018, Magento introduced their PWA Studio project, and made available to the public via their GitHub repository https://github.com/magento/pwa-studio. Magento PWA Studio is a set of tools that allow developers to develop a Progressive Web App (PWA) storefront on top of Magento 2.

Magento PWA Studio vs Vue Storefront

Official PWA Studio resources from Magento

• GitHub repository

PWA Studio GitHub repository

Latest PWA Studio version: 12.1.0

• Official documentation

Magento PWA Official Documentation

Magento 2 PWA Studio demo

Venia storefront

Official PWA Studio storefront demo: Venia

Additionally, there is a development version of Venia which reflects the latest progress of PWA Studio.

Real-life Magento PWA examples

Since its release, multiple developers and brands have adopted PWA Studio and use it to develop PWA storefront on top of Magento 2. Several of which have gone live into production and starting to see great results. Below are some of our hand-picked best Magento PWA examples:

1. Shop Online Tanzania by SimiCart
2. Tshirtideal by SimiCart
3. Eleganza by Experius

More Magento PWA examples

PWA Studio Tools & Extensions

• Free Magento PWA Theme
• Magento PWA Studio Page Builder

Magento PWA Studio developer tutorials

Our PWA developers have composed several useful tutorials to help you get started on your journey of learning PWA Studio:

• How to setup PWA Studio in Magento 2
• Magento PWA Studio Tutorial: The Basics
• How to Create a Magento PWA Studio Extension
• How to Install Rendertron for Magento PWA Studio to Use SSR
• SimiCart video tutorials on YouTube

Magento PWA Studio roadmap

Started with a mobile-first approach, the core PWA Studio development team will now most importantly focus on desktop experience for Venia. Also, they will continue to work on launching new Venia features and optimizing the existing Venia reference storefront to create engaging shopper experiences.

• Official PWA Studio roadmap

PWA Studio Roadmap

Currently the roadmap is set to cover until the end of 2021.

If you want to look into the past development changes of PWA Studio, there are detailed changelogs on GitHub you might be interested in:

• PWA Studio release notes

PWA Studio release notes

PWA Studio Developer Community

You can join 2,300+ community members in the official PWA Studio Slack channel #pwa to contribute ideas, or ask and answer PWA-related questions.

Magento PWA Slack channel

List of current live Magento 2 PWA Studio websites

Below is a non-complete list of current live websites that are built on PWA Studio that we’ve found and constantly updating. The websites are categorized into industry verticals.

Fashion

• https://www.tshirtideal.ca/
• https://www.castiron-clothing.com/
• https://nymansur.com/
• https://charmingchick.com/
• https://kashiyama1927.com/
• https://curnonwatch.com/
• https://us.caiyx.com/
• https://cloth-face-masks.com/
• https://www.eleganza-shop.com/
• https://www.roeckl.com/

Technology

• https://www.neonet.pl/
• https://www.neo24.pl/
• https://www.bascom-cameras.co.uk/

Home & Garden

• https://www.trailappliances.com/
• https://www.opti-wohnwelt.de/
• https://www.selcobw.com/
• https://temoorst.com/
• https://kniveksperten.no/

Health & Beauty

• https://www.nutriciastore.com.au/
• https://www.caddys.it/

Food & Beverages

• https://www.thewhiskybarrel.com/

Other verticals

Vape

• https://www.180smoke.ca/
• https://coopvape.co.uk/

Skiing equipment

• https://www.oberson.com/fr/

Gaming collections

• https://eu.gear.cdprojektred.com/

Read More

 

How to Configure Magento CAPTCHA Settings for Admin and Customers

A CAPTCHA is a program that protects websites against bots by generating and grading tests that humans can pass but current computer programs cannot. The term “CAPTCHA” is an acronym for “Completely Automated Public Turing Test to Tell Computers and Humans Apart.”

In Magento, CAPTCHA can be used for both the Admin and customers. This tutorial will guide you to configure CAPTCHA for Admin and customers in Magento 2.

Configuring CAPTCHA for Admin in Magento 2

Before going into configuring CAPTCHA for your Magento store, first, you’ll need to have an API key pair (Google API website key & Google API secret key) for your website. This key pair is necessary for invoking Google’s reCAPTCHA service, as well as for verifying the user’s response.

Step 1: Go to Stores > Settings > Configuration in your Magento backend.

On the left side navigation panel, expand Advanced and choose Admin.

Go to CAPTCHA and you’ll see a section like below:

Step 2: On the upper-left corner, set Store View to “Default Config”.

Step 3: Configure fields to your requirements

• Enable CAPTCHA in Admin: choose Yes
• Font: set the font for CAPTCHA (or tick on Use default value)
• Forms: choose the forms in which the CAPTCHA is applicable. To choose multiple forms, hold the Ctrl key (PC) or Command key (Mac).
• Displaying mode: choose either ‘Always’ or ‘After a number of attempts to login’
• Number of unsuccessful attempts to login: enter the number of attempts before CAPTCHA appears. If the number is 0, CAPTCHA is always required.
• CAPTCHA timeout: enter the minutes before a CAPTCHA expires. If the CAPTCHA is expired, the user needs to reload the page for a new one.
• Number of symbols: fill in the number of symbols that appear in each CAPTCHA (up to 8). For a variable number of symbols that changes with each CAPTCHA, enter a range (such as 4-8).
• Symbols used in CAPTCHA: specify the symbols that can be used in the CAPTCHA.
• Case sensitive: Set to Yes if you want to require administrators to enter the characters in upper/ lowercase exactly as shown in the CAPTCHA.

Step 4: After you complete all the fields, click Save Config.

Enable CAPTCHA for customers

CAPTCHA for customers are usually required in these cases:

• Customer sign up for an account
• When they log in into their account
• Forgot password 
• Checkout as guest
• Register during checkout

The steps to configure CAPTCHA for customers are quite similar to those for admin.

Step 1: Go to Stores > Settings > Configuration in your Magento backend.

On the left side navigation panel, expand Advanced and choose Customers > Customer configuration.

Go to the CAPTCHA section. 

Step 2: Configure the fields in this CAPTCHA section (similar to configuring CAPTCHA for admin) :

• Enable CAPTCHA on Storefront: change to Yes
• Font
• Forms: choose the cases that a CAPTCHA will appear – Checkout; Login; Forget password, etc. Hold the Ctrl key (PC) or Command key (Mac) and click to choose multiple options. 
• Displaying mode
• Number of unsuccessful attempts to login
• CAPTCHA timeout
• Number of symbols
• Symbols used in CAPTCHA
• Case sensitive

Step 3: When finished, click Save Config.

Read More

 

How to Add Featured Products to Homepage in Magento 2

Magento featured products

Showing featured products on your Magento homepage is a great way to cross-sell and up-sell your products. These highlighted items on the front page help ease customer’s choices. A huge number of products can be overwhelming and cause a visitor to leave your site without buying anything. But with a list of products worth their consideration (new, on sale, best-selling,..), you can effortlessly encourage more sales while saving your customers’ time and efforts in finding desired items.

Add featured products in Magento 2

To highlight any products in your Magento 2 frontend, you can add a widget for your featured products and show it on your page using the following steps:

1. Log in to your account, then go to Stores > Attributes > Products.

2. Click on Add New Attribute.

3. Set the Default Label as Featured.

Then click Save Attribute.

4. From the Admin panel, navigate to Stores > Attributes > Attribute Set.

From the list of attribute sets, choose Default.

5. Find the Featured attribute under Unassigned attributes and move it to Product details in Assigned attributes.

6. From the Admin panel, choose Catalog > Products.

Choose the product you want to feature, click Edit.

From the dropdown menu of Attribute Set, choose Default.

7. Then scroll down until you see the Featured filed, set it to Yes.

8. Next, on the Admin sidebar, go to Content. Under Elements, choose Pages.

9.  In the list of your store’s pages, find the page you want to add feature products and click the Select option to Edit your page.

10. In the Page Information tab, fill the Page Title, URL Key, Store View and Status of the page.

11. Move to the Content tab and click on the insert widget button to add a widget for this page.

12. Now you can choose among available widget types. 

In Widget Type, choose Catalog product List. Configure the Conditions so that products with the Featured attributes are chosen to display.

You can also select the number of products shown as well as how they are displayed.

13. When you are done get back to the Content tab by clicking on the Insert Widget button and then click the Save Page button to apply the changes to the page.

Now the list of featured products will be visible to visitors on your store’s home page.

By simicart . com

Read More

Real-Time Chat Package for Laravel

 

Chatify is a Laravel package by Munaf Aqeel Mahdi that adds a complete real-time chat system to your application without any additional code:

Chatify uses Laravel’s Pusher integration for chat functionality, with the following features:

• Users / groups (soon) chat system.
• Real-time contacts list updates.
• Favorites contacts list (Like stories style) and “add to favorites” button.
• Saved Messages to save your messages online like Telegram messenger app.
• Search functionality.
• Contact item’s last message indicator (e.g. You: ….).
• Real-time user’s active status.
• Real-time typing indicator.
• Real-time seen messages indicator.
• Real-time internet connection status.
• Upload attachments (Photo/File).
• Shared photos, delete conversation.. (User’s info right side).
• Responsive design with all devices.
• User settings and chat customization : user’s profile photo, dark mode and chat color. with simple and wonderful UI design.

Read More

Real-Time Chat Package for Laravel

Chatify is a Laravel package by Munaf Aqeel Mahdi that adds a complete real-time chat system to your application without any additional code:

Chatify uses Laravel’s Pusher integration for chat functionality, with the following features:

• Users / groups (soon) chat system.
• Real-time contacts list updates.
• Favorites contacts list (Like stories style) and “add to favorites” button.
• Saved Messages to save your messages online like Telegram messenger app.
• Search functionality.
• Contact item’s last message indicator (e.g. You: ….).
• Real-time user’s active status.
• Real-time typing indicator.
• Real-time seen messages indicator.
• Real-time internet connection status.
• Upload attachments (Photo/File).
• Shared photos, delete conversation.. (User’s info right side).
• Responsive design with all devices.
• User settings and chat customization : user’s profile photo, dark mode and chat color. with simple and wonderful UI design.

Read More