Product Page

A product delivery page shows relevant product details like images, size, colour, price, reviews, etc. It is an essential marketing strategy used to show relevant information that converts leads to sales. In this post, we will learn how to build a product delivery page using Cloudinary for media optimization, Uniform for composing experience, and Yew; a Rust-based frontend framework for rendering the product markup. ## Prerequisites To fully grasp the concepts presented in this tutorial, the following requirements apply: - Basic understanding of Rust - [Trunk](https://trunkrs.dev/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) and [Wasm32](https://doc.rust-lang.org/rustc/platform-support/wasm64-unknown-unknown.html?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) installed - [Cloudinary](https://cloudinary.com/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) account (create an account [here](https://cloudinary.com/users/register/free?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)) - [Uniform](https://uniform.dev/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) account (create an account [here](https://uniform.app/?signup=true?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)) ## Getting started Before we dive into building our application, it is paramount we understand the layout of our application. It will serve as a foundation for modelling the products with Cloudinary and Uniform. ![Application layout](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1667938228736_Flower+component.png) In this post, we will focus on modelling the flower components with Cloudinary and Uniform. **Image Sourcing and Upload to Cloudinary** To start building our application, we must upload sample images for our product delivery page. Sample images - **Rose flower** - https://bit.ly/3tdOXHz - **Hibiscus flower** - https://bit.ly/3zYQ0yJ - **Orchid flower** - https://bit.ly/3UJMmB3 - **Tulip flower** - https://bit.ly/3fQ3XrW In our Cloudinary dashboard, we uploaded the images by clicking on the **Media Library** tab, clicking on **Upload**, selecting the **Web Address** option, inputting the **URL**, and clicking on the **Arrow Button** to upload. ![Cloudinary console and upload button for other formats of upload](https://paper-attachments.dropboxusercontent.com/s_A1144B74EC1072093F0D2701A540D1E74AD827D7B0FFCD60C26EE8B5BA462734_1667176524103_Screenshot+2022-10-31+at+01.34.28.png) ![select web address and enter url](https://paper-attachments.dropboxusercontent.com/s_A1144B74EC1072093F0D2701A540D1E74AD827D7B0FFCD60C26EE8B5BA462734_1667176648327_Screenshot+2022-10-31+at+01.36.43.png) After uploading the image, we will see it displayed on the console. ![copy url](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1667939846394_Screenshot+2022-11-08+at+21.36.50.png) ## Putting it all together on Uniform With that done, we can start creating component libraries on Uniform. To do this, we must [sign up](https://uniform.app/?signup=true) and fill in the required information. Next, input desired project name and click **Continue**. ![](https://paper-attachments.dropboxusercontent.com/s_37F75982472A48A1CBE0DA45CF281D6DB758F5E45F07A898000FDFD9A91BD422_1660256938530_Screenshot+2022-08-11+at+23.26.13.png) Next, navigate to the **Security** tab, select **API Keys**, and click on the rounded **Plus Icon** to create one. Input `marketting_feature` as the API name, click on **Add to Project**, mark all the permissions, and click on **Set Permissions**. Then click on the **Create API Key** to create the API key. ![Create API key](https://paper-attachments.dropboxusercontent.com/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658155631574_Screenshot+2022-07-18+at+15.41.27.png) ![Input details](https://paper-attachments.dropboxusercontent.com/s_37F75982472A48A1CBE0DA45CF281D6DB758F5E45F07A898000FDFD9A91BD422_1660083130731_Screenshot+2022-08-08+at+12.19.59.png) ![Set permissions](https://paper-attachments.dropboxusercontent.com/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1658155631590_Screenshot+2022-07-18+at+15.46.02.png) With this done, we should see a screen containing our **API Key** and **Project ID**. We need to copy these values as they will come in handy when building our application with Yew. ![API Key and project ID](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1667940660042_Screenshot+2022-11-08+at+21.47.11.png) **Understanding Components and Compositions on Uniform** Before we continue modelling our project on Uniform, we must understand the features we will be leveraging to achieve this. **Components** in Uniform application work similarly to those in a Frontend application; it lets us break our application into smaller reusable building blocks with properties, while a **Composition** is the combination of one or more components. For our project, we will create a `flower_component`. **Add Cloudinary integration support** Uniform improves the product’s digital experience through integration with an existing system. To connect Cloudinary to our project, we need to navigate to the **Projects** tab, click on the project, and click on any of the highlighted sections to add **integrations** to our project. ![Click on the Project](https://paper-attachments.dropboxusercontent.com/s_035C76640580F3EB13D6488A93030B16540CC5E21C7C5068391B80FD8F58126A_1660944175936_Screenshot+2022-08-19+at+22.21.19.png) ![Add Integration](https://paper-attachments.dropboxusercontent.com/s_035C76640580F3EB13D6488A93030B16540CC5E21C7C5068391B80FD8F58126A_1660944183099_Screenshot+2022-08-19+at+22.22.16.png) Search or browse through the available integrations, select the **Cloudinary** integration, click on the **Add to project** button, input the `Cloudname`, `API Key` and **Save**. ![Select BigCommerce](https://paper-attachments.dropboxusercontent.com/s_035C76640580F3EB13D6488A93030B16540CC5E21C7C5068391B80FD8F58126A_1660944439325_Screenshot+2022-08-19+at+22.24.21.png) ![Add Integration](https://paper-attachments.dropboxusercontent.com/s_035C76640580F3EB13D6488A93030B16540CC5E21C7C5068391B80FD8F58126A_1660944446044_Screenshot+2022-08-19+at+22.24.48.png) ![Add Cloudname & API Key](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1667942381219_Screenshot+2022-10-25+at+21.21.06.png) We can get our **Cloud Name** and **API Key** from our Cloudinary dashboard. ![Cloudinary Details](https://paper-attachments.dropboxusercontent.com/s_035C76640580F3EB13D6488A93030B16540CC5E21C7C5068391B80FD8F58126A_1660944859294_Screenshot+2022-08-19+at+22.28.09.png) **Create components** To get started, navigate to the **Projects** tab and click on the project. Then navigate to the **Canvas** tab, select the **Component Library**, and click on the **Add component** button. ![Create Component](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678134450719_Screenshot+2023-03-06+at+21.17.05.png) | **Parameter Name** | **Help Text** | **Type** | required | | ------------------ | ------------- | ---------- | -------- | | name | product name | text | YES | | img | product image | Cloudinary | | Input `flower_component` as the component name, select **shopping cart** as the icon, add properties of `name`, and `img` as shown above, and then click **OK**. ![component name](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678134831375_Screenshot+2023-03-06+at+21.31.52.png) ![component properties](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1667942446210_Screenshot+2022-10-25+at+21.33.01.png) ![added properties](https://res.cloudinary.com/dtgbzmpca/image/upload/v1678137834/Screenshot_2023-03-06_at_21.33.39.png) Then click on the **Save and Close** button. ![save and close](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678135216723_Screenshot+2023-03-06+at+21.39.15.png) Following the same approach, we need to create a `body_component` and add the properties shown below: | **Parameter Name** | **Help Text** | **Type** | required | | ------------------ | ------------- | -------- | -------- | | title | title | text | YES | | description | description | text | YES | ![component name](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678135400505_Screenshot+2023-03-06+at+21.42.13.png) ![added properties](https://paper-attachments.dropboxusercontent.com/s_37F75982472A48A1CBE0DA45CF281D6DB758F5E45F07A898000FDFD9A91BD422_1660084885670_Screenshot+2022-08-09+at+23.39.23.png) Then click on the **Save and Close** button. Now that we have created the `flower_component`, it will serve as blueprints/building blocks for creating our product delivery page. ![Product page](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1667942760643_Flower+component+2.png) To start, click the **Plus Icon**, input `Product Page` as the component name, and check the **Composition Component.** Then navigate to the **Slots** section, and click on the **Plus Icon** to create a slot. ![Product Page component](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678135594125_Screenshot+2023-03-06+at+21.46.25.png) ***PS**: Slots help us create instances of our component and allow them to accept data dynamically.* Input `Flowers` as the Slot Name, select the `flower_component` as the allowed components, and click **OK**. ![create slots](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678135667935_Screenshot+2023-03-06+at+21.47.39.png) Then click on the **Save and Close** button. With that done, we can start using the `Product Page` component to compose our product delivery page. To do this, navigate to the **Composition** tab, and click on the **Plus Icon** to create a composition. ![create composition](https://paper-attachments.dropboxusercontent.com/s_05234536B01F35DD3C23868F7C51CD07E5EB0B0BB7E3ADFD3E9148CF9618EC90_1659484772361_Screenshot+2022-08-03+at+00.59.05.png) Select the `Product Page` as the composition type, input `Home` as the name, and **Create**. ![](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1667944164801_Screenshot+2022-10-25+at+22.01.35.png) Input `/flowers` as the slug and click on the **Plus Icon** to add a component to map out a new component. ![create component](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678135898851_Screenshot+2023-03-06+at+21.50.41.png) ***PS**: The slug inputted will come in handy when searching for our composition.* Select the **flower_component** and add the corresponding `image` and name for the four flowers uploaded to Cloudinary earlier and input matching name. ![select flower_component](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678136151372_Screenshot+2023-03-06+at+21.52.20.png) ![add data](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678136157640_Screenshot+2023-03-06+at+21.53.14.png) ![add data](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678136163554_Screenshot+2023-03-06+at+21.55.41.png) We need to repeat the steps above to add the remaining **flower_component** data. Then click on **Save and Publish** option. ![Hover on the item and click on the plus icon to add component](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678136265885_Screenshot+2023-03-06+at+21.56.41.png) ![Save and publish changes](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678136271229_Screenshot+2023-03-06+at+21.57.36.png) Finally, we need to click on the **Publish** button. This makes our composition available to third-party applications. ![publish composition](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1678136495336_Screenshot+2023-03-06+at+22.01.09.png) ## Building the user interface in Yew With that done, we can start building the user interface and use Uniform to deliver the list of products seamlessly. To get started, we need to navigate to the desired directory and run the command below in our terminal: cargo new product-page && cd product-page This command creates a Rust project called `product-page` and navigates into the project directory. Next, we proceed to install the required dependencies by modifying the `[dependencies]` section of the `Cargo.toml` file as shown below: ```toml //other code section goes here [dependencies] yew = "0.19" serde = { version = "1.0.145", features = ["derive"] } reqwest = { version = "0.11", features = ["json"] } wasm-bindgen-futures = "0.4" ``` `yew = "0.19"` is a Rust-based frontend framework `serde = { version = "1.0.145", features = ["derive"] }` is a framework for serializing and deserializing Rust data structures. E.g. convert Rust structs to a JSON. `reqwest = { version = "0.11", features = ["json"] }` is a HTTP request crate. `wasm-bindgen-futures = "0.4"` is a Rust-based library for performing asynchronous programming in Yew by bridging the gap between Rust asynchronous programming (futures) and JavaScript `Promises`. We need to run the command below to install the dependencies: ```bash cargo build ``` **HTML Render** With the project dependencies installed, we need to create an `index.html` file with Bootstrap CDN support in the root directory of our project. Yew uses this file as entry point into the DOM, similarly to the way modern Frontend framework works. ```html Product Page ``` ![index file](https://paper-attachments.dropboxusercontent.com/s_9BCE1CBC2B0480722FD813FD929E44A5064E5E6F163358D952B6D0F1E44E6335_1663968287288_Screenshot+2022-09-23+at+22.24.27.png) **Structuring our application** To ensure maintainability and scalability, we need to structure our project properly. To do this, we need to navigate to the `src` folder and create a `components` and `models` folder with the corresponding `mod.rs` file to manage visibility. ![Modules](https://paper-attachments.dropboxusercontent.com/s_9BCE1CBC2B0480722FD813FD929E44A5064E5E6F163358D952B6D0F1E44E6335_1663969904615_Screenshot+2022-09-23+at+22.50.44.png) To use the code in the modules, we need to declare them as a module and import them into the `main.rs` file as shown below: ```rust use yew::prelude::*; //add below mod components; mod models; #[function_component(App)] fn app() -> Html { //app code goes here } fn main() { yew::start_app::(); } ``` **Creating** **Application Model** Uniform ships with a language-agnostic [Platform API](https://uniform.app/schemas/swagger.html) for managing and composing experience. We can test the API by filling in the **API Key**, **Project ID**, and **Slug**. ![API response from Uniform](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1672485365202_Screenshot+2022-10-26+at+14.48.49.png) With that in mind, we can create a `product.rs` file inside the `models` folder and add the snippet below: ```rust use serde::Deserialize; #[derive(Clone, Deserialize, PartialEq)] pub struct RootComposition { pub composition: Composition, } #[derive(Clone, Deserialize, PartialEq)] pub struct Composition { pub slots: Slots, } #[derive(Clone, Deserialize, PartialEq)] pub struct Slots { pub flowers: Vec, } #[derive(Clone, Deserialize, PartialEq)] pub struct Flower { pub parameters: Parameters, } #[derive(Clone, Deserialize, PartialEq)] pub struct Parameters { pub img: Img, pub name: Name, } #[derive(Clone, Deserialize, PartialEq)] pub struct Img { pub value: Vec, } #[derive(Clone, Deserialize, PartialEq)] pub struct Value { pub alt: String, pub url: String, } #[derive(Clone, Deserialize, PartialEq)] pub struct Name { pub value: String, } ``` The snippet above does the following: - Imports the required dependency - Creates multiple structs that use the `derive` macro to generate implementation support for formatting the output and deserializing the API response object Next, we must register the `product.rs` file as part of the `models` module. To do this, open the `mod.rs` in the `models` folder and add the snippet below: ```bash pub mod product; ``` **Creating Components** With the model fully set up, we can start creating our application building blocks. First, we need to navigate to the `components` folder and create a `header.rs` file and add the snippet below: ```rust use yew::prelude::*; #[function_component(Header)] pub fn header() -> Html { html! { } } ``` The snippet above creates a `Header` component to represent our application header. Secondly, we need to create a `loader.rs` file in the same `components` folder and add the snippet below: ```rust use yew::prelude::*; #[function_component(Loader)] pub fn loader() -> Html { html! {

} } ``` The snippet above creates a `Loader` component representing a UI when our application is loading. Thirdly, we need to create a `message.rs` file in the same `components` folders and add the snippet below: ```rust use yew::prelude::*; #[derive(Properties, PartialEq)] pub struct MessageProp { pub text: String, pub css_class: String, } #[function_component(Message)] pub fn message(MessageProp { text, css_class }: &MessageProp) -> Html { html! {

{text.clone()}

} } ``` The snippet above does the following: - Imports the required dependency - Creates a `MessageProp` struct with `text` and `css_class` properties to represent the component property. The `#[derive(Properties, PartialEq)]` macros mark the struct as a component prop - Destructures the props and use them as CSS class and display text in the markup Fourthly, we need to create a `flower_card.rs` file in the same `components` folders and add the snippet below: ```rust use yew::prelude::*; use crate::models::product::Flower; #[derive(Properties, PartialEq)] pub struct FlowerCardProp { pub flower: Flower, } #[function_component(FlowerCard)] pub fn flower_card(FlowerCardProp { flower }: &FlowerCardProp) -> Html { let name = flower.parameters.name.value.clone(); let image_url = flower.parameters.img.value[0].url.clone(); let image_alt = flower.parameters.img.value[0].alt.clone(); html! {

${image_alt}$

{name}

} } ``` The snippet above does the following: - Imports the required dependencies - Creates a `FlowerCardProp` component props with a `flower` property - Destructures the props by creating a copy of the required parameters and using them in the UI Finally, we must register the newly created components as part of the `components` module. To do this, open the `mod.rs` in the `components` folder and add the snippet below: ```rust pub mod flower_card; pub mod header; pub mod loader; pub mod message; ``` **Putting it all together** With the application components created, we can start using them to build our application by modifying the `main.rs` file as shown below: ```rust use components::{flower_card::FlowerCard, header::Header, loader::Loader, message::Message}; use models::product::{RootComposition, Slots}; use reqwest::{header, Client, Error}; use yew::prelude::*; mod components; mod models; #[function_component(App)] fn app() -> Html { let flowers: UseStateHandle> = use_state(|| None); let error: UseStateHandle> = use_state(|| None); { //create copies of the states let flowers = flowers.clone(); let error = error.clone(); //construct uniform api endpoint let mut headers = header::HeaderMap::new(); headers.insert("Content-Type", "application/json".parse().unwrap()); headers.insert("x-api-key", "".parse().unwrap()); let url = format!( "https://uniform.app/api/v1/canvas?projectId={id}&slug={slug}&state=64", id = "", slug = "/flowers" ); use_effect_with_deps( move |_| { let client = Client::new(); wasm_bindgen_futures::spawn_local(async move { let fetched_flowers = client.get(url).headers(headers).send().await; match fetched_flowers { Ok(response) => { let json = response.json::().await; match json { Ok(data) => flowers.set(Some(data.composition.slots)), Err(e) => error.set(Some(e)), } } Err(e) => error.set(Some(e)), } }); || () }, (), ); } let flower_list_logic = match flowers.as_ref() { Some(flowers) => flowers .flowers .iter() .map(|flower| { html! { } }) .collect(), None => match error.as_ref() { Some(e) => { println!("{}", e); html! { } } None => { html! { } } }, }; html! { <>

{flower_list_logic}

} } fn main() { yew::start_app::(); } ``` The snippet above does the following: - Imports the required dependencies - **Line 11 - 12**: Creates a `flowers` and `error` application state by using the `use_state` hook and specifying `None` as the initial value. The `UseStateHandle` struct is used to specify the state type, and the `Option` enum represents an optional value - **Line 16 - 17**: Creates a copy of the states for safe use within the current scope - **Line 20 - 27**: Construct a request `url` by adding the **API Key**, **Project ID**, and **Slug** - **Line 29 - 49**: Uses the `use_effect_with_deps` hook to perform a side effect of fetching data from the Uniform Platform API asynchronously with the `wasm_bindgen_futures` and `reqwest`'s `Client` struct. We also use the `match` control flow to match JSON response returned and updates the states accordingly - **Line 51 - 74**: Creates a `flower_list_logic` variable to abstract our application logic by using the `match` control flow to match patterns by doing the following: - Maps through the list of `flowers` and pass the individual `flower` to the `FlowerCard` component when the API returns appropriate data - Uses the `Message` and `Loader` components to match error and loading state, respectively - **Line 76 - 94**: Updates the markup with the `Header` component and `flower_list_logic` abstraction With that done, we can start a development server using the command below: ```bash trunk serve --open ``` ![Working app](https://paper-attachments.dropboxusercontent.com/s_8D2B83BEFF067744B248404134093295EA9C4A67D2B7A1304F669F8CDBA7685A_1672499805887_Screenshot+2022-11-07+at+00.08.04.png) # Conclusion This post discussed how to compose a product delivery page experience with Uniform and Rust. These resources might be helpful: - [Yew documentation](https://yew.rs/docs/getting-started/introduction?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) - [Uniform Platform API](https://uniform.app/schemas/swagger.html?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog) - [Uniform official documentation](https://docs.uniform.app/?utm_source=fullstackwriter&utm_medium=fullstackwriter-blog)

#wasm

Build a product delivery page with Rust and Uniform