Custom Code

Custom changes are required to the calculate.js hook. First, open your calculate.js hook script (*/cartridge/scripts/cart/calculate.js) and find the function calculateProductPrices(basket) {...}.

Change the “handle non-catalog products” if statement to be:

if (!productLineItem.catalogProduct || productLineItem.custom.parentLineItemUUID)

Custom changes are required to the base.js clients script. First, open your base.js script
(*/cartridges/int_extend_sfra/cartridge/client/default/js/product/base.js) and find the function addToCart {...} (line 613). Then move to line 657, after

 if (!$('.bundle-item').length) {
               form.options = getOptions($productContainer);
           }

Then you should paste the code below

           // BEGIN Extend integration
           var EXT_PDP_UPSELL_SWITCH = window.EXT_PDP_UPSELL_SWITCH || undefined;
           var isPlanSelected = false;
           form.area = 'product_page';
           form.component = 'buttons';
 
           if ($('#extend-offer').length) {
               var extendComponent = Extend.buttons.instance('#extend-offer');
               var extendPlan = extendComponent.getPlanSelection();
 
               if (extendPlan) {
                   form.extendPlanId = extendPlan.planId;
                   form.extendPrice = extendPlan.price;
                   form.extendTerm = extendPlan.term;
                   isPlanSelected = true;
                   $(this).trigger('updateAddToCartFormData', form);
               }
           } if (EXT_PDP_UPSELL_SWITCH && !isPlanSelected) {
               $('body').trigger('extend:modal:viewed',
                   { productId: form.pid, area: 'product_modal' });
 
               Extend.modal.open({
                   referenceId: $('.product-detail').data('pid'),
                   onClose: function (plan) {
                       if (plan) {
                           form.extendPlanId = plan.planId;
                           form.extendPrice = plan.price;
                           form.extendTerm = plan.term;
                           form.area = 'product_modal';
                           form.component = 'modal';
                           $(this).trigger('updateAddToCartFormData', form);
                       }
 
                       if (addToCartUrl) {
                           $.ajax({
                               url: addToCartUrl,
                               method: 'POST',
                               data: form,
                               success: function (data) {
                                   handlePostCartAdd(data);
                                   $('body').trigger('product:afterAddToCart', data);
                                   $.spinner().stop();
                                   miniCartReportingUrl(data.reportingURL);
                               },
                               error: function () {
                                   $.spinner().stop();
                               }
                           });
                       }
                   }
               });
               return;
           }
           // END Extend integration

See screen below: