Browse Source

Enhance Product Page with Improved Icon Integration and UI Elements

- Added ArrowLeftIcon and ShoppingCartIcon from 'lucide-vue-next' for better visual representation in the product page.
- Updated the "Add to Cart" button to include an icon, enhancing user experience and clarity.
- Improved navigation link with an icon for a more cohesive design.
main
Bastian Masanek 1 month ago
parent
commit
0e450684c6
  1. 8
      app/pages/products/[id].vue

8
app/pages/products/[id].vue

@ -6,7 +6,7 @@
* Includes functional "Add to Cart" functionality with notifications and cart UI integration.
*/
import { ArrowLeft, CheckCircle, Loader2 } from 'lucide-vue-next'
import { ArrowLeft, ArrowLeftIcon, CheckCircle, ChevronLeftIcon, Loader2, ShoppingCartIcon } from 'lucide-vue-next'
import { toast } from 'vue-sonner'
// Page metadata
@ -208,6 +208,7 @@ const handleAddToCart = async () => {
<!-- Action Buttons -->
<div class="flex flex-col gap-4 sm:flex-row">
<NuxtLink to="/products" class="btn-secondary flex-1 text-center">
<ArrowLeftIcon class="w-5 h-5 mr-2 inline-block" />
Weitere Produkte ansehen
</NuxtLink>
<Button variant="experimenta" size="experimenta" class="flex-1 relative"
@ -218,7 +219,10 @@ const handleAddToCart = async () => {
<!-- Button text -->
<span v-if="isAddingToCart">Wird hinzugefügt...</span>
<span v-else-if="product.stockQuantity === 0">Nicht verfügbar</span>
<span v-else>In den Warenkorb</span>
<span v-else>
<ShoppingCartIcon class="mr-3 inline-flex" />
In den Warenkorb
</span>
</Button>
</div>

Loading…
Cancel
Save