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/08/16 10:18] florian |
integration_documentation:instant_frontend:product_listing [2023/03/29 15:54] (current) rihad |
||
|---|---|---|---|
| Line 7: | Line 7: | ||
| ==== Settings==== | ==== Settings==== | ||
| - | {{:account21:pl_config.png?400|}} | + | {{:account21:plp_config_new.png?400|}} |
| * **Selector**: Specify the selector where the Product List Page shoud be placed within the Website. Use a selector that covers most of the content (e.g. **.fl-outer-container**). | * **Selector**: Specify the selector where the Product List Page shoud be placed within the Website. Use a selector that covers most of the content (e.g. **.fl-outer-container**). | ||
| Line 21: | Line 21: | ||
| <note important>Active: Please be aware that this Toggle enables the Instant Frontend in the chosen shop. Choose the "Preview Mode" to test the Product List Page without activating it for your shop.</note> | <note important>Active: Please be aware that this Toggle enables the Instant Frontend in the chosen shop. Choose the "Preview Mode" to test the Product List Page without activating it for your shop.</note> | ||
| - | ==== Product ==== | + | * **Navigation active**: Activates the Product Listing for all categories. |
| - | {{:account21:pl_product.png?1200|}} | + | ==== General ==== |
| - | * **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 | + | {{:account21:if_general_tab.png?600|}} |
| - | * **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> | + | * 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) | ||
| + | |||
| + | ---- | ||
| + | |||
| + | ==== 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:pl_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:pl_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:pl_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, secondary and accent color for your Product List Page. | ||
| ---- | ---- | ||
| <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> | ||