Add Items in the product category page

Rabbit W
Rabbit W used Ask the Experts™
on
I have come across this page per the following link.  A button "Add to List" is at the right side of the image. When the user clicks Add to the list button, it will be added to the My List.

The button turns to Remove from the list once Add to List has been clicked.  How to accomplish it? Thank you!

https://www.pcna.com/leeds/en-us/leeds-mobiletech-power/product/7121-50_reg-
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Please try to describe more what you want and update the link since it will lead us always to "The page cannot be found." message.

Screenshot_4a.png

Author

Commented:
Per the attached images, when the user clicks Add to List button, the image is added to my list. When clicking  my list link, the added image is displayed. After the user adds the image to my list, the button has been changed to remove from list.
1.png
2.png
3.png
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018
Commented:
That could be achieved using some CSS code and jQuery logic by attaching a click event to the button and toggling the class remove-from-list :

$('.add-remove-btn').click(function() {
  if ($(this).hasClass('remove-from-list')) {
    $(this).removeClass('remove-from-list');
    $(this).text("Add to List");
  } else {
    $(this).addClass('remove-from-list');
    $(this).text("Remove from List");
  }
})

Open in new window


Working live fiddle
OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

Author

Commented:
You are my hero! Could you give me the complete example including adding to the list? Thank you!

Author

Commented:
Hi Zakaria, I might miss the js file. What is <script type="text/javascript" src="xxx.js"></script> in the head?
Thank you!
How to add the items to the list and then remove these from the list?

Thank you!
Analyst Developer
Distinguished Expert 2018
Commented:
Hi Rabbit,

Here we go, here's a sample that you could start from :

LIVE SAMPLE CODEPEN

$(function() {
  // "ADD & REMOVE" PRODUCT BUTTON
  $('.add-remove-btn').on('click', function() {
    var elm_identitfier= $(this).data('identitfier');

    if ( $(this).hasClass('remove-from-list') ) 
    {
          $(this).removeClass('remove-from-list').text("Add to List");
          $('#products-box .product-'+elm_identitfier).parent().remove();
    } else {
          $(this).addClass('remove-from-list').text("Remove from List");
          $('#products-box').append('<div class="image-container col-xs-3">'+$('.product-' + elm_identitfier)[0].outerHTML+'</div>');
    }

    $('#products-number').text(  $('#products-box div').length );
  });

  //TOGGLE LIST ICON
  $('i.toolbar-trigger').on('click', function() {
    var operator = $(this).hasClass('fa-arrow-up')?'+':'-';

    $(this).toggleClass('fa-arrow-up fa-arrow-down');
    $('#products-list').animate({ bottom: operator + "=130px"  });
  });
})

Open in new window

Author

Commented:
Thank you very much Zakaria! Is there any way to remove the images from the list as well when the item list number decreased? Thank you!
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
You're welcome, not sure what you mean by when the item list number decreased?

Author

Commented:
Remove the images from the list.
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Isn't the image remove already working when you click "Remove from List"? on you mean adding a sort of button inside the "My list" area that removes every image?

Author

Commented:
Sorry, I just updated my css file and now I can see the images now.  Thank you!
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
No worries, glad I could help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial