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.
|
* 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'
|
import { toast } from 'vue-sonner'
|
||||||
|
|
||||||
// Page metadata
|
// Page metadata
|
||||||
@@ -208,6 +208,7 @@ const handleAddToCart = async () => {
|
|||||||
<!-- Action Buttons -->
|
<!-- Action Buttons -->
|
||||||
<div class="flex flex-col gap-4 sm:flex-row">
|
<div class="flex flex-col gap-4 sm:flex-row">
|
||||||
<NuxtLink to="/products" class="btn-secondary flex-1 text-center">
|
<NuxtLink to="/products" class="btn-secondary flex-1 text-center">
|
||||||
|
<ArrowLeftIcon class="w-5 h-5 mr-2 inline-block" />
|
||||||
Weitere Produkte ansehen
|
Weitere Produkte ansehen
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<Button variant="experimenta" size="experimenta" class="flex-1 relative"
|
<Button variant="experimenta" size="experimenta" class="flex-1 relative"
|
||||||
@@ -218,7 +219,10 @@ const handleAddToCart = async () => {
|
|||||||
<!-- Button text -->
|
<!-- Button text -->
|
||||||
<span v-if="isAddingToCart">Wird hinzugefügt...</span>
|
<span v-if="isAddingToCart">Wird hinzugefügt...</span>
|
||||||
<span v-else-if="product.stockQuantity === 0">Nicht verfügbar</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>
|
</Button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user