Product List With cart

Community feedback

• 

  Andrey•2,570

  @dar-juPosted 27 days ago

  Hi, OffixialTrust!

  Cool work!

  I looked at your questions:

  1. I couldn't reproduce the duplication problem, everything is ok with me.
  2. For the block with id="overlay" add positioning - top: 0; and left: 0;

  Note that the images stretch when you change the screen resolution, if you don't want to precisely fit the images to the layout, then make them object-fit: cover; It will be looks better.

  Marked as helpful

  1

  ---

  

  OffixialTrust•120

  @OffixialTrustPosted 27 days ago

  @dar-ju Thanks a lot, I'll work on it!

  0
• 

  Marzia Jalili•4,230

  @MarziaJaliliPosted 26 days ago

  Great work!

  This is how I updated the code:

  #overlay {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border-radius: none;
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: none;
  }
  

  I changed the position to absolute and set the inset to 0 to ensure it covers the entire page.

  This perfectly works!

  😎😎😎

  0

  ---

  

  OffixialTrust•120

  @OffixialTrustPosted 26 days ago

  @MarziaJalili Thank you. But what does inset do in this context?

  1

  

  Marzia Jalili•4,230

  @MarziaJaliliPosted 26 days ago

  @OffixialTrust As I stated above it ensures that the overlay will cover the entire page.

  Because it's first positioned absolute and it's not relative to it's parent so it will take the body element as its parent.

  Therefore, the overlay will cover the body element completely.

  By the way, I downloaded your code and updated it as above and it worked out as expected. So you can apply it, too.

  Let me know if you need further details!

  1
• 

  Mohamed Ahmed Ibrahim•680

  @MohamedSharqawiPosted 27 days ago

  I understand the issue you’re referring to. This problem typically occurs when setTimeout is added to the "confirm order" button upon being clicked. If that’s the case, I’ve faced the same challenge before, and the solution is to define a global variable, such as timer. Inside the event listener, you can use clearTimeout(timer) to cancel any existing timeout and then assign the new setTimeout to the timer variable. Here’s how the final code would look:

  let timer;
  confirmButton.addEventListener("click", () => {
      clearTimeout(timer); // Clear any existing timeout
      timer = setTimeout(() => {
          // Your logic here
      }, 500); // Set a new timeout
  });
  

  With this approach, if you click the confirm button, clearTimeout(timer) will prevent the previous setTimeout (if it exists) from executing. If no timeout is present, it will proceed with the normal logic inside the setTimeout. 🛠️

  If this is the problem you’re facing, I hope this solution helps! Let me know if it works for you. 😊

  0

  ---

  

  OffixialTrust•120

  @OffixialTrustPosted 27 days ago

  @MohamedSharqawi I didn't add any setTimer in my code, but I'll check the logic. Thanks.

  0