Shopware 6 – Custom module Criteria
In development of the plug-in for our client, we needed to work in PHP and write an additional module with application of Vue – a frontend framework – due to the need to display several entities from the database in an appropriate manner – sorted and grouped in appropriate date ranges. First of all, however, we oriented ourselves towards Shopware documentation. The “Criteria”-class documentation for Vue and PHP contains the same methods, but their application and composition are different. We are presenting application of the library’s methods in Vue below.
Development of new modules in Vue in Shopware 6
When we create a new module in Vue, we often connect to the database to download data, which is subsequently displayed or processed in appropriate advance. We can use the “Criteria” class to restrict the data searched in Shopware, which gives us almost unlimited filtering options, but also the ability to expand the required data before connecting to the database. On the backhand side (PHP) of the documentation, we will find a specification of all features of the library. We can find it at this link. In this article, I would like to discuss the library reconstructed in Vue.
We should note and recognise the intentions of Shopware’s developers, who used the same data access interface on two sides of the system, which makes it easy to switch between frontend and backend without the need to change the mindset.
Bogdan Jakubowski
Senior PHP Developer, hmmh Poland
When we create a new index.js file in the module and subsequently add the “Criteria” service to it, it may look as follows:
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) => { //... }); } } });
For the purposes of the article, we are focusing on the getData function only. All functions of the “Criteria” service and examples of their application are presented below.
Paging
Paging is usually applied with the `<sw-data-grid` component. It makes it possible to control the results page (this.page) and the results per page count (this.limit). We can also use the `setPage` and `setLimit` methods as appropriate instead of entering the data directly in the class constructor.
getData() { const criteria = new Criteria(this.page, this.limit) //... }
getData() { const criteria = new Criteria(); const criteria.setPage(this.page); const criteria.setLimit(this.limit); //... }
Restriction to ID list
f we want to restrict the results to specific ID only, we can apply the `setIds` method.
getData() { const criteria = new Criteria(); criteria.setIds([id1,id2,id3]); //... }
Term search
When searching for a specific character sequence, we will apply the setTerm() method, which lets us search for data according to the rule of LIKE ‘%or%’ – to find the values, which include “or” in any position.
getData() { const criteria = new Criteria(); criteria.setTerm(“example”); //... }
Specific result filtering
When downloading data from the database, we often want to enter certain guidelines in order to specify the required data. When it comes to Shopware, we can take advantage of the addFilter() function. This method is connected with a very high number of filters, which we can apply to introduce our conditions to the maximum possible degree.
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(//...//) ); //... }
Sorting results
The rule of sorting results is limited to entering the field, by which the results will be sorted, and the sorting type (ASC – ascending, or DESC – descending).
getData() { const criteria = new Criteria(); criteria.addSorting(Criteria.sort('name', 'ASC')); //... }
Grouping results
The ‘addGroupField’ methods groups rows of the same value.
getData() { const criteria = new Criteria(); criteria.addGroupField('columnName'); //... }
Adding associations
If we have created a relation in an entity definition between other entities, we can easily add it with the addAssociation() function. In the following example, the “Product” entity will be added to our results. We can create multiple relations as long as the construction of the definition itself allows.
getData() { const criteria = new Criteria(); criteria.addAssociation('product'); //... }
Summary
The “Criteria” library is used in every Shopware module displaying data from the database. We can use it to specify the data we want to be downloaded. The list of all methods of the “Criteria” library in JS can be found in the Shopware source file.
Categories:Other News
Tags:#e-commerce , E-commerce , IT , Shopware , Vue