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/07/21 12:11] rihad |
integration_documentation:instant_frontend:product_listing [2023/03/29 15:54] (current) rihad |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ===== Product List Page ===== | ===== Product List Page ===== | ||
| - | You can find this feature in the **Customer Account -> Instant Frontend -> Product list**. | + | You can find this feature in the **Customer Account -> Instant Frontend -> [[https://account.findologic.io/#/instant-frontend/product-list-page|Product list]]**. |
| - | Our feature //Product List// allows you to fairly easy configure the Product Listing Page of your Shop. | + | Our feature //Product List// allows you to fairly easy configure the Product Listing Page of your shop. |
| ==== Settings==== | ==== Settings==== | ||
| - | {{:account21:pl_config.png?400|}} | + | {{:account21:plp_config_new.png?400|}} |
| - | * **Selector**: Speccify the Selector where the Product Listin Page shoud be implemented within the Webside. Use a selector that covers most if 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**). |
| * **Location**: Set the location of the container. The following locations can be used: | * **Location**: Set the location of the container. The following locations can be used: | ||
| - | * before: displays Product Listing Page before the set Selector | + | * before: Displays Product List Page before the chosen selector. |
| - | * Unordered List Itemafter: displays Product Listing Page after the set Selector | + | * unordered List Itemafter: Displays Product List Page after the chosen selector. |
| - | * replace: replaces the container (selector) with the Product Listing Page container | + | * replace: Replaces the container (selector) with the Product List Page container. |
| - | * replaceContent: replaces the content of the given container (selector) | + | * replaceContent: Replaces the content of the given container (selector). |
| - | * append: the Product Listing Page container will be appended within the set container (selector) | + | * append: The Product List Page container will be appended within the set container (selector). |
| - | * prepend: the Product Listing Page container will be prepended within the set container (selector) | + | * prepend: The Product List Page container will be prepended within the set container (selector). |
| - | <note important>Active: Please be aware that this Toggle enables the Instant Frontend in the Live-Shop. If this is not wanted you can save the setting and see your changes in the Preview Mode without activating the Product Listing Page.</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. | + | |
| - | * **URL of product thumbnail image**: | + | |
| - | * **Show cart button**: Define the text and enable the icon of the Add to Cart Button. | + | |
| - | * **Shop system**: Makes it possible to change the logic going on in the background 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 the datafeed must be adopted accordingly.</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. (Only 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**: Name the property that should des 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**: The Text of the Badge. | + | * Set the triggering property, the relevant color for the badge and the Text that should be displayed |
| - | * **Backround color**: The Backround color of the Badge | + | |
| - | <note tip>More than one Badge can be configured 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 | ||
| + | |||
| + | |||
| + | ---- | ||
| + | |||
| + | <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> | ||
| - | * **Filter Position**: Define where the Filters should be displayed. (Desktop only) | + | <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> |
| - | * **Colors**: Set the primary, secondary and accent color for the Product Listing Page. | + | |