Wishlist Button

The WishlistWidget is a sub-feature of the PoqCatalogue framework that uses the PoqWishlistClient component framework. It is not actually part of the PoqWishlist framework but it is related and uses the same repository and service.

Overview

The widget is as View rather than a ViewController and initialises itself with an empty WishlistWidgetState. This allows Product and ProductListing views to load and then set up the widget using an instance of WishlistWidgetState.Input.

Container Dependencies

Containers can be used to replace most feature dependencies with one line of code. For the Wishlist this should be done in the AppModule on didAddToPlatform in an organised function such as setUpWishlist or setUpDependencies.

Passing custom data to the Widget

Custom data can be passed to the widget within the WishlistWidgetState.Input object used to set it up. The ProductListingViewData and ProductDetailsViewData both have a wishlist property that can be customised via their associated ViewDataMappers.

WishlistWidgetState.Input(
    // Always map the identifier based on the current product selection.
    id: .init(
        productId: product.id,
        listingId: variant.listingId,
        variantId: state.selection?.selected?.id
    ),
    title: variant.name,
    price: variant.price,
    // Pass your custom data here; used for analytics, custom variant selection, or any customisation.
    customData: CustomWishlistWidgetData(
        isPersonalisable: variant.customData(CustomVariantData.self)?.isPersonalisable
    )
)

Customise the Wishlist Widget

Customise the WishlistWidget via subclassing. Instead of a builder, the widget has overridable functions for creating its reducers and middleware.

1. Create a new file for your widget somewhere like Sources/Wishlist/Views.
2. Subclass the WishlistWidget and customise.

// It is always good to add comments to describe what customisations you are adding and why.
class CustomWishlistWidget: WishlistWidget {
    override func makeAnalyticsMiddleware() {
        let middleware = super.makeAnalyticsMiddleware()
        return Middleware { store, action in
            store.continue(action)

            guard let input = store.state?.input else { return }
            switch action {
            case ServiceAction.WishlistEntry.update(let item) where item.id == input.id && item.isWishlisted:
                // Override added to wishlist to track your custom data.
                let customData = input.customData(CustomWishlistWidgetData.self)
                guard customData?.isPersonalisable == true else { fallthrough }
                CustomTracker.shared.trackPersonalisedAddedToWishlist(
                    productId: item.id.productId
                )

            default:
                middleware.execute(store: store, action: action)
            }
        }
    }
}

3. Open your AppModule to the didAddToPlatform or setUpWishlist function.
4. Inject your custom widget.

// Inject the widget in your AppModule.
Container.shared.views.wishlistWidget.replace { CustomWishlistWidget() }