Passing a value from home page to landing page 1 out of step

Ask the community
, ,
1

Question:
I have homepage code, that passes through a session value to a landing page and applies a sort based on that value on the landing page, however if i click the image that has value 1 attached to it, it works first time, then the next time if i click and option with value 3, it will receive value 1 on the landing page, then next time if i click value 4, it will receive value 3 and this just keeps happening. I am only testing it in preview so not sure if this is something to do with caching differently?

Product:
Wix Editor

What are you trying to achieve:
I have 6 images and on the landing page I have 6 SelectionTags and basically I want one of them to be selected and filtered depending on which image the user clicks.

What have you already tried:
Here is my code. from my home page

import wixLocation from 'wix-location';
import wixData from 'wix-data';
import { session } from 'wix-storage';


$w.onReady(function () {    
    $w("#image11").onClick(() => goToTargetPage(7));
    $w("#image12").onClick(() => goToTargetPage(1));
    $w("#image13").onClick(() => goToTargetPage(4));
    $w("#image14").onClick(() => goToTargetPage(0));
    $w("#image15").onClick(() => goToTargetPage(2));
    $w("#image16").onClick(() => goToTargetPage(3));
});


//Passthru ID
function goToTargetPage(filterValue) {
    console.log("Clearing and setting session filterValue to:", filterValue); // Debugging
    session.removeItem("filterValue"); // Remove old value
    session.setItem("filterValue", filterValue.toString()); // Set new value
    wixLocation.to("/your-target-page");
}

this is the code on the landing page

    // Retrieve and parse the filter value from session storage
    let filterValue = parseInt(session.getItem("filterValue")) || 0;
    console.log("Filter value retrieved from session:", filterValue); // Debugging

    // Validate the filter value
    if (filterValue < 0 || filterValue > 7) {
        filterValue = 0; // Default to 0 if out of range
    }

    $w('#vlogs').onReady(() => {
        console.log("Dataset is ready");

        setTimeout(() => {
            try {
                const selectionTags = $w('#selectionTags1');
                if (selectionTags.options.length > filterValue) {
                    selectionTags.selectedIndices = [filterValue];
                    console.log("Selected indices set to:", [filterValue]); // Debugging

                    let selectedTags = selectionTags.value;
                    console.log("Initial selectedTags:", selectedTags); // Debugging

                    if (selectedTags.length > 0) {
                        applyFilter(selectedTags[0]);
                    }

                    selectionTags.onChange(() => {
                        selectedTags = selectionTags.value;
                        console.log("Selected tags changed:", selectedTags); // Debugging

                        if (selectedTags.length > 0) {
                            applyFilter(selectedTags[0]);
                        }
                    });
                } else {
                    console.warn("Invalid filterValue; no matching tag found."); // Debugging
                }
            } catch (err) {
                console.error("Error setting selectedIndices or applying filter:", err);
            }
        }, 100); // Delay to ensure the component is initialized
    });
2

Maybe this one?

$w.onReady(()=>{console.log('Page is ready...');
    let filterValue = parseInt(session.getItem("filterValue")) || 0;
    console.log("Filter value retrieved from session:",  filterValue);

   // Validate the filter value
    if (filterValue < 0 || filterValue > 7) {
        filterValue = 0; // Default to 0 if out of range
    }

    $w('#vlogs').onReady(() => { console.log("Dataset is ready...");
        try {
                const selectionTags = $w('#selectionTags1');
                if (selectionTags.options.length > filterValue) {
                    selectionTags.selectedIndices = [filterValue];
                    console.log("Selected indices set to:", [filterValue]); // Debugging

                    let selectedTags = selectionTags.value;
                    console.log("Initial selectedTags:", selectedTags); // Debugging

                    if (selectedTags.length > 0) {
                        applyFilter(selectedTags[0]);
                    }

                    selectionTags.onChange(() => {
                        selectedTags = selectionTags.value;
                        console.log("Selected tags changed:", selectedTags); // Debugging

                        if (selectedTags.length > 0) {
                            applyFilter(selectedTags[0]);
                        }
                    });
                } else {
                    console.warn("Invalid filterValue; no matching tag found."); // Debugging
                }
            } catch (err) {
                console.error("Error setting selectedIndices or applying filter:", err);
            }
    });
});
3

thanks for the reply, but this seems to do exactly the same thing, i’ve found quite a few reports of this, there doesnt seem to be a way around it, its a very basic requirement surely?