String Unifier

A common use would be on a booking forms.

How to use?

hs.strings-unifier.js resource is suitable for website with lots of page content. Customize the look and functionality of the plugin as much as you want with unlimited possibilities.

Copy-paste the following <script> near the end of your pages under JS Space to enable it.

            
              <script src="../../assets/js/components/hs.strings-unifier.js"></script>

The script requires Quantity Counter (hs.quantity-counter.js).

            
              <script src="../../assets/js/components/hs.quantity-counter.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

            
              <script>
                $(document).on('ready', function () {
                  // initialization of quantity counter
                  var counter = 0;

                  $.HSCore.components.HSQantityCounter.init('.js-quantity', {
                    stopIncrease: function() {
                      if (counter >= 19) return true;
                    },
                    afterIncrease: function() {
                      counter += 1;
                    },
                    afterDecrease: function() {
                      counter -= 1;
                    },
                    afterChange: function() {
                      if(counter < 20) {
                        // initialization of strings splitter
                        $.HSCore.components.HSStringsUnifier.init('.js-string-unifier');
                      }
                    }
                  });
                });
              </script>

Basic example

Basic example that highlights today's day.

Adults Above 12
1
Children Ages 2–12
0
Infants Under 2
0
Apply 
            
              <div class="form-group mb-3">
                <div class="dropdown">
                  <div class="u-guests input-group position-relative" data-toggle="dropdown" aria-expanded="false">
                    <div class="input-group-prepend z-index-2">
                      <div class="input-group-text">
                        <i class="svg-icon svg-icon-2xs text-muted">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18">
                            <path d="M14.286,18H1.715A1.7,1.7,0,0,1,0,16.313V14.85a4.768,4.768,0,0,1,4.8-4.725h.6a6.307,6.307,0,0,0,5.207,0h.6A4.769,4.769,0,0,1,16,14.85v1.462A1.7,1.7,0,0,1,14.286,18ZM8,9A4.541,4.541,0,0,1,3.429,4.5a4.572,4.572,0,0,1,9.142,0A4.541,4.541,0,0,1,8,9Z" fill="#000000" />
                          </svg>
                        </i>
                      </div>
                    </div>

                    <input class="js-string-unifier u-guests__input form-control bg-white text-muted" type="text" value="1 Guest" readonly
                           data-su-options='{
                             "data": [
                               {
                                 "title": "Guest",
                                 "titleMultiplier": "s",
                                 "target": ["#adultsQty", "#childrenQty"]
                               },
                               {
                                 "title": "Infant",
                                 "titleMultiplier": "s",
                                 "target": ["#infantsQty"]
                               }
                             ]
                           }'>

                    <svg class="u-guests__input-i" xmlns="http://www.w3.org/2000/svg" width="11.964" height="6.974" viewBox="0 0 11.964 6.974">
                      <g data-name="chevron down" transform="translate(-0.018 -0.013)">
                        <path d="M5.517,6.789.193,1.675a.614.614,0,0,1,0-.893l.621-.6a.677.677,0,0,1,.929,0l4.24,4.053L10.222.184a.677.677,0,0,1,.929,0l.621.6a.614.614,0,0,1,0,.893L6.447,6.789A.677.677,0,0,1,5.517,6.789Z" transform="translate(0.018 0.013)" />
                      </g>
                    </svg>
                  </div>

                  <div class="dropdown-menu dropdown-menu-right font-size-base u-guests-options p-4 shadow">
                    <div class="d-flex justify-content-between mb-3">
                      <div class="u-guests-options__label font-weight-medium">
                        Adults
                        <em class="small u-guests-options__label-info">Above 12</em>
                      </div>

                      <div class="js-quantity u-guests-options__data d-flex align-items-center"
                           data-min-val="1">
                        <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                          <i class="svg-icon svg-icon-xs text-primary">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                              </g>
                            </svg>
                          </i>
                        </span>

                        <span id="adultsQty" class="js-result u-guests-options__value">1</span>

                        <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                          <i class="svg-icon svg-icon-xs text-primary">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                              </g>
                            </svg>
                          </i>
                        </span>
                      </div>
                    </div>

                    <div class="d-flex justify-content-between mb-3">
                      <div class="u-guests-options__label font-weight-medium">
                        Children
                        <em class="small u-guests-options__label-info">Ages 2–12</em>
                      </div>

                      <div class="js-quantity u-guests-options__data d-flex align-items-center">
                        <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                          <i class="svg-icon svg-icon-xs text-primary">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                              </g>
                            </svg>
                          </i>
                        </span>

                        <span id="childrenQty" class="js-result u-guests-options__value">0</span>

                        <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                          <i class="svg-icon svg-icon-xs text-primary">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                              </g>
                            </svg>
                          </i>
                        </span>
                      </div>
                    </div>

                    <div class="d-flex justify-content-between mb-3">
                      <div class="u-guests-options__label font-weight-medium">
                        Infants
                        <em class="small u-guests-options__label-info">Under 2</em>
                      </div>

                      <div class="js-quantity u-guests-options__data d-flex align-items-center">
                        <span class="js-minus u-guests-options__ctrl u-guests-options__ctrl--minus">
                          <i class="svg-icon svg-icon-xs text-primary">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                              </g>
                            </svg>
                          </i>
                        </span>

                        <span id="infantsQty" class="js-result u-guests-options__value">0</span>

                        <span class="js-plus u-guests-options__ctrl u-guests-options__ctrl--plus">
                          <i class="svg-icon svg-icon-xs text-primary">
                            <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect fill="#000000" x="4" y="11" width="16" height="2" rx="1"></rect>
                                <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) " x="4" y="11" width="16" height="2" rx="1"></rect>
                              </g>
                            </svg>
                          </i>
                        </span>
                      </div>
                    </div>

                    <div class="text-right">
                      <a class="u-guests-options__apply" href="javascript:;">Apply</a>
                    </div>
                  </div>
                </div>
              </div>

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-su-options="".

Attribute Description

data-su-options

data-su-options contains the following data:

  • title,
  • titleMultiplier,
  • target.

In the title field we specify the name (for example, "Guest"); in the titleMultiplier - the rule of writing the name in the plural; in the target - id fields, the values of which will be used in the final field.