https://netsuiteprofessionals.com logo
Join Slack
Powered by
Custom extension where I am adding an item to the ...
# suitecommerce
c
Custom extension where I am adding an item to the cart using the 
cart.addLine()
method. Using the 
cart.cancelableOn('afterAddLine', _function_ (_line_) {})
I am displaying a modal confirmation, once the item has been added to the cart. The problem I am having is the modal will render twice quickly, once before the item is added to the cart and once after. If I am displaying the modal using afterAddLine and triggering only when the item has a match (because each line is processed), why is the modal displaying twice?
Copy code
this.cart.cancelableOn('afterAddLine', function (line) {

    var model = self.model,
        internalid = model.get('internalid');

    if (line.line.internalid === internalid) {
        // THIS WILL TRIGGER TWICE
        console.log('Item 123 is in the cart!');
    }
});
SCS 2020.2
s
I honestly don't know, but common workarounds with this sort of scenario is to have some sort of flag; eg:
Copy code
this.cart.cancelableOn('afterAddLine', function (line) {
    var model = self.model,
        internalid = model.get('internalid');
        hasShown = false;
    if (!hasShown && line.line.internalid === internalid) {
        // THIS WILL TRIGGER TWICE
        console.log('Item 123 is in the cart!');
        hasShown = true;
    }
});
👍 1
c
After some further testing, I noticed that the ‘click’ event fires twice where the ‘mouseup’ fires once. So the event add-to-cart fires 3 times. If I remove the click, the event fires once.
Copy code
'mouseup [data-action="add-to-cart"]': 'addToCart',
'click [data-action="add-to-cart"]': 'addToCart'
@Steve Goldberg not sure if this matters, but the event is being attached to the cell view instance of a SCCollectionView. Are there any details I am missing regarding events within a cell view instance? Adding the flag did not work as when you click the ‘add to cart’ button the even is triggered twice. So the cancelableOn event is triggered twice. The only way I have found to FORCE the add to cart method to only execute once, is to add this.render() at the end of my addToCart method.
d
Can you fire the modal from an addLine().then function? I've not got as far as testing what happens if addLine errors, or whether there's suitable data to catch any error gracefully - but I'm firing a modal reliably this way.
s
It's not that it triggers twice, it triggers for every line in the cart. In other words, if you have an item that has variations and you have three variations of that product in the cart already and then you add another, it will trigger 4 times.
I admit that this is counter-intuitive but it's not a bug; it's designed to iterate over the cart contents after you add a line (rather than the specific line)
If you want it to only do it once, you will need be more specific in your condition
For example, rather than 
line.item.internalid = 8047
, you would need to do something like: 
line.result = 'item8047set1567'
Or you could evaluate the item options for the specific ones that you want
For more info, you can look at the Cart component source code for 
after:LiveOrder.addLines
👍 1
You can see that it applies the trigger for each line item
c
@Steve Goldberg and anyone else following this thread. The multiple event trigger was due to bxslider’s 
touchEnabled
set to 
true
. My custom extension displayed multiple items via a bxslider carousel and because 
touchEnabled
was set to true, the 
click
event would trigger twice. Solution is either to set 
touchEnabled
to 
false
or use 
mousedown
for the event.
🎉 1
👍🏻 1
8 Views
Open in Slack
PreviousNext
Powered by