https://www.4yourcar.de/js-static/de/frontend/resources/js/designerComponents/productSlide.js?v=4.26.40.4&p=9

1const ProductSlide = {
2	name: 'ProductSlide',
3	delimiters: ['{[', ']}'],
4	props: {
5		modelValue: {
6			type: Object,
7			default: () => ({
8				product: {},
9			})
10		},
11		targetid: {
12			type: Number,
13			default: () => ''
14		},
15		parentGrid: {
16			type: Object,
17			default: null
18		},
19		inherited: {
20			type: Boolean,
21			default: false
22		},
23		slideComponentType: {
24            type: String,
25            default: 'productslide'
26        },
27		parentConfig: {
28			type: Object,
29			default: () => ({})
30		},
31		translateFunction: { type: Function, required: true },
32        formatPriceFunction: { type: Function, required: true },
33	},
34	components: { 'tyreicons' : TyreIcons, },
35	data() {
36		return {
37			isEditing: false,
38			localConfig: {}, // Lokale Kopie für die Bearbeitung
39			isBackend: false,
40			currentLocale: window.APP_CONFIG.base.curLocale,
41		};
42	},
43	template: `
44		<div class="col-item item-gallery px-2" v-if="typeof slideValues.product !== 'undefined' && typeof slideValues.product.id !== 'undefined'">
45			<div class="box-swiper item">
46				<div class="image-box image-box-fluid">
47					<a class="image" :href="slideValues.product.url" :data-itemnumber="slideValues.product.itemNumber">
48						<img class="m-auto" :src="slideValues.product.image" :alt="slideValues.product.title" :title="slideValues.product.title" @error="handleImageError">
49					</a>
50				</div>
51				<div>
52					<div itemprop="name" class="item-name">
53						<a class="title" :href="slideValues.product.url" :data-itemnumber="slideValues.product.itemNumber" :title="slideValues.product.title">{[ slideValues.product.title ]}</a>
54					</div>
55					    <tyreicons :basketItem="slideValues.product"></tyreicons>
56    					<div class="row" v-if="parentConfig.showButtons === 'true' || parentConfig.showPrice === 'true'">
57						<div class="col-7 d-flex align-items-end">
58							<div class="row buttons d-flex align-items-baseline">
59								<template v-if="parentConfig.showButtons === 'true'">
60									<div class="col-12 mb-1" v-if="hasPrice(slideValues.product)">
61										<a class="btn btn-default btn-sm to-notepad float-right" @click="addToNotepad(slideValues.product.id)">Merkzettel</a>
62									</div>
63									<div class="col-12">
64										<template v-if="parentConfig.buttonType === 'cart' && hasPrice(slideValues.product)">
65											<div class="btn btn-primary btn-sm d-md-block" data-qty="1" @click="addToWk(slideValues.product.id)">
66												<i class="fas fa-shopping-cart"></i> In den Warenkorb											</div>
67										</template>
68										<template v-else>
69											<a class="btn btn-primary btn-sm view-item" :href="slideValues.product.url">Details</a>
70										</template>
71									</div>
72								</template>
73							</div>
74						</div>
75						<div class="col-5 d-flex align-items-end">
76							<div class="price-block-wrapper">
77								<div class="price-block">
78									<template v-if="parentConfig.showPrice === 'true' && hasPrice(slideValues.product)">
79										<p v-if="typeof slideValues.product.basePrice !== 'undefined' && slideValues.product.basePrice !== null" class="base-price">{[ translateFunction('baseprice', 'static', [showPrice(slideValues.product.basePrice.amount, slideValues.product.currencySymbol), basePriceUnit(slideValues.product.basePrice.basePriceUnit.measure.measureUnit.identifier)]) ]}</p>
80										<div class="strike-price me-0">{[ strikePrice ]}</div>
81										<div class="item-price">{[ showPrice(slideValues.product.price, slideValues.product.currencySymbol) ]}</div>
82										<p class="item-tax"> inkl. gesetzl. MwSt., zzgl. <a href=\"javascript:contentLayer(\'2V\',\'modal-lg\')\">Versandkosten<\/a> </p>
83									</template>
84								</div>
85							</div>
86						</div>
87					</div>
88				</div>
89			</div>
90		</div>
91	`,
92	computed: {
93		slideValues: {
94			get() {
95				return this.modelValue;
96			},
97			set(value) {
98				this.$emit('update:modelValue', value);
99			}
100		},
101		whiteFont() {
102			return this.slideValues.cicolor === 'gradientPurple' || this.slideValues.cicolor === 'gradientDarkPurple';
103		},
104		strikePrice() {
105			if (typeof this.slideValues.product.strikeThroughPrice !== 'undefined' && this.slideValues.product.strikeThroughPrice !== null) {
106				return this.showPrice(this.slideValues.product.strikeThroughPrice, this.slideValues.product.currencySymbol);
107			};
108			return null;
109		}
110	},
111	methods: {
112		openLink() {
113			if (this.isBackend === false) {
114					window.location.href = this.slideValues.product.url;
115			}
116		},
117		showPrice(price, argSymbol) {
118			if (typeof price === 'object' && price !== null) {
119				let currency =  {
120					locale: this.currentLocale,
121					symbol: argSymbol
122				}
123				return VueBasketUtils.formatPrice(price.amount, currency);
124			} else {
125				return price;
126			};
127		},
128		handleImageError(evt) {
129			let fallbackImage = "/resources/base/gfx/image-not-found.jpg";
130			if (evt.target.src.includes(fallbackImage)) {
131				return; // Exit the function to prevent an endless loop
132			}
133			evt.target.src = fallbackImage;
134        },
135		basePriceUnit(unitIdentifier) {
136            return VueBasketUtils.getBasePriceUnit(unitIdentifier);
137        },
138		addToNotepad(id) {
139			addToNotepad(id, window.APP_CONFIG.base.curLanguage);
140		},
141		addToWk(itemId) {
142			addToWk(1, itemId, window.APP_CONFIG.base.curLanguage, null, 'vehicle=');
143		},
144		hasPrice(product) {
145			return product.price !== null && Object.keys(product.price).length > 0;

146		}
147	}
148};