Potential Variation Bug

  • Resolved mediawaypoint

    (@mediawaypoint)


    10 months, 1 week ago

    Hi there,

    Love the plugins by the way. I am here to talk about the Swatch Plugin specifically though as there seems to be either a bug, or a lacking user experience implementation.

    In the default state when you load the page, the add to cart button has disabled wc-variation-selection-needed classes assigned to it. When you click add to cart the alert: “Please select some product options before adding this product to your basket.” appears. – This is as I would expect.

    However, if you are using the setting to pre-select an attribute (colour for example), the page loads with classes: disabled wc-variation-selection-needed but then changes to disabled wc-variation-is-unavailable once the variation pre-select reloads the gallery. When the add to cart button is clicked, the alert returns: “Sorry, this product is unavailable. Please choose a different combination.” – This is not as I would expect.

    If we are using the pre-selected option, we want the user to click the size / waist size / whatever before clicking the add to cart button, but, for whatever reason if they forget to click on the drop down menus on the page I linked above, then they are met with this “Sorry, this product is unavailable..” message – which looking at Hotjar recordings is when they terminate the session with us.

    Example / Scenario:
    Using my linked page as an example, if I loaded the page, I would get the add to cart button with the disabled wc-variation-is-unavailable as mentioned before, if I select the size and click S/M, the disabled wc-variation-is-unavailable classes are removed (because of course all options have been selected), however, if I clear the S/M choice and set it to “choose an option”, the class on the add to cart button doesn’t revert to disabled wc-variation-is-unavailable, instead it reverts to disabled wc-variation-selection-needed.

    I think, when the code assigns the classes, it should check to see if the global settings included a pre-selected attribute, and if so, the add to cart button should be using the wc-variation-selection-needed class and not the wc-variation-is-unavailable class.

    Sadly my mutation observer won’t work because it seems you have one running on your plugin which is fighting mine to change the class to the selected-needed version.

    Regards
    Kane

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter mediawaypoint

    (@mediawaypoint)

    Hi Guys,

    It has dawned on me that this functionality is actually woocommerce core, however I did find your plugin does some kind of override on the alerts which was why I mentioned it on here.

    I have actually done the following which seems to work for our needs (essentially running a observer to remove the classes from the add to cart button on page load). I then have a custom modal that asks whether the user has selected their options yet.

    jQuery(document).ready(function($) {

? ? function handleDisabledButtonClick() {
? ? ? ? $('.single_add_to_cart_button').off('click').on('click', function(e) {
? ? ? ? ? ? if ($(this).hasClass('disabled')) {
? ? ? ? ? ? ? ? e.preventDefault();
? ? ? ? ? ? ? ? $('#validationModal').show();
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? replaceClasses();
? ? }
? ? function replaceClasses() {
? ? ? ? // new classes not required specifically but added to confirm override for future eference
? ? ? ? $('.wc-variation-is-unavailable').each(function() {
? ? ? ? ? ? $(this).removeClass('wc-variation-is-unavailable').addClass('gamechanger');
? ? ? ? });
? ? ? ? $('.wc-variation-selection-needed').each(function() {
? ? ? ? ? ? $(this).removeClass('wc-variation-selection-needed').addClass('gamechanger');
? ? ? ? });
? ? }
? ? setTimeout(handleDisabledButtonClick, 500);
? ? var observer = new MutationObserver(function(mutations) {
? ? ? ? mutations.forEach(function(mutation) {
? ? ? ? ? ? if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
? ? ? ? ? ? ? ? handleDisabledButtonClick();
? ? ? ? ? ? ? ? replaceClasses();
? ? ? ? ? ? }
? ? ? ? ? ? if (mutation.type === 'childList') {
? ? ? ? ? ? ? ? replaceClasses();
? ? ? ? ? ? }
? ? ? ? });
? ? });
? ? var config = {
? ? ? ? attributes: true,
? ? ? ? childList: true,
? ? ? ? subtree: true,
? ? ? ? attributeFilter: ['class']
? ? };
? ? var targetButton = document.querySelector('.single_add_to_cart_button');
? ? var targetContainer = document.querySelector('#product-container');
? ? if (targetButton) observer.observe(targetButton, config);
? ? if (targetContainer) observer.observe(targetContainer, config);
? ? if (!targetButton && !targetContainer) console.error('MutationObserver target nodes not found');
? ? replaceClasses();
? ? // Close modal when the close button is clicked
? ? $(document).on('click', '.close-button', function() {
? ? ? ? $('#validationModal').hide();
? ? });
? ? // Close modal when clicking outside of the modal content
? ? $(document).on('click', function(event) {
? ? ? ? if ($(event.target).is('#validationModal')) {
? ? ? ? ? ? $('#validationModal').hide();
? ? ? ? }
? ? });
});

    So while I no longer require help with this (unless it is something that you want to implement as an option within the plugin pro), others might come across this and want to do something similar if they run into a similar issue.

    Regards
    Kane

    Plugin Support fizanzvai

    (@fizanzvai)

    Hi,

    Thanks for reaching out to us and for the suggestions.

    The features you have described are mostly from the WooCommerce Core. Our plugin just converts the default variation dropdown to beautiful swatches. Still, I will discuss this with my team.

    If you found our plugin helpful, could you please leave your valuable feedback here:?https://www.ads-software.com/support/plugin/woo-variation-swatches/reviews/

    Your feedback keeps us inspired.

    Thank You

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Potential Variation Bug’ is closed to new replies.