Sleek Theme Mini Cart

[Sneha_Subhash]

Hi Team,
I’m using the Sleek theme, and while customizing my mini cart drawer, I ran into some issues. I used the below snippet to customize the cart drawer. liquid file.

{%- liquid
if recommendations. performed and recommendations.products_count > 0
assign recommendations_products = recommendations.products
endif
-%}
<cart-drawer-products-recommendation
class="cart-drawer-products-recommendation flex flex-col gap-3 hidden"
data-url="{{ routes.product_recommendations_url }}?section_id={{ section_id }}&product_id={{ product_id }}&limit={{ limit }}&intent=complementary"
>

{%- if recommendations.performed -%}
<div class="blocks-radius flex flex-col gap-4">
{%- for recommendation in recommendations_products -%}
<div>
{%- render 'card-product-list', product: recommendation -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}
</cart-drawer-products-recommendation>

However, after applying this code and CSS, the default recommended product functionalities—such as removing products from the recommended section and reloading the recommended products based on the newly added cart item—only work after refreshing the entire page.

Also, I placed this code outside the drawer__inner div.

{%- liquid
if recommendations.performed and recommendations.products_count > 0
assign recommendations_products = recommendations.products
endif
-%}
<cart-drawer-products-recommendation
class="cart-drawer-products-recommendation flex flex-col gap-3 hidden"
data-url="{{ routes.product_recommendations_url }}?section_id={{ section_id }}&product_id={{ product_id }}&limit={{ limit }}&intent=complementary"
>

{%- if recommendations.performed -%}
<div class="blocks-radius flex flex-col gap-4">
{%- for recommendation in recommendations_products -%}
<div>
{%- render 'card-product-list', product: recommendation -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}
</cart-drawer-products-recommendation>

Could someone please suggest a solution to automatically show related products for the last added cart item in the recommended products section, without needing a full page refresh?

[PaulNewton]

@Sneha_Subhash you need to dynamically reload that part of the cart with ajax/fetch using the section rendering api.

Note: a single item may not necessarily change anything about a users recommendations.

Guided implementation of such a feature is an advanced theme customization beyond the scope of the forums.

If you actually need this customization and have a budget then contact me for services.
Contact info in forum signature below ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[zeez1]

Thank you for reaching out and sharing the details of the issue you're facing with the Sleek theme's mini cart drawer.

From what you've described, it sounds like the recommended products section isn't updating dynamically when a new item is added to the cart, and only works after a full page refresh. This is likely because the code is placed outside the drawer inner div and the component isn't re-rendering on cart updates.

[tim]

Originally, the theme offers recommended products for each item added to cart. The recommendation element has id of the line item product added to the data-url:

<cart-drawer-products-recommendation
   class="cart-drawer-products-recommendation flex flex-col gap-3 hidden"
   data-url="{{ routes.product_recommendations_url }}?section_id={{ section_id }}&product_id={{ product_id }}&limit={{ limit }}&intent=complementary"
>

See the &product_id={{ product_id }} ?

And these are not recommendations for the entire cart, but rather recommendations for the single product. Most likely the same you would see on this products own page.

So you need to pay attention to how this product_id is selected and probably use the id of the last added product...