Code Based Setup

Code Based Setup

Code Based Setup

Add wishlist with a code only setup, without app embeds.

This guide shows how to add Wishlist King to your theme without using the app embeds or our build in Code Access feature. That way you can store and version control the Wishlist code along with the rest of your theme code.

It is important that all the Wishlist King embeds are disabled when using this technique!

☝
Not recommended We generally recommend using the app embeds. They will automatically uninstall with the app and receive bug fixes that we release.

Add app files

The first step is to add the required Wishlist files. Download the following files from our sample repository and place them in your theme code.

wishlist-code-setup

appmate-io ⋅ 2 months ago

Render main snippet

Next you will need to render wishlist-app.liquid in your Liquid layout (usually theme.liquid). We recommend adding it before the closing body tag. That way it will be loaded last and have less impact on your page speed.

{% render 'wishlist-app' %}

Add Wishlist link

Let’s render the Wishlist link in your header navigation. One important concept to understand here is what we call headless components.

The snippet will render a Wishlist link in it’s default state. At this point we don’t know yet if the customer has added products to their Wishlist or not.

Once the app is loaded, it will initialise the component located in assets/wishlist-link.js. This component will know the Wishlist state and update the initial markup accordingly.

{% render 'wishlist-link' %}

Add Wishlist button

Next we will add a Wishlist button to your product pages. Much like the Wishlist link, this is also a headless component.

The code that adds state and interactivity is located in assets/wishlist-button.js.

{%- render 'wishlist-button', product_handle: product.handle, variant_id: product.selected_or_first_available_variant.id -%}

As you can see, we pass the product handle and selected variant id to the snippet. These values are required to link the component to a specific product.

In our default Wishlist button snippet, we have added a variable named floating. This is just an example of how you could use the same snippet to render a floating Wishlist button on your product cards in a collection.

{% render 'wishlist-button', product_handle: card_product.handle, floating: true %}

We skip the optional variant id. If you render individual product variants in your collections, you need to pass the variant ids just like we did on the product page.

Wishlist page

Unlike the previous two components, the Wishlist page is not a headless component. It is a web component, which entirely renders in the browser. This component is significantly more complex and rendering it with a framework (Lit) makes the most sense to us.

The default configuration expects a page with handle “wishlist”. You can adjust the handle as needed in snippets/wishlist-app/liquid.

Your page template needs include this render statement.

{% render 'wishlist-page' %}

This will just render the web component element. All the markup is generated in the component file under assets/wishlist-page.js .

We will not explain all the ins and outs of this file, but have done our best to write readable code.

Please reach out to support@appmate.io if you have specific questions.

© Appmate