[Résolu] Adding visual feedback to products view when cart Botton is clicked • AJAX

[Auteur]

Publications

[Stephen Vaughan]

I have a this site we are setting up as a fundraiser for a new astro turf pitch which is made of squares to be sold. For usability I have broken this down into sections. In the attached Pitch Sections image you will see that we have set this up as clickable areas. When you click any of these areas the named area pops up with the custom view I made, representing all the squares visually.

When a site visitor purchases an area I have set conditional logic to remove the green product image so that a background with SOLD appears in its place on the grid. Each product is set up as virtual, Stock 1 and limited to one purchase per visitor. The conditional logic to hide the green image is dependent on the stock level being 1.

So far so good… Once the customer has paid the stock level on items purchased drops to 1 and when the pitch sale page is loaded again sold squares are shown accordingly.

I started with the grids set up so that when you clicked each square the user is brought to the product and then they can add it to their basket. But, this takes then away from the main sales funnel of the pitch where they may want to add another square to their basket. So here I start thinking that the cart block from WooCommerce blocks might be a solution. I set this up and restyled to fit my grid matrix of green pitch areas. In the screen shot you will see the red +. This works and I styled out the view cart message so that a second click prevents navigation away to the cart. I installed the Side Cart WooCommerce plugin so that this opens when you click a square to add to cart. This works too.

At this point I need to solve a number of usability issues. The one thing that is missing here is that there is no visual feedback on the product grid view that the user has clicked and added an item to their basket. You can hover over a square and a √ mark is shown to indicate that that item is in the basket. I could adjust the styling here to keep that symbol always visible but there is one more crease in this approach. If I once the the Side Cart panel again and remove the item there, this information isn't passed back to the grid view and the √ mark is still shown.

I looked at all the settings in Views and while there is an AJAX option this only applies to filters.

My question is, is there any solution/coding that is possible for my desired use case to make the view update (without a page reload) to reflect when items are added to the cart. If there isn't a solution for this I'll just style out the visual cues (√ mark) and let the user depend on the Side Cart panel to present what they have in their cart.

Thanks in advance.

[Luo Yang]

Hello,

You can use JS codes to trigger the AJAX search of Views search form.

See below sand box website:
Login URL: lien caché

1) Post view with custom search form:
lien caché
a) Enable option "AJAX results update when visitors click on the search button"
b) In section "Search and Pagination" add a button:

<input type="button" class="my-button" value="Click me">

c) in section " JS editor", add below JS codes:

jQuery( '.my-button' ).on( "click", function() {
  jQuery( ".my-submit-button" ).trigger( "click" );
  console.log('Fire AJAX search again');
});
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
  jQuery( '.my-button' ).on( "click", function() {
    jQuery( ".my-submit-button" ).trigger( "click" );
    console.log('AJAX search triggered again');
  });
	
});

Test it in frontend:
lien caché
click button "Click me", it will also be able to trigger the AJAX search too.

It is only an demo for your reference, you will need to customize the custom JS codes according to your website settings.

[Stephen Vaughan]

My issue is resolved now. Thank you!

[Stephen Vaughan]

Hi Lou,

Just getting back to you. I tested your solution and unfortunately it didn't seem to work. In the view, as you structured it, it definitely worked and more than likely with the triggering button elsewhere on the page it would probably work too. It just didn't want to do its thing when attached to the REMOVE button in the Side Cart panel. I even got ChatGPT to try to come up with something but no joy there either.

[Luo Yang]

You can use custom CSS codes to hide the "Submit" button, for example:

.my-submit-button{display:none;}

See above sandbox website:
lien caché

[Stephen Vaughan]

Hi Luo,

I think you misread my last reply. Hiding the submit button wasn't an issue at all. Triggering it remotely from a text button in the third party plugin Side Cart for WooCOmmerce doesn't seem to be possible.