Change color variantTitle to selected variant
m00n22-zz opened this issue · comments
Hi all,
Got the following (see below) Buy Button code and I'm trying to have the variantTitle adjust it's color to the value of it's selected variant.
I created a styleAttr2 to have the color of the selected variant:
styleAttr2: function() {
return function(text, render) {
var key = render(text).trim();
var styleAttr2 = '';
if (key) {
styleAttr2 = 'style="color: ' + colors[key] + '"';
}
return styleAttr2;
}
Buy Button code
function ShopifyBuyInit() {
ShopifyBuy.UI.onReady(client).then(function(ui) {
ui.createComponent('product', {
id: '4505490325635',
node: document.getElementById('product-component'),
moneyFormat: '€{{amount}}',
options: {
option: {
templates: {
option: '' + '<div class="{{data.classes.option.wrapper}}">' +
/*'<p class="{{data.classes.option.label}}">{{data.name}}</p>' +*/
'<div>' + '{{#data.values}}' + '<button {{#data.styleAttr}} {{name}} {{/data.styleAttr}} data-value="{{name}}" data-option={{data.name}} class="{{data.name}} {{#disabled}}{{data.classes.option.option.disabled}}{{/disabled}} {{#selected}}{{data.classes.option.optionSelected}}{{/selected}} {{data.classes.option.option}}">{{#data.optionName}}{{name}}{{/data.optionName}}</button>' + '{{/data.values}}' + '</div>' + '</div>'
},
classes: {
color: 'color'
},
styles: {
wrapper: {
'padding-bottom': '10px',
'border': 0,
},
label: {
'margin-top': '0'
},
option: {
'border': '1px solid rgba(19,19,19,0.1)',
"font-family": "'museo-sans', 'museo sans', Arial, sens-serif;",
'border-radius': '0px',
'display': 'inline-block',
'margin': '0px 8px 0px 1px',
'background-color': '#fff',
'height': '24px',
'width': 'auto',
'min-width': '24px',
'cursor': 'pointer',
'font-weight': 'normal',
'outline': 'none',
'padding': "0px 5px",
'font-size': '12px',
'-webkit-box-shadow': 'inset 0px 0px 0px 3px rgba(255,255,255,1)',
'-moz-box-shadow': 'inset 0px 0px 0px 3px rgba(255,255,255,1)',
'box-shadow': 'inset 0px 0px 0px 3px rgba(255,255,255,1)'
},
optionDisabled: {
'opacity': '0.4',
'position': 'relative',
':before': {
'content': '""',
'position': 'absolute',
'height': '25px',
'width': '1px',
'background': 'rgba(0,0,0,1)',
'top': '-1px',
'left': '11px',
'transform': 'rotate(45deg)',
'outline': 'none',
'padding': "0px"
}
},
color: {
'border-radius': '100px',
},
optionSelected: {
'border-color': 'rgba(19,19,19,1)',
'background-color': '#191919',
'color': '#fff',
'-webkit-box-shadow': 'inset 0px 0px 0px 0px rgba(255,255,255,1)',
'-moz-box-shadow': 'inset 0px 0px 0px 0px rgba(255,255,255,1)',
'box-shadow': 'inset 0px 0px 0px 0px rgba(255,255,255,1)'
}
}
},
product: {
order: ['img', 'imgWithCarousel', 'title', 'description', 'options', 'quantity', 'variantTitle', 'price', 'button', 'buttonWithQuantity', ],
layout: 'horizontal',
DOMEvents: {
'click .shopify-buy__option-select': function(evt, target) {
var data = target.dataset;
var product = ui.components.product[0];
product.updateVariant(data.option, data.value);
}
},
contents: {
variantTitle: true,
quantity: false,
description: true
},
templates: {
quantity: '<div class="{{data.classes.product.quantity}} {{data.quantityClass}}">' + '<p><label class="{{data.classes.option.label}}">Quantity:</lable></p><input class="{{data.classes.product.quantityInput}}" type="number" min="0" aria-label="Quantity" value="{{data.selectedQuantity}}">' + '</div>',
variantTitle: '{{#data.hasVariants}}<h2 class="{{data.classes.product.variantTitle}}" data-element="product.variantTitle">{{data.selectedVariant.title}}</h2>{{/data.hasVariants}}',
},
styles: {
"product": {
"@media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0",
"margin-bottom": "50px"
},
"text-align": "left"
},
"title": {
"font-family": "'museo-sans', 'museo sans', Arial, sens-serif;",
"font-size": "28px",
"text-transform": "uppercase",
"line-height": "34px",
"letter-spacing": "3px",
"font-weight": "400",
"color": "#191919",
"margin-top": "40px !important;",
"margin-bottom": "5px",
},
"variantTitle": {
"font-family": "'bettertimes', 'museo-sans', 'museo sans', Arial, sens-serif;",
"font-size": "42px",
"text-transform": "none",
"line-height": "34px",
"font-weight": "normal",
"color": "#191919",
"margin-top": "20px !important;",
"margin-bottom": "20px",
"text-align": "left"
},
"button": {
":hover": {
"background-color": "#fff",
"color": "#191919",
"border": "1px solid #191919",
"font-family": "'museo-sans', 'museo sans', Arial, sens-serif;",
},
"background-color": "#191919",
":focus": {
"background-color": "#2b2b2b",
"color": "#fff",
"outline": "none",
},
"border-radius": "0px",
"border": "1px solid #fff",
"padding-left": "30px",
"padding-right": "30px",
"font-family": "'museo-sans', 'museo sans', Arial, sens-serif;",
"text-transform": "uppercase",
"font-size": "11px",
"transition": "ease all 0.3s"
},
"price": {
"font-family": "'museo-sans', 'museo sans', Arial, sens-serif;",
"font-size": "24px",
"color": "#191919",
"text-transform": "uppercase",
"line-height": "34px",
"font-weight": "400"
},
"compareAt": {
"font-size": "15.299999999999999px",
"color": "#191919"
},
"unitPrice": {
"font-size": "15.299999999999999px",
"color": "#191919"
},
"description": {
"font-family": "'museo-sans', 'museo sans', Arial, sens-serif;",
"font-size": "16px",
"color": "#191919",
"letter-spacing": "0.5px",
"margin": "0 0 10px",
"font-weight": "200"
},
"options": {
"display": "flex",
"flex-direction": "column-reverse"
}
},
text: {
"button": "Add to cart",
"outOfStock": "Out of stock",
"unavailable": "Unavailable"
},
viewData: {
optionName: function() {
return function(text, render) {
var key = render(text).trim();
if (colors[key]) {
return '';
}
return sizes[key];
}
},
styleAttr: function() {
return function(text, render) {
var key = render(text).trim();
var styleAttr = '';
if (key) {
styleAttr = 'style="background-color: ' + colors[key] + '; border-color: ' + colors[key] + '"';
}
return styleAttr;
}
},
styleAttr2: function() {
return function(text, render) {
var key = render(text).trim();
var styleAttr2 = '';
if (key) {
styleAttr2 = 'style="color: ' + colors[key] + '"';
}
return styleAttr2;
}
},
},
},
"cart": {
templates: {
lineItems: '<div class="{{data.classes.cart.cartScroll}}{{#data.contents.note}} {{data.classes.cart.cartScrollWithCartNote}}{{/data.contents.note}}{{#data.discounts}} {{data.classes.cart.cartScrollWithDiscounts}}{{/data.discounts}}" data-element="cart.cartScroll">' + '{{#data.isEmpty}}<p class="{{data.classes.cart.empty}} {{data.classes.cart.emptyCart}}" data-element="cart.empty">{{data.text.empty}}</p>{{/data.isEmpty}}' + '<p class="shopify-buy__cart-empty-text" style="padding-bottom:20px;{{#data.isEmpty}}display: none;{{/data.isEmpty}}">{{data.text.checkProducts}}</p>' + '<div class="{{data.classes.cart.lineItems}}" data-element="cart.lineItems">{{{data.lineItemsHtml}}}</div>' + ' </div>',
},
"contents": {
"note": true
},
"styles": {
"button": {
":hover": {
"background-color": "#fff",
"color": "#191919"
},
"background-color": "#191919",
"border": "1px solid #191919",
"font-family": "'museo-sans', 'museo sans', Arial, sens-serif;",
"transition": "ease all 0.3s",
":focus": {
"background-color": "#2b2b2b",
"color": "#fff",
"outline": "none"
},
"border-radius": "0px"
},
"title": {
"color": "#191919"
},
"header": {
"color": "#191919"
},
"lineItems": {
"color": "#191919"
},
"subtotalText": {
"color": "#191919"
},
"subtotal": {
"color": "#191919"
},
"notice": {
"color": "#191919"
},
"currency": {
"color": "#191919"
},
"close": {
"color": "#191919",
":hover": {
"color": "#191919"
},
":focus": {
"outline": "none"
}
},
"empty": {
"color": "#191919"
},
"noteDescription": {
"color": "#191919"
},
"discountText": {
"color": "#191919"
},
"discountIcon": {
"fill": "#191919"
},
"discountAmount": {
"color": "#191919"
}
},
"text": {
title: 'Cart',
empty: 'Your cart is empty.',
button: 'CHECKOUT',
total: 'SUBTOTAL',
currency: 'EUR',
notice: 'Shipping and discount codes are added at checkout.',
noteDescription: 'Special instructions for sellers',
checkProducts: 'Please carefully check your order before proceeding to checkout.',
},
"events": {
afterInit: (cart) => {
cart.onCheckout = () => {
const checkoutUrl = cart.model.webUrl + '&locale=en';
// we dynamically change the checkout function.
cart.checkout.open(checkoutUrl);
};
},
},
"popup": false,
"note": true
},
"toggle": {
"styles": {
"toggle": {
"background-color": "#191919",
"transition": "ease all 0.3s",
":hover": {
"background-color": "#2b2b2b",
},
":focus": {
"background-color": "#2b2b2b",
"outline": "none"
}
}
}
},
"lineItem": {
order: ['image', 'title', 'variantTitle', 'customAttributes', 'price', 'priceWithDiscounts', 'quantity', ],
"styles": {
"variantTitle": {
"color": "#191919",
"margin-left": "80px !important",
"margin-bottom": "10px",
"float": "none",
"font-weight": "normal"
},
"itemTitle": {
"color": "#191919",
"margin-bottom": "4px"
},
"price": {
"color": "#191919"
},
"fullPrice": {
"color": "#191919"
},
"discount": {
"color": "#191919"
},
"discountIcon": {
"fill": "#191919"
},
"quantity": {
"color": "#191919"
},
"quantityIncrement": {
"color": "#191919",
"border-color": "#191919"
},
"quantityDecrement": {
"color": "#191919",
"border-color": "#191919"
},
"quantityInput": {
"color": "#191919",
"border-color": "#191919"
}
}
}
},
});
});
}
})();
Any one that can push me in the right direction?