如何用XPath将Odoo 8网站的Shop菜单替换为超级菜单

Got it, let's walk through how to do this cleanly using Odoo's view inheritance and XPath—no need to rewrite the whole header, just target that specific menu item.

Step 1: Set Up a Custom Module #

First, you'll want to create a small custom module (never modify core Odoo files directly!). If you don't have one already, set up a basic module with a __manifest__.py and a views directory to hold your customizations.

Step 2: Write the View Inheritance XML #

Create an XML file in your module's views folder (e.g., website_menu_custom.xml) with the following code:

<odoo>
  <data>
    <!-- Inherit the main website layout to target the header menu -->
    <template id="replace_shop_with_supermenu" inherit_id="website.layout" name="Replace Shop Menu with Super Menu">
      <!-- Target the exact Shop menu span using its unique data attributes -->
      <xpath expr="//span[@data-oe-id='5' and @data-oe-model='website.menu']" position="replace">
        <!-- Your super menu (dropdown) structure here, using Odoo's default Bootstrap classes -->
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            *My Super Shop* <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <!-- Add your submenu items here -->
            <li><a href="/shop/category/electronics">Electronics</a></li>
            <li><a href="/shop/category/apparel">Apparel</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="/shop/new-arrivals">New Arrivals</a></li>
          </ul>
        </li>
      </xpath>
    </template>
  </data>
</odoo>

Key Details to Note: #

• XPath Targeting: The xpath expression uses data-oe-id='5' and data-oe-model='website.menu' to precisely target the "Shop" span you mentioned. Double-check this ID in your instance (right-click the Shop menu → Inspect Element to confirm, since IDs can vary between Odoo instances).
• Super Menu Structure: We're using Odoo's built-in Bootstrap dropdown classes (dropdown, dropdown-toggle, dropdown-menu) so the menu matches the default site styling automatically. No extra CSS needed unless you want custom styles.
• Submenu Links: Replace the example links with actual URLs from your Odoo shop (like category pages, new arrivals, etc.).

Step 3: Update Your Module #

1. Add the XML file to your module's __manifest__.py under the data list:

   'data': [
       'views/website_menu_custom.xml',
   ],
   

2. Install or update your custom module in Odoo.
3. Refresh your website page—you should see the "Shop" menu replaced with your new super dropdown menu!

Troubleshooting Tips: #

• If the change doesn't show up, clear your browser cache and Odoo's model cache (Settings → Technical → Parameters → System Parameters → Clear Cache).
• Ensure the XPath expression is correct—if the data-oe-id isn't 5 in your instance, update it to the correct value from your element inspection.

内容的提问来源于stack exchange，提问作者user3718532