<?php if( is_home() ) : ?>
Для главной
<?php else : ?>
Для остальных
<?php endif; ?><?php if( is_front_page() ) : ?>
Для главной
<?php else : ?>
Для остальных
<?php endif; ?>
<v-card>
<v-card-title>Выберите модель</v-card-title>
<v-btn-toggle class="mb-10" v-model="currentButton">
<v-btn color="#546E7A" :key="btn.id" v-for="btn in btnModelInfo">{{btn.name}}</v-btn>
</v-btn-toggle>
<!-- Здесь должно менять изображение в зависимости от выбранного цвета-->
<v-btn-toggle>
<v-btn :color="color" :key="name" v-for="[name, color] in currentColors" @click="changeColor(name)"></v-btn>
</v-btn-toggle>
</v-card>{
data() {
return {
btnModelInfo: [
{id: '1', name: 'model_1' , colors: ['white', 'blue', 'red']},
{id: '2', name: 'model_2' , colors: ['red', 'green', 'blue']},
],
allColors: {
white: '#ffffff',
blue: "#0000ff ",
red: '#ff0000',
green: '#00ff00',
},
currentButton: null
}
},
computed: {
currentColors() {
return this.currentButton === null ? [] : this.btnModelInfo[this.currentButton]
.colors
.map(name => [name, this.allColors[name]]);
}
},
methods: {
changeColor(color) {
//Здесь должно менять изображение в зависимости от выбранного цвета
}
}
}
data: () => ({
activeItem: null,
items: [
{
id: 69,
name: 'hello, world!!',
colors: [ 'white', 'blue', 'red' ],
color: null,
},
{
id: 187,
name: 'fuck the world',
colors: [ 'red', 'green', 'blue' ],
color: null,
},
{
id: 666,
name: 'fuck everything',
colors: [ '#fb1', '#e2c', '#3a9', '#cb9' ],
color: null,
},
],
}),<v-btn-toggle class="mb-10" v-model="activeItem">
<v-btn color="#546E7A" v-for="n in items" :key="n.id" :value="n">
{{ n.name }}
<v-badge v-if="n.color" :color="n.color" bordered inline tile></v-badge>
</v-btn>
</v-btn-toggle>
<v-spacer></v-spacer>
<v-btn-toggle v-if="activeItem" v-model="activeItem.color">
<v-btn v-for="n in activeItem.colors" :key="n" :color="n" :value="n"></v-btn>
</v-btn-toggle>
add_action( 'after_setup_theme', function() {
add_theme_support( 'woocommerce' );
} );
