Magento PWA – Get store logo image to venia theme

Magento 2 introduced pwa-studio as their progressive web application representative. pwa-studio provides you a base architecture for integrating your Magento 2 setup with your Progressive Web Application storefront.
Magento 2 uses GraphQL to fetch data from Magento and ReactJS to represent the data to users. There are many components provided with pwa-studio to run a basic pwa storefront. It does not contain all features and functionalities Magento has to offer and still work its a work in progress prototype. Magento 2 community is improving Magento 2 architecture by adding GraphQL support for all its module and updating PWA studio to consume the GraphQL data and represent to user as a complete working e-commerce storefront.

Please refer to my previous post on How to use Query component in pwa-studio. In this post, I will provide you the code to fetch and display Store logo from Magento 2 admin panel.
Magento allows to add/update logo for your storefront from admin panel while pwa-studio is using (for now) static logo image in its directory structure. To get your store logo from admin panel, You will require to make changes to your Logo component present in pwa-studio directory located at `packages/venia-concept/src/components/Logo`. You will require to edit your logo.js file.

To get data from Magento, you need to make a query to magento’s endpoint. So, first, you need to import Query component to your logo.js file.

import { Query, resourceUrl } from 'src/drivers';
import storeLogoQuery from 'src/queries/getStoreLogo.graphql';

In first line, we are adding Query and resourceUrl components from pwa-studio’s drivers. These components will be used to make a query to Magento and to generate a URL for logo image respectively.
You will also require to create an GraphQL to get make a request and get the data you need. The second line we added is to let pwa-studio know where your graphql resides. I have created a new graphql to keep it separate from other graphql and it will only get the data we require to display Logo image.
Create a file getStoreLogo.graphql at `packages/venia-concept/src/queries` location.

query getStoreLogo {
     storeConfig {
         id
         header_logo_src
         logo_alt
         logo_height
         logo_width
     }
 }

Here, we are only requesting logo details like logo src, logo alt text, logo width and height. When magento will get the request from this graphQL it will only send us the details we have requested.
Now, to implement this in your logo.js file, you will require to update your `return()` function. Go to your packages/venia-concept/src/components/Logo/logo.js again and replace your return function with below code.

return ( 
    <Query query={storeLogoQuery}>    
    {({ loading, error, data }) => {    
        if (error) { return ''; }    
        if (loading) { return ''; }    
        return <img
            className={classes.logo}
            src={
                 resourceUrl( data.storeConfig.header_logo_src, {
                   type: 'image-header-logo',
                   width: data.storeConfig.logo_width
                 })
             }    
             height={data.storeConfig.logo_height}
             alt={data.storeConfig.logo_alt}
             title={data.storeConfig.logo_alt} />;
    }} </Query>
);

Here you can see we added a <Query> tag which is used in pwa-studio to make a query request to Magento backend. The `query` attribute denotes which graphQL query to execute. Here we have added storeLogoQuery which we have imported at start of the file.

Now, if you try to build your code again, it will give you an error of invalid type ‘image-header-logo‘ because it is a new image type we have introduced. By default pwa-studio provides two image types
1. image-product
2. image-category

These types are defined in packages/venia-concept/src/util/makeUrl.js file. So, we will require to add our new image type in the file to resolve the error. If you open the file for editing, you will see a constant named mediaBases. This variable consists of all of your media image file types and their location directories in Magento source code. You can add your image types and their location path as a new entry in this constant like below.

const mediaBases = new Map()
     .set(
         'image-product',
         process.env.MAGENTO_BACKEND_MEDIA_PATH_PRODUCT ||
         '/pub/media/catalog/product'
     )
     .set(
         'image-category',
         process.env.MAGENTO_BACKEND_MEDIA_PATH_CATEGORY ||
         '/pub/media/catalog/category'
     )
     .set(
         'image-header-logo',
         process.env.MAGENTO_BACKEND_MEDIA_PATH_LOGO ||
         '/pub/media/logo'
     );

Here, we added our image type with name ‘image-header-logo‘ and set the directory path as ‘/pub/media/logo‘, the directory where Magento stores its logo images.

Now build your pwa-studio again and execute watch command. You will be able to see your store logo at your pwa-studio in place of venia theme logo.

Advertisement