Skip Navigation

[Resolved] Trying to find documentation for "Product Comparison" with Views.

This support ticket is created 3 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 3 replies, has 2 voices.

Last updated by Waqar 3 years, 5 months ago.

Assisted by: Waqar.

Author
Posts
#2088841

Tell us what you are trying to do?
There used to be a link...
https://toolset.com/learn/create-an-ecommerce-wordpress-site/product-comparison/

And video...
hidden link

...which dealt with creating views that would allow a user to compare (side-by-side) specific content from two or more posts by clicking checkboxes associated with each post. In other words, allow users to build their own comparison table for different products.

I remember it looked very simple, but I wasn't yet ready to implement it. Now I am, and the link is redirected to a course which (apparently) doesn't contain this lesson, and the video has been deleted.

I either need to check out that documentation or need supporter assistance to make this work.

Is there any documentation that you are following?
Can't locate, Read above.

Is there a similar example that we can see?
hidden link

...check the boxes next to the word compare, and then when you click the Compare button in the tooltip, it opens in a new page where a table shows the differences side-by-side.

What is the link to your site?
Not needed at this time.

#2089293

Hi,

Thank you for contacting us and I'd be happy to assist.

I'm afraid, the document and the video that you refer to is no longer available, but you can achieve this using the following steps:

1. On the page where you'd like to select the items for the comparison, you can include a custom form:


<form action="URL of the comparison page" method="get" class="compare-form">
<input type="submit" value="Compare">
</form> 

Note: You'll replace the "URL of the comparison page" with the actual link of your comparison page.

The role of this form would be to collect IDs of the posts which you'd like to use for the comparison and then pass them on to the comparison page using the URL parameter "compare".

2. Inside the loop of the products/posts which are shown on the selection page, you'll need a custom checkbox input with the current post's ID set as the value:


<input type="checkbox" name="compare[]" value="[wpv-post-id]" class="compare-check">

3. Next, you'll need a custom script on the selection page that will detect when any checkbox from these products/posts is clicked and will append the clicked checkbox input in the custom form. It will also remove it if the checkbox for a product/post is unchecked.


jQuery( document ).ready(function() {
  jQuery( 'input.compare-check' ).bind({
    click: function() {
      if(!jQuery(this).is(':checked')) {
        var clickedVal = jQuery(this).attr('value');
          jQuery("form.compare-form input[value="+clickedVal+"]").remove();
        }
        else
        {
          jQuery(this).clone().appendTo(jQuery('form.compare-form'));
        }
      }
  });
});

4. You can also include custom CSS code to hide the checkboxes which are added inside the custom compare form:


form.compare-form input[type=checkbox] {
display:none;
}

As a result, when the custom form's submit button will be clicked with some posts selected, it will take the visitor to the comparison page, with the IDs of the selected posts in the URL parameter.

On the comparison page, you can create a view with a post ID query filter that shows posts whose IDs are available in the URL parameter "compare" and design the output as needed.

I hope this helps and please let me know if any step is not clear.

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

#2089561

Thank you. This looks straightforward. I'll give this a shot and follow up with questions or close the ticket. Might be a day or so before I respond.

Regarding the documentation, I do wish Toolset would create a legacy documentation page. Blocks doesn't work for the highly custom work we require, whereas views has been fantastic for exactly these scenarios. I'm sure we're not alone in that. You probably get dozens of tickets weekly about views that could be answered with documentation.

#2090001

Thanks for the update and glad that my message helped.

The documentation for the most commonly used legacy features is available on our main documentation page:
https://toolset.com/documentation/
( you'll see "Legacy Features" at the bottom left corner )