· Version of Stencil CLI and Node used - Node 12.20 and stencil 3.0.3
· How the .stencil-dev file is being used? - This file contains the credentials to run the site on a dev sandbox version of the site. When working on the site in the sandbox replace the default .stencil file with this.
· How the same theme is being used for the Staging and Production sites? Whether the theme is pushed to sandbox or production is decided by whatever is contained in the .stencil file. This is why there is a .stencil-dev file that contains keys and address necessary to push to the sandbox.
· With the latest version of Stencil CLI and Node version 12, theme preview fails with an error in the console
path.startsWith is not a function
Any pointers on this?
-Many things can cause these kinds of issues but my best guess is the error is occurring because of compatibility issues between the version of cornerstone and node. My working environment is running on node 12.20 and stencil 3.0.3. Each version of stencil has been very particular as to what node versions it’s compatible with, and I did have to use nvm to switch through different versions of node until I found a compatible version.
There are many custom modules present in this folder, they appear to be mostly used in the global.js.
Where on the website do each of these modules execute? That is, for which user facing section on the website were each of these modules written?
Most of the modules in global.js are looking for the widgets that appear on each page. This has to be run on each page because any page can have any of the widgets added to it via Bigcommerce’s page builder.
Also, which template do they map to? They don’t necessarily map to a specific template because these modules can appear on almost every page if the admin chooses to put them there.
Additionally, some of these modules are empty, export empty function, export function with commented code, have sections of code commented. Was any of this work on progress or were supposed to be used somewhere? If yes, provide information on that.
Any empty function or export or commented out code is most likely legacy code that can be deleted.
These modules are listed below,
1. about-us.js – some commented code present
About-us.js is no longer needed. Necessary code was moved to other files.
2. Brand-wheel-v2.js
This hooks up to the brand wheel as pictured above on the homepage and about us page.
3. Brand-wheel.js
Older version of the brand wheel that can be deleted
4. Corporate-citizenship.js
Handles animations that are unique to the corporate citizenship page. Specifically the image transitions in the blue section that has the various icons. They transition based on where in the text you are present.
5. economic-impact-report.js – Flipbook plugin uses a localhost PDF URL
This JS file is just for testing purposes and can be deleted. The flipbook was moved to a static html file present in the dav at https://geappliancesco.com/content/economic-impact-report-2020.html inside that html file there is an attribute in an options object called pdfUrl. When updating the economic report you can upload a pdf to the dav and update that line to the new url.
6. Featured-in.js
This is used on blog articles. It will look at the tags and if one of the tags matches the name of a leader it will generate a ‘Featured In’ section at the bottom of the article that links to their bio.
7. Globe.js
8. home.js – some commented code present
Commented code can be removed. This handles the transitions of the semicircle in the top left corner and also moves the background image slightly based on whether the circle is covering it or not.
9. Impact-map.js
This is used on the community impact page. It controls the interactive map that is navigated through scrolling.
Each slide is built with using a ‘Fact’ tag that has the following attributes
data-index - The order this fact should appear
Id - unique id
Data-subhead - What appears as a subheader under the title
Data-body - Body text for desktop
Data-mobile-top and data-mobile-bottom - On mobile it is necessary on some sections to split the body into the top and bottom to make room for an image in the middle. This text replaces data-body text.
Towards the end of the project we got pretty close to the max file size for a template with this one. So I recommend converting the fact component to a page builder widget if you plan on making major additions.
10. Latest-innovations.js
This is used on the innovation page, and is meant to update the number counter (1 / 5, 2 / 5, etc) text above the title based on the number of innovations added to that page in the page builder.
11. layout.js – exports empty function
Can be deleted
12. Meet-our-people.js
Handles the generation of and animation of the leadership page. People are pulled dynamically from products.
13. Operations-locations.js
Handles the manufacturing operations sections of the about us page.
14. operations.js – empty file
Can be deleted
15. pinImage.js
Handles the sections where the image on the side is pinned in place while the text can freely move on the right.
16. Product-categories.js
Handles the changing categories and brands on the innovation page.
17. test-component.js – exports a function that logs a string, appears to be testing something?
Can be removed.
18. Timeline.js
Handles various aspects of the timeline on the Innovation History page. Note that part of the timeline is generated from what is in the timeline.html page and part of it is generated with page builder widgets. This is to avoid the total widget limit that BigCommerce enforces.
19. Translation.js
Handles the google translate dropdown and initiates page translation when a user clicks on a language option.
This folder has two modules
· people.js
Appears to be fetching some data from /people relative URL on the website, performs a bunch of operation on the retrieved data, and is being invoked in the global.js.
The people who appear on the leadership page, and are mentioned in blog articles and have bios are technically products in the eyes of Bigcommerce. Bigcommerce does not allow for custom content types so we repurposed products. But we also needed to use this data throughout the site not just one product page like they provide, so as a solution we made a page without any extra elements other than the necessary data coming from people and wherever people are necessary to appear on that page a request is made to /people to get the data.
· personPage.js
Can be deleted. Code for people pages were moved to page builder widgets
This folder has three modules
· articlePage.js
Used on individual article pages. Handles taking the featured image and using it as a background image or using a default one if it doesn’t exist. Also gets people information if they are added as tags.
· news.js – has a bunch of commented code
Commented code can be removed. Handles the news page. Allows you to switch from ‘News’ to ‘Journal’ articles and pulls in the articles via ajax calls. Also pulls in the first bit of text for the featured blog article.
· relatedBlog.js
Also part of the news page. It is focused on filling the ‘Latest News’ section with the most recent articles.
There are a bunch of dist folders in the subfolders in the assets/js folder. Stencil themes usually have a single dist folder a level below the assets folder.
What are these, what’s their purpose, and how they’re being generated?
Dist folder and its contents are generated as part of the stencil build process, interacting with those folders should not be necessary.
The custom templates have been created for some pages, and the JS modules that execute on these pages have been invoked globally in the assets/theme/global.js.
These are evoked globally because the content administrator has the ability to use any widget on any page. A lot of global.js is looking at the dom generated for these widgets and executing whatever js is necessary based on what widgets have been added in the page builder.
Looking at the assets/app.js, there are no JS modules mapped to the custom templates.
App.js is largely untouched from the default app.js file and most of the work is done in global.js
This folder has following files,
· csv_parse.py
· ge_timeline_v1.csv
· GE_timeline.csv
· timeline-clean.csv
· timeline-output.txt
Some information about what the Python script is being used for and what the rest of the files represent.
The csv parser was built specifically to pull large amounts of events from a csv file and convert it to text that the timeline template can understand using the event component. Since the events are already imported, this should no longer be necessary but is there for reference or if you plan on importing from csv’s again.
Widgets
Found on the workplace page. Displays an award with a title, link, and date
The widget isn’t currently being used in page builder. But the generated result is the same as what appears on the leader bio pages.
Currently on the workplace page. Displays a series of benefits with their associated icons.
Used on the home page and about us page. Creates the animated wheel of brands with text and images of the content admin’s choosing
Creates a breadcrumb style sub navigation. Appears on any sub page. For example, Company Overview
Generates a styled button. Can be found on the operations page, but it can be found throughout the site
Can be found on the corporate citizenship page. Generates and styles links that are meant to be external
Can be found on the Corporate Citizenship page. Generates carousels of images with captions
Used on the History of Appliance Innovation page. Generates individual event items to be placed on the timeline
Used on leadership bio pages. Generates a quote and image for a ‘Favorite GE Appliance’ section
Creates the employees that comprise the items in the carousel on the Workplace Page
Creates a block that shows all the articles the particular leader has appeared in. Appears on leadership bio pages.
Similar to the standard button widget but this creates a grid of 4 buttons. Appears on workplace
Generates the 3d spinning globe that appears on the homepage
Generates the header that appears on the top of most pages. Appears on workplace
Generates a large hero image that fills the viewport height and width. Not currently used. Homepage hero image is built into the template.
Similar to the Featured Employees generates items for a carousel featuring various inventors. Much of the features of the carousel are disabled when in admin mode in order to make it easier to add more items. Appears on the Innovation page.
Creates appliances to appear in the innovations section of the Innovation page.
Generates the Made in America block that appears on the About us page.
Generates the news carousel that appears on the home page.
Generates the container for the Manufacturing Operations section of the About Page.
These are the locations that will get inserted into the operations container
Generates a standard paragraph of text. Can be seen throughout the site. Company Overview for example
Creates background images that occupy one side of the screen. Appears throughout, for example Operations
Appears on the home page. Displays recent blog articles
Creates a subheader. Appears throughout, for example workplace
Creates a block meant for displaying three facts. Can be found on the Corporate citizenship page
Creates a background image on the side and text on the right. Not currently used.
Creates a video embed container that you can insert iframe code into
Not used. Purely for reference.
Custom Built APIs
The site required blog articles and people to appear throughout the site and not just on one dedicated page. Bigcommerce does not support this out of the box so custom apis were created. Use ajax calls on these endpoints to get the info you need.
/blog - Will return all blog articles.
/blog/tag/{tag} - Will return all blog articles with that tag.
/people - Will return all people (products)
Additional Notes:
I recommend converting components>event.html into its own widget to give more room to make future updates on the impact map.