{"id":64527,"date":"2020-04-16T12:52:06","date_gmt":"2020-04-16T11:52:06","guid":{"rendered":"https:\/\/configuratorsuiteforwp.com\/?p=64527"},"modified":"2023-08-12T17:29:55","modified_gmt":"2023-08-12T16:29:55","slug":"how-to-set-up-vpc-conditional-rules","status":"publish","type":"post","link":"https:\/\/www.orionorigin.com\/how-to-set-up-vpc-conditional-rules\/","title":{"rendered":"How to set up VPC Conditional Rules"},"content":{"rendered":"

What are VPC Conditional rules?<\/h2>\n

These conditional rules are the rules that limit your customers to specific options or actions at the front end, based on their current choices, within the Visual product configurator<\/a>.<\/p>\n

This is useful in several cases where you only want the user to choose within a certain set of options while configuring the product at the front end.<\/p>\n

Steps<\/h2>\n
    \n
  1. Conditional rules must have a configuration they are tied to, so the first thing you need to do is to create a configuration and ensure it has different components and options that will be manipulated within the conditional rules to achieve what you need.<\/li>\n
  2. Go to the Product Builder >> Configurations menu page that lists all the configurations you have created previously. Scroll to the configuration you want to create conditional rules for and click the button for \u201cManage conditional rules\u201d in its column.
    \n
    \"Configuration[image showing configuration and the \u201cManage conditional rules\u201d button]<\/h5>\n<\/li>\n
  3. Once the page loads, select the checkbox titled \u201cEnable Conditional logic\u201d.
    \n
    \"Enable[image showing the \u201cEnable Conditional logic\u201d checkbox]<\/h5>\n<\/li>\n
  4. Once it is ticked, a new row appears under the initial one, titled \u201cRules\u201d.
    \n\"5This row shows 5 new columns, with the following titles and explanation:<\/p>\n
      \n
    1. Action<\/strong>: this determines the action you want to take place once the rule condition is met. You have three (3) options: Show, Hide, or Select. For the option you set in the \u2018Option column below, \u2018Show\u2019 will show the option, \u2018Hide\u2019 will hide the option while \u2018Select\u2019 will choose the option on the user\u2019s behalf.\n
      \"Rules
      Rules 3 and 4 for the Watch Demo example for Conditional rules<\/figcaption><\/figure>\n
      [Image of the 3 choices for this Action field]<\/h5>\n<\/li>\n
    2. Scope<\/strong>: This defines what area that the rule will operate within, or that the rule is limited to. You have four (4) choices: Option, Component, Group per component, All groups. Whatever choice you make determines what will be displayed in the next field.\"The
      \n
      [Image of scope list]<\/h5>\n<\/li>\n
    3. Apply on<\/strong>: is to allow you to choose what aspect of the configuration that your rule will be active on. The options in the field depend on the scope you have chosen in the previous field. \"Apply
      \n
      [Image of Apply on the field]<\/h5>\n

      The items listed are picked from what you have created in your configuration previously e.g. options, components etc.<\/li>\n

    4. Option<\/strong>: contains all the conditions you want to in place before the rule can come into action. It usually consists of a word \u2018IF\u2019 with a list containing all the configuration options you have created in the configuration. You can add more conditions by clicking the \u201c+\u201d button on the extreme right, or remove a particular condition by clicking the \u201c-\u201d button at the same location. \"Two
      \n
      [image of 2 options]<\/h5>\n<\/li>\n
    5. Status<\/strong>: this works with the \u201cOption\u201d field, and it defines the state you want the Option to be in. There are two possible values: \u201cIs selected\u201d and \u201cIs deselected\u201d.\"Status
      \n
      [Image showing possible status states in an option in a conditional rule]<\/h5>\n<\/li>\n<\/ol>\n<\/li>\n
    6. Under the previous row lies two important fields:\n
        \n
      1. Enable reverse rule<\/strong>: allows you to enable the inverse rule. This is for situations where you want the opposite action to occur when the rule is reversed.<\/li>\n
      2. Conditions relationship<\/strong>: specifies the connection between the options and statuses you have added to the rule. The value is either “AND” or “OR”.\"Conditional
        \n
        [Image showing conditional relationship options]<\/h5>\n<\/li>\n
      3. Remove rule:<\/strong> allows you to delete the whole rule (be careful with this button as there is no UNDO).<\/li>\n
      4. Add Rule button<\/strong>: allows you to add another rule to the configuration<\/li>\n<\/ol>\n<\/li>\n
      5. Remember to SAVE or UPDATE when you are done with the creation.<\/li>\n<\/ol>\n

        EXAMPLE: WATCH DEMO<\/a><\/h2>\n
        \"The
        The Front end view of the Watch Demo<\/figcaption><\/figure>\n

        Using our Watch demo<\/a> as an example, let us illustrate the setting up of the conditional rules. The watch demo showcases a watch that has a total of five components:<\/p>\n

          \n
        1. Size<\/strong>: the size of the watch dial.<\/li>\n
        2. Cases<\/strong>: one for 40mm size and another for 44mm size.<\/li>\n
        3. Straps<\/strong>: one component for 40mm in size and another for 44mm in size.<\/li>\n<\/ol>\n

          Each of these five components has options that will be used within the conditional rules segment.<\/p>\n

          The conditional rules we put in place ensure that when the front end user picks a size, s\/he can only see the corresponding cases and straps e.g. if size 44mm is picked, only the cases for 44mm and the straps for 44mm are visible. This ensures that the customization is accurate in detail and there are no mistakes in the creation of the order by the user.<\/p>\n

          Conditional rules set up<\/h3>\n

          Following the steps outlined earlier, we create the rules that will be applied to this configuration. Four rules are created, explained below:<\/p>\n

            \n
          1. Rule 1<\/strong>: hide the \u201ccases for 44mm\u201d component if the \u201cSize > Default case 40mm\u201d option is selected.\n

            \"Rules
            Rules 1 and 2 for the Watch Demo example for Conditional rules<\/figcaption><\/figure><\/li>\n
          2. Rule 2<\/strong>: hide the \u201ccases for 40mm\u201d component if the \u201cSize > Default case 44mm\u201d option is selected.<\/li>\n
          3. Rule 3<\/strong>: hide the \u201cstraps for 44mm\u201d component if the \u201cSize > Default case 40mm\u201d option is selected.\n

            \"Rules
            Rules 3 and 4 for the Watch Demo example for Conditional rules<\/figcaption><\/figure><\/li>\n
          4. Rule 4<\/strong>: hide the \u201cstraps for 40mm\u201d component if the \u201cSize > Default case 44mm\u201d option is selected.<\/li>\n<\/ol>\n

            For each of the rules, enable \u201cReverse rule\u201d and set \u201cConditions relationship\u201d to \u201cAND\u201d.<\/p>\n

            Here is a glimpse of the front end:
            \n\"\"<\/p>\n

            [The Watch configurator, with the option for the 40mm size selected. Only the cases and straps for 40mm are available for selection.]<\/strong><\/p>\n

            \"\"<\/p>\n

            [The Watch configurator, with the option for the 44mm size selected. Only the cases and straps for 44mm are available for selection.]<\/strong><\/p>\n

            This example shows that you can manipulate what the front end user sees in the configuration, to ensure the customisation process is less confusing and more straight forward.<\/p>\n","protected":false},"excerpt":{"rendered":"

            What are VPC Conditional rules? These conditional rules are the rules that limit your customers to specific options or actions at the front end, based on their current choices, within the Visual product configurator. This is useful in several cases where you only want the user to choose within a certain set of options while […]<\/p>\n","protected":false},"author":1,"featured_media":159075,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[415],"tags":[377,378,379,380,361],"class_list":["post-64527","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-configurator","tag-conditional-rules","tag-options","tag-rules","tag-status","tag-visual-products-configurator"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/64527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/comments?post=64527"}],"version-history":[{"count":3,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/64527\/revisions"}],"predecessor-version":[{"id":159095,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/64527\/revisions\/159095"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media\/159075"}],"wp:attachment":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media?parent=64527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/categories?post=64527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/tags?post=64527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}