Related
When I send data into the apex chart array that I took from my json file with axios, the chart does not automatically renew itself in Vue3
With Axios, I fetch all the apexcharts in the json file and add them to the elementCustomize array. Then I push the data in the elementDataseries array into elementCustomize[i].options.series one by one, the data goes into the series of the related apexchart successfully, but I can't see the change in the chart in the page. I can see the data whenever I write a text in the page and save it.
Can you help me?
That is my json file
"elementCustomize": [
{
"id": "2023024145531",
"customizeId": 0,
"elementId": 2023024145531,
"pageId": 1,
"zone": "zone1",
"options": {
"series": [ {
"elementId" : 2023024145531,
"dataId" : 123453576978982,
"name" : "Data 1",
"data" : [-44,55,187,11,61,22,63,45,3]
}],
"chart": {
"type": "bar",
"height": 280,
"toolbar": {
"show": true,
"tools": {
"download": true,
"selection": true,
"zoom": true,
"zoomin": true,
"zoomout": true,
"pan": true,
"reset": true
}
}
},
"plotOptions": {
"bar": {
"horizontal": false,
"columnWidth": "55%",
"endingShape": "rounded"
}
},
"colors": [
"#0150581244",
"#2196F3",
"#4CAF50",
"#9C27B0"
],
"dataLabels": {
"enabled": false
},
"stroke": {
"show": true,
"width": 2,
"colors": [
"transparent"
]
},
"xaxis": {
"categories": [
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct"
]
},
"yaxis": {
"title": {
"text": "$ (thousands)"
}
},
"fill": {
"opacity": 1
},
"legend": {
"position": "top",
"horizontalAlign": "center"
},
"title": {
"text": "Multiple Bars",
"align": "left"
},
"tooltip": {
"y": {}
}
}
},
{
"id": "2023025111221",
"customizeId": 0,
"elementId": "2023025111221",
"pageId": 1,
"zone": "zone3",
"options": {
"series": [],
"chart": {
"type": "bar",
"height": 280,
"toolbar": {
"show": true,
"tools": {
"download": true,
"selection": true,
"zoom": true,
"zoomin": true,
"zoomout": true,
"pan": true,
"reset": true
}
}
},
"plotOptions": {
"bar": {
"horizontal": false,
"columnWidth": "55%",
"endingShape": "rounded"
}
},
"colors": [
"#0150581244",
"#2196F3",
"#4CAF50",
"#9C27B0"
],
"dataLabels": {
"enabled": false
},
"stroke": {
"show": true,
"width": 2,
"colors": [
"transparent"
]
},
"xaxis": {
"categories": [
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct"
]
},
"yaxis": {
"title": {
"text": "$ (thousands)"
}
},
"fill": {
"opacity": 1
},
"legend": {
"position": "top",
"horizontalAlign": "center"
},
"title": {
"text": "Multiple Bars",
"align": "left"
},
"tooltip": {
"y": {}
}
}
}
]
The process where I pull this data from the json and sync it into the array
onBeforeMount(async () => {
await api.get(jsonServerUrl+"elementCustomize?pageId="+pageID).then(response=>{
elementCustomize = response.data
})
}
That is my apex chart code
<div v-for="item in filteredCustomize('zone1')" :key="item.id" class="drag-item s-card">
<ApexChart
id="apex-chart-1 chart"
:height="item.options.chart.height"
:type="item.options.chart.type"
:series="item.options.series"
:options="item.options"
>
</ApexChart>
{{item.options.series}}
<div class="elementHeadBar hover" align="start">
<VButton icon="feather:edit-2" color="info" :loading="loading" raised #click="updateSeries(item)"> test push series </VButton>
</div>
</div>
filteredCustomize for filtering areas, because i have 3 column in page. zone1, zone2, zone3 etc.
const filteredCustomize=(e)=>{
return elementCustomize.filter(item => item.zone === e)
}
I am posting fake datas with updateseries function.
const updateSeries = (item)=> {
let matchingData = elementDataSeries.filter(e => e.elementId == item.id)
if (matchingData){
for(let i = 0; i < elementCustomize.length; i++) {
for(let j = 0; j < elementDataSeries.length; j++) {
if(elementCustomize[i].elementId === elementDataSeries[j].elementId) {
elementCustomize[i].options.series.push(elementDataSeries[j]);
}
}
}
}else{
console.log("no")
}
console.log(elementCustomize)
}
i tried watch but it doesn't work. i read something in forums. when post data into apexchart series, it have to re render automatically.
I use bot to post cards with version 2 (сards_v2 property).
Cards are rendered as normal, but I want to add a Button to open Dialog. This does not work.
How can I achieve this?
I post to POST /v1/chat/channels/:channel_id/messages?
body:
{
"cards_v2": [{
"card": {
"header": {
"title": "Rolodex",
"subtitle": "Manage your contacts!",
"imageType": "CIRCLE",
"imageUrl": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png"
},
"sections": [{
"widgets": [{
"buttonList": {
"buttons": [{
"text": "Add Contact",
"onClick": {
"action": {
"function": "openDialog",
"interaction": "OPEN_DIALOG"
}
}
}]
}
}]
}]
}
}]
}
Then I click on Button, and receive event:
{
"type": "CARD_CLICKED",
"eventTime": "2022-08-31T16:16:36.147391Z",
"message": {
"name": "spaces/:space_id/messages/YTyNVBNW-H4.YTyNVBNW-H4",
"sender": { ... },
"createTime": "2022-08-31T16:16:31.639439Z",
"thread": { ... },
"space": { ... },
"cardsV2": [{
"card": {
"header": {
"title": "Rolodex",
"subtitle": "Manage your contacts!",
"imageType": "CIRCLE",
"imageUrl": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png"
},
"sections": [{
"widgets": [{
"buttonList": {
"buttons": [{
"text": "Add Contact",
"onClick": {
"action": {
"function": "openDialog"
}
}
}]
}
}]
}]
}
}],
"retentionSettings": {
"state": "PERMANENT"
}
},
"user": { ... },
"space": { ... },
"action": {
"actionMethodName": "openDialog"
},
"common": {
"hostApp": "CHAT",
"invokedFunction": "openDialog"
}
}
First: Event skips DialogEventType is REQUEST_DIALOG.
Second: When I respond with dialog response, but no dialog appears.
{
"actionResponse": {
"type": "DIALOG",
"dialogAction": {
"dialog": {
"body": {
"sections": [{
"header": "Add new contact",
"widgets": [{
"textInput": {
"name": "contactName",
"label": "Name",
"type": "SINGLE_LINE"
}
}, {
"buttonList": {
"buttons": [{
"text": "Next",
"onClick": {
"action": {
"function": "openSequentialDialog"
}
}
}]
}
}]
}]
}
}
}
}
}
I see only error:
I am creating a graph with Cytoscape.js on my website, to show admins the connections among users. Everything is fine, but some graph are not drawn down. No errors in console, but the canvas seems empty.
For example, a graph that is not drawn has 20 EDGES and 18 NODES.
If I remove some edges, the graph is drawn and showed. No matter to which node or edge I remove: if I reach 18 EDGES it shows. So I thought "maybe it's too large".
But actually I have bigger graphs (37 edges) that are drawn without problems.
What can be the problem?
This is a graph that it's not showing. By the way, is there an online website where I can test this structure? Thanks
{
"elements": {
"nodes": [
{"data": {"id": "1"}},
{"data": {"id": "2"}},
{"data": {"id": "3"}},
{"data": {"id": "4"}},
{"data": {"id": "5"}},
{"data": {"id": "6"}},
{"data": {"id": "7"}},
{"data": {"id": "8"}},
{"data": {"id": "9"}},
{"data": {"id": "10"}},
{"data": {"id": "11"}},
{"data": {"id": "12"}},
{"data": {"id": "13"}},
{"data": {"id": "14"}},
{"data": {"id": "18"}},
{"data": {"id": "15"}},
{"data": {"id": "16"}},
{"data": {"id": "17"}}
],
"edges": [{
"data": {
"source": "1",
"target": "2"
}
}, {
"data": {
"source": "1",
"target": "3"
}
}, {
"data": {
"source": "4",
"target": "3"
}
}, {
"data": {
"source": "5",
"target": "3"
}
}, {
"data": {
"source": "1",
"target": "6"
}
}, {
"data": {
"source": "7",
"target": "6"
}
}, {
"data": {
"source": "1",
"target": "8"
}
}, {
"data": {
"source": "9",
"target": "1"
}
}, {
"data": {
"source": "1",
"target": "9"
}
}, {
"data": {
"source": "1",
"target": "10"
}
}, {
"data": {
"source": "4",
"target": "10"
}
}, {
"data": {
"source": "1",
"target": "11"
}
}, {
"data": {
"source": "1",
"target": "4"
}
}, {
"data": {
"source": "8",
"target": "12"
}
}, {
"data": {
"source": "14",
"target": "13"
}
}, {
"data": {
"source": "8",
"target": "13"
}
}, {
"data": {
"source": "15",
"target": "18"
}
}, {
"data": {
"source": "11",
"target": "18"
}
}, {
"data": {
"source": "11",
"target": "16"
}
}, {
"data": {
"source": "17",
"target": "16"
}
}],
},
}
I got the elements to display just fine:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': 'black',
'border-opacity': '1',
'border-width': '10px'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': '#bbb'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [{
data: {
id: "1"
}
},
{
data: {
id: "2"
}
},
{
data: {
id: "3"
}
},
{
data: {
id: "4"
}
},
{
data: {
id: "5"
}
},
{
data: {
id: "6"
}
},
{
data: {
id: "7"
}
},
{
data: {
id: "8"
}
},
{
data: {
id: "9"
}
},
{
data: {
id: "10"
}
},
{
data: {
id: "11"
}
},
{
data: {
id: "12"
}
},
{
data: {
id: "13"
}
},
{
data: {
id: "14"
}
},
{
data: {
id: "15"
}
},
{
data: {
id: "16"
}
},
{
data: {
id: "17"
}
},
{
data: {
id: "18"
}
}
],
edges: [{
data: {
source: "1",
target: "2"
}
},
{
data: {
source: "1",
target: "3"
}
},
{
data: {
source: "4",
target: "3"
}
},
{
data: {
source: "5",
target: "3"
}
},
{
data: {
source: "1",
target: "6"
}
},
{
data: {
source: "7",
target: "6"
}
},
{
data: {
source: "1",
target: "8"
}
},
{
data: {
source: "9",
target: "1"
}
},
{
data: {
source: "1",
target: "9"
}
},
{
data: {
source: "1",
target: "10"
}
},
{
data: {
source: "4",
target: "10"
}
},
{
data: {
source: "1",
target: "11"
}
},
{
data: {
source: "1",
target: "4"
}
},
{
data: {
source: "8",
target: "12"
}
},
{
data: {
source: "14",
target: "13"
}
},
{
data: {
source: "8",
target: "13"
}
},
{
data: {
source: "15",
target: "18"
}
},
{
data: {
source: "11",
target: "18"
}
},
{
data: {
source: "11",
target: "16"
}
},
{
data: {
source: "17",
target: "16"
}
}
]
},
layout: {
name: 'breadthfirst',
directed: true,
padding: 15
}
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I'm trying to adapt particles.js to a Vue.js component from the example below:
https://codepen.io/MichaelVanDenBerg/pen/WpXGRm
However, when using the code below, I get the following error message in the console:
[Vue warn]: Error in mounted hook: "TypeError: this.particles is not a
function"
How can I fix it in the code below?
Template:
</template>
<div>
<div id="particles-js"></div>
</div>
</template>
Script:
<script>
import particles from 'particles.js'
export default {
mounted() {
this.initParticles()
},
methods: {
initParticles () {
particles("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 700
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
})
}
}
}
</script>
CSS:
<style scoped>
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background: #00356B;
}
</style>
The particles.js package does not export anything, but rather it sets window.particlesJS.
To use this package, simply import it in your script, and then invoke particlesJS():
import 'particles.js'
export default {
// ...
methods: {
initParticles() {
window.particlesJS('particles-js', {/* ... */})
}
}
}
demo
I've been struggling to use the shopify Buy button for the past 2 days, My webshop has products with 3 or 4 different variants with different pricing options for larger quantities (so variants look a bit like:
1 box, price per box $50
5 boxes, price per box $30
10 boxes, price per box $20
In my shopify store I removed the quantity selection and when they select 10 boxes, I automatically add 10x that variant in the customer's cart, this way it displays nicely in the catalog (box X starting at $20).
Now I would like to add a buy button channel on another website, and created the embed code to show a collection of the different products.
The problem is, it will always show the first variants price (which is the highest price $50 in the above example)
Is there a way to render the collection to display the cheapest variant price?
What I have so far:
<div id='collection-component-5e11b1274c8'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'mydomain',
apiKey: 'mykey',
appId: '6',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('collection', {
id: 157236225,
node: document.getElementById('collection-component-5e11b1274c8'),
moneyFormat: '%E2%82%AC%7B%7Bamount%7D%7D',
events :{
afterRender : function(e){
console.log('after Render');
}},
options: {
"product": {
"variantId": "all",
"isButton": false,
"contents": {
"imgWithCarousel": false,
"variantTitle": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
templates : {
price: "{{ data.selectedVariant.price }}"
},
DOMEvents: {
'change .shopify-buy__option-select': function (event, target) {
var data = target;
var product = ui.components;
console.log(product);
console.log(product.product);
console.log(product.productSet);
console.log(product.model);
console.log(Object.getOwnPropertyNames(product));
product.updateQuantity(() => parseInt(6, 10));
}
},
"styles": {
"product": {
"text-align": "left",
"#media (min-width: 601px)": {
"max-width": "calc(33.33333% - 30px)",
"margin-left": "30px",
"margin-bottom": "50px"
}
},
"button": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"variantTitle": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"title": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal",
"font-size": "16px"
},
"description": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"price": {
"font-family": "Open Sans, sans-serif",
"font-size": "16px",
"font-weight": "normal"
},
"compareAt": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal",
"font-size": "13.6px"
}
},
"googleFonts": [
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans"
]
},
"cart": {
"contents": {
"button": true
},
"text": {
"title": "Winkelmand",
"total": "subtotaal",
"notice": "",
"button": "Afrekenen"
},
"styles": {
"button": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"footer": {
"background-color": "#ffffff"
}
},
"googleFonts": [
"Open Sans"
]
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"text": {
"button": "In winkelmand"
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"variantTitle": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"title": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal",
"font-size": "30px"
},
"description": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"price": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
},
"compareAt": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
}
},
"googleFonts": [
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans",
"Open Sans"
]
},
"toggle": {
"styles": {
"toggle": {
"font-family": "Open Sans, sans-serif",
"font-weight": "normal"
}
},
"googleFonts": [
"Open Sans"
]
},
"option": {
"styles": {
"label": {
"font-family": "Open Sans, sans-serif"
},
"select": {
"font-family": "Open Sans, sans-serif"
}
},
"googleFonts": [
"Open Sans",
"Open Sans"
]
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-30px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>
In the DomEvents you see I try to update the quantity to 6, whenever a users selects a different option from a product in the collection. This seems to work, but I only change the quantity for the first product, if you happen to know how I can update the quantity of the changed product feel free to jump in and let me know..
The easiest way is to reorder the variants in the shopify backend.
To update the quantity when an option is selected you can use the userEvent "updateVariant" in the product object
Which is called whenever another option is selected.
In my case the first 2 chars of the variant are the amount of the product.
events: { "updateVariant" : function(e){
console.log('update variant');
console.log(e.model.selectedVariant.title.substr(0,2).trim());
e.updateQuantity(() => parseInt(e.model.selectedVariant.title.substr(0,2).trim()));
}