Add "dynamic" Shipping Cost to Cart Drawer

[Anymale]

Hello,
i would like to add two rows to our Cart Drawer:

1. Shipping
2. Total Sum

1:
For Shipping I would like to access Metafields. 1 Metafield with a Shipping Threshhold (Currently 30€) and one Metafield with a Value for fixed Shipping cost (Currently 2,99€).

So that if Cart Value <30€ it shows "2,99€" and if Cart Value >30€ it shows "free"

2: This should just add the Shipping cost to the current Cart Value.

Could someone help me with this?

[Ben310]

Use a custom HTML Block along with metafields for storing shipping-related info, and JavaScript for calculating and displaying the shipping cost dynamically. Not an easy undertaking and estimated cost for a programmer: €10-€50k. You need two metafields: one to store the values (e.g., 30€) that determines when free shipping applies, and another to store the fixed shipping cost (e.g., 2,99€). Then access metafields in your cart drawer using Liquid and JavaScript.

Have you checked apps like BoostlyCart Cart Drawer Upsell, UpCart—Cart Drawer Cart Upsell, Sticky Cart: Slide Cart Drawer, or the Free Shipping Bar?

[Nordalux]

Dafür verwendet man keine Metafelder. 😉

Dies sind Theme-Einstellungen, die du per Land setzt. Je nach Land musst du dies regelmäßig in den Theme-Einstellungen pflegen, da gibt es keine Verknüpfung mit den Versandzonen. Am Ende werden die Versandkosten nochmal in der Cart berechnet, eine Übernahme erfolgt nicht. Es ist eher eine "Pseudo-"Anzeige, um den Kunden noch einen Punkt mehr zu geben, dass der Versand kostenfrei ist und dieser noch besser Konvertiert.

Habe ich bereits einige Male umgesetzt, auch mit Länderabhängigkeiten. Wenn du dies umgesetzt haben möchtest.. Feel free. 🙂

[Anymale]

was able to add the fields as intended but encountered an issue when refreshing the page.

When adding items to the cart or changing the quantity, the field updates correctly and switches from "2.99€" to "free" when the order value exceeds 30€.

However, if I refresh the page with an order value above 30€, the field resets to the default value of "2.99€". As soon as I make another change to the cart, it updates correctly again.

How can I ensure that the field displays the correct value even after a page refresh?

<div class="versand">
<p class="totals__versand"> Versand </p>
{%- if cart.total_price>=3000 -%}
<p class="totals__versand-value">kostenlos</p>
{%- else -%}
<p class="totals__versand-value">{{ localization.market.metafields.custom.cart_progress_goal_shippingcost.value}}€</p>
<p>Debug: {{ cart.total_price }}</p>
{%- endif -%}
</div

My Page