PWA Megamenu Installation Guide

Jul 28, 2021 Update: UB PWA Mega Menu v1.2.5 is fully compatible with Magento PWA Studio v.10.0.0. Please discard the installation step in this tutorial and follow the latest installation workflow in this guide.

In the previous article on Magento PWA Studio tutorial, we walked you through how to have a working copy of the Venia storefront installed and running on top of Magento 2 using @magento/create-pwa command. In this second article on setting up a Magento PWA project, we’ll give you step-by-step instructions for merging our UB Mega Menu storefront into your existing Magento PWA Studio project, so you can get started with your PWA project as quickly as possible.

Before you get started…

If you’re new to UB Mega Menu module and new to Magento PWA Studio in general, get yourself familiar with the following terms first. Continue reading

Magento PWA Studio tutorial

Aug 28, 2020 Note: You can follow this tutorial for the latest PWA Studio v.7.0.0.
Jun 2, 2020 Note: We have tested this tutorial with the latest PWA Studio 6.0.1 and everything worked fine.
Feb 12, 2020 Note: At the time of writing this tutorial, the Magento PWA Studio version was 5.0.0. We’ve just tested the tutorial with the latest PWA Studio v5.0.1 as well.

As you might know, Magento PWA Studio v5.0.0 officially introduced a new handy command -- @magento/create-pwa -- that allows for getting a new PWA Studio project up and running way easier. Actually, our team noticed that this command was in place before and we did try this command successfully with PWA Studio 4.0.0 for an experimental setup.

This tutorial will walk you through all steps to use this command to set up an initial project structure using the Venia storefront as a template. Continue reading

Knockout JS in Magento 2 checkout

Magento 2 uses the Knockout JS framework to dynamically build the checkout page. Knockout JS makes use of the Model-View-ViewModel (MVVM) pattern to build the dynamic javascript user interfaces.

In this article, we will start off by looking into all aspects of the rendering process of Magento 2 checkout page. Then we will study an example of using Knockout JS in UB One Step Checkout -- a one step checkout extension for Magento 2. We hope this gives you a foundation for further looking into Knockout JS. Continue reading

Import products in Magento 2

When you have a large catalog of different products, creating new products one-by-one or updating existing products manually are far from practical. So, it’s essential to find a tool that gives you the ability to manage multiple records in a single operation.

With Magento 2, the easiest way to make mass changes in your catalog is to upload them via .CSV file using Magento’s Import and Export functionality. You can not only import new products to your inventory, but also update, replace, and delete existing sets of products.

Let’s get started. Continue reading

Magento 2 product attributes

Magento has always provided the level of sophistication for product attributes. Magento 2 is no different.

Before diving into the creation of products, you need to explore a very important -- and powerful -- feature of Magento 2: product attributes and attribute sets. Read on to become familiar with attributes and attribute sets in Magento 2:

  • Why are product attributes so important?
  • What is the role of attribute sets?
  • How Magento 2 uses attributes to manage the information associated with products?

Continue reading

Create a new language for Magento 2 theme

When doing your business globally, having a multilingual store is a smart step to take.

By default, Magento 2 enables you to localize your store in multiple languages easily with the help of translation dictionaries and language packages:

  • A translation dictionary refers to a comma-separated value (.csv) file which is a convenient way to create translation for a custom module or theme.
  • A language package is a collection of translation dictionaries for all words and phrases in Magento 2 application.

This article will guide you through the process of creating a new language for your Magento 2 theme. For demonstration purpose, we will use our Magento 2 theme -- Crafts 2.0 -- as an example and explain how you can add the German language as well as the English language that is set as default in the theme. Continue reading

Magento 2 multi stores

This second article in the Magento 2 multi-stores tutorial shows how you can create multiple websites, stores, and store views in Magento 2. Check out Part 1 to catch up on the topic.

For the purpose of this tutorial, let’s assume that we need to create a Magento 2 multi-store structure including:

  • The 1st Website (samplefashion.com) with two store views -- English and German
  • The 2nd Website (samplekidstore.com) with one store view -- Kidstore

Set up Magento 2 multi stores

Set up Magento 2 multi stores

Continue reading

Magento 2 multi stores

One of the most exciting features of Magento 2 is the ability to set up multiple websites or store views from a single Magento 2 backend and codebase.

For example, you might have different sites per market -- a men’s clothing store, a woman’s clothing store, and a kid store; and each store uses different languages, domain names and categories as shown below: Continue reading

Manage Magento 2 cache

Magento 2 employs backend caching at many levels within the system -- File System (default), Database, Redis and Varnish, which is used to store web pages to speed up the load processes and improve your Magento 2 site performance.

In this post, we are going to introduce a couple of handy CLI (Command Line Interface) commands -- one of the simplest methods to manage your Magento 2 cache. We will also make a short overview of Magento 2’s default cache backend solution -- file system; the difference between cache:flush vs. cache:clean.

Let’s roll in. Continue reading