我如何从一个页面制作一个按钮，以自动触发另一个页面的特定按钮？

Question

I am building a project for school and I encounter a problem. I made an ecommerce website,and in the store page I created the cart on the bottom. now when I click the the product button it's added in the cart. Now i created a page for each product with description and I have an Add to cart button there too, how can I click on that button and that automatically go on store page and click the specific button for the product?

here is my store code:

<img class="shop-item-image" src="imaginiproduse/p1.jpg">
<span class="shop-item-title">Busuioc</span>
<div class="shop-item-details">
      <span class="shop-item-price">$12.99</span>
      <button class="btn btn-primary shop-item-button " type="button" >ADD TO CART</button> <-- HERE IS THE BUTTON 
</div>
</div>

Here is my individual product page code:

<div class="container">
    <img src="../imaginiproduse/p1.jpg" style="max-width: 250px;" >
    <div class="text">
        <h2>Busuioc</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum nesciunt explicabo omnis dolores, sunt odio ducimus consequuntur distinctio quo et nemo molestiae saepe nostrum a iste! Modi amet ab dolore.</p>               
    </div>
    <p><button  type="button">ADD TO CART</button></p> <--- HERE IS MY OTHER BUTTON     
</div>

Answer 1

How are you adding elements to the cart and storing items in the cart?

if you are using vanilla javaScript and storing cart items in an array, you can not do that.

You have to store cart items in a way that is accessible through pages. For example:

• you can use cookies (server side)
• you can use HTML5 local file storage (client side. temporary)
• use some sate management package like redux (may need nodejs)

Answer 2

As stated you have options and typically this would be done with cookies (secure cookies if its sensitive stuff )sidenote too, cookie are not always server-side and can be set on the client and read by the client OR server so it works both ways, localstorage (only read by the browser, but is persistent) or server-side sessions, server cookies (would render on the server and generate links etc)

Now with that said it seems more like you are doing this via the client side and using localStorage at the moment.

How you have your question worded is a bit confusing, but if I understand correctly you basically want to store the 'add to cart' with the item, so they can view the card, see their item and then also click back to their item from the cart etc.

The flow of that, using localStorage could be

1. User views the item detail page
2. User clicks add to cart --> This triggers a function to append the itemID to the cart localstorage ( localStorage can only be a string, so you would end up stringifying your object before storing it ) possibly somthing like

 //click action (jquery syntax) $('.addToCart').on("click",()=>{ //add to cart clicked //Grab localStorage first let data = localStorage.getItem('cart'); //check if there is anything in it, otherwise don't stringigy if ( data.== undefined && data;== "") { //Means there is an actual localStorage object called cart AND its not empty //we can then proceed with stringifying it try{ //turn the localStorage into an object data = JSON.parse(data); //now that you have the object you will push the item ID to the array data,push(itemID). }catch(e){ //yikes, its not valid JSON console.error(e) } } })

I have not tested the code but it gives you an idea of the flow, then removing an item can just be a simple pop of the item.

When viewing it, you just pull the localStorage item, convert to an array and loop over it. You can also store more items in the object too, things like name, id, price etc OR you can run the idea against an API call etc.