JavaScript code to toggle visibility of a section on checkbox click.

First, create the section that you want to show/hide. Give it a unique ID so you can reference it later.

   <div class="pdp-controls personalization-label" id="pdp-controls-first" data-validation="control">
                  <label for="{{cartOptionId}}">{{configuratorLabels}} : </label>
                  <select class="product-views-option-text-input" {{#if showUploadLogo}} name="showUploadLogo-block"
                    {{/if}} data-action="field-trigger" data-id="{{cartOptionId}}" type="{{type}}"
                    id="{{cartOptionId}}-inputid">
                    {{#if showUploadLogo}}<option value="no">No</option> {{/if}}
                    {{#each values}}
                    {{#if internalid}}
                    <option value="{{internalid}}" data-available="{{isAvailable}}" {{#if selected}}selected{{/if}}>
                      {{label}}</option>
                    {{/if}}
                    {{/each}}
                  </select>
                </div>

Next, add a checkbox to your page that will trigger the show/hide functionality. Give it a unique ID and add an onclick event that will call a JavaScript function to show/hide the section.

<div>
            <label class="personalized-logo-label" data-action="logo-imprint" for="personalized-view-logo-checkbox">
              <input type="checkbox" id="personalized-logo-checkbox" class="personalized-view-logo-checkbox"
                data-action="show-personalized-logo-option">
              <h2>{{translate 'I would you like to add a color imprint for $90'}}</h2>
            </label>
          </div>

Finally, create the showHideSection() function in JavaScript that will show/hide the section based on the checkbox state.

showLogoOptionPersonalization: function showLogoOptionPersonalization() {
				var checkvalue = document.getElementById("personalized-logo-checkbox").checked ? true : false;
				console.log("checkvalue", checkvalue);
				var self = this;
				console.log('self=', self);
				if (checkvalue) {
					console.log("logo sucess");
					$('.pdp-configurator-logo-block').show();
					console.log('value=', $('.pdp-configurator-logo-block').show());
					//this.pdp.setOption('custcol_ag_havepersonalization', 'T');
				}
				else {
					console.log("logo error");
					$('.pdp-configurator-logo-block').hide();

				}

			},

Leave a comment

Your email address will not be published. Required fields are marked *