Shopware 6 – Custom module Criteria

Tworząc wtyczkę dla naszego klienta, oprócz pracy w PHP, konieczne było napisanie dodatkowego modułu z wykorzystaniem Vue – frontendowego frameworku. Wynikało to z konieczności wyświetlania kilku encji z bazy danych w odpowiedni sposób – posortowanych, zgrupowanych w odpowiednim zakresie datowym. Najpierw jednak skierowaliśmy się w stronę dokumentacji Shopware. Dokumentacja klasy “Criteria” dla Vue oraz dla PHP zawiera te same metody, ale ich użycie oraz składnia różnią się od siebie. Dlatego też poniżej opisaliśmy zastosowanie metod tej biblioteki w Vue.

Tworzenie nowych modułów w Vue w Shopware 6

Tworząc nowy moduł w Vue często łączymy się z bazą danych pobierając dane, które następnie wyświetlamy lub odpowiednio wcześniej przetwarzamy. Do ograniczenia wyszukiwanych danych w Shopware służy klasa “Criteria”. Dzięki niemu mamy niemal nieograniczone możliwości filtrowania, ale również rozszerzania potrzebnych danych jeszcze przed wykonaniem połączenia z bazą danych. Po stronie backendu (PHP) w dokumentacji znajdziemy rozpisane wszystkie możliwości tej biblioteki. Znajdziemy ją pod linkiem . W tym artykule chciałbym przybliżyć tę bibliotekę odwzorowaną po stronie Vue.

Warto zauważyć i docenić intencję twórców Shopware, którzy zastosowali ten sam interfejs dostępu do danych po dwóch stronach systemu, dzięki czemu można szybko przełączać się pomiędzy frontendem i backendem bez konieczności przestawiania mindsetu.

Bogdan Jakubowski

Senior PHP Developer, hmmh Poland

Tworząc nowy plik index.js w module, a następnie dołączając do niego serwis “Criteria”, może on wyglądać w sposób jak w ramce poniżej:

import template from './example-module.html.twig';

const { Component } = Shopware;
const { Criteria } = Shopware.Data;

Component.register('example-module', {
   template,

   inject: [
       'repositoryFactory'
   ],

   data() {
       return {
           productRepository: null,
       };
   },

   created() {  this.productRepository = this.repositoryFactory.create('product');
   },
  
   methods: {
       getData()
       {
           const criteria = new Criteria();

           this.productRepository
               .search(criteria, Shopware.Context.api)
               .then((result) => {
                   //...
               });
       }
   }
});

Na potrzeby artykułu skupimy się tylko na funkcji getData. Poniżej przedstawione zostały wszystkie możliwości serwisu “Criteria” wraz z przykładowymi zastosowaniami.

Paginacja

Paginacja najczęściej jest używana z komponentem `<sw-data-grid`. Dzięki niej możemy sterować stroną wyników (this.page) oraz liczbą wyników na stronę (this.limit). Możemy również użyć odpowiednio metod `setPage` oraz `setLimit`, zamiast wprowadzać dane bezpośrednio w konstruktor klasy.

getData()
       {
           const criteria = new Criteria(this.page, this.limit)
           //...
       }
getData()
       {
           const criteria = new Criteria();

           const criteria.setPage(this.page);

           const criteria.setLimit(this.limit);

           //...

Ograniczenie do listy ID

Jeśli chcemy ograniczyć wyniki tylko do konkretnych ID, możemy użyć metody `setIds`.

getData()
       {
           const criteria = new Criteria();

           criteria.setIds([id1,id2,id3]);

           //...
       }    

Wyszukiwanie wyrazów

Szukając konkretnego ciągu znaków, użyjemy metody setTerm(). Dzięki niej wyszukamy dane na zasadzie LIKE ‘%or%’ – znajduje wartości, które mają „or” w dowolnej pozycji.

       getData()
       {
           const criteria = new Criteria();

           criteria.setTerm(“example”);

           //...
       } 

Szczegółowe filtrowanie wyników

Pobierając dane z bazy danych często chcemy wprowadzić kilka wytycznych, aby dokładnie określić, jakich danych potrzebujemy. Jeśli chodzi o Shopware, to przychodzi nam z pomocą funkcja addFilter(). Do tej metody łączy się bardzo duża liczba filtrów, dzięki którym możemy w maksymalnym stopniu wprowadzić nasze warunki.

       getData()
       {
           const criteria = new Criteria();

           criteria.addFilter(
              Criteria.equals(//...//)
           );

           criteria.addFilter(
              Criteria.equalsAny(//...//)
           );

           criteria.addFilter(
              Criteria.not(//...//)
           );

           criteria.addFilter(
              Criteria.range(//...//)
           );

           criteria.addFilter(
              Criteria.multi(//...//)
           );

           //...
       }

Sortowanie wyników

Zasada sortowania wyników ogranicza się do wprowadzenia pola, po którym wyniki mają zostać posortowane oraz typu sortowania (ASC – sortowanie rosnąco lub DESC – sortowanie malejąco).

     getData()
       {
           const criteria = new Criteria();

           criteria.addSorting(Criteria.sort('name', 'ASC'));
           //...
       }

Grupowanie wyników

Metoda ‘addGroupField’ grupuje wiersze, które mają te same wartości.

     getData()
       {
           const criteria = new Criteria();

           criteria.addGroupField('columnName');

           //...
       }

Dodawanie relacji

Jeśli w definicji encji utworzyliśmy relację między innymi encjami, możemy ją łatwo dołączyć stosując funkcję addAssociation(). W przykładzie poniżej do naszych wyników zostanie dołączona encja “Produkt”. Możemy tworzyć wiele relacji, o ile konstrukcja samej definicji na to pozwala.

     getData()
       {
           const criteria = new Criteria();

           criteria.addAssociation('product');

           //...
       }      

Podsumowanie

Biblioteka “Criteria” jest używana w każdym module Shopware wyświetlającym dane z bazy danych. Dzięki niej możemy sprecyzować, jakie dane dokładnie chcemy, aby zostały pobrane. Lista wszystkich metod biblioteki “Crteria” w JS możemy znaleźć w pliku źródłowym Shopware pod ścieżką.

HMMH Poland Facebook HMMH Poland Facebook HMMH Poland Twitter HMMH Poland Twitter HMMH Poland Linkedin HMMH Poland Linkedin

Kategorie:Bez kategorii,Inne

Tagi: , , , , , ,