如何在Lightspeed商城中针对特定商品类别隐藏Add to Cart按钮？

Question #

I want to remove the "Add to Cart" button for specific product categories. Is it possible to run a script on the product page that checks the category breadcrumbs to control the button's visibility? Here's the relevant code from my Lightspeed store:

<form action="{{ ('cart/add/' ~ product.vid) | url }}" id="product_configure_form" method="post"> 
  {% if product.options or product.variants or product.custom %} 
  <div class="product-option row"> 
    <div class="col-md-12"> 
      {{ product | html_product_configure | raw }} 
    </div> 
  </div> 
  {% else %} 
  <input type="hidden" name="bundle_id" id="product_configure_bundle_id" value=""> 
  {% endif %} 
  <div class="product-price row"> 
    <div class="price-wrap col-xs-5 col-md-5"> 
      {% if product.price.price_old %} 
      <span class="old-price">{{ product.price.price_old | money }}{% if shop.settings.legal.mode == 'strict' %} {{ 'SRP' | t }}{% endif %}</span> 
      {% endif %} 
      <span class="price">{{ product.price.price | money }}{% if shop.settings.legal.mode == 'strict' %} <small>*</small>{% endif %}</span> 
      {% if shop.b2b %}<small class="price-tax">{{ 'Excl. VAT' | t }}</small>{% else %}<small class="price-tax">{{ 'Incl. VAT' | t }}</small>{% endif %} 
    </div> 
    <div class="cart col-xs-7 col-md-7"> 
      <div class="cart"> 
        {% if product.stock.available %} 
        <input type="text" name="quantity" value="{{ product.quantity }}" /> 
        <div class="change"> 
          <a href="javascript:;" onclick="updateQuantity('up');" class="up">+</a> 
          <a href="javascript:;" onclick="updateQuantity('down');" class="down">-</a> 
        </div> 
        <a href="javascript:;" onclick="$('#product_configure_form').submit();" class="btn glyphicon glyphicon-shopping-cart" title="{{ 'Add to cart' | t }}" {% if shop.language == 'de' %}style="padding: 0px 10px;"{% endif %}> 
          <span>{{ 'Add to cart' | t }}</span> 
        </a> 
        {% endif %} 
      </div> 
    </div> 
  </div>
</form>

Answer #

Absolutely! You can pull this off with either a front-end script (quick fix) or a template-level tweak (more robust, better for SEO/security). Let’s break both down:

1. Front-End Script: Check Breadcrumbs to Hide the Button

This approach uses JavaScript to scan the page’s breadcrumb trail and hide the button if the product falls into your restricted categories. It’s easy to implement without touching core template logic:

// Wait for the page to fully load before running
document.addEventListener('DOMContentLoaded', function() {
  // Replace these with your target category slugs/names (case-insensitive)
  const restrictedCategories = ['sample-products', 'clearance-items'];
  
  // Grab the breadcrumb element (adjust the selector if your store uses a different class/ID)
  const breadcrumb = document.querySelector('.breadcrumb');
  if (!breadcrumb) return; // Exit if breadcrumb isn't found
  
  // Check if any restricted category appears in the breadcrumb text
  const breadcrumbContent = breadcrumb.textContent.toLowerCase();
  const isRestricted = restrictedCategories.some(category => breadcrumbContent.includes(category));
  
  // Hide the Add to Cart button (and related elements) if restricted
  if (isRestricted) {
    const addToCartBtn = document.querySelector('.btn.glyphicon-shopping-cart');
    const quantityInput = document.querySelector('input[name="quantity"]');
    const quantityControls = document.querySelector('.change');
    
    if (addToCartBtn) addToCartBtn.style.display = 'none';
    if (quantityInput) quantityInput.style.display = 'none';
    if (quantityControls) quantityControls.style.display = 'none';
  }
});

• Pro Tip: Adjust the breadcrumb selector to match your store’s actual breadcrumb container (e.g., #breadcrumb or .breadcrumb-trail if your theme uses a different class).
• Caveat: This only hides the button visually—tech-savvy users could still unhide it via browser dev tools. For a more secure solution, use the template method below.

2. Template-Level Fix: Use Lightspeed’s Twig Logic (Recommended)

This approach leverages Lightspeed’s built-in Twig template variables to not render the button at all for restricted categories, which is more secure and better for SEO. Modify your existing product form code like this:

<form action="{{ ('cart/add/' ~ product.vid) | url }}" id="product_configure_form" method="post"> 
  {% if product.options or product.variants or product.custom %} 
  <div class="product-option row"> 
    <div class="col-md-12"> 
      {{ product | html_product_configure | raw }} 
    </div> 
  </div> 
  {% else %} 
  <input type="hidden" name="bundle_id" id="product_configure_bundle_id" value=""> 
  {% endif %} 
  <div class="product-price row"> 
    <div class="price-wrap col-xs-5 col-md-5"> 
      {% if product.price.price_old %} 
      <span class="old-price">{{ product.price.price_old | money }}{% if shop.settings.legal.mode == 'strict' %} {{ 'SRP' | t }}{% endif %}</span> 
      {% endif %} 
      <span class="price">{{ product.price.price | money }}{% if shop.settings.legal.mode == 'strict' %} <small>*</small>{% endif %}</span> 
      {% if shop.b2b %}<small class="price-tax">{{ 'Excl. VAT' | t }}</small>{% else %}<small class="price-tax">{{ 'Incl. VAT' | t }}</small>{% endif %} 
    </div> 
    <div class="cart col-xs-7 col-md-7"> 
      <div class="cart"> 
        {% if product.stock.available %}
          {# Define your restricted category handles here #}
          {% set restrictedCategoryHandles = ['sample-products', 'clearance-items'] %}
          {% set isRestricted = false %}
          
          {# Check if the product belongs to any restricted category #}
          {% for category in product.categories %}
            {% if category.handle in restrictedCategoryHandles %}
              {% set isRestricted = true %}
            {% endif %}
          {% endfor %}
          
          {# Only render the Add to Cart elements if NOT restricted #}
          {% if not isRestricted %}
            <input type="text" name="quantity" value="{{ product.quantity }}" /> 
            <div class="change"> 
              <a href="javascript:;" onclick="updateQuantity('up');" class="up">+</a> 
              <a href="javascript:;" onclick="updateQuantity('down');" class="down">-</a> 
            </div> 
            <a href="javascript:;" onclick="$('#product_configure_form').submit();" class="btn glyphicon glyphicon-shopping-cart" title="{{ 'Add to cart' | t }}" {% if shop.language == 'de' %}style="padding: 0px 10px;"{% endif %}> 
              <span>{{ 'Add to cart' | t }}</span> 
            </a>
          {% endif %}
        {% endif %} 
      </div> 
    </div> 
  </div>
</form>

• How It Works: Lightspeed’s product.categories variable gives you access to all categories the product is assigned to. We check if any of those categories match your restricted handles, and only render the Add to Cart elements if the product is safe.
• Best Practice: Use category handle (the URL-friendly slug) instead of the display name—this avoids issues with case sensitivity or name changes.

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