integration_documentation:instant_frontend:shopping_guide

integration_documentation:instant_frontend:shopping_guide

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Last revision Both sides next revision
integration_documentation:instant_frontend:shopping_guide [2023/03/08 14:40]
rihad
integration_documentation:instant_frontend:shopping_guide [2023/03/13 12:42]
rihad
Line 16: Line 16:
      * append: The Product List 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 List Page container will be prepended within the set container (selector).      * prepend: The Product List Page container will be prepended within the set container (selector).
 +
 +  * **Color**: The following depiction shows how the colours will apply to the Shopping Guide.
 +
 +{{:​account21:​colors.png?​1200|}}
 +
 +<note important>​Please be aware that those Settings are globally applied to all Shopping Guides.</​note>​
  
 ---- ----
Line 21: Line 27:
 ==== Settings ==== ==== Settings ====
  
 +{{:​account21:​sg_settings.png?​400|}}
  
 +     * **Name**: Give the Shopping Guide a proper Name
 +     * **Title**: Specify the Title of the Shopping Guide. This will be displayed in the Shops Frontend.
 +     * **Subtitle**:​ Add a Subtitle. This will be displayed in the Shops Frontend.
 +     * **Category**:​ Specify on which Category the Shopping Guide should be triggered
 +     * **Default flow**: Select the default flow that should be used for the Shopping Guide. According to the flow chosen you can specify the order of the Questions.
  
 +----
 ==== Questions ==== ==== Questions ====
  
-{{:​account21:​plp_price.png|1200}}+{{:​account21:​sg_questions.png?400|}}
  
-  * **Show product price**: Show/ hide the product price. +  * Here we have different types of questions ​ 
-  * **Show decimals**: Toggles the use of decimals. If deactivated ​the price will be rounded. +  * All of the questions that should ​be considered within ​the Shopping Guide can be added here
-  * **Property containing old price**: Define if you want to show an instead price of the product (If available in the Export).+
  
-==== Flows ====+=== Add Questions ​===
  
-{{:​account21:​plp_badges.png|1200}}+{{:​account21:​sg_questions_add.png?400|}} {{:​account21:​sg_questions_config.png?​400|}}
  
-  ​* **Property**:​ Specify ​the name of the property that should be used as indicator ​for a certain badge. +  ​- Select an Attribute from the Dropdown 
-  * **Text**: Specify ​the text for your badge. +  - Edit the question and set the configurations ​for the question 
-  * **Background color**: Specify ​the background color of your badge.+  * Define ​different Display Name 
 +  * Change ​the used Attribute ​for the question 
 +  * Unordered List ItemSelect how the filters/​answers should be displayed in the flow 
 +  ​Set the order that should applicable  
 +  ​Define the question 
 +  ​If needed add a Icon for the Header with an Image URL 
 +  * Define if multiple options can be used 
 +  ​Define if the Question is required
  
-<note tip>You can configure multiple badges here.</​note>​+=== Add Answers ===
  
-==== CI ====+{{:​account21:​sg_answer_add.png?​400|}} {{:​account21:​sg_answer_edit.png?​400|}}
  
-{{:account21:​plp_ci.png?​1200|}}+  - From the dropdown you can specify the filter values that should be shown for the question 
 +  - Every answer can be edited with the following options: 
 +  * Display Name 
 +  * Set an Image URL if needed
  
-  * **Filter Position**: Define where the filters should be displayed in the Product List Page (desktop only)+=== Add branching questions ​(optional===
-  * **Colors**: Set the primary and secondary color for your Product List Page. +
-  * **Typography**:​ Select a base font size for Instant Frontend. +
-  * **Grid Layout**: Choose how many products should be displayed depending on the screen size. +
-  * **Products per page**: Define how many products should be displayed per page.+
  
-----+{{:​account21:​sg_bq_config.png?​400|}} {{:​account21:​sg_bq_answer.png?​400|}} {{:​account21:​sg_bq_answer_edit.png?​400|}}
  
-<​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 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>​+  * Branching questions can help to guide a User in a certain direction with a different flow of questions 
 + 
 +  ​Configure ​the branching question 
 +  * Set a display name 
 +  * Add a question/​headline 
 +  * Choose ​the displaying option that should be applied 
 +  * Add Header Icon if needed 
 + 
 +  - Move to answers 
 +  * Add/Edit an answer 
 +  * Set display name 
 +  * Add image Url for the attribute value 
 +  * Select which flow should be triggered after answering the question 
 + 
 +---- 
 +==== Flows ====
  
-<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>​