What is the best way to retain data after clicking a button?

I am facing an issue where I need to figure out how to add information to a new page when a button is clicked. For example, let's say I have an "add to cart" button and upon clicking it, I want to store some data. How can I achieve this functionality? I am looking for a way to dynamically add information upon the click of a button, but I am unsure of how to implement it. If the add to cart button isn't functioning properly, how can I still make sure that data is stored on click?

.products .box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.products .box-container .box {
  flex: 1 1 30rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
  border-radius: .5rem;
  border: .1rem solid rgba(0, 0, 0, .1);
  position: relative;
}

.products .box-container .box .discount {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .7rem 1rem;
  font-size: 2rem;
  color: var(--pink);
  background: rgba(255, 51, 153, .05);
  z-index: 1;
  border-radius: .5rem;
}

.products .box-container .box .image {
  position: relative;
  text-align: center;
  padding-top: 2rem;
  overflow: hidden;
}

.products .box-container .box .image img {
  height: 25rem;
}

.products .box-container .box:hover .image img {
  transform: scale(1.1);
}

.products .box-container .box .image .icons {
  position: absolute;
  bottom: -7rem;
  left: 0;
  right: 0;
  display: flex;
}

.products .box-container .box:hover .image .icons {
  bottom: 0;
}

.products .box-container .box .image .icons a {
  height: 5rem;
  line-height: 5rem;
  font-size: 2rem;
  width: 50%;
  background: var(--pink);
  color: #fff;
}

.products .box-container .box .image .icons .cart-btn {
  border-left: .1rem solid #fff7;
  border-right: .1rem solid #fff7;
  width: 100%;
}

.products .box-container .box .image .icons a:hover {
  background: #333;
}

.products .box-container .box .content {
  padding: 2rem;
  text-align: center;
}

.products .box-container .box .content h3 {
  font-size: 2.5rem;
  color: #333;
}

.products .box-container .box .content .price {
  font-size: 2.5rem;
  color: var(--pink);
  font-weight: bolder;
  padding-top: 1rem;
}

.products .box-container .box .content .price span {
  font-size: 1.5rem;
  color: #999;
  font-weight: lighter;
  text-decoration: line-through;
}
<div class="box">
  <span class="discount">-18%</span>
  <div class="image">
    <img src="OnyCostopProSpray%2036.90.png" alt="">
    <div class="icons">
      <a href="#" class="fas fa-heart"></a>
      <a href="#" class="cart-btn">add to cart</a>
      <a href="#" class="fas fa-share"></a>
    </div>
  </div>
  <div class="content">
    <h3>Costop Pro Spray</h3>
    <div class="price"> 26.90€ <span>31.74€</span> </div>
  </div>
</div>

If anyone could provide assistance with this, I would greatly appreciate it!

javascripthtmlcss

Answer №1

One simple solution is to swap out the anchor link for a button and then utilize JavaScript to dynamically update the price of items in your cart.

.products .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
}

.products .box-container .box{
    flex:1 1 30rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
    border-radius: .5rem;
    border:.1rem solid rgba(0,0,0,.1);
    position: relative;
}

.products .box-container .box .discount{
    position: absolute;
    top:1rem; left:1rem;
    padding:.7rem 1rem;
    font-size: 2rem;
    color:var(--pink);
    background:rgba(255, 51, 153,.05);
    z-index: 1;
    border-radius: .5rem;
}

.products .box-container .box .image{
    position: relative;
    text-align: center;
    padding-top: 2rem;
    overflow:hidden;
}

.products .box-container .box .image img{
    height:25rem;
}

.products .box-container .box:hover .image img{
    transform: scale(1.1);
}

.products .box-container .box .image .icons{
    position: absolute;
    bottom:-7rem; left:0; right:0;
    display: flex;
}

(products .box-container .box:hover .image .icons{
    bottom:0;
}

.products .box-container .box .image .icons a{
    height: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    width:50%;
    background:var(--pink);
    color:#fff;
}

.products .box-container .box .image .icons .cart-btn{
    border-left: .1rem solid #fff7;
    border-right: .1rem solid #fff7;
    width:100%;
}

.products .box-container .box .image .icons a:hover{
    background:#333;
}

.products .box-container .box .content{
    padding:2rem;
    text-align: center;
}

.products .box-container .box .content h3{
    font-size: 2.5rem;
    color:#333;
}

.products .box-container .box .content .price{
    font-size: 2.5rem;
    color:var(--pink);
    font-weight: bolder;
    padding-top: 1rem;
}

.products .box-container .box .content .price span{
    font-size: 1.5rem;
    color:#999;
    font-weight: lighter;
    text-decoration: line-through;
}
<div class="box">
            <span class="discount">-18%</span>
            <div class="image">
                <img src="OnyCostopProSpray%2036.90.png" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <button class="cart-btn" onclick="updateCart(10,12)">add to cart</button>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Costop Pro Spray</h3>
                <div class="price" id='someId'> 0€ <span>0€</span> </div>
            </div>
        </div>

<script type="text/javascript">
    var price1 = 20;
    var price2 = 10;
    function updateCart(num1,num2){
       price1 += num1;
       price2 += num2;
       const el = document.getElementById('someId');
       el.innerHTML = `${price2}€ <span>${price1}€</span>`;
   }
   updateCart(0,0);
   </script>

Answer №2

If you're looking to store information about orders, utilizing the Document Object Model (DOM) would be beneficial. One method is saving the information in local storage by including a script within an eventListener.

const box = document.querySelector('.box')
add.eventListener('submit', () => {
  // your logic here
})
<div class="box">
  <span class="discount">-18%</span>
  <div class="image">
    <img src="OnyCostopProSpray%2036.90.png" alt="">
    <div class="icons">
      <a href="#" class="fas fa-heart"></a>
      <a href="#" class="cart-btn">add to cart</a>
      <a href="#" class="fas fa-share"></a>
    </div>
  </div>
  <div class="content">
    <h3>Costop Pro Spray</h3>
    <div class="price"> 26.90€ <span>31.74€</span> </div>
  </div>
  <button type='submit'>Add to basket</button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When running 'npm run dev', an error occurred after the SizeLimitsPlugin emitted at 98%. The specific dependency that was

I encountered an issue while trying to incorporate Google Maps into my Laravel project and received the following error message after running npm run dev: 98% after emitting SizeLimitsPlugin ERROR Failed to compile with 1 errors 10:52:34 PM This dependen ...

javascriptnode.jsnpmwebpacksass

Resizing an image based on the coordinates of a click position by utilizing jQuery

I'm new to experimenting with code, and I've been playing around with trying to shrink an image to nothing at a central point. I've found some success using a mix of the code snippet below and relative positioning in my CSS. $(function() ...

javascriptjquerycsscoordinatescss-position

What steps can I take to maintain the width while implementing jQuery's slideUp function?

I am facing a scenario where: http://www.jsfiddle.net/kPBbb/ After adding content to .content, the .wrapper shrinks itself, possibly due to the fact that the .content is set to display: none. I want the .wrapper to maintain its original size even after t ...

jquerycssslideup

Clicking on React Js reverses an array that had previously been unreversed

My issue involves an array pulled from a database that I have reversed so that the newest entry is displayed at the top when a button is clicked, opening a modal-style window. However, when the array is displayed in the modal window, it appears to be flipp ...

javascripthtmlarraysreactjsjsx

What is the best method for retrieving the current value of an RxJS Subject or Observable?

I am dealing with an Angular 2 service: import {Storage} from './storage'; import {Injectable} from 'angular2/core'; import {Subject} from 'rxjs/Subject'; @Injectable() export class SessionStorage extends Storage { priv ...

javascriptangularrxjs

Having difficulty setting a value for a tooltip with replaceWith() function

When using jQuery's .replaceWith() method to insert new DOM contents, I noticed that all content gets replaced except for the value of the title. Even though I tried different approaches, the tooltip only displays {{descriptions.title}} instead of the ...

javascriptjqueryhtmlangularjs

ReactJS requires HTTP server to transpile babel code before running

I am a beginner when it comes to working with reactjs and I am currently in the process of setting up babel to execute babel code without having to serve HTTP files. Following the instructions on the Package Manager, I have successfully installed it along ...

javascriptreactjsnpmbrowserifybabeljs

I am interested in displaying or hiding a table depending on a specific condition in MVC 4

Looking at this MVC 4 Razor code snippet: <h4>You have @Model.Count() items up for sale currently. @Html.ActionLink("Add a new listing by clicking here", "Create")</h4> <br /> <table style="visibility: hidden"> .... I am seeking ...

asp.net-mvchtmlasp.net-mvc-4

Applying hover effect to material-ui IconButton component

As stated in the React Material-UI documentation, I have access to a prop called hoveredStyle: http://www.material-ui.com/#/components/icon-button I intend to utilize the IconButton for two specific purposes: Make use of its tooltip prop for improved ac ...

javascriptcssreactjsmaterial-ui

What could be causing the CSS transition to fail when the menu button is clicked?

After clicking on the menu, a class 'active' is added to both the 'div' and 'section' elements. https://i.stack.imgur.com/jbamR.png The following javascript code accomplishes the above functionality: <script> const ...

javascripthtmlcsstransition

The socket.rooms value is updated before the disconnection listener finishes its process

When dealing with the "disconnect" listener, it's known that access to socket.rooms is restricted. However, I encountered an issue with my "disconnecting" listener. After making some modifications to my database within this callback, I attempted to em ...

javascriptnode.jsexpresssocket.io

I'm having trouble getting CSS to apply to my HTML file. Any idea why?

I conducted tests in both Chrome and Firefox, ruling out any browser-related issues. My CSS has been validated and is error-free. However, when I validate my HTML code, an error message pops up stating "Bad value “stylesheet” for attribute rel on eleme ...

htmlcss

The debate: Switching off Next.js SSG - Harness or Constant?

Currently experimenting with different methods to disable NextJS SSG. The following custom hook implementation is functional: import { useState, useEffect } from "react"; const useClientCheck = () => { const [isClient, isClient ...

javascriptreactjsreact-hooksnext.js

<div.content> </div.content> - Structure

I recall encountering this code before but I can't remember where: <div.main> // .... </div.main> <div.secondary> // .... </div.secondary> Could someone please clarify for me what this syntax is referred to as and what ...

htmlcssreactjsreact-nativesass

Issue with Retrieving a particular table from SQL Server using mssql in javascript ('dbo.index')

I am currently experiencing an issue with trying to access a table named dbo.Index from SQL Server in my node js express application. Unfortunately, whenever I attempt to do so, the operation fails and returns no data. Below is the code snippet in questio ...

javascriptnode.jssql-serverexpressnode-mssql

The Jquery flot plugin is failing to plot the graph accurately based on the specified date

I am currently working on plotting a graph using the jquery flot plugin with JSON data. Here is what I need to do: Upon page load, make an AJAX call to receive JSON data from the server. From the received JSON, add 'x' and & ...

javascriptjqueryajaxjsongraph

What is the best way to eliminate the Mat-form-field-wrapper element from a Mat-form-field component

I have implemented Angular mat-form-field and styled it to appear like a mat-chip. Now, I am looking to remove the outer box (mat-form-field-wrapper). <div class="flex"> <div class="etc"> <mat-chip-list i18n-aria-lab ...

htmlcssangularmat-form-field

tips for moving a button 2 pixels up or down in position

How can I adjust the position of my button by a specific number of pixels up or down from where it currently is? Can you provide guidance on how to find the current location? Thank you in advance. ...

css

Is there a way to display incoming chat messages on the chat box without requiring a page refresh using socket.io?

Having trouble resolving an issue with my application hosted on wpengine, built using WordPress, vue.js, and socket.io for chat functionality. The main concern is that new messages posted in the chatbox do not display until the page is refreshed. I'm ...

javascriptphpwordpressvue.jssocket.io

Error: Attempting to access the 'SearchBox' property of an undefined variable is not allowed

I have been working on a Google Maps code that displays both public and private schools with different markers for each category. However, when running the code, I encountered an error specifically on this line of code: var searchBox = new google.maps.pl ...

javascriptphpgoogle-mapsgoogle-maps-markers