Hello,
I'm working on a new site with Toolset and WC and have a Views where I have placed the following code :
<div class="blocproduit">
<a href="[wpv-post-url]" class="imgzoom">
<div style="background-image:url('[wpv-woo-product-image size="medium" output="raw"]');background-size:cover;background-repeat:no-repeat;background-position:50% 50%;"><img src="../wp-content/uploads/2019/02/Made-in-Grasse-France.png" width="600" height="600" class="size-full" />
</div>
</a>
<div class="titreparfum">[wpv-post-link]</div>
<div class="etoiles">[wpv-woo-products-rating-listing]</div>
<div class="affichprix">[wpv-woo-buy-or-select add_to_cart_text='PANIER' link_to_product_text='PANIER' show_variation_options="yes" group_add_to_cart_text="PANIER"]</div>
</div>
Then, I have created some filters in order to be able to make some sort in front end :
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group"><label>Triez par :</label>
[wpv-sort-orderby type="select" options="post_title,post_date" label_for_post_title="Nom" label_for_post_date="Nouveauté" orderby_ascending_for="post_title" orderby_descending_for="post_date"]
</div>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Notes olfactives[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="senteur" type="checkboxes" url_param="wpv-senteur"]
</div>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Ambiances[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="ambiance" type="checkboxes" url_param="wpv-ambiance"]
</div>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Compatibilités[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="compatibilite" type="checkboxes" url_param="wpv-compatibilite"]
</div>
[wpv-filter-reset reset_label="REINITIALISER" class="et_pb_button" output="bootstrap"]
[/wpv-filter-controls]
[wpv-filter-end]
The issue I am facing is that when we use the filter in the front end, than, the sorting is done but the variation price disappears (the price defined with this shortcode
[wpv-woo-buy-or-select add_to_cart_text='PANIER' link_to_product_text='PANIER' show_variation_options="yes" group_add_to_cart_text="PANIER"]
). If I click ont he "Reset" button, then all products are displayed but without price.
I'm getting a url of that sort :
/?wpv-senteur%5B%5D=floral&wpv_aux_current_post_id=186&wpv_sort_orderby=post_title&wpv_sort_order=asc&wpv_sort_orderby_as=string&wpv_view_count=216-TCPID186
The first time the filter is defined, no price displayed. If I reload the page with the same url, then the prices are displayed ! If I use another filter, the prices disappear !
No error reported in the console.
Any idea why this is happening and how to get the variation price always displayed?
Regards
Pat
Please use code delimiters for long chunks of code or Pastebin or similar so it is readable. I have edited your post and wrapped the code in "code" delimiters as this forum supports it.
It makes it better readable and can be copied better as it won't change the format.
To the issue, are you using AJAX Updated Search Filters?
This might be the issue here since you mention, if you reload the page it's working fine.
Can you try to switch the View to not use AJAX (manual update of search) to see if this solves the problem?
I can then try to replicate the problem with an AJAX View and eventually we might find a fix for this within Views.
Note also that the DOC elaborates on settings related to AJAX as well:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-buy-or-select
Those settings mentioned there are related to how the product is added, which might mean that if both AJAX of WC and Views are used, then the WC AJAX action is not fired. Hence, using the "JS Front end" events we might be able to fix this (Those are to find in any View's Custom Search JS Editor)
Please let me know if disabling AJAX in the View, for now, solves the issue so at least the search/order can be used?
Hi Beda,
Thanks for taking care.
You're right, if I use the Views with th reload of the page (without ajax), then everything's fine.
Do you think we could find a workaround on this?
Regards
Pat
Thanks a lot for confirming what I had suspected.
I will have to try this out locally (it will require a moment to setup WC with Views) and then find the action that WC requires to perform the wpv-woo-buy-or-select actions)
That could then be added in the View, in the JS section under "Front end JS events"
However, honestly I'd say this (if confirmed) looks like a compatibility issue we should rather address in Toolset and not solve with custom "hacks".
I will be back only Tuesday but will escalate this to myself (maybe on Monday a Second Tier already will have a look, otherwise I will take a look coming week)
For now, the solution would be to use non-AJAX updates, please await our news next weeks about other possible workarounds or eventually statements about plans to fix it.
Hi Beda,
Understood.
I will wait for the next info on this topic and move back to page reload in the meantime.
Thanks for your time.
Regards
Pat
I confirmed the issue, and there are more.
1. The DOC is wrong.
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-buy-or-select
Here we say:
For variable products, the user first has to select a product variation, the Select options button will take the user to the product detail page, where they can select a Variant and add it to the cart.
That's simply not true, I can select the options and it actually updates the price even if I do not display the price at all (with the views_woo_price field)
Actually, that is strange because in the native WooCommerce shop template this is true (what's stated on our DOC), but not in Views. It seems, in Views we do call the SINGLE template selector of WooCommerce which would be A) wrong, but B) nice because it lets you choose first, just as on the WooCommerce Single template (native)!
2. There are also massive style issues - as soon you fire our AJAX (search or order) then +/- buttons appear next to the product quantity field and also a "clear" link in the variable products appear, even we did not make a selection.
So, I reported this and we will try to craft solutions for it - I can see that WC does hide/show the price with a simple slideDown() on show_variation trigger, and hides on trigger hide_variation however I need to ask my colleague here how to best trigger the event.
Hi Beda,
Any idea when we would be able to get a new version of Views to solve this issue. I need to propose quickly a mockup of the site to my client and would prefer to do it without this bug if possible.
Regards
Pat
This will take some time, but I've asked Developers to prioritize this, if possible, given the quite annoying effect of the BUG.
For now, I can only suggest to not use AJAX updates on pagination, search and ordering, it's the only really valuable workaround.
Hi Beda,
Thanks for escalating the priority !
I can understand, but if it could be accepted for the ajax update pagination, it's not the same for all the filters that are linked to this issue.
Adding a refresh button to change the display each time the user is modifying a setup is not something I can propose to my client.
Another issue there : I'm trying to place the pagination control and face a pb :
On my shop page, I have the filter of the Views in the sidebar (as a widget) and the Views result in the page itself. I have tried to place the pagination controls either in the filter section (no display) or in the content page (display but without action).
Can you help to define the best way to use pagination on this specific example?
Hope this fix will come soon !
Regards
Pat
I'm not sure to understand.
We know that the issue is happening with AJAX and will fix this, and try to fix this ASAP.
But the current solution is and includes only, to not use AJAX.
I mean, you will have issues whether you use AJAX pagination or AJAX search or AJAX ordering, or all of them, the issues are just slightly different each time, but it won't work nicely.
Manual updates (no AJAX) are required to not run in any of the issues.
Please let me know if I misunderstood.
Hi Beda,
Sorry you were quicker to answer than me to update my answer.
In fact, I have the issue with the pagination control (see my previews updated post).
Can you help on this as otherwise, I will not be able to present the site to my client !
Regards
Pat
That is another problem which I suspect to be expected.
For sure, the View won't respond to search or pagination if placed in a widget but displayed in the same page.
Also, I believe to recall that on the Shop, which is an archive (not a View per se) if dealing with WooCommerce, we do allow pagination, but only if it's inserted to the Search section or loop and the theme doesn't already provide it.
Let's follow up on that here:
https://toolset.com/forums/topic/split-wc-variable-price-disappear-when-using-filter/
Hello there
There is a patch to apply and a custom code solution, you will need to apply both.
1. Patch
- Download and extract hidden link
- Upload the file it contains to your WCV /res/js/ folder replacing the one that is there already
2. Custom JS solution
- copy paste the below code to your View's Custom Filter JS Section
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.effect (string) The View AJAX pagination effect
* data.speed (integer) The View AJAX pagination speed in miliseconds
* data.layout (object) The jQuery object for the View layout wrapper
*/
if ( typeof wc_add_to_cart_variation_params !== 'undefined' ) {
data.layout.find( '.variations_form' ).each( function() {
jQuery( this ).wc_variation_form();
});
}
});
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/
if ( typeof wc_add_to_cart_variation_params !== 'undefined' ) {
data.layout.find( '.variations_form' ).each( function() {
jQuery( this ).wc_variation_form();
});
}
});
The patch will be included in the next WCV version, the Custom Code not.
I am however asking our Developers to ship this Custom Code natively, or at least document it, as otherwise, we cannot claim full compliance with WC.
Hi Beda,
Thanks for your time.
Concerning the result, I will say its globally fine :
- The price is now well displayed even after a filter or infinite scrolling.
The bad new is that concerning infinite scrolling, as soon as the new item appear in the bottom of the page, all existing ones have a strange behavior :
- The color of the add to cart button change
- This button is no more clickable !!!
Are you able to see this issue on your test site?
Let me know
Regards
Pat
I cannot confirm this.
I tested both the patch and the JS code (you need them together) and it works great also with infinite scrolling.
I have a Develop version that now fixes all issues at once (you would replace the current plugin, and remove the JS code from your view.
Do you want it?
It's on your own risk, but might be a good idea in light of a not yet clear ETA of the release.
