Stilar Popover Element

The storefront popover visar alltid produkten name och priceoch valet av fält kan inte konfigureras. Men popover kan formateras med CSS-klasser. Följande deklarationer ändrar till exempel bakgrundsfärgen för popover behållare och sidfot.

.livesearch.popover-container {
    background-color: lavender;
}

.livesearch.view-all-footer {
    background-color: magenta;
}

Synlighet för behållare

Den överordnade komponenten för .livesearch.popover-container är .search-autocomplete. The .active -klassen anger behållarens synlighet. The .active -klassen läggs till villkorligt när popover är öppen.

.search-autocomplete.active   /* visible */
.search-autocomplete          /* not visible */

Mer information om hur du formaterar butikselement finns i CSS (Cascading Style Sheets) i Utvecklarhandbok för Edge.

Klassväljare

Följande klassväljare kan användas för att formatera behållar- och produktelementen i popover.

  • .livesearch.popover-container
  • .livesearch.view-all-footer
  • .livesearch.products-container
  • .livesearch.product-result
  • .livesearch.product-name
  • .livesearch.product-price

Väljare för behållarklass

.livesearch.popover-container

Popover container

Visa alla sidfötter

Produktklassväljare

.livesearch.products-container

Produktbehållare

.livesearch.product-result

Produktresultat

.livesearch.product-name

Produktnamn

.livesearch.product-price

Produktpris

.livesearch-produktlänk

Produktresultat

Arbeta med ett ändrat tema working-with-modified-theme

The storefront popover kan användas med en anpassad tema som ärver de nödvändiga filerna från Luma. The top.search -block i header-wrapper i Magento_Search får inte ändras.

<referenceContainer name="header-wrapper">
   <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml">
      <arguments>
         <argument name="configProvider" xsi:type="object">Magento\Search\ViewModel\ConfigProvider</argument>
      </arguments>
   </block>
</referenceContainer>

Inaktiverar popover

Så här inaktiverar du popover och återställa standardinställningarna Snabbsökning anger du följande kommando:

bin/magento module:disable Magento_LiveSearchStorefrontPopover
recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055