The Benefits Of Displaying Availability Flags

In today's fast-paced digital marketplace, the importance of providing clear and transparent information to consumers cannot be overstated. One key aspect of this is displaying availability flags, which indicate the availability status of products on e-commerce platforms.

Availability flags provide customers with instant visibility into whether a product is in stock, low in stock, or out of stock. This transparency enhances the overall shopping experience by reducing uncertainty and frustration.

Customers appreciate knowing the availability status upfront, enabling them to make informed decisions. When customers see that a product is in stock and readily available, they are more likely to proceed with their purchase without hesitation.

Understanding Availability States

Products within your inventory can have one of three distinct availability states:

• In Stock: The item is readily available for purchase.
• Out of Stock: The item is currently unavailable for purchase.
• Pre-Order: The item is not yet available but can be pre-ordered.

Limitations Of Default Flags

By default, Doofinder's system provides flags for one single state, which it is Out of Stock. Displaying out-of-stock flags can prompt customers to sign up for notifications or explore alternative products, rather than abandoning their shopping carts altogether.

To accommodate any other state, such us In Stock or Pre-Order, a direct call to the product's availability field within the template is required, as the default flag does not cover this scenario.

Implementing Availability Flags In Doofinder Product Cards

In this article, we outline how to incorporate availability flags into the product cards of your Doofinder implementation, catering to products that may be in one of three states: in stock, out of stock, or available for pre-order.

To display the correct availability state for each product, including the option for pre-order, you'll need to modify your product card template by directly adjusting the default code. Below is the example snippet that should be added, replacing the existing one:

<div class="dfd-card-availability" title={@item["availability"]}>
  <%= text(@item["availability"], @locale) %>
</div>

To proceed, navigate to Layers > Appearance > Advanced, and then click on Customize Product Card Template. Once you're in the template editor, locate the existing availability snippet and replace it with the new one.

And that's it! You can now customize the availability flag using CSS and round the borders, change the background color and more. Simply access the CSS section by going to Layers > Appearance > CSS and click on customize.

As a tip, the availability class is typically denoted as .dfd-card-availability. Here's a sample code snippet for reference:

.dfd-card-availability {
    color: white; 
    background-color: #4842c1;
    text-transform: capitalize;
    border-radius: 0 4px 4px 0;  
}

Explanation Of The Code

Let's have a look at the code snippet:

<div class="dfd-card-availability" title={@item["availability"]}>
  <%= text(@item["availability"], @locale) %>
</div>

• The div element with the class dfd-card-availability is where the availability status will be displayed.
• title={@item["availability"]} dynamically assigns a title attribute to the div, reflecting the product's current availability state.
• <%= text(@item["availability"], @locale) %> it displays the availability status. @item["availability"] fetches the availability status of the product, and @locale ensures that the text is displayed in the correct language for the user or, if it's not translated by default, it can be done through translations feature.

Conclusion

Availability flags not only enhance the customer experience but also contribute to increased conversions, trust, and operational efficiency. By directly accessing the availability field in the product card template, you can accurately represent products that are available for pre-order, in addition to the standard in-stock or out-of-stock statuses. This customization allows for a more comprehensive and user-friendly shopping experience on your site.