{"version":3,"file":"ProductCard.443d3c4c.js","sources":["../../../app/javascript/components/catalogs/ProductCard.vue?vue&type=template&lang.js","../../../app/javascript/components/catalogs/ProductCard.vue"],"sourcesContent":["\n<div class=\"product-card mx-1\">\n    <div v-if=\"product.descuento\" class=\"card-discount\">{{ product.descuento }}%</div>\n    <img class=\"card-image\" :src=\"getImageProduct()\" :alt=\"getAltProduct()\"\n         loading=\"lazy\">\n    <div class=\"d-flex flex-column flex-grow-1\">\n        <div class=\"container mt-3\">\n            <p class=\"card-title item-title\">\n                {{ getProductName() }}\n            </p>\n            <div class=\"item-description\">\n                <div class=\"item-property\">\n                    <span style=\"color: #797979\">Kilataje:</span>\n                    <strong>{{ product.kilataje }} kilates</strong>\n                </div>\n                <div class=\"item-property\">\n                    <span style=\"color: #797979\">Peso:</span>\n                    <strong>{{ product.peso_neto }} gramos</strong>\n                </div>\n                <div class=\"item-property\">\n                    <span style=\"color: #797979\">Precio:</span>\n                    <strong :style=\"product.descuento ? 'text-decoration: line-through' : ''\">${{ getProductPrice(product) }} pesos</strong>\n                </div>\n                <div v-if=\"product.descuento\" class=\"item-property flex-column\">\n                    <span style=\"color: #797979\">Precio con descuento:</span>\n                    <strong class=\"product-card-discount-price\">${{ getProductSalePrice() }} pesos</strong>\n                </div>\n            </div>\n        </div>\n        <a :href=\"`/catalogo/prenda/${product.id}`\" class=\"btn btn-primary btn-blue w-75 mx-auto mt-auto mb-3\"\n        @click=\"trackClick('Catalogo', `prenda_${product.slug}`)\" >\n            Ver pieza\n        </a>\n    </div>\n</div>\n","<template>\n    <div class=\"product-card mx-1\">\n        <div v-if=\"product.descuento\" class=\"card-discount\">{{ product.descuento }}%</div>\n        <img class=\"card-image\" :src=\"getImageProduct()\" :alt=\"getAltProduct()\"\n             loading=\"lazy\">\n        <div class=\"d-flex flex-column flex-grow-1\">\n            <div class=\"container mt-3\">\n                <p class=\"card-title item-title\">\n                    {{ getProductName() }}\n                </p>\n                <div class=\"item-description\">\n                    <div class=\"item-property\">\n                        <span style=\"color: #797979\">Kilataje:</span>\n                        <strong>{{ product.kilataje }} kilates</strong>\n                    </div>\n                    <div class=\"item-property\">\n                        <span style=\"color: #797979\">Peso:</span>\n                        <strong>{{ product.peso_neto }} gramos</strong>\n                    </div>\n                    <div class=\"item-property\">\n                        <span style=\"color: #797979\">Precio:</span>\n                        <strong :style=\"product.descuento ? 'text-decoration: line-through' : ''\">${{ getProductPrice(product) }} pesos</strong>\n                    </div>\n                    <div v-if=\"product.descuento\" class=\"item-property flex-column\">\n                        <span style=\"color: #797979\">Precio con descuento:</span>\n                        <strong class=\"product-card-discount-price\">${{ getProductSalePrice() }} pesos</strong>\n                    </div>\n                </div>\n            </div>\n            <a :href=\"`/catalogo/prenda/${product.id}`\" class=\"btn btn-primary btn-blue w-75 mx-auto mt-auto mb-3\"\n            @click=\"trackClick('Catalogo', `prenda_${product.slug}`)\" >\n                Ver pieza\n            </a>\n        </div>\n    </div>\n</template>\n\n<script>\nimport ProductPrice from \"@/components/mixins/ProductPrice\";\n\nexport default {\n    mixins: [ProductPrice],\n    props: {\n        product: {\n            type: Object,\n            required: true\n        }\n    },\n    methods: {\n        trackClick,\n        getImageProduct() {\n            return this.product.hasOwnProperty('articulo_fotos') && this.product.articulo_fotos[0].articulo_foto_imagen != null\n              ? `/public-assets/${this.product.articulo_fotos[0].articulo_foto_imagen.slug}?size=lg` : '/public-assets/not-picture'\n        },\n        getAltProduct() {\n            return this.product.hasOwnProperty('articulo_fotos') && this.product.articulo_fotos[0].articulo_foto_imagen != null ? this.product.articulo_fotos[0].articulo_foto_imagen.title : 'PP'\n        },\n        getProductName() {\n            return this.product.descripcion ? `${this.product.title} ${this.product.descripcion}` : this.product.title\n        },\n        calculatePrice() {\n            let price = 'No disponible'\n\n            if (this.product?.precio_venta) {\n                price = this.formatPrice(this.product.precio_venta)\n            }\n\n            return price\n        },\n        getProductSalePrice() {\n            let price = 'No disponible'\n            if (this.product.hasOwnProperty('precio_venta')) {\n                price = this.formatPrice(this.product.precio_venta)\n            }\n\n            return price\n        },\n    },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.product-card {\n    position: relative;\n    border: none;\n    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n    color: black;\n    font-size: 14px;\n    border-radius: 0 0 10px 10px;\n    overflow: hidden;\n    margin-bottom: 1rem;\n    width: 330px;\n    aspect-ratio: 60/83;\n    display: flex;\n    flex-direction: column;\n}\n\n.product-card img {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n}\n\n.card-discount {\n    position: absolute;\n    float: right;\n    right: 0;\n    text-transform: uppercase;\n    text-align: center;\n    font-size: 14px;\n    font-weight: bolder;\n    border-top-left-radius: 15px;\n    border-bottom-left-radius: 15px;\n    padding: 3px 10px;\n    margin-top: 10px;\n    background-color: var(--prestaprenda-orange);\n    color: white;\n    width: auto;\n}\n\n.product-card-discount-price {\n    color: var(--prestaprenda-blue);\n    font-size: 16px;\n}\n\n.item-description {\n    display: flex;\n    flex-wrap: wrap;\n}\n\n.item-property {\n    width: 50%;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    margin-bottom: 10px;\n}\n\n@media (max-width: 1300px) {\n    .product-card {\n        width: 280px;\n        aspect-ratio: 60/100;\n    }\n}\n\n@media (max-width: 600px) {\n    .product-card {\n        width: 175px;\n        aspect-ratio: 30/90;\n    }\n\n    .item-description {\n        flex-wrap: nowrap;\n        flex-direction: column;\n    }\n\n    .item-property {\n        flex-direction: row;\n        justify-content: space-between;\n        width: 100%;\n        text-align: start;\n    }\n\n    .item-property strong {\n        text-align: end;\n    }\n\n    .product-card-discount-price {\n        text-align: start !important;\n    }\n}\n</style>"],"names":["render","_vm","_h","_c","$event","staticRenderFns","__vue2_script","ProductPrice","price","_a"],"mappings":"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"}