How to format adaptive cards like the old version of webchat - html
The new version of the standard webchat channel ("gemini") stripped out all of the formatting. I was able to replicate most of the old interface via tweaks in the botframework-webchat implementation, but I cannot get the adaptive card formatting to match. With the general formatting I was able to get it close, and the adaptiveCardHostConfig tweaks shown here on Github got a bit closer, but I still can't figure out how to replicate it. Specifically, the chat bubble (which is gray in my implementation) no longer appears behind the adaptive card. This is especially noticeable for carousels, where it used to be one "bubble" with multiple cards and is now discrete cards. Furthermore, the buttons are no longer interactive (blue border used to appear on mouseover), and the bublle "nub" is absent. Please see below for examples. Note that I DO know how to make the background for the card itself gray to match the bubbles, but that is not the look that I want or that displayed previously.
In summary, I'm asking
How can I format the gray background like was present in the previous version.
How can I add the bubble nub to the card (or perhaps more accurately, make the card appear inside a bubble).
How can I make the buttons on the adaptive card interactive
Single Card (new on left, old on right)
Carousel (new on left, old on right)
And here is the website code
<!DOCTYPE html>
<html>
<head>
<title>Support Bot</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
}
#chatbotTitle {
display: flex;
align-items: center;
height: 40px;
width: 100%;
background-color: #0067CC;
color: #FFFFFF;
font-family: Calibri, Helvetica Neue, Arial, sans-serif;
justify-content: space-between;
}
#webchat {
height: calc(100% - 40px);
width: 100%;
}
.btn {
display: flex;
background-color: white;
border: 1px solid #767676;
color: #0067CC;
text-align: center;
margin: 15px;
}
.btn:hover {
border-color: #444444;
}
.btn:active {
background-color: #CCCCCC;
}
</style>
</head>
<body>
<div id="chatbotTitle"><h3 style="padding-left:10px;">Support Bot</h3><button class="btn" id="transcriptButton">Email Transcript</button></div>
<div id="webchat" role="main"></div>
<script>
let interval;
var PageTitleNotification = {
Vars:{
OriginalTitle: document.title,
Interval: null
},
On: function(notification, intervalSpeed){
var _this = this;
_this.Vars.Interval = setInterval(function(){
document.title = (_this.Vars.OriginalTitle == document.title)
? notification
: _this.Vars.OriginalTitle;
}, (intervalSpeed) ? intervalSpeed : 1000);
},
Off: function(){
clearInterval(this.Vars.Interval);
document.title = this.Vars.OriginalTitle;
}
}
// We are using a customized store to add hooks to connect event
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'WEB_CHAT/SEND_MESSAGE') {
// Message sent by the user
PageTitleNotification.Off();
clearTimeout(interval);
} else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' && action.payload.activity.name !== "inactive") {
// Message sent by the bot
clearInterval(interval);
interval = setTimeout(() => {
// Change title to flash the page
PageTitleNotification.On('Are you still there?');
// Notify bot the user has been inactive
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'inactive',
value: ''
}
});
}, 300000)
}
return next(action);
});
const adaptiveCardHostConfig = {
"spacing": {
"small": 3,
"default": 8,
"medium": 20,
"large": 30,
"extraLarge": 40,
"padding": 10
},
"separator": {
"lineThickness": 1,
"lineColor": "#EEEEEE"
},
"supportsInteractivity": true,
"fontTypes": {
"default": {
"fontFamily": "Calibri, sans-serif",
"fontSizes": {
"small": 12,
"default": 14,
"medium": 17,
"large": 21,
"extraLarge": 26
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 600
}
},
"monospace": {
"fontFamily": "'Courier New', Courier, monospace",
"fontSizes": {
"small": 12,
"default": 14,
"medium": 17,
"large": 21,
"extraLarge": 26
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 600
}
}
},
"containerStyles": {
"default": {
"backgroundColor": "#FFFFFF",
"foregroundColors": {
"default": {
"default": "#000000",
"subtle": "#767676"
},
"accent": {
"default": "#0063B1",
"subtle": "#0063B1"
},
"attention": {
"default": "#FF0000",
"subtle": "#DDFF0000"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#c3ab23",
"subtle": "#DDc3ab23"
}
}
},
"emphasis": {
"backgroundColor": "#F0F0F0",
"foregroundColors": {
"default": {
"default": "#000000",
"subtle": "#767676"
},
"accent": {
"default": "#2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#FF0000",
"subtle": "#DDFF0000"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#c3ab23",
"subtle": "#DDc3ab23"
}
}
},
"accent": {
"backgroundColor": "#C7DEF9",
"foregroundColors": {
"default": {
"default": "#333333",
"subtle": "#EE333333"
},
"dark": {
"default": "#000000",
"subtle": "#66000000"
},
"light": {
"default": "#FFFFFF",
"subtle": "#33000000"
},
"accent": {
"default": "#2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#cc3300",
"subtle": "#DDcc3300"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#e69500",
"subtle": "#DDe69500"
}
}
},
"good": {
"backgroundColor": "#CCFFCC",
"foregroundColors": {
"default": {
"default": "#333333",
"subtle": "#EE333333"
},
"dark": {
"default": "#000000",
"subtle": "#66000000"
},
"light": {
"default": "#FFFFFF",
"subtle": "#33000000"
},
"accent": {
"default": "#2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#cc3300",
"subtle": "#DDcc3300"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#e69500",
"subtle": "#DDe69500"
}
}
},
"attention": {
"backgroundColor": "#FFC5B2",
"foregroundColors": {
"default": {
"default": "#333333",
"subtle": "#EE333333"
},
"dark": {
"default": "#000000",
"subtle": "#66000000"
},
"light": {
"default": "#FFFFFF",
"subtle": "#33000000"
},
"accent": {
"default": "#2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#cc3300",
"subtle": "#DDcc3300"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#e69500",
"subtle": "#DDe69500"
}
}
},
"warning": {
"backgroundColor": "#FFE2B2",
"foregroundColors": {
"default": {
"default": "#333333",
"subtle": "#EE333333"
},
"dark": {
"default": "#000000",
"subtle": "#66000000"
},
"light": {
"default": "#FFFFFF",
"subtle": "#33000000"
},
"accent": {
"default": "#2E89FC",
"subtle": "#882E89FC"
},
"attention": {
"default": "#cc3300",
"subtle": "#DDcc3300"
},
"good": {
"default": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"default": "#e69500",
"subtle": "#DDe69500"
}
}
}
},
"imageSizes": {
"small": 40,
"medium": 80,
"large": 160
},
"actions": {
"maxActions": 100,
"spacing": "default",
"buttonSpacing": 8,
"showCard": {
"actionMode": "inline",
"inlineTopMargin": 8
},
"actionsOrientation": "vertical",
"actionAlignment": "stretch"
},
"adaptiveCard": {
"allowCustomStyle": false
},
"imageSet": {
"imageSize": "medium",
"maxImageHeight": 100
},
"factSet": {
"title": {
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "bolder",
"wrap": true,
"maxWidth": 150
},
"value": {
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "default",
"wrap": true
},
"spacing": 8
}
};
window.WebChat.renderWebChat(
{
adaptiveCardHostConfig,
directLine: window.WebChat.createDirectLine({
token: 'MYTOKENHERE'
}),
store: store,
userID: 'userID',
username: 'userName',
locale: 'en-US',
styleOptions: {
botAvatarInitials: 'BOT',
userAvatarInitials: 'USR',
accent: '#0067CC',
backgroundColor: 'White',
cardEmphasisBackgroundColor: '#F0F0F0',
paddingRegular: 10,
paddingWide: 10 * 2,
messageActivityWordBreak: 'break-word',
fontSizeSmall: '80%',
avatarSize: 40,
botAvatarBackgroundColor: '#0067CC',
botAvatarImage: '',
botAvatarInitials: '',
userAvatarBackgroundColor: '#ECEFF1',
userAvatarImage: '',
userAvatarInitials: '',
bubbleBackground: '#ECEFF1',
bubbleBorderColor: '#E6E6E6',
bubbleBorderRadius: 8,
bubbleBorderStyle: 'solid',
bubbleBorderWidth: 1,
bubbleFromUserBackground: '#0067CC',
bubbleFromUserBorderColor: '#E6E6E6',
bubbleFromUserBorderRadius: 8,
bubbleFromUserBorderStyle: 'solid',
bubbleFromUserBorderWidth: 1,
bubbleFromUserNubOffset: 'bottom',
bubbleFromUserNubSize: 10,
bubbleFromUserTextColor: 'White',
bubbleImageHeight: 240,
bubbleMaxWidth: 480,
bubbleMinHeight: 30,
bubbleMinWidth: 250,
bubbleNubOffset: 'bottom',
bubbleNubSize: 10,
bubbleTextColor: 'Black',
markdownRespectCRLF: true,
richCardWrapTitle: false,
rootHeight: '100%',
rootWidth: '100%',
hideScrollToEndButton: false,
hideSendBox: false,
hideUploadButton: true,
microphoneButtonColorOnDictate: '#F33',
sendBoxBackground: 'White',
sendBoxButtonColor: '#767676',
sendBoxButtonColorOnDisabled: '#CCC',
sendBoxButtonColorOnFocus: '#0067CC',
sendBoxButtonColorOnHover: '#0067CC',
sendBoxDisabledTextColor: '#767676', // defaults to subtle
sendBoxHeight: 40,
sendBoxMaxHeight: 200,
sendBoxTextColor: 'Black',
sendBoxBorderBottom: 'solid 5px #DBDEE1',
sendBoxBorderLeft: 'solid 5px #DBDEE1',
sendBoxBorderRight: 'solid 5px #DBDEE1',
sendBoxBorderTop: 'solid 5px #DBDEE1',
sendBoxPlaceholderColor: undefined, // defaults to subtle
sendBoxTextWrap: false,
showSpokenText: false,
suggestedActionBackground: 'White',
suggestedActionBorder: undefined,
suggestedActionBorderColor: '#CCCCCC',
suggestedActionBorderRadius: 0,
suggestedActionBorderStyle: 'solid',
suggestedActionBorderWidth: 1,
suggestedActionDisabledBackground: '#F9F9F9',
suggestedActionDisabledBorder: null,
suggestedActionDisabledBorderColor: '#E6E6E6',
suggestedActionDisabledBorderStyle: 'solid',
suggestedActionDisabledBorderWidth: 1,
suggestedActionDisabledTextColor: '#767676',
suggestedActionHeight: 30,
suggestedActionImageHeight: 20,
suggestedActionLayout: 'carousel',
suggestedActionTextColor: null,
groupTimestamp: false,
sendTimeout: 20000,
sendTimeoutForAttachments: 120000,
timestampColor: '#767676',
timestampFormat: 'relative',
transcriptOverlayButtonBackground: 'rgba(0, 0, 0, .6)',
transcriptOverlayButtonBackgroundOnFocus: 'rgba(0, 0, 0, .8)',
transcriptOverlayButtonBackgroundOnHover: 'rgba(0, 0, 0, .8)',
transcriptOverlayButtonColor: 'White',
transcriptOverlayButtonColorOnFocus: 'White',
transcriptOverlayButtonColorOnHover: 'White',
typingAnimationBackgroundImage: null,
typingAnimationDuration: 5000,
typingAnimationHeight: 20,
typingAnimationWidth: 64,
subtle: '#767676'
}
},
document.getElementById('webchat')
);
document.querySelector('#transcriptButton').addEventListener('click', () => {
store.dispatch({
type: 'WEB_CHAT/SEND_MESSAGE',
payload: { text: 'Email me a transcript' }
});
});
</script>
</body>
</html>
Web Chat and Adaptive Cards are both open source, so it's a good idea to download their source code if you want to figure out how they work. In the Web Chat repo you can switch to the v3 branch to see how v3 works. Web Chat uses the Adaptive Cards JavaScript SDK, and the code that handles parsing and rendering is in card-elements.ts.
In botchat.css, you can see the styles that create the background you want here:
.wc-message-content {
border-radius: 2px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
padding: 8px;
word-break: break-word; }
.wc-message-from-bot .wc-message-content {
background-color: #eceff1;
color: #000000; }
Those classes aren't used in Web Chat v4, but you can apply it to your attachments and carousels like this:
div.attachment.bubble,
div.content > ul.webchat__carousel__item_indented {
background-color: #eceff1;
color: #000000;
border-radius: 2px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
padding: 8px;
}
I'm being pretty specific with the selector because there's another style that will try to set the padding to 0. You can just use the !important keyword if you want.
You've already seen that Web Chat doesn't allow bubble nubs on attachments in v4. The line responsible for this is here:
<Bubble className="attachment bubble" fromUser={fromUser} key={index} nub={false}>
You can modify the way activities are rendered using activity middleware according to this sample. In your case you'll want to render an SVG element alongside the activity.
To add hover styles to your buttons, you can again have a look at botchat.css:
.wc-card button:hover {
background-color: transparent;
border-color: #0078d7;
color: #0078d7; }
You can use all three of those declarations or just border-color:
.ac-adaptiveCard button:hover {
border-color: #0078d7;
}
Related
How to align 0 value in multiple y axis layered chart in Vega-lite?
In Vega-lite, I want to align y-axis values, so that zeroes are in the same place and negative values go below x-axis. Is it possible to do in Vega-lite? I can't hardcode the domain limits, as the data passed to this chart is dynamic, thus can be different every time.
My code:
{
"$schema":"https://vega.github.io/schema/vega-lite/v5.json",
"width":300,
"data":{
"values":[
{
"key":"Type A",
"sum1":"1000",
"sum2":"2000",
"ratio":"15"
},
{
"key":"Type B",
"sum1":"1500",
"sum2":"1500",
"ratio":"-5"
},
{
"key":"Type C",
"sum1":"2000",
"sum2":"1000",
"ratio":"7"
}
]
},
"layer":[
{
"mark":{
"type":"bar",
"size":15,
"xOffset":0
},
"encoding":{
"y":{
"field":"sum1",
"type":"quantitative",
"axis":{
"title":null,
"ticks":true,
"orient":"left"
}
},
"x":{
"field":"key",
"type":"nominal",
"axis":{
"title":null,
"labelAngle":-45,
"labelLimit":1000
}
},
"color":{
"datum":"Sum1"
}
}
},
{
"mark":{
"type":"bar",
"size":15,
"xOffset":15
},
"encoding":{
"y":{
"field":"sum2",
"type":"quantitative",
"axis":{
"domain":false,
"title":null,
"labels":false,
"ticks":false
}
},
"x":{
"field":"key",
"type":"nominal",
"axis":{
"title":null,
"labelAngle":-45,
"labelLimit":1000
}
},
"color":{
"datum":"Sum2"
}
}
},
{
"mark":{
"type":"line",
"interpolate":"monotone",
"clip":true
},
"encoding":{
"y":{
"type":"quantitative",
"field":"ratio",
"axis":{
"title":null,
"ticks":true,
"orient":"right"
}
},
"x":{
"field":"key",
"type":"nominal",
"axis":{
"title":null,
"labelAngle":-45,
"labelLimit":1000
}
},
"color":{
"datum":"Ratio"
}
}
}
],
"resolve":{
"scale":{
"y":"independent"
}
},
"config":{
"legend":{
"orient":"bottom",
"columns":3,
"labelLimit":500,
"layout":{
"bottom":{
"anchor":"middle"
}
}
}
}
}
Open the Chart in the Vega Editor
Change Canvas Page Colour and Chart Background Colour in JSON Themes for Power BI Template
I want to prepare a default theme and have written the JSON file below for powerbi dashboards. But I don't know how to:
Change the background colour for the canvas to white?
Change the background colour of the page (Canvas colour) to white?
Change the border colour of all visuals to black
We will then push this file to be the default theme for all of our dashboards.
{
"name": "Bardz",
"dataColors": [
"#173583",
"#7DCCE0",
"#26BCD7",
],
"minimum": "#C7F0FA",
"center": "#7CD7E8",
"maximum": "#3EAEFD",
"neutral": "#F58220",
"foreground": "#000000",
"textClasses": {
"label": {
"fontFace": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif",
"fontSize": 9,
"color": "#040404"
},
"callout": {
"fontFace": "'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif",
"fontSize": 15
},
"title": {
"fontFace": "'Segoe UI Light', wf_segoe-ui_light, helvetica, arial, sans-serif",
"fontSize": 10
},
"header": { "fontSize": 11 }
},
"visualStyles": {
"*": {
"*": {
"background": [
{ "color": { "solid": { "color": "#E1E1E1" } }, "transparency": 5 }
],
"border": [
{
"color": { "solid": { "color": "#000000" } },
"show": true,
"radius": 1
}
],
"outspacePane": [
{
"backgroundColor": { "solid": { "color": "#FFFEFE" } },
"transparency": 15,
"foregroundColor": { "solid": { "color": "#000000" } }
}
],
"filterCard": [
{
"$id": "Applied",
"backgroundColor": { "solid": { "color": "#E4E4E4" } },
"transparency": 18
},
{
"$id": "Available",
"backgroundColor": { "solid": { "color": "#F2F2F2" } },
"transparency": 13
}
],
"visualHeader": [
{
"transparency": 35,
"foreground": { "solid": { "color": "#FFFFFF" } },
"border": { "solid": { "color": "#000000" } }
}
],
"visualTooltip": [
{
"titleFontColor": { "solid": { "color": "#454545" } },
"valueFontColor": { "solid": { "color": "#000000" } },
"background": { "solid": { "color": "#C7C5C5" } }
}
],
"visualHeaderTooltip": [
{
"titleFontColor": { "solid": { "color": "#454545" } },
"background": { "solid": { "color": "#C7C5C5" } }
}
]
}
},
"scatterChart": {
"*": {
"fillPoint": [
{
"show": true
}
],
"bubbles": [
{
"bubbleSize": -10
}
],
"background": [
{ "color": { "solid": { "color": "#FFFFFF" } }, "transparency": 100 }
]
}
},
"page": {
"*": {
"background": [
{ "color": { "solid": { "color": "#F9F9F9" } }, "transparency": 89 }
],
"outspace": [
{ "color": { "solid": { "color": "#FAFAFA" } }, "transparency": 14 }
]
}
}
}
}
Modify the width, height and position of product variant drop-down for a Shopify Buy Button without disabling the iFrame
I need to alter the height of the product variant dropdown to exactly 42px (the same height as the buy button) and the width to exactly 80px. Additionally, instead of the product variant dropdown being positioned above the buy button, I need to be positioned directly beside the buy button to the left.
I've tried to find articles on how to do this within Shopify forums, but have yet to find one and I'm unsure where within the embedded code these elements are to change. Shopify doesn't offer customization support for their buy buttons either. I do not want to disable the iFrame.
JSFiddle: https://jsfiddle.net/johnsmithh/eo4rzLwc/2/
Code:
<div id="product-component-1580935128063">
<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: 'missingnewyork.myshopify.com',
storefrontAccessToken: '8ad1e9d2d113621e1e9785f5a84b7330',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: '4448713736258',
node: document.getElementById('product-component-1580935128063'),
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px"
}
},
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
},
"option": {
"display": "inline-block",
"width": "20px",
},
"contents": {
"img": false,
"title": false,
"price": false
},
"text": {
"outOfStock": "SOLD OUT"
},
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"button": false,
"buttonWithQuantity": true
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
}
},
"text": {
"button": "ADD TO CART"
}
},
"cart": {
"styles": {
"button": {
"font-weight": "bold",
"color": "#000000",
":hover": {
"color": "#000000",
"background-color": "#e6e6e6"
},
"background-color": "#ffffff",
":focus": {
"background-color": "#e6e6e6"
},
"border-radius": "5px"
},
"title": {
"color": "#ffffff"
},
"header": {
"color": "#ffffff"
},
"lineItems": {
"color": "#ffffff"
},
"subtotalText": {
"color": "#ffffff"
},
"subtotal": {
"color": "#ffffff"
},
"notice": {
"color": "#ffffff"
},
"currency": {
"color": "#ffffff"
},
"close": {
"color": "#ffffff",
":hover": {
"color": "#ffffff"
}
},
"empty": {
"color": "#ffffff"
},
"noteDescription": {
"color": "#ffffff"
},
"discountText": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"discountAmount": {
"color": "#ffffff"
},
"cart": {
"background-color": "#000000"
},
"footer": {
"background-color": "#000000"
}
},
"text": {
"title": "CART",
"empty": "YOUR CART IS EMPTY.",
"notice": "Shipping and taxes are added at checkout.",
}
},
"toggle": {
"styles": {
"toggle": {
"font-weight": "bold",
"background-color": "#ffffff",
":hover": {
"background-color": "#e6e6e6"
},
":focus": {
"background-color": "#e6e6e6"
}
},
"count": {
"color": "#000000",
":hover": {
"color": "#000000"
}
},
"iconPath": {
"fill": "#000000"
}
}
},
"lineItem": {
"styles": {
"variantTitle": {
"color": "#ffffff"
},
"title": {
"color": "#ffffff"
},
"price": {
"color": "#ffffff"
},
"fullPrice": {
"color": "#ffffff"
},
"discount": {
"color": "#ffffff"
},
"discountIcon": {
"fill": "#ffffff"
},
"quantity": {
"color": "#ffffff"
},
"quantityIncrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityDecrement": {
"color": "#ffffff",
"border-color": "#ffffff"
},
"quantityInput": {
"color": "#ffffff",
"border-color": "#ffffff"
}
}
}
},
});
});
}
})();
/*]]>*/
</script>
</div>
Thanks!
You have a few options. What I would suggest is removing the iFrame altogether and styling it in a CSS file. It'd look something like this:
moneyFormat: '%24%7B%7Bamount%7D%7D',
options: {
"product": {
"iframe": false,
...
}
}
You can find more information about it here, just skip to "Custom styling without iframes". There are some other alternatives, but I believe this one would be the best one to have full control as you wish.
Keep in mind that naturally it will mess up the pre-built CSS. Here is an example I coded for you.
Host config bot framework [supportsInteractivity]
I am working on the webchat bot framework, more particularly on the hostconfig part of the adaptive card.
I want to use container selectaction but I do not have the expected display.
I created a basic card with container that I display on my chatbot but when I put the mouse cursor on the container, the card does not make the interactive effect yet the property supportsInteractivity is true.
Does anyone have any ideas?
Thans you
Here is my hostconfig:
{
"supportsInteractivity": true,
"spacing": {
"small": 4,
"default": 8,
"medium": 16,
"large": 24,
"extraLarge": 32,
"padding": 8
},
"separator": {
"lineThickness": 1,
"lineColor": "#cccccc"
},
"fontFamily": "\"Segoe UI\", sans-serif",
"fontSizes": {
"small": 12,
"default": 13,
"medium": 15,
"large": 17,
"extraLarge": 19
},
"fontWeights": {
"lighter": 200,
"default": 400,
"bolder": 700
},
"containerStyles": {
"default": {
"backgroundColor": "#00000000",
"foregroundColors": {
"default": {
"default": "#000000",
"subtle": "#808c95"
},
"accent": {
"default": "#2e89fc",
"subtle": "#802E8901"
},
"attention": {
"default": "#ffd800",
"subtle": "#CCFFD800"
},
"good": {
"default": "#00ff00",
"subtle": "#CC00FF00"
},
"warning": {
"default": "#ff0000",
"subtle": "#CCFF0000"
}
}
},
"emphasis": {
"backgroundColor": "#08000000",
"foregroundColors": {
"default": {
"default": "#333333",
"subtle": "#EE333333"
},
"accent": {
"default": "#2e89fc",
"subtle": "#882E89FC"
},
"attention": {
"default": "#cc3300",
"subtle": "#DDCC3300"
},
"good": {
"default": "#54a254",
"subtle": "#DD54A254"
},
"warning": {
"default": "#e69500",
"subtle": "#DDE69500"
}
}
}
},
"imageSizes": {
"small": 40,
"medium": 80,
"large": 160
},
"actions": {
"maxActions": 100,
"spacing": "default",
"buttonSpacing": 8,
"showCard": {
"actionMode": "inline",
"inlineTopMargin": 8
},
"actionsOrientation": "vertical",
"actionAlignment": "stretch"
},
"adaptiveCard": {
"allowCustomStyle": false
},
"imageSet": {
"imageSize": "medium",
"maxImageHeight": 100
},
"factSet": {
"title": {
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "bolder",
"wrap": true,
"maxWidth": 150
},
"value": {
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "default",
"wrap": true
},
"spacing": 8
}
}
and there is my card :
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Text",
"weight": "bolder",
"size": "large",
"color": "accent",
"horizontalAlignment": "center"
}
]
},
{
"type": "Container",
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "text",
"size": "medium",
"horizontalAlignment": "center",
"wrap": true
}
]
},
{
"type": "Container",
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "text",
"horizontalAlignment": "center"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": "default",
"items": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "text"
}
],
"selectAction": {
"type": "Action.Submit",
"title": "text",
"data": {
"action": "1"
}
}
}
]
}
]
},
{
"type": "Container",
"separator": false,
"items": [
{
"type": "TextBlock",
"text": "text",
"horizontalAlignment": "center"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": "default",
"items": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "text"
}
],
"selectAction": {
"type": "Action.Submit",
"title": "text",
"data": {
"action": "1"
}
}
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": "default",
"items": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"text": "text"
}
],
"selectAction": {
"type": "Action.Submit",
"title": "text",
"data": {
"action": "1"
}
}
}
]
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "👍",
"data": {
"action": "2"
}
},
{
"type": "Action.ShowCard",
"title": "👎",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "comment",
"isMultiline": true,
"placeholder": "Add a comment"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Soumettre",
"data": {
"action": "3"
}
}
]
}
}
]
}
ElasticSearch - Match all nested variations in a document
I have several products with variations like the one below
{
"title": "100% Cotton Unstitched Suit For Men",
"slug": "100-cotton-unstitched-suit-for-men",
"price": 200,
"sale_price": 0,
"vendor_id": 32,
"featured": 0,
"viewed": 20,
"stock": 4,
"sku": "XXX-B",
"rating": 0,
"active": 1,
"vendor_name": "vendor_name",
"category": [
"men_fashion",
"traditional_clothing",
"unstitched_fabric"
],
"image": "imagename.jpg",
"variations": [
{
"variation_id": "34",
"stock": 5,
"price": 200,
"variation_image": "",
"sku": "XXX-C",
"size": "m",
"color": "red"
},
{
"variation_id": "35",
"stock": 5,
"price": 200,
"variation_image": "",
"sku": "XXX-D",
"size": "l",
"color": "red"
}
]
}
I am looking for a query that would have all of the below parameters
Get all products in a certain category
Get all products that are black
Get sizes l and m
My current Query:
{
"size": 15,
"from": 0,
"query": {
"filtered": {
"filter": {
"bool": {
"must": [
{
"match": {
"category": "women_fashion"
}
},
{
"nested": {
"path": "variations",
"query": {
"bool": {
"must": [{
"match": {
"variations.color": "red"
}
},
{
"match": {
"variations.size": "l"
}
},
{
"match": {
"variations.size": "m"
}
}
]
}
}
}
}
]
}
}
}
}
}
It works fine if i only search for 1 size. But once i search for 2 sizes it gives no records. My guess is that it looks for all 3 parameters in every nested variation, which obviously it cant find. How would i modify the query to search for
size: m, color: black
size: l, color: black
I have also tried using a nested filter, but the issue with this is that it works like "SHOULD" query while i am looking for a "MUST" query. ie. it shows all the products have large variations while i just want to show products that are large and red.
My Second Query:
{
"size": 15,
"from": 0,
"query": {
"filtered": {
"filter": {
"bool": {
"must": [
{
"match": {
"category": "women_fashion"
}
},
{
"nested": {
"path": "variations",
"query": {
"bool":{
"filter": [
{
"term": {
"variations.color": "red"
}
},
{
"term": {
"variations.size": "l"
}
}
]
}
}
}
}
]
}
}
}
}
}
You can put the size variations into a clause of it's own so at least one of the sizes will match
{
"query": {
"filtered": {
"filter": {
"bool": {
"must": [
{
"match": {
"category": "women_fashion"
}
},
{
"nested": {
"path": "variations",
"query": {
"bool": {
"must": [
{
"match": {
"variations.color": "red"
}
},
{
"query": {
"bool": {
"should": [
{
"match": {
"variations.size": "l"
}
},
{
"match": {
"variations.size": "m"
}
}
]
}
}
}
]
}
}
}
}
]
}
}
}
}
}