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-black-ropegold-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - Black Rope/Gold Tip', slug: 'braided-rope-black-ropegold-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-black-ropegold-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-black-ropegold-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-ropegold-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/Gold Tip
$14 ea
item.slug === 'braided-rope-black-ropesilver-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - Black Rope/Silver Tip', slug: 'braided-rope-black-ropesilver-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-black-ropesilver-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-black-ropesilver-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-ropesilver-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/Silver 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-blue-ropegold-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - Blue Rope/Gold Tip', slug: 'braided-rope-blue-ropegold-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-blue-ropegold-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-blue-ropegold-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-ropegold-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/Gold Tip
$14 ea
item.slug === 'braided-rope-blue-ropesilver-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - (Blue Rope/Silver Tip)', slug: 'braided-rope-blue-ropesilver-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-blue-ropesilver-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-blue-ropesilver-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-ropesilver-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/Silver 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-red-ropegold-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - Red Rope/Gold Tip', slug: 'braided-rope-red-ropegold-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-red-ropegold-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-red-ropegold-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-ropegold-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/Gold Tip
$14 ea
item.slug === 'braided-rope-red-ropesilver-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - Red Rope/Silver Tip', slug: 'braided-rope-red-ropesilver-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-red-ropesilver-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-red-ropesilver-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-ropesilver-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/Silver 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
item.slug === 'braided-rope-white-ropegold-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - White Rope/Gold Tip', slug: 'braided-rope-white-ropegold-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-white-ropegold-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-white-ropegold-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-ropegold-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/Gold Tip
$14 ea
item.slug === 'braided-rope-white-ropesilver-tip')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: 'Braided Rope - White Rope/Silver Tip', slug: 'braided-rope-white-ropesilver-tip', price: '14'}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === 'braided-rope-white-ropesilver-tip'))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === 'braided-rope-white-ropesilver-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-ropesilver-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/Silver Tip
$14 ea
item.slug === '')) {
selectedAddOns = [];
} else {
selectedAddOns = [{title: '', slug: '', price: ''}];
}"
:style="{
borderColor: (selectedAddOns.some(item => item.slug === ''))
? hexToRgba($store.theme.primary, 1)
: hexToRgba($store.theme.secondary, 0.3),
backgroundColor: selectedAddOns.some(item => item.slug === '')
? 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 === '') ? 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">
$ ea