Bodega Bay Hard Seltzer

[heldercervantes]

Hello boys and girls, here's my newest:

https://drinkbodegabay.com/

Bodega Bay is a Hard Seltzer drink that's delivered sustainably and contributes to projects to move climate solutions forward and help those less fortunate than ourselves.

The website was built with my customary repeater based content blocks solution. The frontend is based on webcomponents built with StencilJS, and as always, it was a pleasure to build.

An interesting detail was the processing we had to make on the locations listed in the Where to Buy section. Basically we were handed an Excel list of locations with irregular addresses that had to be geographically located on google maps. Well, maps doesn't really agree with doing that much processing at once, so we had to convert each location's address into coordinates. We built a script that imported everything to pages, then another one that made requests to grab the coordinates from google maps, store them and move on. As Maps defends itself against multiple requests, this script had to wait, pick out the locations that were already georeffed, and repeat a few times until all were processed. In the end, only a couple of locations had to be manually referenced, as Google wasn't able to find them from the way the address was formed.

Another detail was the interstitial we have here. Being an alcoholic drink, this must have an age verification popup. It also needed a cookies popup and language selection. So the solution here was to combine all that in an interstitial (languages are disabled now until they translate everything), where the user is redirected on the first time to get that out of the way, but with user agent testing it lets scrapers pass. I'm a bit worried this might cause problems down the line, so we're keeping an eye on it and will reconsider this solution if need be.

Hope you like it. I'll have an even better one to show real soon ?

[3fingers]

Quote

The frontend is based on webcomponents built with StencilJS

I've read the stencil documentation but I'm not sure how much advantages I could have in learning it and how to integrate it efficiently with Processwire. Have you got some pointers for guides/video courses on this topic? Any reccomendations on how mix processwire with stencil (routes and api generation in particular) ? ?

Nice animation and flow on the site by the way, good job!

[dotnetic]

I love ?the aesthetics of the site. Very great work and visually appealing ?️.

There are some performance issues when zooming the map (because there are many retailers shown at once and maps get sluggish with many markers, even with MarkerClusterer), and the find function could be accomplished with a geolocate button (take actual position of you, to find dealers that are near you). Take a look at P. Jentschura – Natürliche Produkte für den Säure-Basen-Haushalt (p-jentschura.com) which as over 5000 dealers, where I tackled the performance problem.

Also you could add a "Clear search" or "Reset" button, because If you clicked one dealer it is impossible to go back to the whole list.

If you have interest in optimizing the whole map application you can contact me. I did several map applications in the last years. In addition I wrote an "ImportRetailers" module for one of my clients, that geocodes the addresses via geocoder-php/google-maps-provider which uses also caching if you query the same address again (and has almost no request restrictions).

[heldercervantes]

18 hours ago, 3fingers said:

I've read the stencil documentation but I'm not sure how much advantages I could have in learning it and how to integrate it efficiently with Processwire. Have you got some pointers for guides/video courses on this topic? Any reccomendations on how mix processwire with stencil (routes and api generation in particular) ? ?

Nice animation and flow on the site by the way, good job!

I don't really do routing here. Still need to learn that. My use of Stencil is more based on the benefits in organization and workflow. It's super easy to bring a component from one project to the next, and it's easier to maintain when everything is neat and tidy.

Using my boilerplate I basically start with a StencilJS + Storybook base, to develop individual components and demo them. If it's a super simple project, storybook already generates a static site nicely. See this one here: https://papoes.iniciativaliberal.pt/, where I just made the basic components and combined them in simple HTML pages.

And from there, if we have an HTML page you know how easy it is to make it dynamic with PW ?

My suggestion is just to try out the getting started on Stencil's page. It's really not that much of a stretch going from knowing HTML+CSS+JS to webcomponents. Once there, when you feel comfortable, look into the routing bit.

4 hours ago, dotnetic said:

I love ?the aesthetics of the site. Very great work and visually appealing ?️.

There are some performance issues when zooming the map (because there are many retailers shown at once and maps get sluggish with many markers, even with MarkerClusterer), and the find function could be accomplished with a geolocate button (take actual position of you, to find dealers that are near you). Take a look at P. Jentschura – Natürliche Produkte für den Säure-Basen-Haushalt (p-jentschura.com) which as over 5000 dealers, where I tackled the performance problem.

Also you could add a "Clear search" or "Reset" button, because If you clicked one dealer it is impossible to go back to the whole list.

If you have interest in optimizing the whole map application you can contact me. I did several map applications in the last years. In addition I wrote an "ImportRetailers" module for one of my clients, that geocodes the addresses via geocoder-php/google-maps-provider which uses also caching if you query the same address again (and has almost no request restrictions).

You're right. Still plenty of room to improve that bit.

[7Studio]

Great site @heldercervantes !

One small thing, looks like there is a small logo displaying issue, on homepage path to logo image is:

/site/templates/static/brand/logo.svg

on subpages:

/site/templates//static/brand/logo.svg

Otherwise amazing work, Congrats!