Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjusting the search page's layout #15

Open
github-learning-lab bot opened this issue Oct 19, 2020 · 2 comments
Open

Adjusting the search page's layout #15

github-learning-lab bot opened this issue Oct 19, 2020 · 2 comments

Comments

@github-learning-lab
Copy link

Adjusting the search page's layout

Branch: search2

Introduction

In the last step, we've looked at the search page and its main components. We also learned that the search layout works like any other block, with the added benefit of having all the flexibility it can muster. In this step, we'll create some lines and columns to improve the appearance of the created search.

Activity

image

  1. In the search.jsonc file, remove total-products.v2 and order-by.v2 from search-result-layout.desktop.

  2. Replace both with a line that includes the removed blocks:

    ...
    "flex-layout.row#top": {
      "children": [
        "total-products.v2",
        "order-by.v2"
      ]
    }
    ...
  3. Remove search-content and filter-navigator.v3 from search-result-layout.desktop and create a results line;

  4. Place two columns in the results line:

    {
      ...
      "search-result-layout.desktop": {
        "children": [
          "breadcrumb.search",
          "search-title.v2",
          "flex-layout.row#top",
          "search-fetch-previous",
          "flex-layout.row#results",
          "search-fetch-more"
        ]
      },
      "flex-layout.row#results": {
        "children": [
          "flex-layout.col#filter",
          "flex-layout.col#search"
        ]
      },
      ...
    }
  5. Set the filter column's width prop to 20%.

  6. In the left column, include filter-navigator.v3 again and, in the right, include search-content.
    To finish, we'll use the same product summary (product-summary) that we used to display search results on the shelf.

  7. Define your search-content with the gallery and not-found blocks:

    {
      ...
      "search-content": {
        "blocks": ["gallery", "not-found"]
      }
      ...
    }
  8. Use product-summary.shelf in the Gallery's props:

    {
      ...
      "search-content": {
        "blocks": ["gallery", "not-found"]
      },
      "gallery": {
        "blocks": ["product-summary.shelf"]
      }
      ...
    }
  9. In the product-summary.shelf block, found in default.jsonc, include product-summary-sku-selector above product-summary-buy-button.

ℹ️ Remember to access the Flex Layout documentation if you have any questions during the activity.


🚫 Are you lost?

Is there any problem with this step? What about sending us a feedback? 🙏

Submit feedback


If you're still unsure as to how to send your answers, click here.

@vtex-course-hub
Copy link

You did great! 😁

Results

✅✅✅✅✅✅✅✅✅✅✅✅✅

Tests

✅ Getting the file
✅ Code compilation
✅ Make the third and fifth element, of your search result desktop layout, rows
✅ Top row should have total-products.v2 and order-by.v2
✅ Use two columns inside the results row
✅ Define the left column of the results row
✅ Define the right column of the results row
✅ Use the filter navigator on the left column of the results row
✅ Use the search content on the right column of the results row
✅ Set the width of the left column of the results row
✅ Use gallery and not-found blocks on the search content
✅ Use shelf's product summary in the search gallery
✅ Include SKU Selector in all shelves

@github-learning-lab
Copy link
Author

You have successfully completed this step!

Go to the next step!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

0 participants