#584 Add size information for T-shirts and hoodies to order page

Closed
opened 1 year ago by reinhard · 1 comments
reinhard commented 1 year ago

Francesca has created a size chart for our T-shirts and hoodies. This information could ideally be added to the item.en.xml files and presented on the web page in two different ways:

  1. as a complete (HTML) table on a spearate web page which is linked from the order page, and

  2. as a pop-up showing the explaining picture and the 2 or 3 numbers, shown when somebody clicks on the size letter (the “S” or “M” etc).

Francesca has created a size chart for our T-shirts and hoodies. This information could ideally be added to the item.en.xml files and presented on the web page in two different ways: 1. as a complete (HTML) table on a spearate web page which is linked from the order page, and 2. as a pop-up showing the explaining picture and the 2 or 3 numbers, shown when somebody clicks on the size letter (the "S" or "M" etc).
reinhard added the
feature-request
label 1 year ago
reinhard added the
help wanted
label 1 year ago
reinhard added the
xsl
label 1 year ago
max.mehl commented 1 year ago
Owner

I would hide that in a “spoiler” or “accordion”, whatever you call it. This way, we could have a small button. If someone clicks on it, a larger box opens with all the necessary details. Later, we could also use it to add certificates, further links to fabric details or something like that.

This way, it would be important that each element uses its own id for the input/label, but this could be easily derived from the item’s id. We should also make sure to save most used strings in the texts-en.xml file.

Some example code:

<h2>Tshirt</h2>

<div class="spoiler">
  <input type="checkbox" id="spoiler_shirt" />
  <label for="spoiler_shirt">Sizes and details</label>
  <div class="spoiler_body">
    Tshirt's Size chart, fabric etc
  </div>
</div>

<h2>Hoodie</h2>

<div class="spoiler">
  <input type="checkbox" id="spoiler_hoodie" />
  <label for="spoiler_hoodie">Sizes and details</label>
  <div class="spoiler_body">
    Details for hoodie
  </div>
</div>
.spoiler > input + label:after {
  content: "+ ";
  float: left;
  font-weight: bold;
}
.spoiler > input:checked + label:after {
  content: "– ";
  float: left;
  font-weight: bold;
}
.spoiler > input {
  display:none;
}
.spoiler > input + label , .spoiler > .spoiler_body {
  background:#CCC;
  padding:5px 15px;
  overflow:hidden;
  width:15%;
  box-sizing: border-box;
  display: block;
}
.spoiler > input:checked + label , .spoiler > .spoiler_body {
  width:90%;
}
.spoiler > input + label + .spoiler_body {
  display:none;
}
.spoiler > input:checked + label + .spoiler_body {
  display: block;
}
.spoiler > .spoiler_body {
  background: #FFF;
  border: 3px solid #CCC;
  border-top: none;
}
I would hide that in a "spoiler" or "accordion", whatever you call it. This way, we could have a small button. If someone clicks on it, a larger box opens with all the necessary details. Later, we could also use it to add certificates, further links to fabric details or something like that. This way, it would be important that each element uses its own `id` for the input/label, but this could be easily derived from the item's id. We should also make sure to save most used strings in the `texts-en.xml` file. Some example code: ```html <h2>Tshirt</h2> <div class="spoiler"> <input type="checkbox" id="spoiler_shirt" /> <label for="spoiler_shirt">Sizes and details</label> <div class="spoiler_body"> Tshirt's Size chart, fabric etc </div> </div> <h2>Hoodie</h2> <div class="spoiler"> <input type="checkbox" id="spoiler_hoodie" /> <label for="spoiler_hoodie">Sizes and details</label> <div class="spoiler_body"> Details for hoodie </div> </div> ``` ```css .spoiler > input + label:after { content: "+ "; float: left; font-weight: bold; } .spoiler > input:checked + label:after { content: "– "; float: left; font-weight: bold; } .spoiler > input { display:none; } .spoiler > input + label , .spoiler > .spoiler_body { background:#CCC; padding:5px 15px; overflow:hidden; width:15%; box-sizing: border-box; display: block; } .spoiler > input:checked + label , .spoiler > .spoiler_body { width:90%; } .spoiler > input + label + .spoiler_body { display:none; } .spoiler > input:checked + label + .spoiler_body { display: block; } .spoiler > .spoiler_body { background: #FFF; border: 3px solid #CCC; border-top: none; } ```
reinhard closed this issue 1 year ago
Sign in to join this conversation.
No Milestone
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.