关于在BigCommerce全产品页面添加通用老式返回按钮的技术咨询

Absolutely! Adding a prominent, old-school "Back" button to your product pages is a fantastic way to fix the navigation pain point you described—breadcrumbs work for context, but a direct, obvious back button is way more intuitive for users bouncing between parts listings and individual product pages. Here are three actionable methods to implement this on BigCommerce (using the Stencil framework, standard for modern stores):

1. The Quick-and-Dirty JavaScript Back Button (No Fuss) #

This is the simplest approach, relying on the browser's history to send users back to their last visited page. It works for most cases and takes minutes to set up.

Add this button code to your product page template (templates/pages/product.html)—place it somewhere highly visible, like above the product title or next to the breadcrumbs:

<button onclick="window.history.back()" class="custom-back-button">← Back to Previous Page</button>

Then add CSS to make it stand out (drop this in your theme's SCSS file, e.g., assets/scss/theme.scss):

.custom-back-button {
  background-color: #2c3e50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 15px;
}

.custom-back-button:hover {
  background-color: #34495e;
}

2. Smart Targeted Back Button (Avoid Random Jumps) #

If you want to ensure users land back on your Parts menu or search results (instead of random external pages), use this script to check where the user came from:

First, add the button to product.html (keep the class for targeting):

<button class="smart-back-button">← Back to Parts / Search Results</button>

Then add this JavaScript to your theme's theme.js file (or a custom script block):

document.addEventListener('DOMContentLoaded', function() {
  const backBtn = document.querySelector('.smart-back-button');
  const partsMenuUrl = '/parts'; // Replace with your actual Parts menu URL
  const searchPath = '/search'; // Path for your search results page

  backBtn.addEventListener('click', function() {
    const referrer = document.referrer;
    // Check if the user came from your own site
    if (referrer.includes(window.location.hostname)) {
      // Send them back to Parts menu or search if that's their origin
      if (referrer.includes(partsMenuUrl) || referrer.includes(searchPath)) {
        window.location.href = referrer;
      } else {
        // Fallback to browser history for other internal pages
        window.history.back();
      }
    } else {
      // Default to Parts menu if they came from an external link
      window.location.href = partsMenuUrl;
    }
  });
});

Update the CSS class to .smart-back-button to match the styling from Method 1.

3. Persistent Category/Search Return (Maximum Precision) #

If you want to guarantee users return to the exact category or search results list they were viewing, use sessionStorage to store their last relevant page:

1. On your Parts category page (templates/pages/category.html), modify product links to save the category URL:

<a href="{{product.url}}" onclick="sessionStorage.setItem('lastRelevantPage', '{{category.url}}')">
  {{product.name}}
</a>

2. On your search results page (templates/pages/search.html), do the same for product links:

<a href="{{product.url}}" onclick="sessionStorage.setItem('lastRelevantPage', '{{settings.base_url}}{{request.uri}}')">
  {{product.name}}
</a>

3. On the product page, add the button and script to pull from sessionStorage:

<button class="persistent-back-button">← Back to Your List</button>

document.addEventListener('DOMContentLoaded', function() {
  const backBtn = document.querySelector('.persistent-back-button');
  
  backBtn.addEventListener('click', function() {
    const lastPage = sessionStorage.getItem('lastRelevantPage');
    if (lastPage) {
      window.location.href = lastPage;
      sessionStorage.removeItem('lastRelevantPage'); // Clear to avoid stale links
    } else {
      window.history.back();
    }
  });
});

Deployment Tips #

• If you’re not comfortable editing theme files directly, use BigCommerce’s Custom HTML widget (under Storefront > Web Pages or Theme Editor > Custom Widgets) to add the button and script to product pages.
• Test all scenarios: click through from the Parts menu, search results, external links, and deep links to ensure the button behaves as expected.

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