Knowledge Base

1.1 System Overview

Swift Commerce is an app that lets you manage your online store through multiple channels in one dashboard. Available features include managing orders, products, inventory, and shipping.

Having a Swift Commerce app provides many benefits, such as data entry is not done manually anymore. The existence of this application aims to reduce human error and increase efficiency and accuracy.

That's why ICUBE built a unified app that integrates all of your sales channels into one easy-to-use dashboard so you can focus on something else. In addition, you can register several users with certain access restrictions based on branch offices or work units to make it easier to control your sales activities.

1.2 Authorized Use Permission

Swift Commerce is available to clients who have worked with ICUBE. Clients can register accounts as admins, where administrators can define access restrictions for each specific account. These access restrictions can be in the form of certain menu restrictions or certain actions such as importing data or deleting products.

1.3 Points of Contact

For additional information please contact the developer team.

2. FEATURES

2.1 Dashboard

Dashboard is the main page after successfully logging into the application. This page provides a preview of lifetime sales, average orders, last orders, last search terms, and top search terms.

Before we develop this feature, in the event we need something config to change like enable or disable button add to cart at product item PLP, we must be config at swift.config.js and we must re-deploy the PWA site. So we develop this for easier change config from back-office admin.

Go to backoffice > stores > Configuration >  Icube Extension > PWA. The system will redirect to the PWA configuration page.

Here are the parts of the Swift PWA configuration:

1. General
   

This is a section for general on config swift PWA which includes:

1. PWA URL: Enter a PWA URL
   

2. Encryption Key: This is the config key for encrypting/decrypting tokens like checkout tokens, and auth tokens.
   

4. Share Icon Twitter: This is the config for the icon Twitter which icon will be displayed on PDP (share product to social media).
   

5. Share Icon Line: This is the config for the icon Line which icon will be displayed on PDP (share product to social media).
   

6. Share Icon EMail: This is the config for the icon Email which icon will be displayed on PDP (share product to social media).
   

7. Share ICon Telegram: This is the config for the icon Telegram which icon will be displayed on PDP (share product to social media).
   

8. Share Icon Pinterest: This is the config for the icon Pinterest which icon will be displayed on PDP (share product to social media).
   

9. Share Icon Linkedin: This is the config for the icon Linkedin which icon will be displayed on PDP (share product to social media).
   

10. Default Robot: This is the default setting for google robot crawl.
    
    

The image below is an example of the icon configuration displayed on the front end.

12. Header in General Configuration
    

• Enable Sticky Header: This is to enable and disable the sticky header. If the sticky header is activated
  

when the web is scrolled, the header will continue to follow

• Mobile Navigation: Navigation for mobile there are 2 options, namely bottom navigation and burger menu.
  

The navigation menu button is below, the burger menu is at the top and when we click on the burger menu a slide will appear on the right.

This is the display of the cms identifier for the header on the front end base on the PWA version:

Desktop version 1

Sticky Header Version 1

Desktop version 2

Sticky Header Version  2

Desktop Version 3

Sticky Header Version 3

Desktop Version 4

Sticky Header Version 4

Mobile Bottom Navigation

Mobile Burger Menu

13. Footer in General Configuration
    

• Footer Version: This is to set up a cms identifier to render footer content based on the PWA version 1 - 4.
  

• Enable Footer Mobile: This is to enable and disable footer content on mobile. 
  

CMS Block for 4 version Footer: To manage or editing the content footer can be done on the CMS block

This is the display of the CMS identifier for the footer on the front end base on the PWA version:

Version 1 in desktop and mobile

Version 2 in desktop and mobile

14. General Frontend: Users can customize colors, fonts, style buttons, and links from the back office without asking the developer for help to customize.
    

• Primary color: By default, all components that use Material UI as the base component will use this primary color as their base color, for example button color, text color
  

• Secondary color: To override the primary color used in Material UI. *Currently unused.
  

• Background color: To set the background color of the PWA page body
  

• Error color, warning message color, success message color:  For alert color, error field
  

• Font: To set the text and heading font type and set the font color
  

• Button: To set button styling such as font color, background and hover color
  

• Link: To set link styling such as color, hover color, text-decoration, and text-decoration hover
  

2. PWA Popup Installation
   

This section is config about custom button installation PWA, which includes:

1. Install Message: This is to config Install message will be displayed at custom button installation PWA.
   

2. App Name: This is to config App name will be displayed at custom button installation PWA.
   

3. Custom Install App Enable: This is to disable/enable render custom button installation PWA.
   

This is the display of the PWA popup installation on the front end.

3. Contact
   

CMS Contact Identifiers: This is to set up a cms identifier to render contact us content.

This is the display of config contact on the front end.

This is a section to config about all image size configs used in swift-PWA, which includes:

1. Product: This is to config width and height image size on the product item list
   

This is what the product configuration looks like in the image section on the front end.

2. Home Slider: This is to config width and height image size on the home-slider desktop view and home-slider mobile view.
   

This is the display of the config home slider on the front end.

3. Magezon Slider: This is to config width and height image size on the magezon-slider desktop view and magezon-slider mobile view.
   

This is the display of the config megazon slider on the front end.

4. Category: This is to config width and height image size category banner on PLP.
   

This is the display of the config home slider on the front end.

5. Promo Banner Lite: This is to config width image promo banner lite.
   

5. Megamenu
   

This section to config about megamenu feature on PWA. Which includes:

1. Ves Menu Enable: This is to config enable/disable PWA to use vesmenu or not.
   

2. Ves Menu Alias: This is to config vesmenu alias to get the list menu (vesmenu) from graphql.
   

6. Pricing
   

This section to config about pricing feature on PWA.

Remove Decimal Price Enable: This config to enable/disable on all price PWA will be rendered price with decimal or not.

7. Product Listing
   

This section to config about Product list page/category page, Which includes:

1. Catalog Enable: This is config to enable/disable catalog on PLP.
   

2. Page Size: This is to config the amount of data that will be obtained from the graphql query.
   

3. Drawer Filter On Desktop Enable: This is to config enable/disable filter PLP will be rendered on left section PLP.
   

This is the display of the config drawer filter on desktop enable on the front end.

4. Label Enable: This is config to enable/disable render all labels on PLP.
   

5. Label New Enable: This is config to enable/disable render new label on PLP.
   

6. Label Sale Enable: This is config to enable/disable render sale label on PLP.
   

7. Label Weltpixel Enable: This is config to enable/disable the render weltpixel label on PLP.
   

8. Configurable Options Enable: This is config to enable/disable the render configurable option on the product item.
   

9. Rating Enable: This is config to enable/disable displaying count rating on the product item.
   

10. Add to Cart Enable: This is config to enable/disable button add to the cart product item.
    

11. Quick View ENable: This is config to enable/disable button quick view product item.
    

8. PDP
   

This section to config about PDP feature on PWA.

Popup Detail Image Enable: This is config to enable/disable feature popup detail image on PDP.

This is the display of the config popup detail image enable on the front end.

9. Home
   

This section to config about a home page, Which includes:

1. Use CMS Page Enable: This is to enable/disable the home page will render use cms page or static content.
   

2. Use CMS Page Identifier: This is to config the cms identifier home page if the home page renders use the cms page.
   

3. CMS Social Media Link Identifier: This is to config cms social media if the home page renders uses static content.
   

4. Features Product Enable: This is to config enable/disable feature product if the home page renders use static content.
   

5. Features Product Url Key: This is to config URL key feature product to get data feature product if the home page renders use static content.
   

6. Category List Enable: This is to config enable/disable category list (some category) if the home page renders use static content.
   

7. Category List Url Key: This is to config the URL key category list (some category) if the home page renders use static content.
   

8. Category List Image Size Mobile Width: This is to config image size width banner category list (some category) on mobile view if the home page renders use static content.
   

9. Category List Image Size Mobile Height: This is to config image size height banner category list (some category) on mobile view if the home page renders use static content.
   

10. Category List Image Size Desktop WIdth: This is to config image size width banner category list (some category) on desktop view if the home page renders use static content.
    

11. Category List Image Size Desktop Height: This is to config image size height banner category list (some category) on desktop view if the home page renders use static content.
    

12. Banner Slider Enable: This is config to enable/disable banner slider if the home page renders use static content.
    

13. Banner Slider Title: This is the config banner slider title (to get data banner from graphql) if the home page renders use static content.
    

10. Facebook Meta
    

This section to config about facebook meta, Which includes:

1. Module Enable: This is to config PWA will be using Facebook meta or not.
   

2. Facebook Meta Id: This is to config facebook meta id.
   

11. Recaptcha
    

This section to config about Recaptcha, which includes:

1. Module Enable: This is to config enable or disable general Recaptcha.
   

2. Recaptcha Environment Key: Is configuration to set Site key from Recaptcha configuration (detail at here). With environment local, dev, stage, and prod.
   

• Recaptcha Local Key
  

• Recaptcha Dev Key
  

• Recaptcha Stage Key
  

• Recaptcha Prod Key
  

• Server Local Key
  

• Server Dev Key
  

• Server Stage Key
  

• Server Prod Key
  

3. Recaptcha Login Enable: Is configuration to set Secret key from Recaptcha configuration (detail at here).
   

4. Recaptcha Register Enable: This is to config enable or disable Recaptcha at the registration page.
   

5. Recaptcha Contact Enable: This is to config enable or disable Recaptcha at the contact us page.
   

12. Paypal
    

This section to config about Paypal feature on PWA, Which includes:

1. Module Enable: This is to config swift PWA will be using Paypal express button or not.
   

2. Debug: This is to config enable/disable debugging PayPal express button on PWA.
   

13. Customer
    

This section to config about Customer features on PWA, Which includes:

1. Forgot Password Template: This is to config identifier template email forgot password.
   

2. New Account Confirmation Template: This is to config identifier template email new account confirmation.