Dawn Theme -> Testimonials Code

[DPG]

Servus zusammen, 

wir nutzen das Dawn Theme und würden gerne einen Abschnitt/ Section für Testimonals implementieren.

Möglichst ohne App. Daher die Frage:

Es passt vollkommen, wenn es 3-5 Testimonals sind, die auch zukünftig stehen bleiben (brauch kein Karussel sein). 

Kann wer helfen und hat vielleicht einen Code parat, den wir implementieren können?

Nachtstehend mal ein Bild, wie wir es uns vorstellen...:

Danke für eure Hilfe.

Viele Grüße 
DPG

[Ben310]

• Kann wer helfen und hat vielleicht einen Code parat...

So einfach wird das nicht sein. Wie sollen die Kunden einen Review schreiben und wo sollen die Reviews im Backend gespeichert werden und von da aus ins Frontend gezogen, ganz abgesehen von der Frontend Entwicklung die dafür notwendig ist?

Du kannst eine neue Theme Datei wie testimonials.liquid erstellen mit einen Code wie den folgenden, wo eine neue Sektion, die Testimonials enthält, definiert wird. Verwende das schema-Tag, um die Eingabefelder für Text, Autor und Bild zu ziehen. Im div.testimonials-container-Block einfach alle Testimonials als Block und mit CSS die Testimonials als Boxen darstellen:

Spoiler

{% schema %}
{
  "name": "Testimonials Section",
  "settings": [
    {
      "type": "text",
      "id": "section_title",
      "label": "Section Title",
      "default": "Kundenmeinungen"
    }
  ],
  "blocks": [
    {
      "type": "testimonial",
      "name": "Testimonial",
      "settings": [
        {
          "type": "text",
          "id": "quote",
          "label": "Testimonial Text",
          "default": "Das Produkt ist fantastisch! Ich habe es meiner ganzen Familie empfohlen."
        },
        {
          "type": "text",
          "id": "author",
          "label": "Author",
          "default": "Max Mustermann"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Author Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Testimonials Section",
      "category": "Custom Sections"
    }
  ]
}
{% endschema %}

<div class="testimonials-section">
  <h2 class="section-title">{{ section.settings.section_title }}</h2>
  <div class="testimonials-container">
    {% for block in section.blocks %}
      {% if block.type == 'testimonial' %}
        <div class="testimonial">
          {% if block.settings.image %}
            <img src="{{ block.settings.image | img_url: '100x100' }}" alt="{{ block.settings.author }}" class="testimonial-image"/>
          {% endif %}
          <p class="testimonial-quote">"{{ block.settings.quote }}"</p>
          <p class="testimonial-author">{{ block.settings.author }}</p>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

<style>
  .testimonials-section {
    text-align: center;
    padding: 50px 0;
  }
  .testimonials-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .testimonial {
    max-width: 300px;
    margin: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
  }
  .testimonial-image {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
  }
  .testimonial-quote {
    font-style: italic;
    margin-bottom: 10px;
  }
  .testimonial-author {
    font-weight: bold;
  }
</style>