How to make a specific image display on another page when I click on a button using javascript?

Question

So I have a home page with image links to different products. These products are shoes. They don't actually exist I am making the front end of a fictional ecommerce website as a personal project. I am using html, css, and plain javascript for this project. Each of these links contains a product page where you can click a button to buy the product. It also has an image, name, and lorem ipsum for a description.

The buy button links to a checkout page. I want to know how can I display the image of the product on this checkout page when I click on the buy button. I want the checkout page to display the specific image of the product bought instead of having multiple checkout pages with different images of the other products. So if you click "Buy Now" on the first product, and if I choose to buy the second product it should show the image for that product on the checkout page.

/* Grid */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.container {
  position: relative;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

/* Media Queries */

/* For mobile phones: */
@media only screen and (max-width: 600px) {

    [class*="col-"] {
        width: 100%;
    }
}

/* For desktop: */
@media only screen and (min-width: 768px) {

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/* Extra small devices (phones, 600px and down) */
.topnav {
  overflow: hidden;
}

.topnav a {
  float: left;
  display: block;
  color: #363636;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
    font-family: 'Lato', sans-serif;
}

.topnav a:hover {
  border-style: solid;
    border-width: thin;
    border-color: gainsboro;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

/* */

#cart {
    float: right;
    font-size: 30px;
    color: #363636;
    padding: 10px;
    margin-left: 30px;
}

#cart:hover {
    border-style: solid;
    border-width: thin;
    border-color: gainsboro;
}

#search-bar {
    width: 50%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #d9d9d9;
    box-shadow: 1px 2px 3px #bfbfbf;
}

#search-button {
    text-decoration: none;
    color: white;
    background-color: skyblue;
    padding: 10px;
    width: 70px;
    border-radius: 10px;
    box-shadow: 1px 2px 3px #bfbfbf;
}

#search-button:hover {
    cursor: pointer;
}

img {
    width: 100%;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    box-shadow: 1px 2px 3px #bfbfbf;
}

.name-and-price {
    font-family: 'Lato', sans-serif;
}

.login-signup {
    font-family: 'Lato', sans-serif;
    float: right;
}

.login-signup a {
    text-decoration: none;
}

#buy-section {
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    width: 150px;
    height: 200px;
}

#footer {
    margin-top: 20%;
    text-align: center;
}

.action-buttons {
    padding: 15px;
    width: 70%;
    margin-left: 21px;
    margin-top: 10px;
    border-radius: 5px;
}

.action-buttons:hover {
    cursor: pointer;
}

#buy-button {
    background-color: orangered;
    color: #ffffff;
}

#cart-button {
    background-color: #f6f6f6;
}

#save-button {
    background-color: lightgray;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    </head>
<body>
    <!-- Navigation -->
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="topnav" id="myTopnav">
                    <a href="index.html">Home</a>
                    <a href="#">About</a>
                    <a href="#">Contact</a>
                    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                    <i class="fas fa-bars"></i>
                    </a>
                </div>
            </div>
            <div class="col-6">
                <a href="#"><i id="cart" class="fas fa-shopping-cart"></i></a><p class="login-signup"><a href="#">Login</a> or <a href="#">Sign up</a></p>
            </div>
        </div>
    </div>
    
    
    <!-- Searchbar -->
    <div class="container">
        <div class="row">
            <div class="col-12">
                <input id="search-bar" type="text" placeholder="Type something...">
                <button id="search-button">Search</button>
            </div>
        </div>
    </div>
    
    <!-- Product -->
    <div class="container">
        <div class="row">
            <div class="col-6">
                <img src="images/shoes1.jpeg" alt="Shoes">
                <p class="name-and-price">Black and white nike running shoes <br>$90.00</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus turpis a erat vehicula, sed molestie leo aliquet.</p>
            </div>
            <div class="col-6">
                <!-- buy section -->
                <div id="buy-section">
                    <a href="checkout.html"><button class="action-buttons" id="buy-button">Buy Now</button></a>
                    <button class="action-buttons" id="cart-button">Add to Cart</button>
                    <button class="action-buttons" id="save-button">Save for Later</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Footer -->
    <div class="container" id="footer">
        <div class="row">
            <div class="col-12">
                <footer>Copyright &copy; 2019</footer>
            </div>
        </div>
    </div>
    
    <script src="js/functionality.js"></script>
</body>
</html>

There are ways to send information via url with GET method ,https://stackoverflow.com/questions/1586330/access-get-directly-from-javascript, But I would strongly reccomend you looking into php language since this is more of an task for server-sided language — Alex, Mar 21 '19 at 20:06

score 0 · Accepted Answer · answered Mar 21 '19 at 20:06

You have to keep product details in a database like MySQL (DBMS-Database Management System) and need to use a server side scripting language like, PHP, Java, NodeJS, etc to retrieve database details.

Otherwise you need to keep a product id and the path to the product image in local storage. This would be really complex if you open the same product in multiple tabs. -- Use the first method --.

You can choose one of these methods. I don't think you need to use the second method. For a project like online store, you should use back end technologies. Server side script and a database management system.

Database is the place where you store all your product information and user information like stuff.

score 0 · Answer 2 · answered Mar 21 '19 at 20:37

Hi Alexander welcome to StackOverflow.

You can save images links of products on localStorage. The localStorage keeps the data global and available to all pages of the same domain. If you don't want use localStorage you can use WebSql, IndexedDB or server-side DBMS like MySql.

If you choose for keep state data of your application on browser, consider use LocalForage.

Bellow single example using localStorage.

    /* On home page */
var product = {
  name: "Some name",
  price: 1.75,
  description: "description",
  image: "https://picsum.photos/375"
}

function buttonClick() {
  console.log("Saving on localStorage");
  localStorage.setItem("selectedProduct", JSON.stringify(product) );
}

/* on any other page */

function getSelectedProduct() {
  console.log("Recovering data")
  var product = JSON.parse(localStorage.getItem("selectedProduct"));
  console.log(product)
}

/* MOCK test */
buttonClick();
getSelectedProduct();

How to make a specific image display on another page when I click on a button using javascript?

2 Answers2