Customize Form Component to do a market place

[DSMejantel]

Hi,
I'm working about a market place to sale the handworked productions of my pupils.
I customize the form component with this line :
line 85 : {{#if top_image}}<img src="{{top_image}}" class="card-img-top" />{{/if}}
It's look pretty like that :

I'm thinking about the possibility to customize the input form like this :

Do you think I can use only try that with handlebars and css or do I have use javascript too ?

[lovasoa]

Hi @DSMejantel , and merry Christmas !

Here is a small example for a custom component

webstore custom component

### webstore.handlebars

<form class="row g-3 webstore_form" method="post">
  <!-- submit button -->
  <button type="submit" class="btn btn-primary" disabled>Order</button>
  {{#each_row}}
    <div class="col-sm-6 col-lg-4 col-xl-3">
      <div class="card h-100 shadow-sm hover-shadow-lg transition-shadow">
        <div class="position-relative">
          <div
            class="img-responsive img-responsive-1x1 card-img-top bg-cover"
            style="background-image: url('{{image_url}}')"
          ></div>
          <div class="position-absolute top-0 end-0 m-2">
            <div class="badge bg-white shadow-sm text-dark">{{stock}}
              left</div>
          </div>
        </div>

        <div class="card-body p-3">
          <h3 class="card-title mb-1 d-flex justify-content-between">
            <span>{{title}}</span>
            <span class="badge bg-blue text-white">{{price}}€</span>
          </h3>
          <p class="text-muted small mb-3">{{description}}</p>

          <div class="input-group input-group-sm w-50 mx-auto webstore_counter">
            <button
              class="btn btn-light fs-2 fw-bold w-25 minus"
              type="button"
            >−</button>
            <input
              name="{{id}}"
              type="text"
              inputmode="numeric"
              class="form-control text-center border-0 fw-bold"
              value="0"
              min="0"
              max="{{stock}}"
            />
            <button
              class="btn btn-light fs-2 fw-bold w-25 plus"
              type="button"
            >+</button>
          </div>
        </div>
      </div>
    </div>
  {{/each_row}}
</form>

<script nonce="{{@csp_nonce}}" defer type="module">
  const submitButton = document.querySelector('.webstore_form button[type="submit"]');
  const counters = document.getElementsByClassName('webstore_counter');
  for (const counter of counters) {
    const plus = counter.querySelector('.plus');
    const minus = counter.querySelector('.minus');
    const input = counter.querySelector('input');
    plus.addEventListener('click', () => {
      input.value = parseInt(input.value) + 1;
      submitButton.disabled = false;
    });
    minus.addEventListener('click', () => {
      input.value = parseInt(input.value) - 1;
      submitButton.disabled = false;
    });
  }
</script>

### index.sql

select 'webstore' as component;

select 1 as id, 'Candle' as title, 'Smells like a candle' as description, 10 as price, 100 as stock, 'https://images.pexels.com/photos/301703/pexels-photo-301703.jpeg' as image_url;
select 2 as id, 'Chocolate' as title, 'Tasty chocolate' as description, 20 as price, 200 as stock, 'https://images.pexels.com/photos/1272838/pexels-photo-1272838.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2' as image_url;

[DSMejantel]

Thanks for your advice @lovasoa !
I succesful build the webstore component.
It's a independent component and if we want to write a multistep form we have to register the values of the cart with two temporary tables like cart_id for the order and cart for the order's items. It's like the database soluce of multistep form with database in the documentation of Sqlpage.

Here is the new component : webstore.handlebars with a inclued script do add or subtract value and limit the value between min and max limits.
`

<form 
class="row g-3 webstore_form" 
    method="{{default method "post"}}"
    {{#if enctype}}enctype="{{enctype}}"{{/if}}
    {{#if action}}action="{{action}}"   {{/if}}
>
 
  {{#each_row}}
  {{~#if (eq type "hidden")}}
                <input type="hidden" name="{{name}}" {{#if id}}id="{{id}}" {{/if}}value="{{value}}">
            {{else}}
    <div class="col-sm-6 col-lg-4 col-xl-3">
      <div class="card h-100 shadow-sm hover-shadow-lg transition-shadow">
        <div class="position-relative">
          <div
            class="img-responsive img-responsive-1x1 card-img-top bg-cover"
            style="background-image: url('{{image_url}}')"
          ></div>
          <div class="position-absolute top-0 end-0 m-2">
            <div class="badge bg-white shadow-sm text-dark">{{stock}}
              en stock</div>
          </div>
        </div>

        <div class="card-body p-3">
          <h3 class="card-title mb-1 d-flex justify-content-between">
            <span>{{title}}</span>
            <span class="badge bg-blue text-white">{{price}}€</span>
          </h3>
          <p class="text-muted small mb-3">{{description}}</p>

          <div class="input-group input-group-sm w-50 mx-auto webstore_counter">
            <button
              class="btn btn-light fs-2 fw-bold w-25 minus"
              type="button"
            >−</button>
            <input
              name="{{name}}" {{#if required}}required{{/if}}
              type="text"
              inputmode="numeric"
              class="form-control text-center border-0 fw-bold"
              value="0"
              min="0"
              max="{{stock}}"
            />
            <button
              class="btn btn-light fs-2 fw-bold w-25 plus"
              type="button"
            >+</button>
          </div>
        </div>
      </div>
    </div>
 {{/if}}
  {{/each_row}}
  
 <!-- submit button -->
  <button type="submit" class="btn btn-primary" disabled>Commander</button>
</form>

<script nonce="{{@csp_nonce}}" defer type="module">
  const submitButton = document.querySelector('.webstore_form button[type="submit"]');
  const counters = document.getElementsByClassName('webstore_counter');
  
  for (const counter of counters) {
    const plus = counter.querySelector('.plus');
    const minus = counter.querySelector('.minus');
    const input = counter.querySelector('input');
    plus.addEventListener('click', () => {
      if (input.value < parseInt(input.max)) input.value = parseInt(input.value) + 1;
      submitButton.disabled = false;
    });
    minus.addEventListener('click', () => {
      if (input.value > 0) input.value = parseInt(input.value) - 1;
      submitButton.disabled = false;
    });
  }
</script>
`