Current path: home/webdevt/www/demo2/wp-content/themes/blocksy/static/js/customizer/sync/variables/woocommerce/
?? Go up: /home/webdevt/www/demo2/wp-content/themes/blocksy/static/js/customizer/sync/variables
import { withKeys } from '../../helpers'
import { typographyOption } from '../typography'
import { handleBackgroundOptionFor } from '../background'
export const getWooArchiveVariablesFor = () => ({
woo_card_layout: (v) => {
let variables = []
v.map((layer) => {
let selectorsMap = {
product_image: '[data-products] .product figure',
product_title:
'[data-products] .product .woocommerce-loop-product__title',
product_price: '[data-products] .product .price',
product_rating: '[data-products] .product .ct-woo-card-rating',
// product_meta: '[data-products] .product .entry-meta',
product_desc: '[data-products] .product .entry-excerpt',
product_add_to_cart:
'[data-products] .product .ct-woo-card-actions',
product_add_to_cart_and_price:
'[data-products] .product .ct-woo-card-actions',
product_stock: '[data-products] .product .ct-woo-card-stock',
// companion
product_brands: '[data-products] .product .ct-product-brands',
product_swatches:
'[data-products] .product .ct-card-variation-swatches',
product_sku: '[data-products] .product .ct-product-sku',
product_stock_scarcity:
'[data-products] .product .ct-product-stock-scarcity',
}
if (selectorsMap[layer.id]) {
variables = [
...variables,
{
selector: selectorsMap[layer.id],
variable: 'product-element-spacing',
responsive: true,
unit: 'px',
extractValue: () => {
let defaultValue = 10
if (
layer.id === 'product_image' ||
layer.id === 'product_desc'
) {
defaultValue = 25
}
return layer.spacing || defaultValue
},
},
]
}
if (layer.id === 'product_brands') {
variables = [
...variables,
{
selector: selectorsMap[layer.id],
variable: 'product-brand-logo-size',
responsive: true,
unit: 'px',
extractValue: () => {
return layer.brand_logo_size || 60
},
},
{
selector: selectorsMap[layer.id],
variable: 'product-brands-gap',
responsive: true,
unit: 'px',
extractValue: () => {
return layer.brand_logo_gap || 10
},
},
]
}
if (layer.id === 'product_meta') {
variables = [
...variables,
{
selector: `[data-products] .product .entry-meta[data-id="${
layer?.__id || 'default'
}"]`,
variable: 'product-element-spacing',
responsive: true,
unit: 'px',
extractValue: () => {
return layer.spacing || 10
},
},
]
}
if (layer.id === 'content-block') {
variables = [
...variables,
{
selector: `[data-products] .product .ct-product-content-block[data-id="${
layer?.__id || 'default'
}"]`,
variable: 'product-element-spacing',
responsive: true,
unit: 'px',
extractValue: () => {
return layer.spacing || 10
},
},
]
}
if (
[
'acf_field',
'metabox_field',
'toolset_field',
'jetengine_field',
'custom_field',
'pods_field',
].includes(layer.id)
) {
variables = [
...variables,
{
selector: `[data-products] .product .ct-dynamic-data-layer[data-field*=":${(
layer?.__id || 'default'
).slice(0, 6)}"]`,
variable: 'product-element-spacing',
responsive: true,
unit: 'px',
extractValue: () => {
return layer.spacing || 10
},
},
]
}
})
return variables
},
// archive columns
...withKeys(['woocommerce_catalog_columns', 'blocksy_woo_columns'], {
selector: '[data-products]',
variable: 'shop-columns',
responsive: true,
unit: '',
extractValue: () => {
const value = wp.customize('blocksy_woo_columns')()
return {
desktop: `CT_CSS_SKIP_RULE`,
tablet: `repeat(${value.tablet}, minmax(0, 1fr))`,
mobile: `repeat(${value.mobile}, minmax(0, 1fr))`,
}
},
}),
// archive columns & rows gap
shopCardsGap: {
selector: '[data-products]',
variable: 'grid-columns-gap',
responsive: true,
unit: '',
},
shopCardsRowGap: {
selector: '[data-products]',
variable: 'grid-rows-gap',
responsive: true,
unit: '',
},
// border radius
cardProductRadius: {
selector: '[data-products] .product',
type: 'spacing',
variable: 'theme-border-radius',
emptyValue: 3,
responsive: true,
},
// product title
...typographyOption({
id: 'cardProductTitleFont',
selector:
'[data-products] .woocommerce-loop-product__title, [data-products] .woocommerce-loop-category__title',
}),
cardProductTitleColor: [
{
selector:
'[data-products] .woocommerce-loop-product__title, [data-products] .woocommerce-loop-category__title',
variable: 'theme-heading-color',
type: 'color:default',
responsive: true,
},
{
selector:
'[data-products] .woocommerce-loop-product__title, [data-products] .woocommerce-loop-category__title',
variable: 'theme-link-hover-color',
type: 'color:hover',
responsive: true,
},
],
// product excerpt
...typographyOption({
id: 'cardProductExcerptFont',
selector: '[data-products] .entry-excerpt',
}),
cardProductExcerptColor: {
selector: '[data-products] .entry-excerpt',
variable: 'theme-text-color',
type: 'color',
responsive: true,
},
// product stock
...typographyOption({
id: 'cardProductStockFont',
selector: '[data-products] .ct-woo-card-stock',
}),
cardProductStockColor: {
selector: '[data-products] .ct-woo-card-stock',
variable: 'theme-text-color',
type: 'color',
responsive: true,
},
// product price
...typographyOption({
id: 'cardProductPriceFont',
selector: '[data-products] .product .price',
}),
cardProductPriceColor: {
selector: '[data-products] .product .price',
variable: 'theme-text-color',
type: 'color',
responsive: true,
},
// product SKU
...typographyOption({
id: 'cardProductSkuFont',
selector: '[data-products] .ct-product-sku',
}),
cardProductSkuColor: {
selector: '[data-products] .ct-product-sku',
variable: 'theme-text-color',
type: 'color',
responsive: true,
},
// star rating
starRatingColor: [
{
selector: ':root',
variable: 'star-rating-initial-color',
type: 'color:default',
},
{
selector: ':root',
variable: 'star-rating-inactive-color',
type: 'color:inactive',
},
],
// categories/meta
...typographyOption({
id: 'card_product_categories_font',
selector: '[data-products] .entry-meta',
}),
cardProductCategoriesColor: [
{
selector: '[data-products] .entry-meta',
variable: 'theme-link-initial-color',
type: 'color:default',
responsive: true,
},
{
selector: '[data-products] .entry-meta',
variable: 'theme-link-hover-color',
type: 'color:hover',
responsive: true,
},
],
card_product_categories_button_type_font_colors: [
{
selector: '[data-products] [data-type="pill"]',
variable: 'theme-button-text-initial-color',
type: 'color:default',
responsive: true,
},
{
selector: '[data-products] [data-type="pill"]',
variable: 'theme-button-text-hover-color',
type: 'color:hover',
responsive: true,
},
],
card_product_categories_button_type_background_colors: [
{
selector: '[data-products] [data-type="pill"]',
variable: 'theme-button-background-initial-color',
type: 'color:default',
responsive: true,
},
{
selector: '[data-products] [data-type="pill"]',
variable: 'theme-button-background-hover-color',
type: 'color:hover',
responsive: true,
},
],
// archive background
...handleBackgroundOptionFor({
id: 'shop_archive_background',
selector: '[data-prefix="woo_categories"]',
responsive: true,
}),
// cards type 1
cardProductButton1Text: [
{
selector: '[data-products="type-1"]',
variable: 'theme-button-text-initial-color',
type: 'color:default',
responsive: true,
},
{
selector: '[data-products="type-1"]',
variable: 'theme-button-text-hover-color',
type: 'color:hover',
responsive: true,
},
],
cardProductButtonBackground: [
{
selector: '[data-products="type-1"]',
variable: 'theme-button-background-initial-color',
type: 'color:default',
responsive: true,
},
{
selector: '[data-products="type-1"]',
variable: 'theme-button-background-hover-color',
type: 'color:hover',
responsive: true,
},
],
// cards type 2
cardProductButton2Text: [
{
selector: '[data-products="type-2"] .ct-woo-card-actions',
variable: 'theme-button-text-initial-color',
type: 'color:default',
responsive: true,
},
{
selector: '[data-products="type-2"] .ct-woo-card-actions',
variable: 'theme-button-text-hover-color',
type: 'color:hover',
responsive: true,
},
],
cardProductBackground: {
selector: '[data-products="type-2"]',
variable: 'backgroundColor',
type: 'color',
responsive: true,
},
cardProductShadow: {
selector: '[data-products="type-2"]',
type: 'box-shadow',
variable: 'theme-box-shadow',
responsive: true,
},
cardProductBorder: {
selector: '[data-products="type-2"]',
variable: 'card-border',
type: 'border',
responsive: true,
},
// csrds type 1 and type 3
shop_cards_alignment: [
{
selector: '[data-products] .product',
variable: 'horizontal-alignment',
responsive: true,
unit: '',
},
{
selector: '[data-products] .product',
variable: 'text-horizontal-alignment',
responsive: true,
unit: '',
extractValue: (value) => {
if (!value.desktop) {
return value
}
if (value.desktop === 'flex-start') {
value.desktop = 'start'
}
if (value.desktop === 'flex-end') {
value.desktop = 'end'
}
if (value.tablet === 'flex-start') {
value.tablet = 'start'
}
if (value.tablet === 'flex-end') {
value.tablet = 'end'
}
if (value.mobile === 'flex-start') {
value.mobile = 'start'
}
if (value.mobile === 'flex-end') {
value.mobile = 'end'
}
return value
},
},
],
})