integration_documentation:instant_frontend:product_listing
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
integration_documentation:instant_frontend:product_listing [2022/10/19 12:44] rihad |
integration_documentation:instant_frontend:product_listing [2023/03/29 15:54] (current) rihad |
||
|---|---|---|---|
| Line 23: | Line 23: | ||
| * **Navigation active**: Activates the Product Listing for all categories. | * **Navigation active**: Activates the Product Listing for all categories. | ||
| + | ==== General ==== | ||
| - | ==== Product ==== | + | {{:account21:if_general_tab.png?600|}} |
| - | {{:account21:plp_product.png?1200|}} | + | * Show Summary |
| + | * Brand display: whether below/above the product name or hidden | ||
| + | * Specify the property that should be used to display variants (at the moment only color variants are supported) | ||
| - | * **Show product code (SKU)**: The product code is whichever ordernumber was exported first. If no ordernumber was exported, the ID is used in case of CSV export, and nothing is available in case of XML export | + | ---- |
| - | * **Show summary**: Show the summary of the product in the product box. | + | |
| - | * **URL of product thumbnail image**: Specify the URL to your product thumbnail. | + | |
| - | * **Show cart button**: Define the text and enable the icon of the Add to Cart Button. | + | |
| - | * **Shop system**: Adapt the logic by setting the relevant shop system or show the button provided from the shopsystem. | + | |
| - | <note important>Only information provided within the datafeed can be shown. If you notice discrepancies please check your datafeed or [[mailto:support@findologic.com|contact our support team]].</note> | + | ==== Product Image ==== |
| + | |||
| + | {{:account21:if_product_image.png?600|}} | ||
| + | |||
| + | * Set the behavior for the Image gallery in the Quick-View Overlay | ||
| + | * Image Orientation: Auto, Portrait or Landscape Mode will change the orientation for the whole Product Listing Page | ||
| + | * Setting of the Image Gallery Behavior and definition of the related image properties | ||
| + | * Set the URL of the product thumbnail images | ||
| + | * Setting of the related image properties | ||
| + | |||
| + | ---- | ||
| + | |||
| + | ==== Meta ==== | ||
| + | |||
| + | {{:account21:if_meta_tab.png?600|}} | ||
| + | |||
| + | * Show product code: the product code is whichever ordernumber was exported first. If no ordernumber was exported, the ID is used in case of CSV export, and nothing is available in case of XML export | ||
| + | |||
| + | * Set the properties for: | ||
| + | * Delivery Time information | ||
| + | * Immediately deliverable products information | ||
| + | * Additional Text | ||
| + | |||
| + | ---- | ||
| ==== Price ==== | ==== Price ==== | ||
| - | {{:account21:plp_price.png|1200}} | + | {{:account21:if_price_tab.png?600|}} |
| - | * **Show product price**: Show/ hide the product price. | + | * Show/hide product price |
| - | * **Show decimals**: Toggles the use of decimals. If deactivated the price will be rounded. | + | * Show/hide decimals |
| - | * **Property containing old price**: Define if you want to show an instead price of the product (If available in the Export). | + | * Define properties for the old price and the base price if needed |
| + | |||
| + | ---- | ||
| + | |||
| + | ==== Cart ==== | ||
| + | |||
| + | {{:account21:if_cart_tab.png?600|}} | ||
| + | |||
| + | * Within the cart tab you can specify whether the cart button should be shown or hidden on the product list page | ||
| + | * Add an Input Field for the article count on the Product cards - Note: in that case only the icon for the cart will be displayed on the card | ||
| + | * Your own behaviour can be used by providing the Post URL or use the shops specific default implementation | ||
| + | * If using the own shops behaviour you can also specify the property for the stock data | ||
| + | |||
| + | ---- | ||
| ==== Badges ==== | ==== Badges ==== | ||
| - | {{:account21:plp_badges.png|1200}} | + | {{:account21:if_badges_tab.png?400|}} |
| - | * **Property**: Specify the name of the property that should be used as indicator for a certain badge. | + | * In the badges Tab you have the possibility to add multiple badges that should be displayed within the product cards |
| - | * **Text**: Specify the text for your badge. | + | * Set the triggering property, the relevant color for the badge and the Text that should be displayed |
| - | * **Background color**: Specify the background color of your badge. | + | |
| - | <note tip>You can configure multiple badges here.</note> | + | ---- |
| ==== CI ==== | ==== CI ==== | ||
| - | {{:account21:plp_ci.png?1200|}} | + | {{:account21:if_ci_tab.png?600|}} |
| + | |||
| + | * In the CI Tab you can set the Filter Position for Desktop and the colors to use for the product list page | ||
| + | * Additionally you can set the primary (CTA’s) and secondary colors (e.g. delete all filters) for the PLP | ||
| + | * By default we inherit the shops font face for the product listing page frontend with the typography they can change the font size displayed on the PLP | ||
| + | * Set the grid layouts for different device sizes | ||
| + | * Products per page allows to define how many products should be shown before the pagination will be applied | ||
| - | * **Filter Position**: Define where the filters should be displayed in the Product List Page (desktop only). | ||
| - | * **Colors**: Set the primary and secondary color for your Product List Page. | ||
| - | * **Pagination**: Define how much products should be displayed per page | ||
| ---- | ---- | ||
| Line 66: | Line 103: | ||
| <note>If you are using Shopware 6 and want to use the add-to-cart button you have to change the CSRF mode to "ajax". To change the CSRF mode in a Shopware 6 shop, change the property storefront.csrf.mode to "ajax" in vendor/shopware/storefront/Resources/config/packages/storefront.yaml and clear the cache.</note> | <note>If you are using Shopware 6 and want to use the add-to-cart button you have to change the CSRF mode to "ajax". To change the CSRF mode in a Shopware 6 shop, change the property storefront.csrf.mode to "ajax" in vendor/shopware/storefront/Resources/config/packages/storefront.yaml and clear the cache.</note> | ||
| + | <note important>Note that any CSS-based customization may cause problems as deployment for PLP may take place at any time. If you plan to do this, please check with your integration consultant or support.</note> | ||