Project Background
SwagUp, an established player in the swag management space, opted to transition its main website from ReactJS to Webflow to empower their marketing team with easier maintenance and frequent updates. While Webflow is an excellent tool for design-driven web development, there are instances where custom code is indispensable for certain functional aspects. That's where our expertise came into play. Partnering with Akshay Agarwal, a proficient Webflow developer and offical Webflow Expert, I had the opportunity to lend my custom coding skills to ensure the website's functionality was in sync with its fresh design.
SwagPrice Calculator
One of the pivotal features on SwagUp's website is the SwagPrice Calculator on the pricing page. It's a dynamic tool that helps potential customers get a pricing estimate based on various parameters like product type, quantity, and print type. By architecting a custom JavaScript solution, I was able to facilitate real-time API calls to fetch the corresponding prices based on user input. The calculator would process the JSON data received from the API, dynamically updating the price estimates on the page.
Shipping Calculator
SwagUp's service isn't just about creating swag; it's about getting it where it needs to go. The Shipping Calculator is another feature I worked on, enabling users to estimate shipping costs based on the destination and weight of the order. Similar to the SwagPrice Calculator, a custom JavaScript solution was developed to make real-time API calls. The data fetched from the API would then dynamically update the shipping cost estimates on the page, providing users with a clear picture of the total cost.
User Status on Navbar
An additional layer of personalized user experience was introduced by displaying the logged-in user's status on the navbar. This feature was achieved by utilizing cookies set on the main domain, making it accessible across all subdomains. A custom script was developed to read the cookie data, identify whether a user is logged in, and accordingly display the user's profile picture and name on the navbar. This seamless integration between the main site and the dashboard subdomain added a touch of personalized interaction for the users, ensuring a coherent user experience across the platform.
These tailored solutions not only enriched the user experience but also showcased the seamless blend of design and functionality, marking a successful transition to Webflow for SwagUp.