Upsells improved - Upsell script fields supported

This commit is contained in:
Mark Pinkster 2026-01-13 22:03:29 +01:00
parent db3b1f74d2
commit a748307a2e
3 changed files with 70 additions and 50 deletions

View File

@ -39,7 +39,8 @@ function handleGetProducts(): void
$log("WooCommerce client initialized");
// Only fetch fields needed for telesales app
$productFields = 'id,name,price,type,upsell_ids,cross_sell_ids';
// Include meta_data for ACF fields like upsell_informatie
$productFields = 'id,name,price,type,upsell_ids,cross_sell_ids,callcenter_upsell_info';
$variationFields = 'id,price,attributes';
$products = $woocommerce->get('products', [
@ -70,6 +71,8 @@ function handleGetProducts(): void
foreach ($products as $product) {
$productId = (int) $product->id;
$log("Product Info from WooCommerce", $product);
// Get variations for variable products (only needed fields)
$variation_details = [];
if ($product->type === 'variable') {
@ -112,7 +115,8 @@ function handleGetProducts(): void
'variation_details' => $variation_details,
'cuw_ids' => $cuw_ids,
'recommended_ids' => $recommended_ids,
'bogo_rules' => $bogo_rules
'bogo_rules' => $bogo_rules,
'upsell_text' => $product->callcenter_upsell_info
];
}

View File

@ -23,7 +23,7 @@
<!-- Load JavaScript modules with cache busting -->
<script>
// Change this version number to bust cache for all JS files
const APP_VERSION = '1.1';
const APP_VERSION = '1.1.1';
const scripts = [
'js/services/api.js',
@ -200,7 +200,7 @@
<span x-text="p.name"></span>
<span x-show="p.bogo_rules && p.bogo_rules.length > 0"
x-text="p.bogo_rules[0]?.badge_text || p.bogo_rules[0]?.label"
class="ml-2 px-2 py-1 bg-red-500 text-white text-[9px] font-black rounded-full uppercase">
class="ml-2 px-2 py-1 bg-red-500 text-white text-[9px] font-black rounded-full max-w-48 truncate uppercase">
</span>
</div>
</div>
@ -253,9 +253,10 @@
Wellicht ook interessant</p>
<template x-for="u in recommendedOptions" :key="u.id">
<div>
<!-- Product with BOGO discount - styled like action block -->
<div x-show="getYProductBogoDiscount(u)"
class="p-4 bg-gradient-to-r from-red-500 to-pink-500 rounded-2xl text-white shadow-lg">
<div x-show="getYProductBogoDiscount(u)">
<div class="p-4 bg-gradient-to-r from-red-500 to-pink-500 rounded-2xl text-white shadow-lg">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
<div class="bg-white/20 p-2 rounded-full">
@ -276,10 +277,15 @@
</button>
</div>
</div>
<!-- Upsell information text for BOGO products -->
<div x-show="u.upsell_text && u.upsell_text.length > 0"
x-html="u.upsell_text"
class="text-xs text-slate-600 italic px-2 mt-2"></div>
</div>
<!-- Regular product without BOGO discount -->
<div x-show="!getYProductBogoDiscount(u)"
class="flex items-center justify-between p-4 border rounded-2xl bg-slate-50 hover:bg-white transition-all shadow-sm">
<div x-show="!getYProductBogoDiscount(u)">
<div class="flex items-center justify-between p-4 border rounded-2xl bg-slate-50 hover:bg-white transition-all shadow-sm">
<span class="text-xs font-bold text-slate-700"
x-text="u.name + ' (€' + u.price + ')'"></span>
<button @click="toggleUpsell(u)" :class="isInCart(u.id) ? 'bg-red-500' : 'bg-green-600'"
@ -287,6 +293,12 @@
x-text="isInCart(u.id) ? 'Verwijder' : 'Voeg toe'">
</button>
</div>
<!-- Upsell information text for regular products -->
<div x-show="u.upsell_text && u.upsell_text.length > 0"
x-html="u.upsell_text"
class="text-xs text-slate-600 italic px-2 mt-2"></div>
</div>
</div>
</template>
</div>
<div class="mt-8 border-t pt-6">

View File

@ -196,6 +196,7 @@ const BogoService = {
/**
* Get BOGO discount info for a Y product based on X product's rules
* Checks ALL BOGO rules on the X product, not just the primary one
*
* @param {Object} xProduct - The main product (X) with BOGO rules
* @param {Object} yProduct - The upsell product (Y) to check
@ -204,17 +205,17 @@ const BogoService = {
getYProductDiscount(xProduct, yProduct) {
if (!xProduct || !this.hasBogoRules(xProduct)) return null;
const rule = this.getPrimaryBogoRule(xProduct);
// Check ALL BOGO rules, not just the primary one
for (const rule of xProduct.bogo_rules) {
// Only for buy_x_get_y rules
if (rule.type !== 'buy_x_get_y') return null;
if (rule.type !== 'buy_x_get_y') continue;
// Check if yProduct is in the get_product_ids
if (!rule.get_product_ids || !rule.get_product_ids.includes(parseInt(yProduct.id))) {
return null;
continue;
}
// Return discount info
// Return discount info for the first matching rule
return {
rule_id: rule.rule_id,
discount_type: rule.discount_type,
@ -223,4 +224,7 @@ const BogoService = {
badge_text: rule.badge_text
};
}
return null;
}
};