Category: 代码

以下是我在视频如何用 Shopify 来制作 B2B 询盘网站｜产品展示站教程中使用的代码。

<div style="margin-top: 20px;">
  <!-- Enhanced Heading Section -->
  <h2 style="font-size: 24px; font-weight: 700; margin: 0 0 8px 0; line-height: 1.2;">Get Your Exclusive Quote</h2>
  <p style="font-size: 14px; color: #666; margin: 4px 0 20px 0; line-height: 1.5;">Tell us what you need — our team responds within 24 hours.</p>
  
  <!-- Trust Signals Bar -->
  <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; font-size: 13px; color: #555;">
    <div style="display: flex; align-items: center; gap: 6px;"><span>✅</span><span>No commitment required</span></div>
    <div style="display: flex; align-items: center; gap: 6px;"><span>⚡</span><span>Fast response guaranteed</span></div>
    <div style="display: flex; align-items: center; gap: 6px;"><span>🔒</span><span>Your info stays private</span></div>
  </div>

  <!-- Success Message -->
  <div id="quote-success" style="display:none; background:#f0fff4; border:1px solid #68d391; border-radius:4px; padding:16px; margin-bottom:16px; color:#276749; font-size:14px;">
    ✅ Thank you for contacting us! We'll get back to you within 1 business day.
  </div>
  
  <!-- Quote Form -->
  <form id="quote-form" method="POST" action="/contact#contact_form">
    <input type="hidden" name="form_type" value="contact">
    <input type="hidden" name="utf8" value="✓">
    <input type="hidden" name="contact[product]" value="{{ product.title }}">
    <input type="hidden" name="contact[page_url]" value="{{ request.origin }}{{ request.path }}">

    <!-- ✅ Honeypot Field - 机器人陷阱，真实用户不可见 -->
    <div style="position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden;" aria-hidden="true">
      <label for="quote-website">Website (leave blank)</label>
      <input type="text" id="quote-website" name="contact[website]" tabindex="-1" autocomplete="off">
    </div>

    <div style="margin-bottom: 16px;">
      <label for="quote-name" style="display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px;">Name</label>
      <input type="text" id="quote-name" name="contact[name]" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box;">
    </div>
    
    <div style="margin-bottom: 16px;">
      <label for="quote-email" style="display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px;">Email</label>
      <input type="email" id="quote-email" name="contact[email]" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box;">
    </div>
    
    <div style="margin-bottom: 16px;">
      <label for="quote-message" style="display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px;">Tell us about your needs</label>
      <textarea id="quote-message" name="contact[body]" rows="4" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; font-family: inherit;"></textarea>
    </div>
    
    <button type="submit" style="width: 100%; padding: 12px; background-color: #000; color: #fff; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 10px;">Request My Quote →</button>
    <p style="font-size: 12px; color: #888; text-align: center; margin: 10px 0 0 0;">We'll get back to you within 1 business day.</p>
  </form>
</div>

<script>
document.getElementById('quote-form').addEventListener('submit', function(e) {
  e.preventDefault();
  var form = this;

  // ✅ Honeypot 检测：如果隐藏字段有值，判定为机器人，静默拒绝
  var honeypot = document.getElementById('quote-website').value;
  if (honeypot !== '') {
    form.style.display = 'none';
    document.getElementById('quote-success').style.display = 'block';
    return; // 假装成功，实际不提交
  }

  var data = new FormData(form);
  fetch('/contact', {
    method: 'POST',
    headers: { 'Accept': 'application/json' },
    body: data
  }).then(function() {
    form.style.display = 'none';
    document.getElementById('quote-success').style.display = 'block';
  });
});
</script>

大家可以利用这段代码，来隐藏Woocommerce商城中的加入购物车功能和实现隐藏价格标签的功能。

大家可以利用这段代码，来隐藏Woocommerce商城中的加入购物车功能和实现隐藏价格标签的功能，对建立产品网站特别实用。具体用法请看相关的视频讲解。这个办法不会随着WordPress的更新而消失，一劳永逸。

视频链接如下：

请复制下面的代码即可：

add_filter( 'woocommerce_is_purchasable', '__return_false');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

// 如果你不想要显示提示信息，请把这一段删除即可
add_action( 'woocommerce_single_product_summary', 'optional_message', 20 );
function optional_message() {
   echo '<p class="woocommerce-message">请点击下方按钮与我们联系。</p>';
}

// 隐藏商品价格，如果不想隐藏价格，请把这一段删除即可
add_filter( 'woocommerce_get_price_html', 'woocommerce_remove_price');
function woocommerce_remove_price($price){    
    return ;
}

在最新视频（如何设计B2B询盘网站）中，使用的另一段代码

// 如果你不想要显示提示信息，请把这一段删除即可
add_action( 'woocommerce_single_product_summary', 'optional_message', 20 );
function optional_message() {
   echo '<a href="mailto:abc@abc.com">点此联系我们</a>';
}

这篇文章包含了视频教程：如何使用Shopify设计产品展示站教程中提及的代码，请大家参考。如果有任何问题，欢迎大家留言。

{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
    {%- if section.settings.heading != blank -%}
      <h2 class="title title-wrapper--no-top-margin {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
    {%- else -%}
      <h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
    {%- endif -%}
    {%- form 'contact', id: 'ContactForm', class: 'isolate' -%}
      {%- if form.posted_successfully? -%}
        <div class="form-status form-status-list form__message" tabindex="-1" autofocus>{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}</div>
      {%- elsif form.errors -%}
        <div class="form__message">
          <h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}</h2>
        </div>
        <ul class="form-status-list caption-large" role="list">
          <li>
            <a href="#ContactForm-email" class="link">
              {{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
            </a>
          </li>
        </ul>
      {%- endif -%}
      <div class="contact__fields">
        <div class="field">
          <input class="field__input" autocomplete="name" type="text" id="ContactForm-name" name="contact[{{ 'templates.contact.form.name' | t }}]" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" placeholder="{{ 'templates.contact.form.name' | t }}">
          <label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
        </div>
        <div class="field field--with-error">
          <input
            autocomplete="email"
            type="email"
            id="ContactForm-email"
            class="field__input"
            name="contact[email]"
            spellcheck="false"
            autocapitalize="off"
            value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
            aria-required="true"
            {% if form.errors contains 'email' %}
              aria-invalid="true"
              aria-describedby="ContactForm-email-error"
            {% endif %}
            placeholder="{{ 'templates.contact.form.email' | t }}"
          >
          <label class="field__label" for="ContactForm-email">{{ 'templates.contact.form.email' | t }} <span aria-hidden="true">*</span></label>
          {%- if form.errors contains 'email' -%}
            <small class="contact__field-error" id="ContactForm-email-error">
              <span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
              <span class="form__message">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</span>
            </small>
          {%- endif -%}
        </div>
      </div>
      <div class="field">
        <textarea
          rows="10"
          id="ContactForm-body"
          class="text-area field__input"
          name="contact[{{ 'templates.contact.form.comment' | t }}]"
          placeholder="{{ 'templates.contact.form.comment' | t }}"
        >
          {{- form.body -}}
        </textarea>
        <label class="form__label field__label" for="ContactForm-body">{{ 'templates.contact.form.comment' | t }}</label>
        {% if product.url %}
<input type="hidden" id="ContactForm-product" name="contact[Product-name]" value="{{ product.title }}" />
{% endif %}
        {% if product.url %}
<input type="hidden" id="ContactForm-product" name="contact[Product-Link]" value="{{ product.url }}" />
{% endif %}
      </div>
      <div class="contact__button">
        <button type="submit" class="button">
          {{ 'templates.contact.form.send' | t }}
        </button>
      </div>
    {%- endform -%}
  </div>
</div>

以下是Convertbox，嵌套在Shopify产品页面中的代码

<a href='#cbbf0c746'>
<button class="button-quote">
Ask for Quote
</button>
</a>
<style>
.button-quote {
  background-color: black;
  border:none;
  color:white;
  font-size: 16px;
  padding: 15px 32px;
  margin: 10px 0px;
  cursor: pointer;
}
</style>