-1

I am planning to create a online furniture e-commerce website.

I currently having some product customization page option such as color, types of woods and the height and width as well as some add-on such as mirror and some logo.

Is it possible I code the way which when the user select certain customization option such as the color, and the images showed in the product customization page will update accordingly.

For example, the images showed in the page is a cupboard which is brown color, but when the user choose blue color, the cupboard color will be updated into blue cupboard. Then, if user want to add another mirror into cupboard, then the images will be updated become blue cupboard with mirror.

Any article or tutorial related to these fields can i refer to?

Roxas
  • 1
  • 5
  • You might want to investigate javascript onclick events - https://codepen.io/pradeepanvi/pen/dzjEby – Colin Gell Jul 21 '18 at 21:42
  • yeah, thanks thats help alot. By the way, how do i save previous setting to get something new. For example , I click red first, then the image come out with red color, after that i click circle then it come out image with red circle. – Roxas Aug 07 '18 at 14:30
  • 1
    I want to avoid a scenario where i click red, it come out image with red, then i click circle it just come out empty color circle, I want it fill with the color that i clicked previously. – Roxas Aug 07 '18 at 14:34

1 Answers1

0

Roxas, I've created you a code snippet you can click on the run snippet button below to see the code performing what you are trying to achieve

$(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>
Colin Gell
  • 372
  • 1
  • 13
  • yeah...this is basically what i want to do at first – Roxas Aug 08 '18 at 10:34
  • But, i do want have shape option, like after i click blue, then i click circle, it come out blue circle...something scenario like this – Roxas Aug 08 '18 at 10:34
  • @Roxas Very similar coding to do such, I've edited the code so that shapes for circle, square and star have been added, the star option is a little more complex but gives you the idea – Colin Gell Aug 08 '18 at 23:29
  • thanks~ I also done the drag and drop , I can't figure out the way to combine the color section with the drag and drop option. For example, when i click on red color, I drag a rectangle from the list then it become red color – Roxas Aug 10 '18 at 18:00