Skip to content

Product carousel support #384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 21, 2024
Merged

Product carousel support #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d1d9b52
Added Product Carousel support
Secreto31126 Oct 21, 2024
eaf93a3
Updated examples
Secreto31126 Oct 21, 2024
0337b9d
Small example change
Secreto31126 Oct 21, 2024
dce26e6
Almost forgot you
Secreto31126 Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions EXAMPLES/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,5 +53,6 @@ the most basic methods or features.
- [Complex template with Single-Product Message](template.md#complex-template-with-single-product-message)
- [Complex template with Multi-Product Message](template.md#complex-template-with-multi-product-message)
- [Complex template with Carousel](template.md#complex-template-with-carousel)
- [Complex template with Product Carousel](template.md#complex-template-with-product-carousel)
- [Complex template with Limited-Time Offer](template.md#complex-template-with-limited-time-offer)
- [OTP prefab template](template.md#otp-prefab-template)
32 changes: 30 additions & 2 deletions EXAMPLES/template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,11 +206,39 @@ const template_carousel_message = new Template(
new BodyComponent(new BodyParameter("PROMO10")),
new CarouselComponent(
new CarouselCard(
new Image(image),
new Image("image_url"),
new URLComponent("?code=PROMO10&product=1")
),
new CarouselCard(
new Image(image),
new Image("image_url"),
new URLComponent("?code=PROMO10&product=2")
)
)
);
```

## Complex template with Product Carousel

```ts
import {
Template,
BodyComponent,
CarouselComponent,
CarouselCard,
CatalogProduct
} from "whatsapp-api-js/messages";

const template_product_carousel_message = new Template(
"template_name",
"en",
new BodyComponent(new BodyParameter("PROMO10")),
new CarouselComponent(
new CarouselCard(
new CatalogProduct("product_id_1", "catalog_id"),
new URLComponent("?code=PROMO10&product=1")
),
new CarouselCard(
new CatalogProduct("product_id_2", "catalog_id"),
new URLComponent("?code=PROMO10&product=2")
)
)
Expand Down
2 changes: 1 addition & 1 deletion src/messages/template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -910,7 +910,7 @@ export class CarouselCard implements ClientBuildableMessageComponent {
* @param components - The other components for the card
*/
constructor(
header: Image | Video,
header: Image | Video | CatalogProduct,
...components: (BodyComponent | ButtonComponent)[]
) {
const tmp = new Template(
Expand Down