Compatibility Insights: Squarespace datepicker and Cart drawer (Feb 2024)

With the increasing need for enhanced user experiences, many Squarespace users are integrating various plugins to streamline their online store functionalities. Among these, the Squarespace Datepicker and Squarespace Cart Drawer plugins are popular choices. However, compatibility issues often arise, impacting the seamless functionality of these plugins together. This post addresses the current challenges with Squarespace cart drawer plugins and explain the fixes I made to ensure smooth integration.

Disclaimer: It's important to note that some links in this article may be affiliate links, meaning we earn a small commission if you make a purchase through them with no additional charges to you.

Plugins in This Post

Squarewebsites Slide Out Cart: Customizable cart drawer with various settings and options.
Squarify Slide Out Cart: Cost-effective cart drawer plugin with seamless integration of custom product forms.
Snazzy Slide Out Cart & Upsell Plugin: Feature-rich cart drawer with upsell functionality, but lacking support for editing custom product forms in the shopping cart.

The compatibility check ensures that:

Datepicker values properly show on the Cart drawer, if enabled.
After adding items to the cart, the Cart drawer needs to show datepicker control when users use the Edit details button.

Due to these criteria, Snazzy Slide Out Cart & Upsell Plugin will be left out because it does not allow users to edit custom product forms in the Shopping Cart.

No Edit details button on Snazzy cart plugin

Current Issues with Squarespace Cart Drawer Plugins

Squarewebsites Slide Out Cart incorporates Shopping cart content into the main page, this leads to the issue with our datepicker plugin

Adding items to the cart does not update the datepicker values in the cart drawer.
When editing custom product forms using the Edit details button, the datepicker does not appear.

The same issue happens on Squarify Slide Out Cart

Proposed Solutions

To ensure the Squarespace datepicker works seamlessly with cart drawer plugins, I found these solutions:

Detecting Cart Page or Cart Modal:
- Ensure that the datepicker plugin can differentiate between the main collection page and the cart modal. This distinction helps maintain functionality without interference from the cart drawer plugins.
Loading Custom CSS in Iframes:
- For plugins that use iframes, ensure custom CSS is properly loaded within the iframe. This step is crucial for maintaining the correct appearance and functionality of the datepicker.

Result

By implementing these fixes, the Squarespace Datepicker can work properly on both the collection page and the /cart page, even with cart drawer plugins installed. Ensuring that custom CSS loads correctly and the datepicker can distinguish between different page contexts will help mitigate the current compatibility issues.

The demonstrations below will replicate these steps on the cart drawer plugins:

Insert a Product with Datepicker Value: Add a product with the datepicker value set to 06-06-2024. Ensure that this value is displayed correctly in the Shopping Cart.
Edit the Datepicker Value: Change the datepicker value to 20-06-2024. Confirm that the Shopping Cart updates and displays the new value accurately.

Squarewebsites Slide Out Cart

Squarify Slide Out Cart

Conclusion

This post addresses the current issues with Squarespace cart drawer plugins in relation to the Squarespace Datepicker. Through comprehensive testing and development, the identified problems have been resolved.

As the developer of the Squarespace Datepicker plugin, I have ensured that datepicker values now display correctly in the cart drawer, both initially and after edits. This ensures a seamless user experience and enhances the functionality of your Squarespace site. For any further assistance or questions, feel free to reach out.