Một mức giá bị gạch ngang đặt cạnh giá thực sẽ giúp người dùng nhận ra ngay mức chiết khấu. Recipe này chỉnh sửa thẻ sản phẩm theo năm để hiển thị giá gói tháng — được gạch ngang — bên cạnh giá hiệu quả hàng tháng của gói năm, phía trên có thêm huy hiệu giảm giá. Định dạng gạch ngang áp dụng cho toàn bộ một phần tử văn bản — bạn không thể gạch ngang một biến số bên trong một đoạn văn bản lớn hơn. Đó là lý do giá bị gạch ngang nằm trong phần tử văn bản riêng của nó, đặt cạnh giá đã giảm trong một container nằm ngang.

Trước khi bắt đầu

• Xây dựng màn hình paywall với các sản phẩm — ví dụ, hãy làm theo Tạo màn hình paywall cơ bản. Hướng dẫn này giả định paywall có cung cấp gói đăng ký hàng năm và hàng tháng.

1. Xếp chồng các dòng giá

Thẻ hàng năm bắt đầu với một dòng giá duy nhất — biến prod_price của sản phẩm hàng năm theo sau là /year, hiển thị như $29.99/year. Thêm một dòng thứ hai phía trên để hiển thị giá hàng tháng.

1. Trong bảng Layers, chọn text giá bên trong thẻ sản phẩm hàng năm. Text này đã nằm trong container dọc của thẻ, vì vậy bản sao sẽ xếp bên dưới nó.
2. Nhấn vào menu ba chấm trên layer và chọn Duplicate. Bản sao xuất hiện bên dưới bản gốc. Ở bước tiếp theo, text phía trên sẽ là dòng giá hàng tháng; text phía dưới giữ nguyên giá hàng năm.

2. Tách hàng tháng thành hai mức giá

Hàng tháng chứa hai phần tử văn bản: giá gói tháng bị gạch ngang và giá mỗi tháng của gói năm.

1. Chọn phần tử văn bản ở trên cùng, nhấp vào menu ba chấm và chọn Wrap > Wrap in Horizontal Container.

2. Nhấp vào menu ba chấm trên layer văn bản bên trong container mới và chọn Duplicate.

   

3. Chọn phần tử văn bản đầu tiên và xóa trường Content. Nhấp vào biểu tượng biến , chọn sản phẩm theo tháng, rồi chọn thuộc tính prod_price_per_month của nó. Gõ /month sau biến.

4. Trong tab Design, mục Typography, đặt Decoration thành Strikethrough (xem Định dạng phần tử — Decoration).

5. Chọn phần tử văn bản thứ hai và thay thế nội dung theo cách tương tự, nhưng chọn thuộc tính prod_price_per_month của sản phẩm theo năm. Gõ /month sau biến.

3. Làm nhạt giá theo năm

Các mức giá theo tháng được nhân đôi đã kế thừa kiểu định dạng giá gốc, nên cả ba mức giá hiện đang có cùng kích thước và độ đậm. Hãy làm cho giá theo năm trông nhẹ hơn để hàng theo tháng nổi bật hơn.

1. Trên canvas, chọn phần tử văn bản ở dưới cùng — giá theo năm.
2. Trong thanh công cụ phía trên phần tử, mở dropdown kiểu chữ và chọn một kiểu nhẹ hơn — ví dụ, Caption. Hoặc chọn kiểu khác trong phần Typography trên tab Design.

4. Thêm huy hiệu giảm giá

Huy hiệu này làm nổi bật mức tiết kiệm bên cạnh giá.

1. Nhấn + > Badge.
2. Trong bảng Layers, kéo huy hiệu vào bên trong sản phẩm theo năm, giữa container dọc chứa các mức giá và nút radio.
3. Chọn layer văn bản của huy hiệu và chỉnh trường Content — ví dụ: Save 75%.

Không có biến nào cho phần trăm giảm giá — bạn cần tự tính từ giá của mình và nhập dưới dạng văn bản tĩnh.

Giờ đây thẻ yearly neo giá của mình theo gói monthly: giá monthly bị gạch ngang, giá monthly hiệu quả của gói yearly, và badge giảm giá nằm trên một dòng, với giá yearly đầy đủ bên dưới.

Các bước tiếp theo

• Lưu và xuất bản flow của bạn.
• Thêm flow vào một placement để bắt đầu hiển thị cho người dùng.