caskew2154
7/26/2019 - 9:56 AM
Product Builder
Product Builder used for Apex Pens - http://35.177.210.243/pen-builder/ First two columns will designate a category to use, the second two steps build a search string query.
var $ = jQuery;
var firstChoice = "";
var secondChoice = "";
var thirdChoice = "";
var fourthChoice = "";
var priceString = "";
var colourString = "";
function firstStep(choice) {
firstChoice = choice;
$(".pb_steps:eq(0)").attr("style","left: -100%;");
$(".step1_choices:eq(0)").attr("style","opacity: 0");
$(".step2_choices:eq(0)").attr("style","opacity: 1");
$("#step2").addClass("step-reached");
$("#step2").attr("onclick","step_change(2)");
$(".progress-track-position:eq(0)").attr("style","width: 40%");
}
function secondStep(choice) {
secondChoice = choice;
$(".pb_steps:eq(0)").attr("style","left: -200%;");
$(".step2_choices:eq(0)").attr("style","opacity: 0");
$(".step3_choices:eq(0)").attr("style","opacity: 1");
$("#step3").addClass("step-reached");
$("#step3").attr("onclick","step_change(3)");
$(".progress-track-position:eq(0)").attr("style","width: 60%");
}
function thirdStep(choice) {
thirdChoice = [];
$.each($("input[name='colour']:checked"), function(){
thirdChoice.push($(this).val());
});
thirdChoice.length >= 1 ? colourString = "filter_colour=" + thirdChoice.join("%2C") : thirdChoice == "";
$(".pb_steps:eq(0)").attr("style","left: -300%;");
$(".step3_choices:eq(0)").attr("style","opacity: 0");
$(".step4_choices:eq(0)").attr("style","opacity: 1");
$("#step4").addClass("step-reached");
$("#step4").attr("onclick","step_change(4)");
$(".progress-track-position:eq(0)").attr("style","width: 81%");
}
function fourthStep() {
var minPrice;
var maxPrice;
fourthChoice = $("input[name='price']:checked").val();
switch(fourthChoice) {
case "1":
minPrice = "0";
maxPrice = "10";
priceString = "min_price=" + minPrice + "&max_price=" + maxPrice;
break;
case "2":
minPrice = "10";
maxPrice = "20";
priceString = "min_price=" + minPrice + "&max_price=" + maxPrice;
break;
case "3":
minPrice = "20";
maxPrice = "50";
priceString = "min_price=" + minPrice + "&max_price=" + maxPrice;
break;
case "4":
minPrice = "50";
maxPrice = "100";
priceString = "min_price=" + minPrice + "&max_price=" + maxPrice;
break;
case "5":
minPrice = "100";
maxPrice = "9999";
priceString = "max_price=" + maxPrice;
break;
}
buildQuery();
}
function buildQuery() {
var category = firstChoice + "-" + secondChoice;
var filter = "/?" + priceString + "&" + colourString;
var anchorString = "/product-category/" + category + filter;
window.location.href = anchorString;
}
function step_change(stepNum) {
$(".step1_choices:eq(0)").attr("style","opacity: 0");
$(".step2_choices:eq(0)").attr("style","opacity: 0");
$(".step3_choices:eq(0)").attr("style","opacity: 0");
$(".step4_choices:eq(0)").attr("style","opacity: 0");
switch(stepNum) {
case 1:
$(".progress-track-position:eq(0)").attr("style","width: 18%");
$(".pb_steps:eq(0)").attr("style","left: 0%;");
$(".step1_choices:eq(0)").attr("style","opacity: 1");
$("#step2").removeClass("step-reached");
$("#step3").removeClass("step-reached");
$("#step4").removeClass("step-reached");
break;
case 2:
$(".progress-track-position:eq(0)").attr("style","width: 40%");
$(".pb_steps:eq(0)").attr("style","left: -100%;");
$(".step2_choices:eq(0)").attr("style","opacity: 1");
$("#step2").addClass("step-reached");
$("#step3").removeClass("step-reached");
$("#step4").removeClass("step-reached");
break;
case 3:
$(".progress-track-position:eq(0)").attr("style","width: 60%");
$(".pb_steps:eq(0)").attr("style","left: -200%;");
$(".step3_choices:eq(0)").attr("style","opacity: 1");
$("#step2").addClass("step-reached");
$("#step3").addClass("step-reached");
$("#step4").removeClass("step-reached");
break;
case 4:
$(".progress-track-position:eq(0)").attr("style","width: 80%");
$(".pb_steps:eq(0)").attr("style","left: -300%;");
$(".step4_choices:eq(0)").attr("style","opacity: 1");
$("#step2").addClass("step-reached");
$("#step3").addClass("step-reached");
$("#step4").addClass("step-reached");
break;
}
}[row label="step-container" h_align="center" class="steps-container"]
[col span__sm="12" align="center"]
<div class="progress">
<div class="progress-track">
<div class="progress-track-position"></div>
</div>
<div class="progress-milestones">
<div id="step1" class="progress-step step-reached" onclick="step_change(1)">Step One</div>
<div id="step2" class="progress-step">Step Two</div>
<div id="step3" class="progress-step">Step Three</div>
<div id="step4" class="progress-step">Step Four</div>
</div>
</div>
[/col]
[/row]
[section label="All Steps" padding="0px" padding__sm="0px" class="pb_steps"]
[row label="Step 1 Choices" style="small" h_align="center" class="step1_choices"]
[col span__sm="12" align="center" class="steps-header"]
<h2>Who is the pen for?</h2>
[/col]
[col span="3" span__sm="6"]
[ux_banner height__sm="400px" bg="4115" bg_size="original" bg_pos="24% 44%"]
[text_box width="56" width__md="90" position_x="10" position_x__md="50" position_y="10" text_align="left"]
<h1><span style="font-size: 100%;">For a Woman<strong><br /></strong></span></h1>
<p><span style="font-size: 140%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span></p>
<p><button class="button primary is-xlarge lowercase" onclick="firstStep('female')">Next Step</button></p>
[/text_box]
[/ux_banner]
[/col]
[col span="3" span__sm="6"]
[ux_banner height__sm="400px" bg="4112" bg_size="original" bg_pos="24% 44%"]
[text_box width="56" width__md="90" position_x="10" position_x__md="50" position_y="10" text_align="left"]
<h1><span style="font-size: 100%;">For a Man<strong><br /></strong></span></h1>
<p><span style="font-size: 140%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span></p>
<p><button class="button primary is-xlarge lowercase" onclick="firstStep('male')">Next Step</button></p>
[/text_box]
[/ux_banner]
[/col]
[/row]
[row label="Step 2 Choices" style="small" class="step2_choices"]
[col span__sm="12" align="center" class="steps-header"]
<h2>What type of pen are you looking for?</h2>
[/col]
[col span="3" span__sm="6" span__md="6"]
[ux_banner bg="4322" bg_size="original" bg_pos="24% 44%"]
[text_box width="63" width__sm="90" position_x="10" position_x__sm="50" position_y="10" text_align="left"]
<h1><span style="font-size: 100%;">Fountain Pen<strong><br /></strong></span></h1>
<p><button class="button primary is-xlarge lowercase" onclick="secondStep('fountain-pens')">Select</button></p>
[/text_box]
[/ux_banner]
[/col]
[col span="3" span__sm="6" span__md="6"]
[ux_banner bg="4325" bg_size="original" bg_pos="24% 44%"]
[text_box width="63" width__sm="90" position_x="10" position_x__sm="50" position_y="10" text_align="left"]
<h1><span style="font-size: 100%;">Ballpoint Pen<strong><br /></strong></span></h1>
<p><button class="button primary is-xlarge lowercase" onclick="secondStep('ballpoint-pens')">Select</button></p>
[/text_box]
[/ux_banner]
[/col]
[col span="3" span__sm="6" span__md="6"]
[ux_banner bg="4112" bg_size="original" bg_pos="24% 44%"]
[text_box width="63" width__sm="90" position_x="10" position_x__sm="50" position_y="10" text_align="left"]
<h1><span style="font-size: 100%;">Rollerball Pen<strong><br /></strong></span></h1>
<p><button class="button primary is-xlarge lowercase" onclick="secondStep('rollerball-pens')">Select</button></p>
[/text_box]
[/ux_banner]
[/col]
[col span="3" span__sm="6" span__md="6"]
[ux_banner bg="4323" bg_size="original" bg_pos="24% 44%"]
[text_box width="63" width__sm="90" position_x="10" position_x__sm="50" position_y="10" text_align="left"]
<h1><span style="font-size: 100%;">Pencil<strong><br /></strong></span></h1>
<p><button class="button primary is-xlarge lowercase" onclick="secondStep('pencils')">Select</button></p>
[/text_box]
[/ux_banner]
[/col]
[/row]
[row label="Step 3 Choices" class="step3_choices"]
[col span__sm="12" align="center" class="steps-header"]
<h2>Which colours interest you?</h2>
<p>Select as many as want</p>
[/col]
[col span__sm="12" span__md="12"]
[ux_banner height="477px" bg_color="rgba(255, 255, 255, 0.92)"]
[text_box width="90" width__sm="90" position_x="50" position_x__sm="50" position_y="50" position_y__sm="0"]
<div class="colour-choice-container">
<div class="colour-choice"><input type="checkbox" id="colour-black" name="colour" value="black"><label for="colour-black">Black</label></div>
<div class="colour-choice"><input type="checkbox" id="colour-blue" name="colour" value="blue"><label for="colour-blue">Blue</label></div>
<div class="colour-choice"><input type="checkbox" id="colour-grey" name="colour" value="grey"><label for="colour-grey">Grey</label></div>
<div class="colour-choice"><input type="checkbox" id="colour-red" name="colour" value="red"><label for="colour-red">Red</label></div>
</div>
<div class="colour-choice-button"><button class="button primary is-large lowercase" onclick="thirdStep()">Next Step</button></div>
[/text_box]
[/ux_banner]
[/col]
[/row]
[row label="Step 4 Choices" class="step4_choices"]
[col span__sm="12" align="center" class="steps-header"]
<h2>What is your budget?</h2>
[/col]
[col span__sm="12" span__md="12"]
[ux_banner height="477px" bg_color="rgba(255, 255, 255, 0.92)"]
[text_box width="90" width__sm="90" position_x="50" position_x__sm="50" position_y="50" position_y__sm="0"]
<div class="budget-chooser">
<div><input type="radio" id="price_1" name="price" value="1" checked><label for="price_1"><h2>Under £10</h2></label></div>
<div><input type="radio" id="price_2" name="price" value="2"><label for="price_2"><h2>£10 - £20</h2></label></div>
<div><input type="radio" id="price_3" name="price" value="3"><label for="price_3"></p>
<h2>£20 - £50</h2>
<p></label></div>
<div><input type="radio" id="price_4" name="price" value="4"><label for="price_4"><h2>£50 - £100</h2></label></div><div><input type="radio" id="price_5" name="price" value="5"><label for="price_5"><h2>£100+</h2></label></div></div>
<div class="budget-choice-button"><button class="button primary is-large lowercase" onclick="fourthStep()">Go!</button></div>
[/text_box]
[/ux_banner]
[/col]
[/row]
[/section]