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.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user