How to change image with button from page 1 to page 2

Ask the community
,
1

Hi guys.

I have png pictures on my home page wich has to type one is available and one is sold.

This pictures are aligned in specific way so I can’t use datasets and reperators. What I’m trying to do is creat another page and put buttons there so when i want to change image1 wich says available i will click specific button on page 2 and image1 on homepage will change to sold.

Basically I want to have button wich replaces image on another page when clicked is there a way to do this without datasets?

2

Everytime when it comes to send data back and forth between 2 pages (or sites) → you have 2, maybe even 4 options to do so…

  1. Wix-Storage

  2. Database

  3. http-functions + fetch

  4. Wix-location → query + query-params

  5. https://www.wix.com/velo/reference/wix-storage

  6. https://www.wix.com/velo/reference/wix-http-functions

  7. https://www.wix.com/velo/reference/wix-location

wixLocation.query returns the query string portion of the URL, including the “?” character and the query parameters.

wixLocation.queryParams is an object that contains key-value pairs of the query parameters. You can access the value of a specific query parameter by using the parameter name as the key.

3

Sorry I’m just starting woth coding and it’s very difficult to understand it. Is it possible to show me example of code i need to put on first oage and the one i need to put on second page.

4

Simple quick example…

PAGE-A:

import {local} from 'wix-storage';

$w.onReady(()=>{
    $w('#button1').onClick((event)=>{
        let data = {
            id:     event.target.id,
            sold:   true,
        }
        local.setItem("data", JSON.stringify(data));
    });
});

PAGE-B:

import {local} from 'wix-storage';

$w.onReady(()=>{console.log("Page is ready...");    
    let data = JSON.parse(local.getItem("data"));
    console.log("Recieved-Data from PAGE-A: ", data);
    
    if(data.sold) {
        $w('#image1').show();
        $w('#image2').hide();
    }
    else {
        $w('#image2').show();
        $w('#image1').hide();
    }   
});

Try to understand what happens and how it works.

Flow…

  1. Clicking a button on PAGE-A
  2. Data gets stored in STORAGE
  3. Whenever opening PAGE-B
  4. Loading data from STORAGE
  5. and refreshing the page with new values.
  6. The included ID can be used to determine which button was clicked on PAGE-A
  7. This way you can put also more info into the generated DATA-OBJECT and send it over.

Code-Ninja
Code-Ninja445×525 102 KB

!!! GOOD-LUCK & HAPPY-CODING !!!

5

Thank you, but is there a way to change image ids with source code from wix media.

for example i have image1 on page1 and when i press button on page2 it will change image1 on page1 with an image from storage using url of the image

6

Yes this is possible.
Not sure what you mean → when you say → STORAGE ←

Do you mean a DATABASE ?

You also can simply send over an IMAGE-URL to PAGE-B and load your existing image on PAGE-B with the recieved IMAGE-URL, also possible.

PAGE-A:

import {local} from 'wix-storage';

$w.onReady(()=>{
    $w('#button1').onClick((event)=>{
        let data = {
            id:     event.target.id,
            sold:   true,
            src: "https://m.media-amazon.com/images/I/716fgdeJDNL._AC_SL1200_.jpg"
        }
        local.setItem("data", JSON.stringify(data));
    });
});

PAGE-B:

import {local} from 'wix-storage';

$w.onReady(()=>{console.log("Page is ready...");    
    let data = JSON.parse(local.getItem("data"));
    console.log("Recieved-Data from PAGE-A: ", data);
    
    if(data.sold) {
        $w('#image1').src = data.src;
    }
    else {
        $w('#image1').src="";
    }   
});
7

Thank you so much , I think I can make it work now.