Related
Datatables allows you to use shift+select, while also allowing you to select single items without losing previously selected items by having the select style set to multi+shift.
'select': {style': 'multi+shift'}
However, for this datatable, that doesn't seem to work at all. What am I missing?
var $testTable = $("#test-list").DataTable({
"dom": '<"dataTables_top"i<"dataTables_custom_buttons">f>rt'+ '<"dataTables_bottom"ilp>',
"autoWidth": false,
"lengthChange": 100,
"lengthMenu": [[10, 25, 100, 200, 500, 1000], [10, 25, 100, 200, 500, 1000]],
"paging": true,
"pagingType": "full_numbers",
"stripeClasses": [ 'odd', 'even' ],
"order": [[1, 'asc']],
"language": {
"emptyTable": '<h3>Test...</h3>',
"search" : '',
"sLengthMenu" : "_MENU_ Per Page",
"info": "Showing _START_ to _END_ of _TOTAL_",
paginate: {
first: '<i class="fad fa-step-backward"></i>',
previous: '<i class="fad fa-backward"></i>',
next: '<i class="fad fa-forward"></i>',
last: '<i class="fad fa-step-forward"></i>'
}
},
'select': 'multi+shift',
"aoColumnDefs": [
{
"targets": [-1,-2,-3,-4,-5,-6,-7,-8,-9,-11],
'searchable': false
},
{
"targets": 'no-sort',
"orderable": false,
},
{
"targets": [8,11],
"visible": false
},
{
"iDataSort": 8,
"aTargets" : [7]
},
{
"iDataSort": 11,
"aTargets" : [10]
},
{
"targets": -1,
'searchable': false
}
],
"initComplete": function() {
......
},
"drawCallback": function(settings) {
......
}
});
Issue-1 : I am unable to update d3-sankey links on drag events. I am trying to replicate d3 vertical and horizontal drag events similar to this : https://bl.ocks.org/d3noob/5028304
When drag event is used it updates the node and the links are not getting updated with it.
I looked into this too https://observablehq.com/#geekplux/dragable-d3-sankey-diagram and I am still having other issues.
I was unable to replicate the code in jsfiddle so I am sharing the JS code here.
const d3 : any = require('d3');
const sankey : any = require('d3-sankey');
const width = 960;
const height = 500;
const svg = d3.select('#chart')
.append('svg')
.attr('viewBox', [0, 0, width, height]);
const formatNumber = d3.format(',.0f');
const format = function (d: any) { return `${formatNumber(d)}TWh`; };
const color = d3.scaleOrdinal(d3.schemeCategory10);
const path = d3.sankeyLinkHorizontal();
const sankeyGraph = d3.sankey()
.nodeWidth(15)
.nodePadding(10)
.size([width, height]);
const graph = JSON.parse(JSON.stringify({
nodes: mainData.data.nodes.filter((val:any) => {
return val.name !== '';
})
.map((d : any, i : any) => {
return Object.assign({}, d, { nodeId : i });
}),
links: mainData.data.links.filter((val:any) => {
return (val.source !== '') || (val.target !== '') || (val.value !== '');
})
.map((d : any, i : any) => {
return Object.assign({}, d, { linkId : i });
}),
}));
sankeyGraph(graph);
let link = svg.append('g')
.attr('class', 'links')
.attr('fill', 'none')
.attr('stroke', '#000')
.attr('stroke-opacity', 0.2)
.selectAll('path');
let node = svg.append('g')
.attr('class', 'nodes')
.attr('font-size', 10)
.selectAll('g');
link = link
.data(graph.links)
.enter()
.append('path')
.attr('d', path) // d3.sankeyLinkHorizontal()
.attr('stroke-width', (d: any) => { return Math.max(1, d.width); });
// .on('mouseover', handleMouseOver)
// .on('mouseout', handleMouseOut);
link.append('title')
.text((d: any) => {
return `${d.source.name} → ${d.target.name} -> ${format(d.value)}`;
});
node = node
.data(graph.nodes)
.enter()
.append('g');
node.append('rect')
.attr('x', (d: any) => { return d.x0; })
.attr('y', (d: any) => { return d.y0; })
.attr('height', (d: any) => { return d.y1 - d.y0; })
.attr('width', (d: any) => { return d.x1 - d.x0; })
.attr('fill', (d: any) => { return color(d.name.replace(/ .*/, '')); })
.attr('stroke', '#000')
.call(d3.drag()
.subject((d:any) => d)
// .on('start', () => d3.event.currenTarget.appendChild(d3.event.currenTarget))
.on('drag', dragmove));
function dragmove(d:any, i: number, n: any) { // tslint:disable-line
console.log(d3.event, d3);
// console.log('drag', d3.event.sourceEvent.target, d3.event, d3.sankey);
// const m = d3.select(n[i])
// .node()
// .getCTM();
const x = d3.event.x - d3.event.dx;
const y = d3.event.y - d3.event.dy;
// console.log(m, x, y);
d3.select(n[i])
.attr('x', x)
.attr('y', y);
// *********the issue is here********
d3.sankey(graph)
.update(graph);
// d3.sankey()
// .relayout(graph);
link.attr('d', path); // d3.sankeyLinkHorizontal()
}
node.append('text')
.attr('x', (d: any) => { return d.x0 - 6; })
.attr('y', (d: any) => { return (d.y1 + d.y0) / 2; })
.attr('dy', '0.35em')
.attr('text-anchor', 'end')
.text((d: any) => { return d.name; })
.filter((d: any) => { return d.x0 < width / 2; })
.attr('x', (d: any) => { return d.x1 + 6; })
.attr('text-anchor', 'start');
node.append('title')
.text((d: any) => {
return `${d.name} => ${format(d.value)}`;
});
Issue 2: sometimes this event cannot be used in Vue-D3. So I am having trouble with drag start event code. Please suggest an alternative.
this.parentNode.appendChild(this);
Issue 3: Has anybody replicated the following for sankey with d3-V5. I need the flow/link before and after for each node on hover.
http://bl.ocks.org/tomshanley/11277583
Framework used : Vuejs + typescript
D3 version : 5.9.2
D3 sankey package : https://github.com/d3/d3-sankey
mainData JSON :
"data": {
"nodes": [
{
"name": "Agricultural waste"
},
{
"name": "Bio-conversion"
},
{
"name": "Liquid"
},
{
"name": "Losses"
},
{
"name": "Solid"
},
{
"name": "Gas"
},
{
"name": "Biofuel imports"
},
{
"name": "Biomass imports"
},
{
"name": "Coal imports"
},
{
"name": "Coal"
},
{
"name": "Coal reserves"
},
{
"name": "District heating"
},
{
"name": "Industry"
},
{
"name": "Heating and cooling - commercial"
},
{
"name": "Heating and cooling - homes"
},
{
"name": "Electricity grid"
},
{
"name": "Over generation / exports"
},
{
"name": "H2 conversion"
},
{
"name": "Road transport"
},
{
"name": "Agriculture"
},
{
"name": "Rail transport"
},
{
"name": "Lighting & appliances - commercial"
},
{
"name": "Lighting & appliances - homes"
},
{
"name": "Gas imports"
},
{
"name": "Ngas"
},
{
"name": "Gas reserves"
},
{
"name": "Thermal generation"
},
{
"name": "Geothermal"
},
{
"name": "H2"
},
{
"name": "Hydro"
},
{
"name": "International shipping"
},
{
"name": "Domestic aviation"
},
{
"name": "International aviation"
},
{
"name": "National navigation"
},
{
"name": "Marine algae"
},
{
"name": "Nuclear"
},
{
"name": "Oil imports"
},
{
"name": "Oil"
},
{
"name": "Oil reserves"
},
{
"name": "Other waste"
},
{
"name": "Pumped heat"
},
{
"name": "Solar PV"
},
{
"name": "Solar Thermal"
},
{
"name": "Solar"
},
{
"name": "Tidal"
},
{
"name": "UK land based bioenergy"
},
{
"name": "Wave"
},
{
"name": "Wind"
}
],
"links": [
{
"source": 0,
"target": 1,
"value": 124.729
},
{
"source": 1,
"target": 2,
"value": 0.597
},
{
"source": 1,
"target": 3,
"value": 26.862
},
{
"source": 1,
"target": 4,
"value": 280.322
},
{
"source": 1,
"target": 5,
"value": 81.144
},
{
"source": 6,
"target": 2,
"value": 35
},
{
"source": 7,
"target": 4,
"value": 35
},
{
"source": 8,
"target": 9,
"value": 11.606
},
{
"source": 10,
"target": 9,
"value": 63.965
},
{
"source": 9,
"target": 4,
"value": 75.571
},
{
"source": 11,
"target": 12,
"value": 10.639
},
{
"source": 11,
"target": 13,
"value": 22.505
},
{
"source": 11,
"target": 14,
"value": 46.184
},
{
"source": 15,
"target": 16,
"value": 104.453
},
{
"source": 15,
"target": 14,
"value": 113.726
},
{
"source": 15,
"target": 17,
"value": 27.14
},
{
"source": 15,
"target": 12,
"value": 342.165
},
{
"source": 15,
"target": 18,
"value": 37.797
},
{
"source": 15,
"target": 19,
"value": 4.412
},
{
"source": 15,
"target": 13,
"value": 40.858
},
{
"source": 15,
"target": 3,
"value": 56.691
},
{
"source": 15,
"target": 20,
"value": 7.863
},
{
"source": 15,
"target": 21,
"value": 90.008
},
{
"source": 15,
"target": 22,
"value": 93.494
},
{
"source": 23,
"target": 24,
"value": 40.719
},
{
"source": 25,
"target": 24,
"value": 82.233
},
{
"source": 5,
"target": 13,
"value": 0.129
},
{
"source": 5,
"target": 3,
"value": 1.401
},
{
"source": 5,
"target": 26,
"value": 151.891
},
{
"source": 5,
"target": 19,
"value": 2.096
},
{
"source": 5,
"target": 12,
"value": 48.58
},
{
"source": 27,
"target": 15,
"value": 7.013
},
{
"source": 17,
"target": 28,
"value": 20.897
},
{
"source": 17,
"target": 3,
"value": 6.242
},
{
"source": 28,
"target": 18,
"value": 20.897
},
{
"source": 29,
"target": 15,
"value": 6.995
},
{
"source": 2,
"target": 12,
"value": 121.066
},
{
"source": 2,
"target": 30,
"value": 128.69
},
{
"source": 2,
"target": 18,
"value": 135.835
},
{
"source": 2,
"target": 31,
"value": 14.458
},
{
"source": 2,
"target": 32,
"value": 206.267
},
{
"source": 2,
"target": 19,
"value": 3.64
},
{
"source": 2,
"target": 33,
"value": 33.218
},
{
"source": 2,
"target": 20,
"value": 4.413
},
{
"source": 34,
"target": 1,
"value": 4.375
},
{
"source": 24,
"target": 5,
"value": 122.952
},
{
"source": 35,
"target": 26,
"value": 839.978
},
{
"source": 36,
"target": 37,
"value": 504.287
},
{
"source": 38,
"target": 37,
"value": 107.703
},
{
"source": 37,
"target": 2,
"value": 611.99
},
{
"source": 39,
"target": 4,
"value": 56.587
},
{
"source": 39,
"target": 1,
"value": 77.81
},
{
"source": 40,
"target": 14,
"value": 193.026
},
{
"source": 40,
"target": 13,
"value": 70.672
},
{
"source": 41,
"target": 15,
"value": 59.901
},
{
"source": 42,
"target": 14,
"value": 19.263
},
{
"source": 43,
"target": 42,
"value": 19.263
},
{
"source": 43,
"target": 41,
"value": 59.901
},
{
"source": 4,
"target": 19,
"value": 0.882
},
{
"source": 4,
"target": 26,
"value": 400.12
},
{
"source": 4,
"target": 12,
"value": 46.477
},
{
"source": 26,
"target": 15,
"value": 525.531
},
{
"source": 26,
"target": 3,
"value": 787.129
},
{
"source": 26,
"target": 11,
"value": 79.329
},
{
"source": 44,
"target": 15,
"value": 9.452
},
{
"source": 45,
"target": 1,
"value": 182.01
},
{
"source": 46,
"target": 15,
"value": 19.013
},
{
"source": 47,
"target": 15,
"value": 289.366
}
]
}
Thank you for your solutions in advance.
function sg(mainData) {
const width = 960;
const height = 500;
const svg = d3.select('#chart')
.append('svg')
.attr('viewBox', [0, 0, width, height]);
const formatNumber = d3.format(',.0f');
const format = function (d: any) { return `${formatNumber(d)}TWh`; };
const color = d3.scaleOrdinal(d3.schemeCategory10);
const path = d3.sankeyLinkHorizontal();
const sankeyGraph = d3.sankey()
.nodeWidth(15)
.nodePadding(10)
.size([width, height]);
const graph = JSON.parse(JSON.stringify({
nodes: mainData.data.nodes.filter((val:any) => {
return val.name !== '';
})
.map((d : any, i : any) => {
return Object.assign({}, d, { nodeId : i });
}),
links: mainData.data.links.filter((val:any) => {
return (val.source !== '') || (val.target !== '') || (val.value !== '');
})
.map((d : any, i : any) => {
return Object.assign({}, d, { linkId : i });
}),
}));
sankeyGraph(graph);
let link = svg.append('g')
.attr('class', 'links')
.attr('fill', 'none')
.attr('stroke', '#000')
.attr('stroke-opacity', 0.2)
.selectAll('path');
let node = svg.append('g')
.attr('class', 'nodes')
.attr('font-size', 10)
.selectAll('g');
link = link
.data(graph.links)
.enter()
.append('path')
.attr('d', path) // d3.sankeyLinkHorizontal()
.attr('stroke-width', (d: any) => { return Math.max(1, d.width); });
// .on('mouseover', handleMouseOver)
// .on('mouseout', handleMouseOut);
link.append('title')
.text((d: any) => {
return `${d.source.name} → ${d.target.name} -> ${format(d.value)}`;
});
node = node
.data(graph.nodes)
.enter()
.append('g');
node.append('rect')
.attr('x', (d: any) => { return d.x0; })
.attr('y', (d: any) => { return d.y0; })
.attr('height', (d: any) => { return d.y1 - d.y0; })
.attr('width', (d: any) => { return d.x1 - d.x0; })
.attr('fill', (d: any) => { return color(d.name.replace(/ .*/, '')); })
.attr('stroke', '#000')
.call(d3.drag()
.subject((d:any) => d)
// .on('start', () => d3.event.currenTarget.appendChild(d3.event.currenTarget))
.on('drag', dragmove));
function dragmove(d:any, i: number, n: any) { // tslint:disable-line
console.log(d3.event, d3);
// console.log('drag', d3.event.sourceEvent.target, d3.event, d3.sankey);
// const m = d3.select(n[i])
// .node()
// .getCTM();
const x = d3.event.x - d3.event.dx;
const y = d3.event.y - d3.event.dy;
// console.log(m, x, y);
d3.select(n[i])
.attr('x', x)
.attr('y', y);
// *********the issue is here********
d3.sankey(graph)
.update(graph);
// d3.sankey()
// .relayout(graph);
link.attr('d', path); // d3.sankeyLinkHorizontal()
}
node.append('text')
.attr('x', (d: any) => { return d.x0 - 6; })
.attr('y', (d: any) => { return (d.y1 + d.y0) / 2; })
.attr('dy', '0.35em')
.attr('text-anchor', 'end')
.text((d: any) => { return d.name; })
.filter((d: any) => { return d.x0 < width / 2; })
.attr('x', (d: any) => { return d.x1 + 6; })
.attr('text-anchor', 'start');
node.append('title')
.text((d: any) => {
return `${d.name} => ${format(d.value)}`;
});
}
const data = {
"data": {
"nodes": [{
"name": "Agricultural waste"
},
{
"name": "Bio-conversion"
},
{
"name": "Liquid"
},
{
"name": "Losses"
},
{
"name": "Solid"
},
{
"name": "Gas"
},
{
"name": "Biofuel imports"
},
{
"name": "Biomass imports"
},
{
"name": "Coal imports"
},
{
"name": "Coal"
},
{
"name": "Coal reserves"
},
{
"name": "District heating"
},
{
"name": "Industry"
},
{
"name": "Heating and cooling - commercial"
},
{
"name": "Heating and cooling - homes"
},
{
"name": "Electricity grid"
},
{
"name": "Over generation / exports"
},
{
"name": "H2 conversion"
},
{
"name": "Road transport"
},
{
"name": "Agriculture"
},
{
"name": "Rail transport"
},
{
"name": "Lighting & appliances - commercial"
},
{
"name": "Lighting & appliances - homes"
},
{
"name": "Gas imports"
},
{
"name": "Ngas"
},
{
"name": "Gas reserves"
},
{
"name": "Thermal generation"
},
{
"name": "Geothermal"
},
{
"name": "H2"
},
{
"name": "Hydro"
},
{
"name": "International shipping"
},
{
"name": "Domestic aviation"
},
{
"name": "International aviation"
},
{
"name": "National navigation"
},
{
"name": "Marine algae"
},
{
"name": "Nuclear"
},
{
"name": "Oil imports"
},
{
"name": "Oil"
},
{
"name": "Oil reserves"
},
{
"name": "Other waste"
},
{
"name": "Pumped heat"
},
{
"name": "Solar PV"
},
{
"name": "Solar Thermal"
},
{
"name": "Solar"
},
{
"name": "Tidal"
},
{
"name": "UK land based bioenergy"
},
{
"name": "Wave"
},
{
"name": "Wind"
}
],
"links": [{
"source": 0,
"target": 1,
"value": 124.729
},
{
"source": 1,
"target": 2,
"value": 0.597
},
{
"source": 1,
"target": 3,
"value": 26.862
},
{
"source": 1,
"target": 4,
"value": 280.322
},
{
"source": 1,
"target": 5,
"value": 81.144
},
{
"source": 6,
"target": 2,
"value": 35
},
{
"source": 7,
"target": 4,
"value": 35
},
{
"source": 8,
"target": 9,
"value": 11.606
},
{
"source": 10,
"target": 9,
"value": 63.965
},
{
"source": 9,
"target": 4,
"value": 75.571
},
{
"source": 11,
"target": 12,
"value": 10.639
},
{
"source": 11,
"target": 13,
"value": 22.505
},
{
"source": 11,
"target": 14,
"value": 46.184
},
{
"source": 15,
"target": 16,
"value": 104.453
},
{
"source": 15,
"target": 14,
"value": 113.726
},
{
"source": 15,
"target": 17,
"value": 27.14
},
{
"source": 15,
"target": 12,
"value": 342.165
},
{
"source": 15,
"target": 18,
"value": 37.797
},
{
"source": 15,
"target": 19,
"value": 4.412
},
{
"source": 15,
"target": 13,
"value": 40.858
},
{
"source": 15,
"target": 3,
"value": 56.691
},
{
"source": 15,
"target": 20,
"value": 7.863
},
{
"source": 15,
"target": 21,
"value": 90.008
},
{
"source": 15,
"target": 22,
"value": 93.494
},
{
"source": 23,
"target": 24,
"value": 40.719
},
{
"source": 25,
"target": 24,
"value": 82.233
},
{
"source": 5,
"target": 13,
"value": 0.129
},
{
"source": 5,
"target": 3,
"value": 1.401
},
{
"source": 5,
"target": 26,
"value": 151.891
},
{
"source": 5,
"target": 19,
"value": 2.096
},
{
"source": 5,
"target": 12,
"value": 48.58
},
{
"source": 27,
"target": 15,
"value": 7.013
},
{
"source": 17,
"target": 28,
"value": 20.897
},
{
"source": 17,
"target": 3,
"value": 6.242
},
{
"source": 28,
"target": 18,
"value": 20.897
},
{
"source": 29,
"target": 15,
"value": 6.995
},
{
"source": 2,
"target": 12,
"value": 121.066
},
{
"source": 2,
"target": 30,
"value": 128.69
},
{
"source": 2,
"target": 18,
"value": 135.835
},
{
"source": 2,
"target": 31,
"value": 14.458
},
{
"source": 2,
"target": 32,
"value": 206.267
},
{
"source": 2,
"target": 19,
"value": 3.64
},
{
"source": 2,
"target": 33,
"value": 33.218
},
{
"source": 2,
"target": 20,
"value": 4.413
},
{
"source": 34,
"target": 1,
"value": 4.375
},
{
"source": 24,
"target": 5,
"value": 122.952
},
{
"source": 35,
"target": 26,
"value": 839.978
},
{
"source": 36,
"target": 37,
"value": 504.287
},
{
"source": 38,
"target": 37,
"value": 107.703
},
{
"source": 37,
"target": 2,
"value": 611.99
},
{
"source": 39,
"target": 4,
"value": 56.587
},
{
"source": 39,
"target": 1,
"value": 77.81
},
{
"source": 40,
"target": 14,
"value": 193.026
},
{
"source": 40,
"target": 13,
"value": 70.672
},
{
"source": 41,
"target": 15,
"value": 59.901
},
{
"source": 42,
"target": 14,
"value": 19.263
},
{
"source": 43,
"target": 42,
"value": 19.263
},
{
"source": 43,
"target": 41,
"value": 59.901
},
{
"source": 4,
"target": 19,
"value": 0.882
},
{
"source": 4,
"target": 26,
"value": 400.12
},
{
"source": 4,
"target": 12,
"value": 46.477
},
{
"source": 26,
"target": 15,
"value": 525.531
},
{
"source": 26,
"target": 3,
"value": 787.129
},
{
"source": 26,
"target": 11,
"value": 79.329
},
{
"source": 44,
"target": 15,
"value": 9.452
},
{
"source": 45,
"target": 1,
"value": 182.01
},
{
"source": 46,
"target": 15,
"value": 19.013
},
{
"source": 47,
"target": 15,
"value": 289.366
}
]
}
}
sg(data)
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.7.5/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.7.1/d3-sankey.min.js"></script>
<div id="chart"></div>
this works for me.
var node = svg.append('g')
.selectAll('.node')
.data(sankeydata.nodes)
.enter()
.append('g')
.attr('class', 'node')
.attr('transform', d => `translate(${d.x0},${d.y0})`)
.call(d3.drag()
.subject(d => d)
.on('start', function () { this.parentNode.appendChild(this); })
.on('drag', dragmove))
function dragmove(d) {
var rectY = d3.select(this).select("rect").attr("y");
var rectX = d3.select(this).select("rect").attr("X");
d.y0 = d.y0 + d3.event.dy;
d.x1 = d.x1 + d3.event.dx;
d.x0 = d.x0 + d3.event.dx;
var yTranslate = d.y0 - rectY;
var xTranslate = d.x0 - rectX;
d3.select(this).attr('transform', "translate(" + (xTranslate) + "," + (yTranslate) + ")");
sankey.update(graph);
link.attr('d', sankeyLinkHorizontal());
}
What is the appropriate syntax to add a sku with picklist modifiers to cart?
https://developer.bigcommerce.com/api-reference/cart-checkout/storefront-cart-api/cart/addcartlineitem
Assuming this is my product
GET https://api.bigcommerce.com/stores/:store-hash/v3/catalog/products?include=modifiers,variants&id:in=237
{
"data": [
{
"id": 237,
"name": "Awesome Bundle Sku",
"type": "physical",
"sku": "BUNDLE1",
"description": "",
"weight": 1,
"width": 1,
"depth": 1,
"height": 1,
"price": 99,
"cost_price": 0,
"retail_price": 0,
"sale_price": 0,
"map_price": 0,
"tax_class_id": 0,
"product_tax_code": "",
"calculated_price": 99,
"categories": [
50
],
"brand_id": 0,
"option_set_id": 25,
"option_set_display": "right",
"inventory_level": 0,
"inventory_warning_level": 0,
"inventory_tracking": "none",
"reviews_rating_sum": 0,
"reviews_count": 0,
"total_sold": 0,
"fixed_cost_shipping_price": 0,
"is_free_shipping": false,
"is_visible": false,
"is_featured": false,
"related_products": [
-1
],
"warranty": "",
"bin_picking_number": "",
"layout_file": "product.html",
"upc": "",
"mpn": "",
"gtin": "",
"search_keywords": "",
"availability": "available",
"availability_description": "",
"gift_wrapping_options_type": "any",
"gift_wrapping_options_list": [],
"sort_order": 500,
"condition": "New",
"is_condition_shown": false,
"order_quantity_minimum": 0,
"order_quantity_maximum": 0,
"page_title": "",
"meta_keywords": [],
"meta_description": "",
"date_created": "2019-05-29T19:16:08+00:00",
"date_modified": "2019-08-24T19:28:45+00:00",
"view_count": 0,
"preorder_release_date": null,
"preorder_message": "",
"is_preorder_only": false,
"is_price_hidden": false,
"price_hidden_label": "",
"custom_url": {
"url": "/bundle1/",
"is_customized": false
},
"base_variant_id": 202,
"open_graph_type": "product",
"open_graph_title": "",
"open_graph_description": "",
"open_graph_use_meta_description": true,
"open_graph_use_product_name": true,
"open_graph_use_image": true,
"variants": [
{
"id": 202,
"product_id": 237,
"sku": "BUNDLE1",
"sku_id": null,
"price": 99,
"calculated_price": 99,
"sale_price": 0,
"retail_price": 0,
"map_price": 0,
"weight": 1,
"width": 1,
"height": 1,
"depth": 1,
"is_free_shipping": false,
"fixed_cost_shipping_price": 0,
"calculated_weight": 1,
"purchasing_disabled": false,
"purchasing_disabled_message": "",
"image_url": "",
"cost_price": 0,
"upc": "",
"mpn": "",
"gtin": "",
"inventory_level": 0,
"inventory_warning_level": 0,
"bin_picking_number": "",
"option_values": []
}
],
"modifiers": [
{
"id": 140,
"product_id": 237,
"name": "53701567688198-237",
"display_name": "5370",
"type": "product_list",
"required": true,
"sort_order": 1,
"config": {
"product_list_adjusts_inventory": false,
"product_list_adjusts_pricing": false,
"product_list_shipping_calc": "none"
},
"option_values": [
{
"id": 127,
"option_id": 140,
"label": "COMPONENT1",
"sort_order": 0,
"value_data": {
"product_id": 136
},
"is_default": true,
"adjusters": {
"price": null,
"weight": null,
"image_url": "",
"purchasing_disabled": {
"status": false,
"message": ""
}
}
}
]
}
]
}
],
"meta": {
"pagination": {
"total": 1,
"count": 1,
"per_page": 250,
"current_page": 1,
"total_pages": 1,
"links": {
"current": "?limit=250&include=modifiers%2Cvariants&id%3Ain=237&page=1"
},
"too_many": false
}
}
}
POST https://api.bigcommerce.com/stores/:store-hash/v3/carts/:cart-id/items
{
"line_items": [
{
"product_id": 237,
"quantity": 1,
"option_selections": [
{
"option_id": 140,
"option_value": 127
}
]
}
]
}
added a product to cart using API price was $29
GET /v3/carts/cartId saw cart_amount was correct
changed product price to $100
GET /v3/carts/cartId saw cart_amount was wrong — it did not see that the product price had changed.
Am i doing something wrong. Do you need more info to help me?
bc.add_to_cart = (data,next) => {
let payload = {
line_items: data.line_items,
option_selections: data.option_selections,
gift_certificatesL: null
}
return bc_v3.post(`/carts/${data.cartId}/items`, payload).then(data => {
return data; // data only show initial product cost
}).catch(next);
};
EDIT
below i am posting the results of GET carts/id u will see that the lineItem (id: 125) shows the original price, 29.95. Immediately after getting the cart I did a request to GET /catalog/products/125 — that one shows the updated price.
GET: carts/${cartId}
{
"data": {
"id": "15219c6d-51a8-4267-a38c-29fe62a49182",
"customer_id": 0,
"email": "",
"currency": {
"code": "USD"
},
"tax_included": false,
"base_amount": 409.7,
"discount_amount": 0,
"cart_amount": 409.7,
"coupons": [],
"line_items": {
"physical_items": [
{
"id": "d755137f-b09c-4a02-9da6-cab8da1ae332",
"parent_id": null,
"variant_id": 89,
"product_id": 124,
"sku": "test_config",
"name": "Test Configurable item",
"url": "http://fornida.mybigcommerce.com/test-configurable-item/",
"quantity": 2,
"taxable": true,
"image_url": "https://cdn7.bigcommerce.com/s-2bihpr2wvz/products/124/images/389/overview-3-lg-c__55453.1534430965.220.290.jpg?c=2",
"discounts": [],
"coupons": [],
"discount_amount": 0,
"coupon_amount": 0,
"list_price": 115,
"sale_price": 115,
"extended_list_price": 230,
"extended_sale_price": 230,
"is_require_shipping": true
},
{
"id": "eb5695d6-85e5-4b58-891b-a4bd8b48c56e",
"parent_id": null,
"variant_id": 90,
"product_id": 125,
"sku": "test_compt_1",
"name": "test component 1",
"url": "http://fornida.mybigcommerce.com/test-component-1/",
"quantity": 6,
"taxable": true,
"image_url": "https://cdn7.bigcommerce.com/r-03b8fdf5d1037c0feebbcedfd701c709422a962e/themes/ClassicNext/images/ProductDefault.gif",
"discounts": [],
"coupons": [],
"discount_amount": 0,
"coupon_amount": 0,
"list_price": 29.95,
"sale_price": 29.95,
"extended_list_price": 179.7,
"extended_sale_price": 179.7,
"is_require_shipping": true
}
],
"digital_items": [],
"gift_certificates": []
},
"created_time": "2018-08-23T15:41:10+00:00",
"updated_time": "2018-08-23T18:57:55+00:00"
},
"meta": {}
}
GET /catalog/products/125
{
"data": {
"id": 125,
"name": "test component 1",
"type": "physical",
"sku": "test_compt_1",
"description": "<p>Type a description for this product here...</p>",
"weight": 2,
"width": 0,
"depth": 0,
"height": 0,
"price": 125,
"cost_price": 0,
"retail_price": 0,
"sale_price": 0,
"map_price": 0,
"tax_class_id": 0,
"product_tax_code": "",
"calculated_price": 125,
"categories": [
23,
18
],
"brand_id": 0,
"option_set_id": 38,
"option_set_display": "right",
"inventory_level": 0,
"inventory_warning_level": 0,
"inventory_tracking": "none",
"reviews_rating_sum": 0,
"reviews_count": 0,
"total_sold": 0,
"fixed_cost_shipping_price": 0,
"is_free_shipping": false,
"is_visible": true,
"is_featured": false,
"related_products": [
-1
],
"warranty": "",
"bin_picking_number": "",
"layout_file": "product.html",
"upc": "",
"mpn": "",
"gtin": "",
"search_keywords": "",
"availability": "available",
"availability_description": "",
"gift_wrapping_options_type": "any",
"gift_wrapping_options_list": [],
"sort_order": 0,
"condition": "New",
"is_condition_shown": false,
"order_quantity_minimum": 0,
"order_quantity_maximum": 0,
"page_title": "",
"meta_keywords": [],
"meta_description": "",
"date_created": "2018-08-15T13:46:57+00:00",
"date_modified": "2018-08-23T18:22:52+00:00",
"view_count": 7,
"preorder_release_date": null,
"preorder_message": "",
"is_preorder_only": false,
"is_price_hidden": false,
"price_hidden_label": "",
"custom_url": {
"url": "/test-component-1/",
"is_customized": false
},
"base_variant_id": 90,
"open_graph_type": "product",
"open_graph_title": "",
"open_graph_description": "",
"open_graph_use_meta_description": true,
"open_graph_use_product_name": true,
"open_graph_use_image": true
},
"meta": {}
}
Updating the price of an item in the control panel or using the API will not change the price in an existing cart. If you create a new cart then the price will reflect the changes that were made.
The original cart where line_item is $25 dollars and tax is included as well to give a cart_amount of 29.12
{
"data": {
"id": "3a4c8e16-e279-4c30-83df-0010f6d54fba",
"customer_id": 0,
"email": "",
"currency": {
"code": "USD"
},
"tax_included": false,
"base_amount": 25,
"discount_amount": 0,
"cart_amount": 29.12,
"coupons": [],
"line_items": {
"physical_items": [
{
"id": "1e08875e-bf6f-4f1f-b8ba-b2e3cee10394",
"parent_id": null,
"variant_id": 363,
"product_id": 192,
"sku": "",
"name": "Smith Journal 13",
"url": "http://{store_hash}}.mybigcommerce.com/all/smith-journal-13/",
"quantity": 1,
"taxable": true,
"image_url": "https://cdn8.bigcommerce.com/s-{{store_hash}}/products/192/images/480/smithjournal1_1024x1024__85081__38998.1534344545.330.500.jpg?c=2",
"discounts": [],
"coupons": [],
"discount_amount": 0,
"coupon_amount": 0,
"list_price": 25,
"sale_price": 25,
"extended_list_price": 25,
"extended_sale_price": 25,
"is_require_shipping": true
}
],
"digital_items": [],
"gift_certificates": []
},
"created_time": "2018-08-24T14:41:17+00:00",
"updated_time": "2018-08-24T14:41:17+00:00"
},
"meta": {}
}
Update the line_item price /{store_hash}/v3/carts/{cartId}/items/{itemId}
{
"line_item":
{
"list_price": 30,
"quantity": 1,
"product_id": 192
}
}
Response - base_amount is now 30, and cart_amount is also updated to 34.96. This only changes the price for the cart and not the product
{
"data": {
"id": "3a4c8e16-e279-4c30-83df-0010f6d54fba",
"customer_id": 0,
"email": "",
"currency": {
"code": "USD"
},
"tax_included": false,
"base_amount": 30,
"discount_amount": 0,
"cart_amount": 34.96,
"coupons": [],
"line_items": {
"physical_items": [
{
"id": "1e08875e-bf6f-4f1f-b8ba-b2e3cee10394",
"parent_id": null,
"variant_id": 363,
"product_id": 192,
"sku": "",
"name": "Smith Journal 13",
"url": "http://{store_hash}.mybigcommerce.com/all/smith-journal-13/",
"quantity": 1,
"taxable": true,
"image_url": "https://cdn8.bigcommerce.com/s-{store_hash}/products/192/images/480/smithjournal1_1024x1024__85081__38998.1534344545.330.500.jpg?c=2",
"discounts": [],
"coupons": [],
"discount_amount": 0,
"coupon_amount": 0,
"list_price": 30,
"sale_price": 30,
"extended_list_price": 30,
"extended_sale_price": 30,
"is_require_shipping": true
}
],
"digital_items": [],
"gift_certificates": []
},
"created_time": "2018-08-24T14:41:17+00:00",
"updated_time": "2018-08-24T14:41:17+00:00"
},
"meta": {}
}
I am building an app in which I want use Datatables with various plugins and I observed some weird layout-problems. So I tried to build a repro. And as worked on that, new problems occurred and I even failed to sort these out.
So here I am with the current state of my fiddle
I have no idea what's causing these issues. I have attached a bit of code (because it is required, but with reduced data). The issues I'm currently struggling with:
yadcf-Filters incomplete...
footer-defects: pagelength-selector missing, paging-controls missing. Whenever I saw that in the past, there were some JS-Errors (usually with my code), but this time I'm not seeing anything in the console.
Update1: I've now managed to get rid of column1-resizing. The range_number_sliderfor yadcf does not render correctly - am I missing a resource??
Updated fiddle here.
$(function() {
dtObj = $("#dataset").DataTable({
"buttons": [{
"columns": ":gt(1)",
"extend": "colvis",
"text": "Series"
}],
"scrollX": true,
"dom": "Bfrtip",
"lengthMenu": [
[10, 25, 50, -1],
["10 rows", "25 rows", "50 rows", "Show all"]
],
"columns": [{
"data": "_include",
"render": function(data, type, row, meta) {
var res = '';
if (row._include) {
res='<span onclick="toggleRecord(' + row._id + ')"><i class="fal fa-eye"></i></span>';
} else {
res='<span onclick="toggleRecord(' + row._id + ')"><i class="fal fa-eye-slash"></i></span>';
}
return res;
},
"title": "Include",
"visible": true,
"width": "2em;"
}, {
"data": "_id",
"title": "ID",
"visible": false
}, {
"className": "text-right",
"data": "Car",
"title": "Car",
"visible": false,
"width": "80px"
}, {
"data": "Eyes",
"title": "Eyes",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Family",
"title": "Family",
"visible": false,
"width": "80px"
}, {
"data": "Hand",
"title": "Hand",
"visible": true,
"width": "80px"
}, {
"className": "text-right",
"data": "HealthCare",
"title": "HealthCare",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Height",
"title": "Height",
"visible": true,
"width": "80px"
}, {
"data": "Major",
"title": "Major",
"visible": true,
"width": "80px"
}, {
"className": "text-right",
"data": "Marriage",
"title": "Marriage",
"visible": false,
"width": "80px"
}, {
"data": "Party",
"title": "Party",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Pot",
"title": "Pot",
"visible": false,
"width": "80px"
}, {
"data": "Sex",
"title": "Sex",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "ShoeSize",
"title": "ShoeSize",
"visible": false,
"width": "80px"
}, {
"data": "State",
"title": "State",
"visible": true,
"width": "80px"
}, {
"className": "text-right",
"data": "Student",
"title": "Student",
"visible": false,
"width": "80px"
}, {
"className": "text-right",
"data": "Weight",
"title": "Weight",
"visible": false,
"width": "80px"
}],
"createdRow": function(row, data, dataIndex) {
row.id = 'r' + data._id;
if (!data._include) {
$(row).children(":gt(2)").addClass('excludeRow');
}
},
"data": [{
"Car": 1,
"Eyes": "Blue",
"Family": 3,
"Hand": "R",
"HealthCare": 2,
"Height": 72,
"Major": "FIN",
"Marriage": 5,
"Party": "R",
"Pot": 4,
"Sex": "M",
"ShoeSize": 11.5,
"State": "PA",
"Student": 1,
"Weight": 220,
"_id": 1,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 4,
"Hand": "R",
"HealthCare": 1,
"Height": 62,
"Major": "ACC",
"Marriage": 1,
"Party": "D",
"Pot": 5,
"Sex": "F",
"ShoeSize": 9,
"State": "PA",
"Student": 2,
"Weight": 140,
"_id": 2,
"_include": true
}, {
"Car": 0,
"Eyes": "Blue",
"Family": 0,
"Hand": "R",
"HealthCare": 3,
"Height": 69,
"Major": "FIN",
"Marriage": 1,
"Party": "D",
"Pot": 4,
"Sex": "M",
"ShoeSize": 11,
"State": "MD",
"Student": 3,
"Weight": 195,
"_id": 3,
"_include": true
}, {
"Car": 1,
"Eyes": "Blue",
"Family": 1,
"Hand": "R",
"HealthCare": 2,
"Height": 69,
"Major": "OIM",
"Marriage": 1,
"Party": "D",
"Pot": 3,
"Sex": "M",
"ShoeSize": 9.5,
"State": "PA",
"Student": 4,
"Weight": 190,
"_id": 4,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 1,
"Hand": "L",
"HealthCare": 2,
"Height": 70,
"Major": "BA",
"Marriage": 4,
"Party": "R",
"Pot": 5,
"Sex": "M",
"ShoeSize": 10.5,
"State": "CT",
"Student": 5,
"Weight": 150,
"_id": 5,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 2,
"Hand": "R",
"HealthCare": 4,
"Height": 66,
"Major": "ACC",
"Marriage": 2,
"Party": "R",
"Pot": 3,
"Sex": "M",
"ShoeSize": 8.25,
"State": "NJ",
"Student": 6,
"Weight": 125,
"_id": 6,
"_include": true
}, {
"Car": 0,
"Eyes": "Brown",
"Family": 1,
"Hand": "R",
"HealthCare": 2,
"Height": 67,
"Major": "BA",
"Marriage": 2,
"Party": "D",
"Pot": 4,
"Sex": "M",
"ShoeSize": 9,
"State": "NY",
"Student": 7,
"Weight": 155,
"_id": 7,
"_include": true
}, {
"Car": 1,
"Eyes": "Green",
"Family": 2,
"Hand": "L",
"HealthCare": 1,
"Height": 72,
"Major": "OIM",
"Marriage": 2,
"Party": "I",
"Pot": 4,
"Sex": "M",
"ShoeSize": 13,
"State": "PA",
"Student": 8,
"Weight": 260,
"_id": 8,
"_include": true
}, {
"Car": 1,
"Eyes": "Blue",
"Family": 2,
"Hand": "R",
"HealthCare": 3,
"Height": 72,
"Major": "BA",
"Marriage": 2,
"Party": "R",
"Pot": 4,
"Sex": "M",
"ShoeSize": 10.5,
"State": "NY",
"Student": 9,
"Weight": 155,
"_id": 9,
"_include": true
}, {
"Car": 1,
"Eyes": "Brown",
"Family": 2,
"Hand": "R",
"HealthCare": 3,
"Height": 71,
"Major": "ACC",
"Marriage": 2,
"Party": "D",
"Pot": 4,
"Sex": "M",
"ShoeSize": 12,
"State": "CT",
"Student": 10,
"Weight": 180,
"_id": 10,
"_include": true
}, {
"Car": 1,
"Eyes": "Blue",
"Family": 1,
"Hand": "R",
"HealthCare": 3,
"Height": 71,
"Major": "BA",
"Marriage": 4,
"Party": "R",
"Pot": 2,
"Sex": "M",
"ShoeSize": 11,
"State": "MD",
"Student": 11,
"Weight": 160,
"_id": 11,
"_include": true
}]
});
yadcf.init($("#dataset").DataTable(), [{
"column_number": 0,
"filter_type": "range_number_slider"
}, {
"column_number": 1,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 2,
"filter_type": "range_number_slider"
}, {
"column_number": 3,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 4,
"filter_type": "range_number_slider"
}, {
"column_number": 5,
"filter_type": "range_number_slider"
}, {
"column_number": 6,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 7,
"filter_type": "range_number_slider"
}, {
"column_number": 8,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 9,
"filter_type": "range_number_slider"
}, {
"column_number": 10,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 11,
"filter_type": "range_number_slider"
}, {
"column_number": 12,
"filter_type": "multi_select",
"select_type": "chosen"
}, {
"column_number": 13,
"filter_type": "range_number_slider"
}, {
"column_number": 14,
"filter_type": "range_number_slider"
}]);
});
[1]: https://jsfiddle.net/mbaas/fbo0L88v/
Solved the issues with the Datatable (most notable I did not load the appropriate .css to support Bootstrap for the addons), I then had an issue with the pagelength-control not being wide enough to fully show the text for the "All"-Selection - that required some changes to the CSS which Allan will include in his downloads.
Just in case anyone else hits this:
div.dataTables_wrapper div.dataTables_length select {
width: auto;
}
Then I had an issue with vertical alignment of the controls surrounding the table - that needed a slightly more evolved dom-setting than I had:
"<'row'<'col-sm-12 col-md-6'B><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12'i>>" +
"<'row'<'col-sm-12 col-md-5'l><'col-sm-12 col-md-7'p>>"
This should become significantly easier with one the next releases...
Even after sorting all that out, the yadcf-issue remained - but that seems to be a real bug, so I posted an issue on GitHub.