Section rendering Section Rendering API

Sie können die Abschnitt-Rendering-API verwenden, um das HTML-Markup für Themenabschnitte mit einer AJAX-Anfrage anzufordern. So können Sie Seiteninhalte aktualisieren, ohne die gesamte Seite neu zu laden, indem Sie nur bestimmte Elemente abrufen und dynamisch ersetzen.

So können Sie beispielsweise die Section Rendering API verwenden, um Suchergebnisse zu paginieren, ohne dass zwischen den einzelnen Seiten ein komplettes Neuladen der Seite erforderlich ist.

Wenn Sie die Section Rendering API verwenden möchten, um eine Seite auf der Grundlage von Änderungen am Warenkorb zu aktualisieren, sollten Sie gebündeltes Section Rendering in Betracht ziehen.

Request sections

Sie können den Abfrageparameter sections verwenden, um bis zu fünf Abschnitte darzustellen, die durch ihre Abschnitts-IDs identifiziert werden. Die Antwort ist ein JSON-Objekt, das Paare für jede Abschnitts-ID und den entsprechenden gerenderten HTML-Code enthält.

Der Parameter sections kann eine kommagetrennte Liste von IDs oder ein Array sein:

?sections=header,footer
?sections[]=header&sections[]=footer

Abschnitte können im Kontext einer beliebigen Seite wiedergegeben werden, indem der Parameter sections an eine beliebige Seiten-URL angehängt wird. Sie können zum Beispiel Folgendes anfordern /?sections=header für die Stammseite, oder Sie können die /collections/featured?sections=header für eine vorgestellte Sammlungsseite.

Der folgende Beispielcode fordert zwei Abschnitte mit einem JavaScript XMLHttpRequest an:

{
  "header":"
 <div id="\"shopify-section-header\"" class="\"shopify-section\"">
  \n
  <!-- section content -->\n
 </div>",
  "footer":"
 <div id="\"shopify-section-footer\"" class="\"shopify-section\"">
  \n
  <!-- section content -->\n
 </div>"
}

Alle Abfrageparameter, die beim Rendern der gesamten Seite beachtet werden, wie z. B. q oder page, werden auch beim Rendern von Abschnitten beachtet.

Sections error response

Abschnitte, die nicht gerendert werden können, weil sie für das veröffentlichte Thema nicht existieren, werden als null in der JSON-Antwort zurückgegeben. Eine Antwort kann einen HTTP 200-Status haben, aber dennoch einen oder mehrere Abschnitte enthalten, die nicht gerendert werden konnten. Aus diesem Grund sollten Sie die Möglichkeit von null einkalkulieren.

Request a single section

Sie können den Parameter sections und seine JSON-Antwort in den meisten Fällen verwenden, einschließlich des Renderns eines einzelnen Abschnitts. Alternativ können Sie den Abfrageparameter section_id verwenden, um einen einzelnen Abschnitt abzufragen.

?section_id=header

Abschnitte, die als Antwort auf den Abfrageparameter section_id gerendert werden, werden direkt als HTML zurückgegeben, und wie sections kann dieser Parameter verwendet werden, um einen Abschnitt im Kontext einer beliebigen Seite zu rendern.

Single section error response

Wenn die angeforderte Abschnitts-ID im Thema nicht existiert, antwortet der Server mit dem Status 404.

Find section IDs

Sie können auf eine Abschnitts-ID auf zwei Arten zugreifen:

Über das Objekt Liquid section, mit section. id
Extrahieren Sie es aus dem ID-Attribut der Abschnittsumhüllung

Wenn Sie auf einen statisch gerenderten Abschnitt verweisen wollen, ist die Abschnitts-ID der Dateiname. Wenn Sie z. B. einen Abschnitt social. liquid haben, lautet die ID social.

Extract a section ID from the wrapper

Sie können eine Abschnitts-ID aus dem ID-Attribut der Abschnittsumhüllung extrahieren. Das folgende Beispiel ist das allgemeine Format für eine Abschnittsumrandung:

 <div id="shopify-section-[section-id]" class="shopify-section">
  
  <!-- section content -->

 </div>