Настройка продукта для сайта электронной коммерции

Question

Я планирую создать веб-сайт интернет-магазина мебели.

В настоящее время у меня есть некоторые параметры страницы настроек продукта, такие как цвет, типы дерева, высота и ширина, а также некоторые дополнения, такие как зеркало и логотип.

Можно ли кодировать способ, которым, когда пользователь выбирает определенную опцию настройки, такую ​​как цвет, и изображения, показанные на странице настройки продукта, будут обновляться соответственно.

Например, изображения, показанные на странице, представляют собой шкаф коричневого цвета, но когда пользователь выбирает синий цвет, цвет шкафа будет обновлен в синий шкаф. Затем, если пользователь захочет добавить другое зеркало в шкаф, изображения будут обновлены и станут синим шкафом с зеркалом.

Любая статья или учебник, относящиеся к этим полям, я могу сослаться?

Answer 1

Роксас, я создал вам фрагмент кода, который вы можете нажать на кнопку "Выполнить фрагмент" ниже, чтобы увидеть код, выполняющий то, что вы пытаетесь достичь

$(document).ready(function(){

    $(".red-circle").click(function(){
        $(".color").addClass("red");
        $(".color").removeClass("blue");
         $(".color").removeClass("green");
    });
    
     $(".blue-circle").click(function(){
        $(".color").addClass("blue");
        $(".color").removeClass("red");
         $(".color").removeClass("green");
    });
    
         $(".green-circle").click(function(){
        $(".color").addClass("green");
        $(".color").removeClass("red");
        $(".color").removeClass("blue");
    });
    
        $(".circle-pick").click(function(){
        $(".color").addClass("circle");
        $(".color").removeClass("star");
         $(".color").removeClass("square");
    });
    
     $(".square-pick").click(function(){
        $(".color").addClass("square");
        $(".color").removeClass("star");
         $(".color").removeClass("circle");
    });
    
         $(".star-pick").click(function(){
        $(".color").addClass("star");
        $(".color").removeClass("square");
        $(".color").removeClass("circle");
    });
});

.red-circle
{
  background: red;
  border-radius: 100px;
  height: 20px;
  width: 20px;
  float: left;
  margin-right: 5px;
}


.blue-circle
{
  background: blue;
  border-radius: 100px;
  height: 20px;
  width: 20px;
  float: left;
  margin-right: 5px;
}

.green-circle
{
  background: green;
  border-radius: 100px;
  height: 20px;
  width: 20px;
  float: left;
  margin-right: 5px;
}

.color
{
background: black;
}

.red
{
background: red;
}

.blue
{
background: blue;
}

.green
{
background: green;
}

.color
{
width: 100px;
height: 100px;
border-radius: 0;
display: block;
margin: 0 auto;
}

h2
{
text-align: center;
}


  .square-pick, .circle-pick
  {
   background:black;
   height: 20px;
   width: 20px;
   margin-right: 5px;
   float: left;

  }
  .square, .square-pick
  {
  border-radius: 0;
  }

 .circle, .circle-pick
  {
  border-radius: 100px;
  }
  
    .color.star, .color.star:after, .color.star:before
  {
  border-bottom-color: black;
  background: transparent;
  }
  
  .red.star, .red.star:after, .red.star:before
  {
  border-bottom-color: red;
  background: transparent;
  }
  
   .blue.star, .blue.star:after, .blue.star:before
  {
  border-bottom-color: blue;
  background: transparent;
  }
  
   .green.star, .green.star:after, .green.star:before
  {
  border-bottom-color: green;
  background: transparent;
  }

  .star {
    // margin: 50px 0;
     position: relative;
     text-align: center;
     display: block;
     color: black;
     width: 0px;
     height: 0px;
     border-right:  50px solid transparent;
     border-bottom: 35px solid;
     border-left:   50px solid transparent;
     -moz-transform:    rotate(35deg);
     -webkit-transform: rotate(35deg);
     -ms-transform:     rotate(35deg);
     -o-transform:      rotate(35deg);
  }
  .star:before {
     border-bottom: 40px solid;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
     position: absolute;
     height: 0;
     width: 0;
     top: -23px;
     left: -33px;
     display: block;
     content: '';
     -webkit-transform: rotate(-35deg);
     -moz-transform:    rotate(-35deg);
     -ms-transform:     rotate(-35deg);
     -o-transform:      rotate(-35deg);

  }
  .star:after {
    position: absolute;
    display: block;
    color: red;
    top: 3px;
    left: -53px;
    width: 0px;
    height: 0px;
    border-right: 50px solid transparent;
    border-bottom: 35px solid;
    border-left: 50px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform:    rotate(-70deg);
    -ms-transform:     rotate(-70deg);
    -o-transform:      rotate(-70deg);
    content: '';
 }

  .star-pick {
     float: left;
     margin: 10px 0;
     position: relative;
     display: block;
     color: red;
     width: 0px;
     height: 0px;
     border-right:  20px solid transparent;
     border-bottom: 14px  solid black;
     border-left:   20px solid transparent;
     -moz-transform:    rotate(35deg);
     -webkit-transform: rotate(35deg);
     -ms-transform:     rotate(35deg);
     -o-transform:      rotate(35deg);
  }
  .star-pick:before {
     border-bottom: 16px solid black;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     position: absolute;
     height: 0;
     width: 0;
     top: -9px;
     left: -13px;
     display: block;
     content: '';
     -webkit-transform: rotate(-35deg);
     -moz-transform:    rotate(-35deg);
     -ms-transform:     rotate(-35deg);
     -o-transform:      rotate(-35deg);

  }
  .star-pick:after {
    position: absolute;
    display: block;
    color: black;
    top: 3px;
    left: -21px;
    width: 0px;
    height: 0px;
    border-right: 20px solid transparent;
    border-bottom: 14px solid black;
    border-left: 20px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform:    rotate(-70deg);
    -ms-transform:     rotate(-70deg);
    -o-transform:      rotate(-70deg);
    content: '';
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2>Color Box</h2>
<div class="color" ></div>

<br/>
<p>Click a color</p>
<div class="red-circle"></div>
<div class="blue-circle"></div>
<div class="green-circle"></div>

<br/>
<p>Click a shape</p>
<div class="circle-pick"></div>
<div class="square-pick"></div>
<div class="star-pick"></div>