menu

Saleor Commerce

The world’s fastest growing open-source e-commerce platform with billions of dollars transacted. Powered by Python, GraphQL, ReactJS and PWA.

Channels
# All channels
view-forward
# General
view-forward
# Announcements
view-forward
# Design
view-forward
# Development
view-forward
# Saleor 3.0
view-forward
# Saleor Features
view-forward
Team

Modifying the Storefront

July 10, 2020 at 12:25am

Modifying the Storefront

July 10, 2020 at 12:25am (Edited 3 months ago)

Important Files

  • saleor-storefront/config/webpack/config.base.js - Base webpack config file.
    • Can change name of the app (displayed when installed on mobile)
  • saleor-storefront/src/index.html - Main template file that contains the <div id="root"></div>
    • Can change title of storefront here
  • saleor-storefront/src/index.tsx - Main entry point file. Render's the <App /> component, apollo-client, and others to the root div in index.html file above.
  • saleor-storefront/src/core/config.ts - Controls number of products shown per page, support email, gateway providers, social media, and some meta.
    • Can change support email
    • Can change products shown per page
    • Can change gateway providers
    • Can change social media links that are displayed in the footer
    • Can change some meta options
  • saleor-storefront/src/images/ - Holds all the images for logo, cart, favicon, etc.
    • Can change storefront logo, favicon, or add new images here. Easiest way I've found is to save saleor's logos as backups (logo-backup.svg) and insert your own and mess around till you get it looking the way you want and get rid of backups. I'm not a graphic person so not sure the best way.
  • saleor-storefront/src/globalStyles/scss/variables.scss - Contains base styles like colors, font size, container width, media breakpoints and more.
  • saleor-storefront/src/@next/globalStyles/ - Contains more base styles, themes, media, and constants.
  • saleor-storefront/src/views/ - This folder controls the views, or what is displayed for each page. The way Saleor has it setup, most views have a file named "Page.tsx" that controls the layout of the page and a file named "View.tsx" that calls the query and renders the <Page /> component with the data.
    • Can add another view to storefront here. Requires adding a route (see routes below).
  • saleor-storefront/src/@next/pages/ - Second spot for modifying/adding different pages. This is the recommended directory to add new pages.
  • saleor-storefront/src/app/routes/ - This folder contains the paths as well as holds the <Routes /> component. Here is where you add a new path and route.
    1. Export a new path in paths.ts
    2. Inside AppRoutes.tsx import your new view (see views above) and create a new route with path={paths.newPath} and component={newViewPage}
    3. To link to your new view import { Link } from "react-router-dom" and use new path you created in paths.ts (make sure to import it)
  • saleor-storefront/src/app/App.tsx - This is main <App /> component that renders the <MainMenu />, <Routes /> (explained below), <Footer /> and a couple other components.

Adding a Payment Gateway

  • saleor-storefront/src/core/config.ts - Add new gateway provider name here.
  • saleor-storefront/src/@next/components/organisms/ - Create a new folder for new payment gateway component here.
  • saleor-storefront/src/@next/components/organisms/PaymentGatewaysList/PaymentGatewaysList.tsx - Import new gateway component, create a new switch case to handle your gateway component.

Receiving confirmation emails

  • Set EMAIL_URL environment variable for Saleor core.
    • Using Docker - Add EMAIL_URL as new enviornment variable to both the api and worker service following the format here.
  • Issues getting emails working?
    • Gmail
      • Check to see that "Less secure app access" is turned ON. Under "Manage your Google Account" > Go to the security tab. By default, the setting is off for security reasons.
      • If using 2FA make sure to set an app password and use that in place of your normal login password.

Please let me know if anything needs to change or could be added upon. I'll continue to add more when I can.


July 10, 2020 at 10:24am
Nice to see it! In the future we would like to move all pages from saleor-storefront/src/views/ into the saleor-storefront/src/pages/ - there, in the directory we are building components in atomic design with tests, stories and in strict mode. Therefore, please take into account, that it's better to add new pages already in directory.
like-fill
3
  • reply
  • like
You might also take a look at readme for next directory
  • reply
  • like
Wow! Great work 👏
like-fill
2
  • reply
  • like

July 10, 2020 at 6:09pm
Thanks you!
like-fill
1
  • reply
  • like
thank you I added the pages directory. That is good info to know. Does this mean that in the future all the "src/components/" will be moved into "src/components/" as well?
  • reply
  • like

July 12, 2020 at 5:24am
They have documentation for deploying the core to Heroku (note that it does not include the storefront or dashboard).
  • reply
  • like

July 12, 2020 at 6:45pm
I plan to use Docker so i'm not quite sure on that. You may ask Saleor about that if you want to try and use Elastic Beanstalk.
  • reply
  • like
Hk, you can literally deploy it in any Linux environment. 3 apps that need to talk to each other, you can set them up on one server with ports, or use three different DNS servers.
I’m not using any of the three, I’m just port forwarding on my RHEL distro, with one DNS server.
like-fill
1
  • reply
  • like
I understand now. Thanks
  • reply
  • like
Cyberdemic, I had total faith in you and applaud you !!!! :)
like-fill
1
  • reply
  • like
I will make equal donations to Saleor team and you Cyberdemic as I said I would, please send paypal info via email to [email protected]
  • reply
  • like

July 13, 2020 at 10:53am
Thank you !
like-fill
1
  • reply
  • like

July 14, 2020 at 9:27am
thank you I added the pages directory. That is good info to know. Does this mean that in the future all the "src/components/" will be moved into "src/components/" as well?
yes, that's right
like-fill
1
  • reply
  • like

July 16, 2020 at 4:32pm
like-fill
1
  • reply
  • like
Quick fix for higher res thumbnails:
saleor-storefront/src/@next/components/molecules/Thumbnail/Thumbnail.tsx
Have url return url={maybe(() => thumbnail2x!.url)}
Edited
like-fill
1
  • reply
  • like

July 21, 2020 at 4:54am
If I want to change the front-end, do I just change the code directly? I remember that I read somewhere saying I have to follow a SDK so that I can integrate my code with future Saleor code. Is this true? How about back-end? Do you have a SDK for the back-end? Thanks
like-fill
1
  • reply
  • like

July 21, 2020 at 8:54pm
From what I understand, Saleor is working on a SDK but it's not complete yet. There is a blog here that mentions a possible release in Q3/2020. I don't have any experience working with a SDK so I don't want to steer you in the wrong direction. I personally have just been changing the code and continue to pull new updates as Saleor releases them. If you're interested in their SDK it can be found here.
  • reply
  • like
Thanks. I guess I will just change my local code directly then.
like-fill
1
  • reply
  • like

September 14, 2020 at 7:10pm
Small update: Add mobile app name change and issues with confirmation emails using gmail.
Edited
like-fill
1
  • reply
  • like

September 16, 2020 at 9:16am
Is there a way that you can specify protected routes for users? For example if you want to have a page with personal offers. A user needs to be logged in before they can access it.
Currently I added a <ProtectedRoute /> component
const ProtectedRoute = ({ component: Component, ...rest }) => {
const { user, loaded } = useAuth()
if (!loaded) {
return <Loader />;
}
return (
<Route {...rest} render={(props) => (
!user
? <Redirect to={paths.loginUrl} />
: <Component {...props} />
)} />
)
}
inside Routes
<ProtectedRoute path={paths.personalOffersUrl} component={PersonalOfferPage} />
The issue I have with this is that the user, if logged in, very very briefly sees a flicker when accessing the page. Is there a better way to do protected routes?
  • reply
  • like

October 4, 2020 at 11:59pm
Any ideas about the difference between Product type and category?
  • reply
  • like
I've a car engine, the category should be "Engine" but the product type?
  • reply
  • like

October 8, 2020 at 8:26am
I think it shouldn't be any problem to name the product type Engine in that case.
Edited
  • reply
  • like