This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Input quantity and stock status in vertical results

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Input quantity and stock status in vertical results

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #48727
    samuelepellizzarisamuelepellizzari
    Participant

    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

    #48733
    Ernest MarcinkoErnest Marcinko
    Keymaster

    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.

    #48734
    samuelepellizzarisamuelepellizzari
    Participant

    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

    #48736
    Ernest MarcinkoErnest Marcinko
    Keymaster

    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?

    #48738
    samuelepellizzarisamuelepellizzari
    Participant

    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

    #48744
    Ernest MarcinkoErnest Marcinko
    Keymaster

    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 🙂

    #48748
    samuelepellizzarisamuelepellizzari
    Participant

    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

    #51255
    samuelepellizzarisamuelepellizzari
    Participant

    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…

    #52462
    samuelepellizzarisamuelepellizzari
    Participant

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.