Git Product home page Git Product logo

search's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

search's Issues

Autocomplete show more link redirect bug

Describe the bug
Show more link is not getting the parent URL and is redirecting to another website.
To Reproduce
Go to https://shop.samsung.com/br/, search galaxy and wait for the autocomplete be filled.
Hover the show more link and you'll see that the query is wrong and is not having the /br/ in the URL neither.
Expected behavior
Correct query and /br/ before the query.
Video
https://www.loom.com/share/863979ad51e54d1b99100de5bac083b0
Additional context
https://github.com/vtex-apps
vtex.search: 1.x

search-bar doesn't work properly on mobile

When the search-bar block is declared inside a header-layout block, the search bar doesn't work properly on mobile.

https://i.imgur.com/PDlNpot.png

But if we declare the search-bar block directly in header and header.full it works as expected.

https://i.imgur.com/z4H3RRb.gif

This workaround doesn't work for us because we need to declare search-bar inside a layout component to set component position and styles.

Error example

Given the following code:

{
  "header": {
    "blocks": ["header-layout.mobile"]
  },

  "header.full": {
    "blocks": ["header-layout.mobile"]
  },

  "header-layout.mobile": {
    "children": ["sticky-layout#header-row-mobile"]
  },

  "sticky-layout#header-row-mobile": {
    "children": ["flex-layout.row#header-row-mobile"]
  },

  "flex-layout.row#header-row-mobile": {
    "children": [
      "drawer",
      "logo",
      "minicart.v2"
    ],
    "props": {
      "fullWidth": true
    }
  },
}

The expected behavior on mobile is:

  • render a button
  • when the button is clicked, show the search input.

The actual behavior is:

  • render the search input as in desktop

But if we make a few changes in code, it'll work properly, but there's blocks that we can't declare inside header and header.full, such as drawer and flex-layout.

{
  "header": {
    "blocks": ["search-bar"]
  },

  "header.full": {
    "blocks": ["search-bar"]
  }
}

Lack of class to style the search-bar

Is your feature request related to a problem? Please describe.
There is no class to manipulate the element that is absolute.

alt text

Describe the solution you'd like
With a class in the element, I can manipulate (force) the position and the ideal size to match the layout.

Autocomplete not showing {listPriceWithTax} & {sellingPriceWithTax}

Hi!

The autocomplete is not shoing the prices. We had similar issues on the search page, but they were fixed when adding the "__unstableProductOriginVtex" prop. It doesn't seem to work on the autocomplete block. I've added our code bellow. You can test / edit / see in this workspace: https://beta--dacris.myvtex.com/

Thanks!

"search-bar": { "blocks": ["autocomplete-result-list.v2"], "props": { "openAutocompleteOnFocus": true, "placeholder": "Cauta orice, avem atatea solutii ...", "displayMode":"clear-button" } }, "autocomplete-result-list.v2": { "blocks": ["product-summary.shelf#defaultShelf"], "props": { "__unstableProductOriginVtex": true } },

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.