Optional Add-ons:
item.slug === 'braided-rope-black-ropeblack-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - Black Rope/Black Tip', slug: 'braided-rope-black-ropeblack-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-black-ropeblack-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-black-ropeblack-tip')
? hexToRgba($store.theme.secondary, 0.3)
: 'transparent'
}"
@mouseover="$el.style.backgroundColor = hexToRgba($store.theme.secondary, 0.2)"
@mouseleave="$el.style.backgroundColor = selectedAddOns.some(item => item.slug === 'braided-rope-black-ropeblack-tip') ? hexToRgba($store.theme.secondary, 0.3) : 'transparent'"
class="flex items-center justify-between w-full px-4 py-3 border transition-colors duration-200 cursor-pointer text-sm">
Braided Rope - Black Rope/Black Tip
$14 ea
item.slug === 'braided-rope-blue-ropeblack-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - Blue Rope/Black Tip', slug: 'braided-rope-blue-ropeblack-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-blue-ropeblack-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-blue-ropeblack-tip')
? hexToRgba($store.theme.secondary, 0.3)
: 'transparent'
}"
@mouseover="$el.style.backgroundColor = hexToRgba($store.theme.secondary, 0.2)"
@mouseleave="$el.style.backgroundColor = selectedAddOns.some(item => item.slug === 'braided-rope-blue-ropeblack-tip') ? hexToRgba($store.theme.secondary, 0.3) : 'transparent'"
class="flex items-center justify-between w-full px-4 py-3 border transition-colors duration-200 cursor-pointer text-sm">
Braided Rope - Blue Rope/Black Tip
$14 ea
item.slug === 'braided-rope-red-ropeblack-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - Red Rope/Black Tip', slug: 'braided-rope-red-ropeblack-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-red-ropeblack-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-red-ropeblack-tip')
? hexToRgba($store.theme.secondary, 0.3)
: 'transparent'
}"
@mouseover="$el.style.backgroundColor = hexToRgba($store.theme.secondary, 0.2)"
@mouseleave="$el.style.backgroundColor = selectedAddOns.some(item => item.slug === 'braided-rope-red-ropeblack-tip') ? hexToRgba($store.theme.secondary, 0.3) : 'transparent'"
class="flex items-center justify-between w-full px-4 py-3 border transition-colors duration-200 cursor-pointer text-sm">
Braided Rope - Red Rope/Black Tip
$14 ea
item.slug === 'braided-rope-white-ropeblack-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - White Rope/Black Tip', slug: 'braided-rope-white-ropeblack-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-white-ropeblack-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-white-ropeblack-tip')
? hexToRgba($store.theme.secondary, 0.3)
: 'transparent'
}"
@mouseover="$el.style.backgroundColor = hexToRgba($store.theme.secondary, 0.2)"
@mouseleave="$el.style.backgroundColor = selectedAddOns.some(item => item.slug === 'braided-rope-white-ropeblack-tip') ? hexToRgba($store.theme.secondary, 0.3) : 'transparent'"
class="flex items-center justify-between w-full px-4 py-3 border transition-colors duration-200 cursor-pointer text-sm">
Braided Rope - White Rope/Black Tip
$14 ea