A new Quick Order Page, Dynamic Routing, and Server-side Tracking
This double release brings several requested features to Front-Commerce. The most notable ones are the quick order page which allows customers to order products in bulk seamlessly, and different ways to switch to server-side tracking to cope with the decline of 3rd-party cookies.
On a more technical side, we are happy to introduce one of the last missing
feature from 2.x in Front-Commerce 3.5: dynamic routing. Built on top of the
Remix/React-Router routes API, Front-Commerce dynamic routing allows you to
implement any URL structure you want without sacrificing performance or
features.
It is unique in the Remix ecosystem, and solves several
limitations that were present in the previous versions of Front-Commerce. We
are excited to see what you will build with it!
As usual, these releases also include several bug fixes and improvements to the product. Let's dive in and explore what's new in Front-Commerce 3.5.
Quick Order Page
The Quick Order Page is a new feature that allows customers to order products in bulk. It is particularly useful for B2B customers who know the product codes and quantities they need for restocking.
While the quick order page allows to manually enter product codes and quantities, it also supports CSV import. Customers can download a CSV template, fill it with product references and quantities, and upload it to fill the form automatically. After validation, customers can add all products to their cart in one click.
This page will be active by default at /quick-order
after updating your
project (either to 3.5+ or 2.30+). If you want to opt-out of this feature, you
will have to remove the route from your project as documented in the migration
guide for your specific version.
Server-side tracking
With the decline of 3rd-party cookies, it is essential to have a server-side tracking solution to keep track of your customers' behavior and understand their needs.
Today's Front-Commerce releases introduce different options for your projects:
- 2.x (and 3.x) projects can leverage tools such as Server-side Tag Manager or commercial solutions such as Addingwell to send tracking events to 3rd-party services from a server-side context hosted on a subdomain. We updated our documentation to explain how to set up these tools with Front-Commerce's existing analytics stack.
- 3.5+ projects can additionally benefit from Server-Side events to use our new server-side tracking solution that is fully integrated with Front-Commerce and server-side Analytics plugins. We've added support for Google Analytics Measurement Protocol commerce events, and are looking for feedbacks to improve and extend this feature.
For more context on server-side tracking, you can read our recent editorial content on the subject:
Dynamic Routing in Front-Commerce 3.5
Front-Commerce 3.5 introduces dynamic routing, a feature that brings more flexibility than ever to your Remix application. It allows you to customize your URL structure dynamically based on your data, without sacrificing performance or features.
This feature is unique in the Remix ecosystem and closes the gap with the 2.x versions of Front-Commerce. We took the time to build it right, and we are looking forward to seeing how we can refine or improve the feature with your feedback.
Here is a quick overview of what you can do with dynamic routing:
- Maintain the benefits from route based data fetching, code splitting and mental model from Remix
- Support advanced URL structures matching. Example:
/category-:slug-:id
,/latest-:brand/seo-keyword-:filter.html
, … - Generate URLs based on identifiers contributed across different backends such as an E-Commerce platform, CMS service, …
- Have top-level URL segments that can render different routes based on the
path. Example:
/my-product
can render a product route while/my-category
or/my-page
can render different routes - Optimize the URL matching algorithm for performance by customizing URL matchers execution plan based on your own context. Example: run fast matchers in parallel, and slower ones in a second batch if needed
- Implement a redirection plan from your CMS. Example: redirect old URLs to new ones when the title is updated
- Implement localized URLs for your routes. Example:
/contact-us
in English and/contactez-nous
in French - A simplified URL matchers API, that is only responsible for converting URLs to route parameters
We built dynamic routing to solve concrete use cases and challenges from advanced e-commerce projects. Please let us know any limitations you encounter and how we can improve the feature.
Dynamic routing is built on top of the Route API from Remix. It can be adopted progressively in your project. We have updated our default routes and extensions to use dynamic route features when relevant … as you would expect!
Learn more about dynamic routing in our dedicated documentation guide: Dynamic Routing in Front-Commerce.
Front-Commerce files are now supported in VSCode Icons
On a lighter note, we are happy to announce that Front-Commerce icons are now available for FC 2.x and 3.x configuration files in the latest release of the VSCode Icons extension. Thanks Paul!
If you're using VSCode, we recommend you to install this extension (using
ext install vscode-icons
in the command palette) and you'll see the
Front-Commerce logo on configuration files or reserved directories 🎉
Other changes
We also made several changes in these releases, to improve existing features and fix bugs.
Features
- 2.x only:
- stripe: Enable IPN-based payments for Magento2 (scheduled for 3.6)
- server: add support for an
onServerInit
callback for server modules (with an example using it to implement a websocket server)
- images: Initial release of the
@front-commerce/twicpics
package for FC 3.x, allowing to use TwicPics as a CDN for image assets. - theme-chocolatine: the Skeleton now accepts a component as prop
- magento: added oAuth tokens to the shared configuration provider
- core:
- Implement custom session storage for
UserJourney
- Implement a unique visitor id for a journey
- Implement configuration file for maintenance mode
- Replaced usages of
process.env.*
through standard configProviders
- Implement custom session storage for
- analytics:
- Implement Add To Wishlist event tracking
- Implement Register event tracking
- dx:
- Add typed commerce events for analytics
- Allow HMR reconnection after server disconnect
Bug Fixes
These bug fixes were also backported to 2.x
when relevant.
magento1: prevent categories batch to fail if one doesn't exist by using a batch API call
theme-chocolatine:
- fixes add to wishlist after initial login
- fixed CMS route to support deep identifiers (e.g:
/cms/foo/bar
) - fixed meta tags definition for PLP and PDP
- fixed the CountrySelect input for the compat form
- fixed CMS page meta description value
magento2:
- restored
MagentoWysiwyg
specific fragments to ensure full widgets support. - added missing content types exports to magento2 package.
- fixed import location for magento factories
- restored
payments: removed guest cart tokens on async checkout success to prevent race conditions fetching a partially incorrect cart during async payments
core:
- append session cookies to headers even if
Set-Cookie
exists - fixed an issue where the RateLimiter service would fill up the connection pool in redis
- fixed the
frontCommerce
context types inAppLoadContext
by extending the@remix-run/node
types.
- append session cookies to headers even if
analytics:
- fixed an issue where analytics plugins were not detected properly
- Added mechanism to prevent Order Completed even to trigger multiple times
- fixed the analytics trackPage event payload
- fixed duplicate tracking for Search page
Fixes from 3.5
and 2.30
have also been backported into previous minor versions. The following patch versions were released: 3.4.3
, 3.3.4
, 3.2.8
, 3.1.7
, 3.0.6
, 2.29.2
, 2.28.4
, 2.27.6
, 2.26.10
, and 2.25.15
.