Implementierung eines Codes in "Vorgestellte Kategorie

[Markopolo0703]

Ich habe ChatGPT einen CSS und JS code erstellen lassen, der die Produkte nach dem Laden der Seite verzögert einzelt ein "faden" soll. Aber ich habe Probleme, diesen Code in die Seite einzufügen. Ich habe schon verschiedene Apps ausprobiert, in die ich "einfach" nur den Code einfügen muss, ohne die richtige Stelle im Theme Code zu suchen. Es hat dennoch nicht geklappt, weswegen ich fragen will, wo ich den Code einfügen soll, damit er funktioniert. 

Css:

.product-item {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.product-item.fade-in {
  opacity: 1;
}

JS

$(document).ready(function() {
  $('.product-item').each(function(i) {
    setTimeout(function() {
      $('.product-item').eq(i).addClass('fade-in');
    }, 200 * i);
  });
});

HTML

<div class="product-grid">
  {% for product in collection.products %}
    <div class="product-item">
      <a href="{{ product.url }}" class="product-image">
        <img src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt | escape }}">
      </a>
      <h3 class="product-title">{{ product.title }}</h3>
      <p class="product-price">{{ product.price | money }}</p>
    </div>
  {% endfor %}
</div>

Ich habe der weit keine Erfahrung in dem Bereich, weswegen ich den Code nur oberflächlich Prüfen kann.

URL: https://valentclo.com/

Mfg Mark

[Gabe]

Hey @Markopolo0703 

Danke für den Code und die URL und jedes Themes ist anders im Liquid Code strukturiert. Dein Theme scheint das Dawn Theme zu sein und ChatGPT kann hier nur generelle Code Tip ps geben da es das Dawn Theme nicht unbedingt kennt, und/oder Daten bis 2021 hat und Dawn hat sich mit der Version 8.0 ziemlich weiterentwickelt. 

Wenn du es selber auf deiner Warenkorbseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. 

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Du kannst beispielsweise im base.css.liquid, im Ordner "assets" den folgenden Code ergänzen ganz unten:

.product-item {
 opacity: 0;
 transition: opacity 1s ease-in-out;
}

.product-item.fade-in {
 opacity: 1;
}

Suche im Datei-Explorer die Datei main.js.liquid oder ähnlich, die sich normalerweise im Ordner "assets" befindet, scrolle zum Ende der Datei und füge den deinen JavaScript-Code ein: 

document.addEventListener('DOMContentLoaded', function() {
 const productItems = document.querySelectorAll('.product-item');
 productItems.forEach((item, index) => {
   setTimeout(() => {
     item.classList.add('fade-in');
   }, 200 * index);
 });
});

Beachte auch, dass der obige JavaScript-Code leicht geändert ist, um die Shopify Dawn Theme-Syntax ohne jQuery zu verwenden.

Aktualisiere die "Featured Collection"-Section, um den HTML-Code zu ändern. Suche im linken Datei-Explorer die Datei main-collection-product-grid.liquid, main-product-grid.liquid, oder eine ähnliche Datei, die sich normalerweise im Ordner "sections" befindet.

Finde den Produkt-Loop innerhalb der Datei und ändere das HTML entsprechend dem bereitgestellten HTML-Code. Man sollte lediglich die Klasse product-item zu den Produkt-Containern hinzufügen. Der restliche HTML-Code sollte im Wesentlichen gleich bleiben.

Bitte beachte auch, dass die Dateinamen und der Code je nach Dawn-Version leicht variieren kann.