I have created a view with a products to compare form in it. I followed the directions given here:
https://toolset.com/learn/create-an-ecommerce-wordpress-site/product-comparison/
and here:
https://toolset.com/documentation/user-guides/creating-side-by-side-feature-comparison-with-views/
The products to compare form submit button and the view that contains that button work perfectly as intended. When the user clicks on the submit button, they get taken to a new view with a list of the compared products.
The problem that I have occurs when I try to add collapsible accordian content to items contained within the view that also has the form submit button in it. When the collapsible content button is clicked on the front end, the content expands as expected but then the page redirects to the products comparison page view. The expandable content items are contained within the wpv-loop.
The collapsible content code was created using the exact code found here:
hidden link
What is the fix for this?
Thanks.
Do I understand correctly that if you click on the "Expand Accordion" then instead of expanding, it leads to the comparison view?
it is most ceratinly a link issue in your HTML.
Can you paste here or in pastebin.com the content of your Loop where you create the Button to the View and the Accordion?
That is mostly correct, except when the "expand accordion" is clicked it does expand but then it redirects to the comparison view. I want to add something else. When I removed the "add to compare code" and button from the view the accordion works as intended. Furthermore, when I add a parametric search filter to the view the "expand accordion" button stops working altogether.
I am just going to paste the code from the sample product comparison view listed on the toolset website with the accordion button added in with slight modifications, for reasons of privacy. The code on my website is basically the same as listed here.
<form id="myform" action="/product-comparison/products-comparison/">
<input id="mybutton" type="submit" value="Compare">
[wpv-layout-start]
<!-- wpv-loop-start -->
<table width="100%">
<thead><tr>
<th>Select</th>
<th>[wpv-heading name="post-link"]Product[/wpv-heading]</th>
<th>[wpv-heading name="types-field-product-price"]Price[/wpv-heading]</th>
<th>Image</th>
</tr></thead>
<tbody>
<wpv-loop>
<tr>
<td><input type='checkbox' name='product-skus[]' value='[types field="product-sku"][/types]'></td>
<td>[wpv-post-link]</td>
<td>[types field="product-price"][/types] <br><br> <button class="accordion">Click to expand</button>
<div class="panel">
<strong>Description: </strong>[types field="description"][/types]
</div></td>
<td>[types field="product-image" alt="View product" title="View product" size="thumbnail" align="none"][/types]</td>
</tr>
</wpv-loop>
</tbody>
</table>
<!-- wpv-loop-end -->
</form>
[wpv-no-items-found][wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]
1. This code is invalid.
It misses the [wpv-items-found][/wpv-items-found] ShortCodes.
2. The code holds no HTML for an Accordion at all, it works with the JS only, and therefore needs more unique identifier on the Link to open, and could confilct with other elements.
3. I suggest to use a Bootstrap Accordion for this:
hidden link
4. Following this above example, here is a working View Loop with an accordion.
<form id="myform" action="/product-comparison/products-comparison/">
<input id="mybutton" type="submit" value="Compare">
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%">
<thead><tr>
<th>Select</th>
<th>[wpv-heading name="post-link"]Product[/wpv-heading]</th>
<th>[wpv-heading name="types-field-product-price"]Price[/wpv-heading]</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<wpv-loop>
<tr>
<td><input type='checkbox' name='product-skus[]' value='[types field="product-sku"][/types]'></td>
<td>[wpv-post-link]</td>
<td>[types field="product-price"][/types]
<br><br>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo[wpv-post-id]">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo[wpv-post-id]" aria-expanded="false" aria-controls="collapseTwo[wpv-post-id]">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo[wpv-post-id]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo[wpv-post-id]">
<div class="panel-body[wpv-post-id]">
HERE YOUR COLLAPSED CONTENT
</div>
</div>
</div>
</td>
<td>[types field="product-image" alt="View product" title="View product" size="thumbnail" align="none"][/types]</td>
</tr>
</wpv-loop>
</div>
</tbody>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
</form>
[wpv-no-items-found][wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]
As you see, I added wpv-post-id ShortCodes to the HTML identifiers, so they are unique in the loop.
This solution needs a theme that supports Bootstrap.
We can not assist such custom Code, but with the example above, you should have enough information to get started. Toolset does not provide any HTML or CSS elements, instead, it provides methods to replace PHP Coding. HTML and CSS are required to be added by the WebDeveloper.
In your solution, the problem is for one in the ID of the Link that is not unique and is actually the "Compare" link.
Also, the JS will conflict with the Search of Views, wich could be solved by using the Custom Search JS Hooks we provide in the JS Section of the Custom Search.
But I strongly recommend to use the Bootstrap Solution, this is a reliable and responsive solution that works out of the box.
Thank you.
1) I do have wpv-items found in my actual code after just checking. That is put there by the plugin by default I believe. Still, the Toolset sample code found at this link should be updated to include wpv-items found for those who are trying to follow the code. https://toolset.com/documentation/user-guides/creating-side-by-side-feature-comparison-with-views/
2) Yes, that is correct, and I do have the javascript added to the view in the JS editor as shown on this url hidden link.
3) My current theme does not use and support the bootstrap framework, so this will not work for me.
"In your solution, the problem is for one in the ID of the Link that is not unique and is actually the "Compare" link.
Also, the JS will conflict with the Search of Views, which could be solved by using the Custom Search JS Hooks we provide in the JS Section of the Custom Search." - I will look into this part further and see if I can get this resolved. I will post back in a day or two. Thanks again.
1. Yes, it's a mandatory code part, and Views usually puts it in there.
I will send those DOC's for review.
2. I strongly suggest switching to a Bootstrap Theme.
The Bootstrap framework is easy, stable and 100% supported by Toolset Plugins
We even include instructions in our Views Loop editors with direct links to the DOC of Bootstrap.
3. I will not be able to assist the Custom JS Code, as we can here give examples on HTML, CSS and PHP, but basically to use Toolset you will widely need HTML and CSS built by the Web Developer, Toolset is a tool that will help you avoid PHP.
In my example, the Code works, and one part is that I do give unique ID's to the (each) accordion element.
Several JS codes can as example not be fired after pagination or search, and the usual workaround is to use Full page reloads instead of AJAX, or to use our JS Hooks, wich are documented in the editor itself as above exaplained.
Thank you for understanding
