pushState in sveltekit shallow routing is not setting page.state.cart at all

Question

I have a sveltekit app. in one page -cart.svelte- I press a button to go to page where I choose if the order for pickup or delivery -ordertype.svelte- but I lost the cart content because it is a svelte store. I'm trying to use pushState() to navigate to order type page without triggering a reload - so I can keep the cart store - and according to the docs, the pushState is the right tool for that. When I click the button, it will navigate to the ordertype page but the $page.state.cart is an empty object. How do I cause the navigation without running reload? ShallowRouting that was introduced in kit 2.0

..Order Now Path to ordertype without reload

and the gotoordertype function code is where I TRY pushState async function gotoordertype(){

   sessionStorage.setItem("cart", JSON.stringify(cart.checkout()) )
  
    pushState('/ordertype', {
        cart: JSON.stringify(cart.checkout())
    })
   //goto('/ordertype')

}

I tested a link with data-sveltekit-replacestate and it does work. It navigate without losing the cart content, I navigate to ordertype and cart contents still there in the memory BUT I need to run a form action too that belong to ordertype page. So is not possible for me. I need a button where I can point to the right formactions but now I can't use the wonderful data-sveltekit-replacestate??

How do I persist cart in memory and prevent rerunning the load function after navigation to the ordertype page? How do you pass the cart content from page one to page two, is it something I need to explicitly write like $page.state.cart and get that in ordertype.svelte. How do I do that?

Does your solution need to work in web browsers that have client-side JS disabled? — Peppe L-G
– Peppe L-G, Commented Dec 12, 2024 at 14:23
No. JS is mandatory in my application and all my users has js enabled. The <a> is working. I just need to learn how to do the same thing with a button-- because it has a form action too. So, I have to use the button. Could you provide a code example - not involving a modal like in the docs and all tutorials out there? Just a button, on:click={fnName} and then code to run in that fn to replace state so the load function doesn't rerun when I load the second page. That is really my question. Navigation to page without rerun the load function. — Marco
– Marco, Commented Dec 12, 2024 at 20:17

Peppe L-G · Accepted Answer · 2024-12-12 20:16:25Z

0

If I have understood your problem right, then I think using Progressive enhancement should solve it, i.e. use:

import { enhance } from '$app/forms'

<form method="POST" use:enhance>

answered Dec 12, 2024 at 20:16

Peppe L-G

8,4182 gold badges29 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marco · Accepted Answer · 2024-12-12 21:34:40Z

0

Some reading and it presented the solution for me.

To maintain the value of the cart between pages and navigation/redirect, it's mentioned in the docs under stateManagement section.

Use setContext and getContext

https://svelte.dev/docs/kit/state-management#Using-stores-with-context

answered Dec 12, 2024 at 21:34

Marco

1,2151 gold badge26 silver badges52 bronze badges

Collectives™ on Stack Overflow

pushState in sveltekit shallow routing is not setting page.state.cart at all

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related