Feature: supports multiple sponsored badge positions (#390)

#### What problem is this solving?

In some stores, the layout doesn't work so well with the sponsored tag
begin on top of the product's name.

So, we're now adding the option `containerTop`, that puts the sponsored
tag on top of the product container in an absolute position. The store
can then manipulate the finer details in their CSS.

#### How to test it?

<!--- Don't forget to add a link to a Workspace where this branch is
linked -->


[Workspace](https://caula--biggy.myvtex.com/camisa?_q=camisa&map=ft&__bindingAddress=biggy.myvtex.com/)

#### Screenshots or example usage:

![Screenshot 2023-12-15 at 16 33
20](https://github.com/vtex-apps/product-summary/assets/15937541/89a34a10-7927-4dc9-85c0-9ab4851d23c2)
![image](https://github.com/vtex-apps/product-summary/assets/15937541/99ec2c10-6111-4554-887d-07016a420f98)


#### Related to / Depends on

Depends on: vtex-apps/product-summary-context#27

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Support options for different sponsored badge positions.
+
 ## [2.87.1] - 2023-12-19
 
 ### Added

docs/ProductSummaryName.md

@@ -42,7 +42,6 @@ Product Summary Name is a block exported by the [Product Summary app](https://de
 | `showSku` | `Boolean` | Show product SKU | `false` |
 | `showProductReference` | `Boolean` | Show product reference | `false`| 
 | `showBrandName` | `Boolean` | Show brand name | `false`| 
-| `sponsoredBadgeLabel` | `String` | The text of the "Sponsored" tag, if applicable. | `"store/sponsored-badge.label"`| 
 
 ## Customization
 

docs/ProductSummaryShelf.md

@@ -47,6 +47,8 @@ The Product Summary Shelf is the main block exported by the [Product Summary app
 | - | - | - | - |
 | `priceBehavior` |  `enum` | Determines whether the component should fetch the most up-to-date price (`async`) or (`default`). Remember to configure the [Search Result](https://vtex.io/docs/components/content-blocks/vtex.search-result@3.79.1/#configuration)'s `simulationBehavior` prop to `skip` and use the Product Price [`product-price-suspense`](https://github.com/vtex-apps/product-price/blob/master/docs/README.md) block to render a loading spinner while the price information is being fetched. | `default` |
 | `trackListName` | `boolean` | Determines whether the component should send the list name to the product page when the product summary is clicked. Disabling it will prevent the `productDetail` GTM event sent on the PDP to identify from which list the user navigated. | `true` |
+| `sponsoredBadgeLabel` | `String` | The text of the "Sponsored" tag, if applicable. | `"store/sponsored-badge.label"`| 
+| `sponsoredBadgePosition` | `enum` | The position of the "Sponsored" tag, if applicable. Possible values are `titleTop`, `containerTopLeft` and `none`. | `"titleTop"`| 
 
 ## Customization
 

messages/ar-SA.json

@@ -38,7 +38,6 @@
   "admin/editor.productSummaryImage.hoverImage.criteria.label": "تسمية الصورة الفوقية",
   "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "معايير البحث عن تسمية صورة فوقية (بالضبط: العثور على الصورة التي تطابق تماما الاسم المملوء في حقل 'تسمية صورة فوقية' | تضمن: العثور على الصورة الأولى التي تحتوي على النص المملوء في حقل 'تسمية صورة فوقية')",
   "admin/editor.productSummaryImage.hoverImage.criteria.index": "مؤشر الصورة الفوقية",
-  "admin/editor.productSummaryName.sponsoredBadge.title": "ข้อความของแท็กผลิตภัณฑ์ที่ได้รับการสนับสนุน หากมี",
   "admin/editor.productSummaryBuyButton.title": "زر ملخص شراء المنتج",
   "admin/editor.productSummaryName.title": "اسم ملخص المنتج",
   "admin/editor.product-summary-specification-badges.title": "ملخص مواصفات شارات المنتج",
@@ -72,5 +71,10 @@
   "admin/editor.productSummaryList.installmentCriteria.max-without-interest": "الحد الأقصى بدون فوائد",
   "admin/editor.productSummaryList.installmentCriteria.max-with-interest": "الحد الأقصى",
   "admin/editor.productSummaryList.analyticsListName.title": "اسم القائمة في التحليلات",
-  "admin/editor.productSummary.trackListName.title": "يجب أن يكون اسم مسار القائمة"
+  "admin/editor.productSummary.trackListName.title": "يجب أن يكون اسم مسار القائمة",
+  "admin/editor.productSummary.sponsoredBadge.title": "نص علامة المنتج الدعاء ، إن أمكن",
+  "admin/editor.productSummary.sponsoredBadge.position": "موقف علامة المنتج المدعومة ، إن أمكن",
+  "admin/editor.productSummary.sponsoredBadge.position.titleTop": "فوق اسم المنتج",
+  "admin/editor.productSummary.sponsoredBadge.position.containerTopLeft": "فوق حاوية المنتج",
+  "admin/editor.productSummary.sponsoredBadge.position.none": "لا تظهر"
 }

messages/bg-BG.json

@@ -38,7 +38,6 @@
   "admin/editor.productSummaryImage.hoverImage.criteria.label": "Етикет при задържане на курсора върху изображение",
   "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "Критерии за търсене на етикет при задържане на курсора върху изображението (точно: намира изображението, което е точно съвпадение с името, посочено в полето „етикет при задържане на курсора върху изображение“ | съдържа: намира първото изображение, което съдържа текста, поставен в полето „етикет при задържане на курсора върху изображение“)",
   "admin/editor.productSummaryImage.hoverImage.criteria.index": "Индекс при задържане на курсора върху изображение",
-  "admin/editor.productSummaryName.sponsoredBadge.title": "Текст на етикета на спонсорирания продукт, ако е приложимо",
   "admin/editor.productSummaryBuyButton.title": "Бутон за покупка с резюме на продукта",
   "admin/editor.productSummaryName.title": "Име на резюме на продукта",
   "admin/editor.product-summary-specification-badges.title": "Значки със спецификации на резюме на продукта",
@@ -72,5 +71,10 @@
   "admin/editor.productSummaryList.installmentCriteria.max-without-interest": "Максимални без лихва",
   "admin/editor.productSummaryList.installmentCriteria.max-with-interest": "Максимални",
   "admin/editor.productSummaryList.analyticsListName.title": "Наименование на списъка в Analytics",
-  "admin/editor.productSummary.trackListName.title": "Трябва да следи наименованието на списъка"
+  "admin/editor.productSummary.trackListName.title": "Трябва да следи наименованието на списъка",
+  "admin/editor.productSummary.sponsoredBadge.title": "Текст на спонсорирания продуктов етикет, ако е приложимо",
+  "admin/editor.productSummary.sponsoredBadge.position": "Позиция на спонсорирания продуктов етикет, ако е приложимо",
+  "admin/editor.productSummary.sponsoredBadge.position.titleTop": "Над името на продукта",
+  "admin/editor.productSummary.sponsoredBadge.position.containerTopLeft": "Отгоре на контейнера за продукти",
+  "admin/editor.productSummary.sponsoredBadge.position.none": "Не показвайте"
 }

messages/context.json

@@ -37,7 +37,6 @@
   "admin/editor.productSummaryImage.hoverImage.criteria.index": "admin/editor.productSummaryImage.hoverImage.criteria.index",
   "admin/editor.productSummaryImage.hoverImage.criteria.label": "admin/editor.productSummaryImage.hoverImage.criteria.label",
   "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria",
-  "admin/editor.productSummaryName.sponsoredBadge.title": "admin/editor.productSummaryName.sponsoredBadge.title",
   "admin/editor.productSummaryBuyButton.title": "admin/editor.productSummaryBuyButton.title",
   "admin/editor.productSummaryName.title": "admin/editor.productSummaryName.title",
   "admin/editor.product-summary-specification-badges.title": "admin/editor.product-summary-specification-badges.title",
@@ -71,5 +70,10 @@
   "admin/editor.productSummaryList.installmentCriteria.max-without-interest": "Maximum without interest enum name",
   "admin/editor.productSummaryList.installmentCriteria.max-with-interest": "Maximum with interest enum name",
   "admin/editor.productSummaryList.analyticsListName.title": "List name in Analytics",
-  "admin/editor.productSummary.trackListName.title": "Should track list name"
+  "admin/editor.productSummary.trackListName.title": "Should track list name",
+  "admin/editor.productSummary.sponsoredBadge.title": "admin/editor.productSummary.sponsoredBadge.title",
+  "admin/editor.productSummary.sponsoredBadge.position": "admin/editor.productSummary.sponsoredBadge.position",
+  "admin/editor.productSummary.sponsoredBadge.position.titleTop": "admin/editor.productSummary.sponsoredBadge.position.titleTop",
+  "admin/editor.productSummary.sponsoredBadge.position.containerTopLeft": "admin/editor.productSummary.sponsoredBadge.position.containerTopLeft",
+  "admin/editor.productSummary.sponsoredBadge.position.none": "admin/editor.productSummary.sponsoredBadge.position.none"
 }

messages/de-DE.json

@@ -38,7 +38,6 @@
   "admin/editor.productSummaryImage.hoverImage.criteria.label": "Mausverschiebung Bildbeschriftung",
   "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "Mausverschiebung Bildbeschriftung Bezeichnungssuche (genau: findet das Bild, das genau mit dem Namen übereinstimmt, der im Feld 'Hover Image Label' eingetragen ist | enthält: findet das erste Bild, das den Text enthält, der im Feld 'Hover Image Label' ausgefüllt ist)",
   "admin/editor.productSummaryImage.hoverImage.criteria.index": "Mausverschiebung Index",
-  "admin/editor.productSummaryName.sponsoredBadge.title": "Text des gesponserten Produkt-Tags, falls zutreffend",
   "admin/editor.productSummaryBuyButton.title": "Produktübersicht Kauf-Taste",
   "admin/editor.productSummaryName.title": "Produktübersicht Name",
   "admin/editor.product-summary-specification-badges.title": "Produktübersicht Spezifikations-Abzeichen",
@@ -72,5 +71,10 @@
   "admin/editor.productSummaryList.installmentCriteria.max-without-interest": "Maximum ohne Zinsen",
   "admin/editor.productSummaryList.installmentCriteria.max-with-interest": "Maximum",
   "admin/editor.productSummaryList.analyticsListName.title": "Listenname in der Analytik",
-  "admin/editor.productSummary.trackListName.title": "Sollte Listenname anzeigen"
+  "admin/editor.productSummary.trackListName.title": "Sollte Listenname anzeigen",
+  "admin/editor.productSummary.sponsoredBadge.title": "Text des gesponserten Produkts, falls zutreffend",
+  "admin/editor.productSummary.sponsoredBadge.position": "Position des gesponserten Produkts, falls zutreffend",
+  "admin/editor.productSummary.sponsoredBadge.position.titleTop": "Über dem Namen des Produkts",
+  "admin/editor.productSummary.sponsoredBadge.position.containerTopLeft": "Über den Produktbehälter",
+  "admin/editor.productSummary.sponsoredBadge.position.none": "Zeigen Sie nicht"
 }

messages/en.json

@@ -40,7 +40,6 @@
   "admin/editor.productSummaryImage.hoverImage.criteria.index": "Hover Image Index",
   "admin/editor.productSummaryBuyButton.title": "Product Summary Buy Button",
   "admin/editor.productSummaryName.title": "Product Summary Name",
-  "admin/editor.productSummaryName.sponsoredBadge.title": "Text of the sponsored product tag, if applicable",
   "admin/editor.product-summary-specification-badges.title": "Product Summary Specification Badges",
   "admin/editor.productSummaryList.title": "Product List",
   "admin/editor.productSummaryList.description": "Product list from a collection",
@@ -72,5 +71,10 @@
   "admin/editor.productSummaryList.installmentCriteria.max-without-interest": "Maximum without interest",
   "admin/editor.productSummaryList.installmentCriteria.max-with-interest": "Maximum",
   "admin/editor.productSummaryList.analyticsListName.title": "List name in Analytics",
-  "admin/editor.productSummary.trackListName.title": "Track list name"
+  "admin/editor.productSummary.trackListName.title": "Track list name",
+  "admin/editor.productSummary.sponsoredBadge.title": "Text of the sponsored product tag, if applicable",
+  "admin/editor.productSummary.sponsoredBadge.position": "Position of the sponsored product tag, if applicable",
+  "admin/editor.productSummary.sponsoredBadge.position.titleTop": "Above the product's name",
+  "admin/editor.productSummary.sponsoredBadge.position.containerTopLeft": "On top of the product container",
+  "admin/editor.productSummary.sponsoredBadge.position.none": "Don't show"
 }

messages/es.json

@@ -40,7 +40,6 @@
   "admin/editor.productSummaryImage.hoverImage.criteria.index": "Índice de la imagen activable",
   "admin/editor.productSummaryBuyButton.title": "Botón de compra del resumen del producto",
   "admin/editor.productSummaryName.title": "Nombre del resumen del producto",
-  "admin/editor.productSummaryName.sponsoredBadge.title": "Texto de la etiqueta de producto patrocinado, si corresponde",
   "admin/editor.product-summary-specification-badges.title": "Insignias de especificación del resumen del producto",
   "admin/editor.productSummaryList.title": "Lista de productos",
   "admin/editor.productSummaryList.description": "Una lista de productos que tiene una colección",
@@ -72,5 +71,10 @@
   "admin/editor.productSummaryList.installmentCriteria.max-without-interest": "Máximo sin interés",
   "admin/editor.productSummaryList.installmentCriteria.max-with-interest": "Máximo",
   "admin/editor.productSummaryList.analyticsListName.title": "Nombre de la lista en Analytics",
-  "admin/editor.productSummary.trackListName.title": "Rastrear el nombre de la lista"
+  "admin/editor.productSummary.trackListName.title": "Rastrear el nombre de la lista",
+  "admin/editor.productSummary.sponsoredBadge.title": "Texto de la insignia de producto patrocinado, si corresponde",
+  "admin/editor.productSummary.sponsoredBadge.position": "Posición de la insignia de producto patrocinado, si corresponde",
+  "admin/editor.productSummary.sponsoredBadge.position.titleTop": "Sobre el nombre del producto",
+  "admin/editor.productSummary.sponsoredBadge.position.containerTopLeft": "Sobre el container del producto",
+  "admin/editor.productSummary.sponsoredBadge.position.none": "No mostrar"
 }

messages/fr-FR.json

@@ -38,7 +38,6 @@
   "admin/editor.productSummaryImage.hoverImage.criteria.label": "Pointer l’étiquette de l’image",
   "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "Critères de recherche pour pointer l’étiquette de l’image (exact : trouve l’image correspondant exactement au nom rempli dans le champ 'Pointer l’étiquette de l’image' | contenus : trouve la première image qui contient le texte rempli dans le champ 'Pointer l’étiquette de l’image')",
   "admin/editor.productSummaryImage.hoverImage.criteria.index": "Pointer l’index de l’image",
-  "admin/editor.productSummaryName.sponsoredBadge.title": "Texte de l'étiquette du produit sponsorisé, le cas échéant",
   "admin/editor.productSummaryBuyButton.title": "Bouton d’achat de la synthèse du produit",
   "admin/editor.productSummaryName.title": "Nom de la synthèse du produit",
   "admin/editor.product-summary-specification-badges.title": "Spécification des badges de la synthèse du produit",
@@ -72,5 +71,10 @@
   "admin/editor.productSummaryList.installmentCriteria.max-without-interest": "Maximum sans intérêt",
   "admin/editor.productSummaryList.installmentCriteria.max-with-interest": "Maximum",
   "admin/editor.productSummaryList.analyticsListName.title": "Nom de la liste dans Analyses",
-  "admin/editor.productSummary.trackListName.title": "Suivre la liste des noms"
+  "admin/editor.productSummary.trackListName.title": "Suivre la liste des noms",
+  "admin/editor.productSummary.sponsoredBadge.title": "Texte de la balise de produit sponsorisée, le cas échéant",
+  "admin/editor.productSummary.sponsoredBadge.position": "Position de l'étiquette de produit sponsorisée, le cas échéant",
+  "admin/editor.productSummary.sponsoredBadge.position.titleTop": "Au-dessus du nom du produit",
+  "admin/editor.productSummary.sponsoredBadge.position.containerTopLeft": "En plus du conteneur de produit",
+  "admin/editor.productSummary.sponsoredBadge.position.none": "Ne montre pas"
 }

messages/id-ID.json

@@ -38,7 +38,6 @@
   "admin/editor.productSummaryImage.hoverImage.criteria.label": "Label Gambar Mengambang",
   "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "Kriteria pencarian label gambar mengambang (persis: temukan gambar yang sama persis dengan nama yang terisi di bidang 'Label Gambar Mengambang’| berisi: temukan gambar pertama yang berisi teks yang terisi di bidang 'Label Gambar Mengambang')",
   "admin/editor.productSummaryImage.hoverImage.criteria.index": "Indeks Gambar Mengambang",
-  "admin/editor.productSummaryName.sponsoredBadge.title": "Teks tag produk bersponsor, jika ada",
   "admin/editor.productSummaryBuyButton.title": "Tombol Beli Ringkasan Produk",
   "admin/editor.productSummaryName.title": "Nama Ringkasan Produk",
   "admin/editor.product-summary-specification-badges.title": "Badge Spesifikasi Ringkasan Produk",
@@ -72,5 +71,10 @@
   "admin/editor.productSummaryList.installmentCriteria.max-without-interest": "Maksimum tanpa bunga",
   "admin/editor.productSummaryList.installmentCriteria.max-with-interest": "Maksimum",
   "admin/editor.productSummaryList.analyticsListName.title": "Nama daftar dalam Analitika",
-  "admin/editor.productSummary.trackListName.title": "Harus melacak nama daftar"
+  "admin/editor.productSummary.trackListName.title": "Harus melacak nama daftar",
+  "admin/editor.productSummary.sponsoredBadge.title": "Teks dari tag produk yang disponsori, jika berlaku",
+  "admin/editor.productSummary.sponsoredBadge.position": "Posisi tag produk yang disponsori, jika berlaku",
+  "admin/editor.productSummary.sponsoredBadge.position.titleTop": "Di atas nama produk",
+  "admin/editor.productSummary.sponsoredBadge.position.containerTopLeft": "Di atas wadah produk",
+  "admin/editor.productSummary.sponsoredBadge.position.none": "Jangan tunjukkan"
 }

messages/it-IT.json

@@ -38,7 +38,6 @@
   "admin/editor.productSummaryImage.hoverImage.criteria.label": "Etichetta dell'immagine secondaria",
   "admin/editor.productSummaryImage.hoverImage.criteria.matchCriteria": "Criterio di ricerca dell'etichetta dell'immagine secondaria (exact: trova l'immagine che corrisponde esattamente al nome inserito nel campo \"Etichetta dell'immagine secondaria\" | contains: trova la prima immagine che contiene il testo inserito nel campo \"Etichetta dell'immagina secondaria\")",
   "admin/editor.productSummaryImage.hoverImage.criteria.index": "Indice dell'immagine secondaria",
-  "admin/editor.productSummaryName.sponsoredBadge.title": "Testo del tag del prodotto sponsorizzato, se applicabile",
   "admin/editor.productSummaryBuyButton.title": "Pulsante \"Acquista\" nel riepilogo del prodotto",
   "admin/editor.productSummaryName.title": "Nome nel riepilogo del prodotto",
   "admin/editor.product-summary-specification-badges.title": "Badge per le specifiche nel riepilogo del prodotto",
@@ -72,5 +71,10 @@
   "admin/editor.productSummaryList.installmentCriteria.max-without-interest": "Importo massimo senza interessi",
   "admin/editor.productSummaryList.installmentCriteria.max-with-interest": "Importo massimo",
   "admin/editor.productSummaryList.analyticsListName.title": "Nome del listino in \"Analisi\"",
-  "admin/editor.productSummary.trackListName.title": "Serve a tracciare il nome del listino"
+  "admin/editor.productSummary.trackListName.title": "Serve a tracciare il nome del listino",
+  "admin/editor.productSummary.sponsoredBadge.title": "Testo del tag prodotto sponsorizzato, se applicabile",
+  "admin/editor.productSummary.sponsoredBadge.position": "Posizione del tag prodotto sponsorizzato, se applicabile",
+  "admin/editor.productSummary.sponsoredBadge.position.titleTop": "Sopra il nome del prodotto",
+  "admin/editor.productSummary.sponsoredBadge.position.containerTopLeft": "In cima al contenitore del prodotto",
+  "admin/editor.productSummary.sponsoredBadge.position.none": "Non mostrare"
 }