温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - Shopify adding .text-link class to button when .btn is only class defined
shopify shopify-template

其他 - 当.btn仅是类定义时,Shopify将.text-link类添加到按钮

发布于 2020-04-25 20:24:29

自定义Shopify页面时,我添加了一个动态按钮,其类别为

{% if section.settings.button_label != blank and section.settings.button_link != blank %}
         <a href="{{ section.settings.button_link }}" class="btn">
           {{ section.settings.button_label | escape }}
         </a>
{% endif %}

但是,在页面加载时,它现在已将.text-link附加到我的按钮类中,从而覆盖了按钮的样式。

    a.btn.text-link {
      -webkit-appearance: none;
    background-color: #2c2d36;
    background-image: none;
    border: 1px solid transparent;
    border-bottom: 1px solid #2c2d36;
    border-radius: 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: Futura,sans-serif;
    font-size: .8125em;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.42;
    margin: 0;
    padding: 8px 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .4s ease-out;
    user-select: none;
    vertical-align: middle;
    white-space: normal;
    width: auto;
    }

任何人都知道我应该在哪里阻止它附加到我的单个班级上?

链接:https//shop.creekretreat.com/pages/services (第一个图像/文本部分的按钮组)

在此先感谢,非常感谢。

ķ

查看更多

提问者
Kyle H.
被浏览
16
drip 2020-02-09 01:26

您的theme.js中有一个JS函数正在执行此操作:

theme.styleTextLinks = function() {
  $('.rte').find('a:not(:has(img))').addClass('text-link');
};

此函数在theme.init方法中调用:

theme.init = function() {
  theme.initCache();
  theme.setBreakpoints();
  theme.fitNav();
  theme.cartInit();
  theme.afterCartLoad();
  theme.checkoutIndicator();
  theme.returnLink();
  theme.styleTextLinks(); <----- here
  ......

您将需要更新JS以适合您的需求,或者一起删除此逻辑。