Merged PR 8387: #13173 - Re-work and simplify the favorites markup

#13173 - Re-work and simplify the favorites markup Related work items: #13173
dynamicweb · Apr 27, 2023 · f52eb4e · f52eb4e
2 parents 6b8a169 + 91426bd
commit f52eb4e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 70 deletions.
diff --git a/Swift/Files/Templates/Designs/Swift/Components/ToggleFavorite.cshtml b/Swift/Files/Templates/Designs/Swift/Components/ToggleFavorite.cshtml
@@ -30,45 +30,29 @@
 	string buttonStyle = !string.IsNullOrEmpty(GetViewParameterString("ButtonStyle")) ? GetViewParameterString("ButtonStyle") : string.Empty;
 	string buttonSize = !string.IsNullOrEmpty(GetViewParameterString("ButtonSize")) ? GetViewParameterString("ButtonSize") : string.Empty;
 	string buttonWidth = !string.IsNullOrEmpty(GetViewParameterString("ButtonWidth")) ? GetViewParameterString("ButtonWidth") : string.Empty;
+
+	string filledFavoriteIcon = isInFavoriteList ? "" : "d-none";
+	string outlineFavoriteIcon = isInFavoriteList ? "d-none" : "";
 }
 
 <button type="button" class="btn @buttonStyle @buttonSize @buttonWidth swift_favorites-button" id="FavoriteBtn_@productId@variantId" onclick="swift.Favorites.Toggle(event, '@url', '@favoriteToggleType')" style="z-index: 1" data-product-id="@productId" data-variant-id="@variantId" data-product-name="@productName" data-product-price="@productPrice" data-product-currency="@productPriceCurrency">
-	@if (isInFavoriteList)
-	{
-		<span class="favorite-icon">
-			@if (showButtonText)
-			{
-				<span class="d-flex align-items-center justify-content-center gap-2 text-nowrap in-list" title="In list">
-					<span class="icon-2" aria-hidden="true">@ReadFile(iconPath + "heart-filled.svg")</span>
-					<span>@Translate("Remove from favorites")</span>
-				</span>
-			}
-			else
-			{
-				<span class="in-list" title="In list">
-					<span class="icon-2" aria-hidden="true">@ReadFile(iconPath + "heart-filled.svg")</span>
-					<span class="visually-hidden">@Translate("Remove from favorites")</span>
-				</span>
+	<span class="favorite-icon">
+		<span class="text-nowrap in-list @filledFavoriteIcon" title="In list">
+			<span class="icon-2" aria-hidden="true">@ReadFile(iconPath + "heart-filled.svg")</span>
+			@if (showButtonText) { 
+				<span class="ms-2">@Translate("Remove from favorites")</span>
+			} else { 
+				<span class="visually-hidden">@Translate("Remove from favorites")</span>
 			}
 		</span>
-	}
-	else
-	{
-		<span class="favorite-icon">
+		<span class="text-nowrap not-in-list @outlineFavoriteIcon" title="Not in list">
+			<span class="icon-2" aria-hidden="true">@ReadFile(iconPath + "heart.svg")</span>
 			@if (showButtonText)
 			{
-				<span class="d-flex align-items-center justify-content-center gap-2 text-nowrap not-in-list" title="Not in list">
-					<span class="icon-2" aria-hidden="true">@ReadFile(iconPath + "heart.svg")</span>
-					<span>@Translate("Add to favorites")</span>
-				</span>
-			}
-			else
-			{
-				<span class="not-in-list" title="Not in list">
-					<span class="icon-2" aria-hidden="true">@ReadFile(iconPath + "heart.svg")</span>
-					<span class="visually-hidden">@Translate("Add to favorites")</span>
-				</span>
+				<span class="ms-2">@Translate("Add to favorites")</span>
+			} else { 
+				<span class="visually-hidden">@Translate("Add to favorites")</span>
 			}
 		</span>
-	}
+	</span>
 </button>
diff --git a/Swift/Files/Templates/Designs/Swift/eCom/ProductCatalog/Favorites.cshtml b/Swift/Files/Templates/Designs/Swift/eCom/ProductCatalog/Favorites.cshtml
@@ -47,44 +47,22 @@
 		swift.Favorites.Update('FavoriteToggleForm_@productId@variantId');
 	</script>
 
-	if (isInFavoriteList)
-	{
-		<div class="favorite-icon">
-			<span class="in-list text-nowrap">
-				<span class="icon-2">@ReadFile(iconPath + "heart-filled.svg")</span>
-				@if (showButtonText)
-				{
-					<span class="ms-1">@Translate("Remove from favorites")</span>
-				}
-			</span>
-			<span class="not-in-list text-nowrap d-none">
-				<span class="icon-2">@ReadFile(iconPath + "heart.svg")</span>
-				@if (showButtonText)
-				{
-					<span class="ms-1">@Translate("Add to favorites")</span>
-				}
-			</span>
-		</div>
-	}
-	else
-	{
-		<div class="favorite-icon">
-			<span class="in-list text-nowrap d-none">
-				<span class="icon-2">@ReadFile(iconPath + "heart-filled.svg")</span>
-				@if (showButtonText)
-				{
-					<span class="ms-1">@Translate("Remove from favorites")</span>
-				}
-			</span>
-			<span class="not-in-list text-nowrap">
-				<span class="icon-2">@ReadFile(iconPath + "heart.svg")</span>
-				@if (showButtonText)
-				{
-					<span class="ms-1">@Translate("Add to favorites")</span>
-				}
-			</span>
-		</div>
-	}
+	<div class="favorite-icon">
+		<span class="in-list text-nowrap @filledFavoriteIcon">
+			<span class="icon-2">@ReadFile(iconPath + "heart-filled.svg")</span>
+			@if (showButtonText)
+			{
+				<span class="ms-1">@Translate("Remove from favorites")</span>
+			}
+		</span>
+		<span class="not-in-list text-nowrap @outlineFavoriteIcon">
+			<span class="icon-2">@ReadFile(iconPath + "heart.svg")</span>
+			@if (showButtonText)
+			{
+				<span class="ms-1">@Translate("Add to favorites")</span>
+			}
+		</span>
+	</div>
 }
 else
 {