Skip to content

Commit

Permalink
Add cart button
Browse files Browse the repository at this point in the history
  • Loading branch information
@rayc2045
rayc2045 committed May 9, 2024
1 parent fed6a75 commit dc9581e
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 68 deletions.
1 change: 1 addition & 0 deletions src/images/svg/bag.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
144 changes: 76 additions & 68 deletions src/pages/shop/shop.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,7 @@
}"
x-text="`${length} product${length > 1 ? 's' : ''}`"
></div>
<button
class="p-3 aspect-square rounded-full flex justify-center items-center text-gray-500 hover:text-gray-700 bg-gray-200 hover:bg-gray-300/80 transition"
@click="filter.hide()"
>
✕
</button>
<button :class="btn.roundedLight" @click="filter.hide()">✕</button>
</section>
<div
x-html="component('products-filter')"
Expand All @@ -86,75 +81,88 @@
lowerName: product.name.toLowerCase().replaceAll(' ', '_'),
currentColor: product.colors[0],
}"
:class="product.stock !== 'in stock' && 'disabled'"
:class="product.stock !== 'in stock' && 'cursor-not-allowed'"
>
<a
:href="`#/shop/${product.category}/${lowerName}?color=${currentColor}`"
class="block rounded-md overflow-hidden"
>
<img
:src="`./src/images/products/${lowerName}_${currentColor}.png`"
:alt="product.name"
loading="lazy"
class="min-w-full hover:brightness-95 transition duration-300"
/>
</a>
<div :class="product.stock !== 'in stock' && 'disabled'">
<a
:href="`#/shop/${product.category}/${lowerName}?color=${currentColor}`"
class="block rounded-md overflow-hidden relative"
>
<img
:src="`./src/images/products/${lowerName}_${currentColor}.png`"
:alt="product.name"
loading="lazy"
class="min-w-full hover:brightness-95 transition duration-300"
/>
</a>

<small class="text-xs font-semibold">
<template x-if="product.stock === 'in stock'">
<span
x-text="product.label && product.label[0].toUpperCase() + product.label.slice(1)"
class="text-red-500"
></span>
</template>
<template x-if="product.stock !== 'in stock'">
<span
x-text="product.stock[0].toUpperCase() + product.stock.slice(1)"
class="text-blue-500"
></span>
</template>
</small>

<a
:href="`#/shop/${product.category}/${lowerName}?color=${currentColor}`"
class="block mb-1"
:class="(product.stock === 'in stock' && !product.label.length) && 'mt-5'"
>
<h3
x-text="`${product.name}${product.colors.length > 1 ? ` (${currentColor})` : ''}`"
class="font-semibold"
></h3>
</a>
<div class="flex justify-between items-start">
<div id="product-title">
<small class="text-xs font-semibold">
<template x-if="product.stock === 'in stock'">
<span
x-text="product.label && product.label[0].toUpperCase() + product.label.slice(1)"
class="text-red-500"
></span>
</template>
<template x-if="product.stock !== 'in stock'">
<span
x-text="product.stock[0].toUpperCase() + product.stock.slice(1)"
class="text-blue-500"
></span>
</template>
</small>
<a
:href="`#/shop/${product.category}/${lowerName}?color=${currentColor}`"
class="block mb-1"
:class="(product.stock === 'in stock' && !product.label.length) && 'mt-6'"
>
<h3
x-text="`${product.name}${product.colors.length > 1 ? ` (${currentColor})` : ''}`"
class="font-semibold"
></h3>
</a>
</div>
<template x-if="product.stock === 'in stock'">
<button
id="cart-button"
x-html="svg('bag')"
class="mt-4 ml-1"
:class="btn.roundedLight"
></button>
</template>
</div>

<div class="space-x-1">
<span
:class="product.discount && 'line-through text-gray-400'"
x-text="`$${product.price}`"
></span>
<template x-if="product.discount">
<div id="product-price" class="space-x-1">
<span
x-text="`$${Math.round(product.price * (100 - product.discount.split('%')[0]) / 100) }`"
class="text-gray-600"
:class="product.discount && 'line-through text-gray-400'"
x-text="`$${product.price}`"
></span>
<span
x-text="`-${product.discount}`"
class="px-2 rounded-xl text-xs text-red-600 border border-red-600"
></span>
</template>
</div>

<template x-if="product.colors.length > 1">
<div class="mt-3 flex gap-x-1.5">
<template x-for="color in product.colors" :key="color">
<button
class="w-5 aspect-square rounded-full border border-gray-500 pointer"
:class="color"
:title="color"
@click="currentColor = color"
></button>
<template x-if="product.discount">
<span
x-text="`$${Math.round(product.price * (100 - product.discount.split('%')[0]) / 100) }`"
class="text-gray-600"
></span>
<span
x-text="`-${product.discount}`"
class="px-2 rounded-xl text-xs text-red-600 border border-red-600"
></span>
</template>
</div>
</template>

<template x-if="product.colors.length > 1">
<div id="product-colors" class="mt-3 flex gap-x-1.5">
<template x-for="color in product.colors" :key="color">
<button
class="w-5 aspect-square rounded-full border border-gray-500 pointer"
:class="color"
:title="color"
@click="currentColor = color"
></button>
</template>
</div>
</template>
</div>
</li>
</template>
</ul>
Expand Down

0 comments on commit dc9581e

Please sign in to comment.