This README provides detailed information on the Webflow elements, dependencies and external services used in the custom code of this project.
None.
To run the scripts on all pages, the following script should be placed in the <head> tag section:
<!-- External: Adds the CMS Filter attribute. -->
<script
async
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"
></script><!-- Inline: To be placed on the 'Inside <head> tag' section -->
<script>
const ENV = {
DEVELOPMENT: {},
STAGING: {},
PRODUCTION: {},
};
const environment = ENV.STAGING;
const loadScript = (path) => {
let host;
switch (environment) {
case ENV.PRODUCTION:
console.log('production');
host = 'https://cdn.jsdelivr.net/npm/@sugarologie/cakeculator@latest';
break;
case ENV.STAGING:
console.log('staging');
host = 'https://cb7vpk60-3000.uks1.devtunnels.ms';
break;
case ENV.DEVELOPMENT:
console.log('development');
host = 'http://localhost:3000';
break;
default:
console.log('default');
host = 'http://localhost:3000';
}
const script = document.createElement('script');
script.async = true;
script.defer = true;
script.src = `${host}${path}`;
document.head.appendChild(script);
};
</script>It is important to note that the loadScript function is used to load external scripts asynchronously. The ENV object is used to define the different environments and their respective hosts. The environment variable is used to define the current environment. The loadScript function is then used to load the external scripts based on the current environment from the specific pages.
N/B: Make sure to update the environment and host values respectively.
The cakeculator page has a form with specified collection items loaded onto the available dropdowns. The script will then append url params to the url and then redirect to the cakeculator results page. The cakeculator app is loaded asynchronously using the following script:
<!-- Inline: To be placed on the 'Before </body> tag' section -->
<script>
loadScript('/pages/cakeculator/index.js');
</script>The cakeculator results page displays the results of the cakeculator app by plugging into Finsweet's CMS Filters attribute API. The script is loaded asynchronously using the following script:
<!-- Inline: To be placed on the 'Before </body> tag' section -->
<script>
loadScript('/pages/cakeculator-results/index.js');
</script>