Product Card Template

What is the Product Card?

The Product Card is the component responsible for showcasing product details within the layer. Typically, it shows a product image, title, and pricing information. This component can be tailored in the admin section to include additional details, such as product availability, discount percent info, and the 'add to cart' button. Furthermore, it supports the customization of HTML colors for a personalized appearance.

To learn more, visit our Appearance documentation.

You now have the flexibility to adjust the product card information to show more or less details based on your specific requirements. You can make these modifications within the Product Card Template section.

The product card uses HEEx format — which is similar to HTML. If you wish to learn more about this, you can visit the HEEx documentation.

How to modify the Product Card

To customize the product card, you need to access the 'Product Card Template' section. Before proceeding, carefully read the warning below:

To access your Product Card Template, follow these steps:

1.Go to Doofinder Admin > Layers > Appearance > Advanced and click on customization under product card template. Within this section, you will find the HTML structure of your product card.

2.Modify this HTML structure to your desired outcome. To do so, you'll need to paste a code snippet with your modifications.

You can:

• Change Values: Prioritize product details as per your need.

• Introduce New Data: Embed any new details you've started collecting for products.

• Resize or Reposition: Alter elements such as the product's image or title.

Every indexed data point is accessible in the HTML using the format @item["field"], where "field" stands for the specific indexed data's name.

    <div class="dfd-card-field" title={@item["field"]}>
      <%= @item["field"] %>
    </div>

You can copy the above snippet and paste it directly into the product card template, replacing the term "field" with the name of the attribute you want to display.

If you are not sure what the attribute name is, you can use the Playground section.

Example Use Case

Suppose you want to display the "brand" attribute in your product card. Here's how to do it:

1.Copy the code snippet below:

    <div class="dfd-card-brand" title={@item["brand"]}>
      <%= @item["brand"] %>
    </div>

2.Paste the code snippet in the product card, for example, before the title information:

This is how your layer will look like with the BRAND field before the TITLE:

Apart from the content, the appearance can be further tuned by altering the CSS. To do this, you can navigate to the same appearance section, but opt for the CSS customization area. This allows you to have granular control over the layout and visual aspects of the product card. To learn more, visit our Appearance documentation.

Remember to always align your product card customization with the preferences and expectations of your target audience.

Customization Code Examples

The most requested attributes to display within the layer are:

• Brand
• SKU
• Labels or any other indexed attribute
• Modifying the "Add to Cart" logo
• Adding quantity selector

Remember this information needs to be indexed in your data feed first.

Add Brand information:

  <div class="dfd-card-brand" title={@item["brand"]}>
    <%= @item["brand"] %>
  </div>

Add SKU information:

  <div class="dfd-card-sku" title={@item["gtin"]}>
    <%= @item["gtin"] %>
  </div>

Add information when it exists:

If you wish to display an attribute (e.g. 'offer') that is indexed only for some items, you will need to use the following condition:

<%= if has_value?(@item, "offer") do %>
  <div class="dfd-card-offer" title={@item["offer"]}>
    <%= @item["offer"] %>
  </div>
<% end %>

Modify Add to Cart icon:

Modify the <.icon> line to change the Cart icon:

<.add_to_cart_btn for={@item} locale={@locale} class="dfd-cart-add-button">
 <.icon shape="add_to_cart" size="32" />
</.add_to_cart_btn>

Add quantity selector to the add to cart:

You should include the attribute quantity={true} in the add-to-cart code line, as shown in the example below:

 <%= if display_add_to_cart_button?(@options) do %>
          <.add_to_cart_btn for={@item} locale={@locale} quantity={true} class="dfd-cart-add-button">
            <.icon shape="add_to_cart" size="32" />
          </.add_to_cart_btn>
<% end %>

For more information on the Add to Cart feature, please refer to this documentation.

Troubleshooting

Reset Template

If modifying the template results in it becoming blank or generating an error, causing the layer not to display or function correctly, reset the template by clicking on "Restore Default" in the lower-left corner.

Syntax Error

If you break the correct syntax of the HTML, a warning will appear when trying to save the configuration: "There was a problem saving your changes. Have a look at the error below."

You need to correct the syntax in order to save the template modification.

If the logic of your modification is wrong, the layer will display a blank screen on your site. The possible reasons are:

• The attribute doesn't exist for at least one of the products.

• The condition or function configured is returning an error.

If you are unable to fix the issue, you can reset the template to the default one, by pressing the Restore default button.