Input quantity and stock status in vertical results

[samuelepellizzari]

Hi Ernest,

I am using your plugin on a hybrid B2B/B2C WooCommerce website, with a specific search form meant for B2B users. Here I successfully got the “Add to cart” button in my vertical results as per your snippet: https://knowledgebase.ajaxsearchpro.com/miscellaneous/woocommerce/add-to-cart-button-for-vertical-and-horizontal-results

A couple of questions:

1. Is it possible to add the quantity input as well?
2. Is there a way to show replacement texts (and possibly colors) for the values of the _stock_status field? (I would like to have them translated, and in red or green depending on the value)

Many thanks,

Samuele

• This topic was modified 1 year, 11 months ago by samuelepellizzari.

[Ernest Marcinko]

Hi Samuele,

Well, this might not be possible easily. The quantity might be doable, the other one is probably more complex.

In the original code the quantity is sent directly via the button:

                <div class="woocommerce">
                    <a href="<?php echo $link; ?>"
                       data-quantity="1"
                       class="button product_type_simple add_to_cart_button<?php echo $ajax; ?>"
                       data-product_id="<?php echo $r->id; ?>" data-product_sku=""
                       rel="nofollow"><?php echo $text; ?></a>
                </div>

Maybe if that were replaced with a quantity input maybe:

<div class="woocommerce">
	<div class="quantity">
		<input type="number" step="1" min="1" max="" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
	</div>
	<a href="<?php echo $link; ?>"
	   class="button product_type_simple add_to_cart_button<?php echo $ajax; ?>"
	   data-product_id="<?php echo $r->id; ?>" data-product_sku=""
	   rel="nofollow"><?php echo $text; ?></a>
</div>

But I’m not sure if this works.

[samuelepellizzari]

Hi Ernes,

It does work!

Indeed, to make the input quantity and buttons clickable, I needed to change the result behavior (https://documentation.ajaxsearchpro.com/layout-settings/results-behavior) and uncheck “Make the whole result area clickable”.

I am now trying to style it in order to align it on the right, just above the add to cart button.

I encourage you to include such functions and make them available in the backend for your next major release. The same goes for stock quantities: is there a way to customize those strings?

Many thanks indeed,

Samuele

• This reply was modified 1 year, 10 months ago by samuelepellizzari.

[Ernest Marcinko]

Great!

I will try my best to integrate more and more features, I can’t promise this, but should be a nice addition for sure.

is there a way to customize those strings?
I’m not sure what exactly you are reffering to, something within the custom code?

[samuelepellizzari]

Hi Ernest,

Many thanks for your feedback and consideration for this feature on possibly future releases.

Regarding the strings to customize, this is what I mean: I need to show the value of the _stock_status string within the result area. However, the value is expressed in English, as per the standard WooCommerce settings: I would like to show those values (‘instock’ and ‘outofstock’) translated into Italian (the language of the website) and in two different color.

You already implemented the conditional brackets (https://documentation.ajaxsearchpro.com/advanced-options/advanced-title-and-description-fields#conditional-bracket-examples), but they show a field’s value based on its existence. I don’t know if it is possible to show a text string based on a field’s value, e.g. if {_stock_status} = ‘instock’ then show ‘• In magazzino’ (possibly in green), if {_stock_status} = ‘outofstock’ show ‘• Non in magazzino’ (possibly in red).

Could you please advise on this?

Thanks again,

Samuele

• This reply was modified 1 year, 10 months ago by samuelepellizzari.

[Ernest Marcinko]

There is a nifty trick where you can do that by using a bit of custom CSS trickery

For the field use this:

<span class="{_stock_status}"></span>

This will apply a class name instead of the actual text. Now add this custom CSS somewhere (either in your theme settings or under here):

span.instock::after {
   content: 'In Stock';
   color: green;
}

span.outofstock::after {
   content: 'Out of Stock';
   color: #ff6600;
}

So the text appearing via CSS will depend on the stock status itself 🙂

[samuelepellizzari]

Hi Ernest,

That’s absolutely brilliant! I didn’t know CSS could do if-conditionals this way.

I’ll try straight away!

Many thanks,

Samuele

[samuelepellizzari]

Hi Ernest,

I am resuming this thread because, after several tests, it turns out that the quantity selector shows up but the quantities themselves aren’t actually added to cart. Whenever I “add to cart”, it’s 1 piece for each product.

The complete code I am using is as follows:

add_filter('asp_results', 'asp_add_to_cart_data', 1, 1);
function asp_add_to_cart_data($results) {
    $product_add_to_cart_text   = 'Aggiungi al carrello';
    $variation_add_to_cart_text = 'Choose variation';   // Leave it empty to not display at all
    
    if (class_exists("WooCommerce")) {
        $_pf = new WC_Product_Factory();
        foreach ($results as &$r) {
            if (
            $r->content_type == "pagepost" &&
                in_array($r->post_type, array("product", "product_variation"))
            ) {
                $product = $_pf->get_product($r->id);
                $is_variable = $product->is_type( 'variable' ) || $r->post_type == 'product_variation';
                $link = !$is_variable ? get_permalink(wc_get_page_id('shop')) : $product->get_permalink(); 
                $ajax = !$is_variable ? ' ajax_add_to_cart' : ''; 
                $text = !$is_variable ? $product_add_to_cart_text : $variation_add_to_cart_text;
                if ( empty($text) )
                    continue;
                ob_start();
                ?>
                <div class="woocommerce">
					<div class="quantity">
						<input type="number" step="1" min="1" max="" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
					</div>
					<a href="<?php echo $link; ?>"
					   class="button product_type_simple add_to_cart_button<?php echo $ajax; ?>"
					   data-product_id="<?php echo $r->id; ?>" data-product_sku=""
					   rel="nofollow"><?php echo $text; ?></a>
				</div>
                <?php
                $button = ob_get_clean();
                $r->content .= $button;
            }
        }
    }
    return $results;
}
add_action('wp_footer', 'asp_add_to_cart_handler');
function asp_add_to_cart_handler() {
    ?>
    <script>
    jQuery(function(t){if("undefined"==typeof wc_add_to_cart_params)return!1;var a=function(){t(".asp_r").on("click",".add_to_cart_button",this.onAddToCart).on("click",".remove_from_cart_button",this.onRemoveFromCart).on("added_to_cart",this.updateButton).on("added_to_cart",this.updateCartPage).on("added_to_cart removed_from_cart",this.updateFragments)};a.prototype.onAddToCart=function(a){var o=t(this);if(o.is(".ajax_add_to_cart")){if(!o.attr("data-product_id"))return!0;a.preventDefault(),o.removeClass("added"),o.addClass("loading");var r={};t.each(o.data(),function(t,a){r[t]=a}),t(document.body).trigger("adding_to_cart",[o,r]),t.post(wc_add_to_cart_params.wc_ajax_url.toString().replace("%%endpoint%%","add_to_cart"),r,function(a){a&&(a.error&&a.product_url?window.location=a.product_url:"yes"!==wc_add_to_cart_params.cart_redirect_after_add?t(document.body).trigger("added_to_cart",[a.fragments,a.cart_hash,o]):window.location=wc_add_to_cart_params.cart_url)})}},a.prototype.onRemoveFromCart=function(a){var o=t(this),r=o.closest(".woocommerce-mini-cart-item");a.preventDefault(),r.block({message:null,overlayCSS:{opacity:.6}}),t.post(wc_add_to_cart_params.wc_ajax_url.toString().replace("%%endpoint%%","remove_from_cart"),{cart_item_key:o.data("cart_item_key")},function(a){a&&a.fragments?t(document.body).trigger("removed_from_cart",[a.fragments,a.cart_hash,o]):window.location=o.attr("href")}).fail(function(){window.location=o.attr("href")})},a.prototype.updateButton=function(a,o,r,e){(e=void 0!==e&&e)&&(e.removeClass("loading"),e.addClass("added"),wc_add_to_cart_params.is_cart||0!==e.parent().find(".added_to_cart").length||e.after(' <a href="'+wc_add_to_cart_params.cart_url+'" class="added_to_cart wc-forward" title="'+wc_add_to_cart_params.i18n_view_cart+'">'+wc_add_to_cart_params.i18n_view_cart+"</a>"),t(document.body).trigger("wc_cart_button_updated",[e]))},a.prototype.updateCartPage=function(){var a=window.location.toString().replace("add-to-cart","added-to-cart");t(".shop_table.cart").load(a+" .shop_table.cart:eq(0) > *",function(){t(".shop_table.cart").stop(!0).css("opacity","1").unblock(),t(document.body).trigger("cart_page_refreshed")}),t(".cart_totals").load(a+" .cart_totals:eq(0) > *",function(){t(".cart_totals").stop(!0).css("opacity","1").unblock(),t(document.body).trigger("cart_totals_refreshed")})},a.prototype.updateFragments=function(a,o){o&&(t.each(o,function(a){t(a).addClass("updating").fadeTo("400","0.6").block({message:null,overlayCSS:{opacity:.6}})}),t.each(o,function(a,o){t(a).replaceWith(o),t(a).stop(!0).css("opacity","1").unblock()}),t(document.body).trigger("wc_fragments_loaded"))},new a});
    </script>
    <?php
}

Perhaps I am missing something…

[samuelepellizzari]

Hi Ernest,

Hope you are doing well.

I am still struggling with input quantity for the “add to cart” button not working properly.

In addition, is there a way to make such custom behaviours work for a specific Ajax Search Pro instance ONLY? I mean, I have three searches set for different sections of the website but I would like that only one showed the quantity/add to cart button. Is it possible?

Many thanks for your help.

Samuele

[Author]

Posts